Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/fredy-rizo/ecommerce-delivery-frontend/llms.txt

Use this file to discover all available pages before exploring further.

Ecommerce Delivery supports two password-reset paths. The standard path starts at /change-password, where the user enters their email to receive a 6-digit security code; they then visit /new-password-confirm to enter the code alongside a new password. A token-based path is also available at /update-password-width-token, which reads the user’s email directly from the JWT stored in localStorage and accepts a new password without requiring a manual code entry.

​
Forgot password flow

1

Navigate to /change-password

From the sign-in screen the user clicks ¿Olvidaste tu contraseña?, which links to /change-password. The route is defined as:
{
  path: "/change-password",
  name: "change-password",
  component: () => import("pages/login/recoveryPassword"),
}
The page renders the changePassword.vue component, which contains a single email field.
2

Enter registered email address

The user types their registered email and submits the form. The component calls POST /api/user/recover-password-code:
// components/login/changePassword.vue
const changePassword = async () => {
  const data = { email: email.value };

  fetch(process.env.API_SERVER + "/api/user/recover-password-code", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  })
    .then((response) => response.json())
    .then((response) => {
      if (response.status === false) {
        $q.notify({
          color: response.alreadyVerified ? "orange" : "negative",
          message: response.msj,
        });
        return;
      }
      localStorage.setItem("token", response.token);
      localStorage.setItem("user", JSON.stringify(response.user));
      return router.push({ name: "new-password-confirm" });
    });
};
The email field uses the same regex validation as all other auth forms:
const isValidEmail = (val) => {
  const emailValid =
    /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\\.){1,8}[a-zA-Z]{2,63}$/;
  return emailValid.test(val) || "El correo no parece ser válido";
};
3

System sends a reset code

On a successful request, the API emails a 6-digit security code to the registered address and returns a temporary token and user object that are saved to localStorage. The app then redirects automatically to /new-password-confirm.
4

Set a new password at /new-password-confirm or /update-password-width-token

The user can complete the reset in one of two ways:
  • /new-password-confirm — Enter email, new password, and the 6-digit code received by email (no token required in the URL).
  • /update-password-width-token — Open the link from the email. The page decodes the JWT already in localStorage to pre-fill the email field; the user only needs to enter and confirm the new password.

​
Confirm new password (code-based)

  • Route: /new-password-confirm · route name new-password-confirm
  • Component: pages/login/confirmeNewPassword → components/login/formconfirmeNewPassword.vue
The form collects three fields: email, new password (min. 8 characters), and the 6-digit security code (codePassConfirm). On success the app saves the refreshed token and user to localStorage and navigates to the main store. 
// components/login/formconfirmeNewPassword.vue
const updatePasswordWithoutToken = () => {
  const data = {
    email: email.value,
    codePassConfirm: code.value,   // 6-digit code from email
    newPassword: password.value,
  };

  fetch(process.env.API_SERVER + "/api/user/update-password-widthout-token", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  })
    .then((response) => response.json())
    .then((response) => {
      localStorage.setItem("token", response.token);
      localStorage.setItem("user", JSON.stringify(response.user));
      return router.push({ name: "inicio" });
    });
};

​
Update password with token

  • Route: /update-password-width-token · route name update-password-width-token
  • Component: pages/login/updatePass/updatePasswordWithToken → components/login/updatePass/formupdatePasswordWithToken.vue
On onMounted the component decodes the JWT from localStorage and pre-fills the email field, which is rendered as disabled (read-only). The user enters a new password and a confirmation. The form validates that both fields match before submitting. 
// components/login/updatePass/formupdatePasswordWithToken.vue

// Decode JWT to pre-fill email
const decodeToken = (token) => {
  const base64Url = token.split(".")[1];
  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
  const jsonPayload = decodeURIComponent(
    atob(base64).split("").map((c) => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)).join("")
  );
  return JSON.parse(jsonPayload);
};

const updatePasswordWithToken = async () => {
  const token = localStorage.getItem("token");

  const res = await fetch(
    `${process.env.API_SERVER}/api/user/update-password-width-token`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify({
        email: email.value,
        newPassword: password.value,
        newPasswordConfirmed: confirmPassword.value,
      }),
    }
  );

  const response = await res.json();
  if (!res.ok || response.status === false)
    throw new Error(response.msj || "Error al actualizar contraseña");

  router.push({ name: "inicio" });
};
Password rules enforced on all reset forms:
  • Minimum 8 characters (validated client-side via Quasar’s :rules prop).
  • New password and confirmation must match (token-based form only).
For the token-based update route (/update-password-width-token), the JWT must already be present in localStorage. If the token is missing or invalid, the component shows a notification error and redirects to /login. The email field is automatically decoded from the token’s payload — the user never types it manually on this screen.

Build docs developers (and LLMs) love

Get started for freeTalk to us