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>Acesso Financeiro – Vital Assist</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;
      background:var(--bg);
      color:var(--text);
    }
    main{
      min-width: 70%;
      max-width:600px;
      margin:0 auto;
      padding:20px;
    }
    .card{
      background:var(--card);
      border-radius:16px;
      border:1px solid var(--ink-weak);
      padding:24px;
      box-shadow:0 6px 22px rgba(63,71,60,.08);
    }
    h1{
      text-align:center;
      margin-bottom:20px;
      font-size:20px;
    }
    label{
      font-size:14px;
      font-weight:600;
      margin-bottom:6px;
      display:block;
    }
    input{
      width:100%;
      padding:12px;
      border-radius:12px;
      border:1px solid var(--ink-weak);
      margin-bottom:14px;
      font-size:15px;
    }
    input:focus{
      border-color:var(--accent-2);
      box-shadow:0 0 0 3px var(--ring);
      outline:none;
    }
    .btn{
      width:100%;
      padding:14px;
      border-radius:12px;
      border:0;
      font-size:16px;
      font-weight:700;
      color:#fff;
      cursor:pointer;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      margin-top:10px;
    }
    .link-btn{
      text-align:center;
      margin-top:14px;
      font-size:14px;
      font-weight:600;
      color:var(--accent-2);
      cursor:pointer;
      width: 100%;
    }
    .status{
      margin-top:16px;
      text-align:center;
      font-size:14px;
      font-weight:600;
    }
    .status.error{color:var(--danger);}
    .status.ok{color:var(--ok);}
  </style>
</head>

<body>
<main>
  <div class="card">
    <h1>Entrar</h1>

    <label>CPF</label>
    <input type="tel" maxlength="14" id="cpf" placeholder="000.000.000-00" />

    <label>PIN de confirmação</label>
    <input type="tel" id="pin" placeholder="Digite o PIN recebido" />

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

    <button class="link-btn" id="resendPin">Recuperar / reenviar PIN</button>

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

<script>
const BASE = "https://api.vitalassisthomecare.com.br/lifeassist/v1";
const LOGIN_URL = BASE + "/caregivers/login";
const LOGIN_RECOVER = BASE + "/recovery";

const cpfEl = document.getElementById("cpf");
const pinEl = document.getElementById("pin");
const loginBtn = document.getElementById("loginBtn");
const resendBtn = document.getElementById("resendPin");
const statusMsg = document.getElementById("statusMsg");

function showError(msg){
  statusMsg.textContent = msg;
  statusMsg.className = "status error";
}

function showSuccess(msg){
  statusMsg.textContent = msg;
  statusMsg.className = "status ok";
}

// == CPF MASK==
cpfEl.addEventListener("input", () => {
  let value = cpfEl.value.replace(/\D/g, "").slice(0, 11);

  value = value
    .replace(/^(\d{3})(\d)/, "$1.$2")
    .replace(/^(\d{3})\.(\d{3})(\d)/, "$1.$2.$3")
    .replace(/\.(\d{3})(\d)/, ".$1-$2");

  cpfEl.value = value;
});

// === LOGIN ===
loginBtn.addEventListener("click", async () => {
  loginBtn.disabled = true;

  const cpf = cpfEl.value.replace(/\D/g, "");
  const pin = pinEl.value.trim();

  if (cpf.length !== 11) {
    loginBtn.disabled = false;
    return showError("CPF inválido.");
  }
  if (!pin) {
    loginBtn.disabled = false;
    return showError("Informe o PIN.");
  }

  showSuccess("Validando acesso...");

  try {
    const res = await fetch(LOGIN_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ cpf, pin })
    });
    loginBtn.disabled = false;
    if (res.status === 404) return showError("CPF não encontrado.");
    if (res.status === 401) return showError("PIN inválido.");
    if (!res.ok) throw new Error();

    const { token } = await res.json();
    if (!token) return showError("Token ausente.");

    window.location.href = `/caregivers/dashboard?token=${encodeURIComponent(token)}`;

  } catch {
    showError("Erro de conexão. Tente novamente.");
  } finally {
    loginBtn.disabled = false;
  }
});

// === REENVIAR PIN ===
resendBtn.addEventListener("click", async () => {
  const cpf = cpfEl.value.replace(/\D/g, "");
  if (!cpf) return showError("Informe o CPF para reenviar o PIN.");
  if (cpf.length !== 11) return showError("CPF inválido.");

  showSuccess("Enviando novo PIN...");

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

    if (res.status === 404)
      return showError("CPF não encontrado.");

    if (!res.ok) {
      throw new Error();
    }
    showSuccess("PIN enviado para seu WhatsApp.");
  } catch {
    showError("Erro ao reenviar PIN.");
  }
});
</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.