Embed

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes, viewport-fit=cover">
  <title>Login</title>

  <style>
    :root {
      --bg:#F1F8F4; --card:#ffffff; --muted:#6b7368; --text:#3F473C;
      --accent:#567861; --accent-2:#619B75; --danger:#c14254; --ok:#2e8053;
      --ink-weak:#3F473C22; --ring:#619B7533;
    }
    *{box-sizing:border-box; margin:0; padding:0}
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--text);
      background:var(--bg);
    }
    main{min-width:70%; max-width:600px; margin:0 auto; padding:20px;}
    h1{text-align:center; margin-bottom:20px}

    .card{
      background:var(--card);
      border:1px solid var(--ink-weak);
      border-radius:16px;
      padding:20px;
      margin-bottom:20px;
      box-shadow:0 6px 22px rgba(63,71,60,.08);
    }

    label{font-size:15px; font-weight:500; margin-bottom:6px; display:block;}
    input[type="tel"], input[type="text"]{
      width:100%; padding:12px; font-size:15px;
      border:1px solid var(--ink-weak); border-radius:12px;
      margin-bottom:12px;
      background:#fff; color:var(--text);
    }
    input:focus{
      border-color:var(--accent-2);
      box-shadow:0 0 0 3px var(--ring);
    }

    .btn{
      width:250px; display:block; margin:20px auto 0 auto;
      padding:14px; font-size:16px; font-weight:700;
      border:0; border-radius:12px; cursor:pointer;
      color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2));
    }

    .status{
      margin-top:10px;
      font-size:15px;
      font-weight:600;
      text-align:center;
    }
    .status.error{color:var(--danger);}
    .status.ok{color:var(--ok);}

    .link-btn{
      display:block;
      text-align:center;
      margin-top:10px;
      color:var(--accent-2);
      cursor:pointer;
      font-size:14px;
      font-weight:600;
    }
  </style>

</head>
<body>

<main>
  <h1>Acessar Conta</h1>

  <div class="card" id="stepPhone">
    <label>Telefone</label>
    <input type="tel" id="phoneInput" placeholder="27999998888" />

    <button class="btn" id="sendPinBtn">Enviar PIN</button>
    <div class="status" id="phoneStatus"></div>
  </div>

  <div class="card hidden" id="stepPin">
    <label>Código PIN</label>
    <input type="text" id="pinInput" maxlength="6" placeholder="Digite o PIN enviado" />

    <button class="btn" id="confirmPinBtn">Entrar</button>

    <span class="link-btn" id="resendPinLink">Reenviar código</span>

    <div class="status" id="pinStatus"></div>
  </div>
</main>


<script>
const BASE = "https://api.vitalassisthomecare.com.br/lifeassist/v1";
const SEND_PIN_URL = BASE + "/auth/send-pin";
const CONFIRM_PIN_URL = BASE + "/auth/validate-pin";

// Elementos
const stepPhone = document.getElementById("stepPhone");
const stepPin = document.getElementById("stepPin");

const phoneInput = document.getElementById("phoneInput");
const pinInput = document.getElementById("pinInput");

const phoneStatus = document.getElementById("phoneStatus");
const pinStatus = document.getElementById("pinStatus");

const sendPinBtn = document.getElementById("sendPinBtn");
const confirmPinBtn = document.getElementById("confirmPinBtn");
const resendPinLink = document.getElementById("resendPinLink");

function setStatus(el, msg, ok=false){
  el.textContent = msg;
  el.className = ok ? "status ok" : "status error";
}

// === Enviar PIN ===
sendPinBtn.addEventListener("click", async () => {
  const phone = phoneInput.value.replace(/\D/g, "");
  if (!phone) return setStatus(phoneStatus, "Informe um telefone válido.");

  setStatus(phoneStatus, "Enviando PIN...", true);
  sendPinBtn.disabled = true;

  try {
    const res = await fetch(SEND_PIN_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ phone })
    });

    if (!res.ok) {
      return setStatus(phoneStatus, "Número não reconhecido. Verifique e tente novamente.");
    }

    setStatus(phoneStatus, "PIN enviado!", true);
    stepPin.classList.remove("hidden");

  } catch (err) {
    setStatus(phoneStatus, "Erro de conexão.");
  }

  sendPinBtn.disabled = false;
});

// === Reenviar PIN ===
resendPinLink.addEventListener("click", () => {
  sendPinBtn.click();
});

// === Confirmar PIN ===
confirmPinBtn.addEventListener("click", async () => {
  const phone = phoneInput.value.replace(/\D/g, "");
  const pin = pinInput.value.trim();

  if (!pin) return setStatus(pinStatus, "Digite o PIN.");

  setStatus(pinStatus, "Validando...", true);
  confirmPinBtn.disabled = true;

  try {
    const res = await fetch(CONFIRM_PIN_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ phone, pin })
    });

    if (!res.ok) {
      return setStatus(pinStatus, "PIN inválido. Tente novamente.");
    }

    setStatus(pinStatus, "Acesso liberado!", true);

    setTimeout(() => {
      window.location.href = "https://vitalassisthomecare.com.br/dashboard";
    }, 800);

  } catch {
    setStatus(pinStatus, "Erro de conexão.");
  }

  confirmPinBtn.disabled = false;
});
</script>

</body>
</html>

Vital Assist - Home Care

We offer a new standard in care: we find, train, and empower the best caregivers, supported by a system that records all tasks in real time and generates transparent reports.

All to provide comfort, care, and safety for those receiving care—and peace of mind for those accompanying care.