@sowell/quasar-app-extension-auth 0.3.20 → 0.3.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "0.3.20",
+  "version": "0.3.22",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",

package/src/boot/router-guards.ts

@@ -21,7 +21,8 @@ export default boot(({ app, router }: BootInterface) => {
     if (
       (!isValid || !token) &&
       to.path !== LOCAL_LOGIN_ROUTE &&
-      to.name !== "update_password"
+      to.name !== "update_password" &&
+      to.name !== "otp_validation"
     ) {
       next(LOCAL_LOGIN_ROUTE);
     } else {

package/src/components/dialogs/Message.vue

@@ -55,17 +55,19 @@
         @click="retypeEmail"
         class="full-width"
       />
-      <q-btn
-        class="q-mt-md full-width"
-        unelevated
-        style="background: #fff"
-        flat
-        @click="handlePasswordUpdate"
-        no-caps
-        :label="$t('auth.close')"
-        color="dark"
-        v-close-popup
-      />
+      <slot>
+        <q-btn
+          class="q-mt-md full-width"
+          unelevated
+          style="background: #fff"
+          flat
+          @click="handlePasswordUpdate"
+          no-caps
+          :label="$t('auth.close')"
+          color="dark"
+          v-close-popup
+        />
+      </slot>
     </q-card-actions>
   </q-card>
 </template>
@@ -109,10 +111,10 @@ export default defineComponent({
     );
 
     const emailNotSend = computed(
-      () => !props.sendEmailSuccess && !props.passwordUpdated,
+      () => !props.sendEmailSuccess && !props.passwordUpdated
     );
     const emailSended = computed(
-      () => props.sendEmailSuccess && !props.passwordUpdated,
+      () => props.sendEmailSuccess && !props.passwordUpdated
     );
 
     const retypeEmail = () => {

package/src/components/dialogs/WebSendEmail.vue

@@ -41,9 +41,10 @@
                 :label="$t('common.reset')"
                 class="btn-min"
                 @click="sendEmail"
+                :disable="!email.length"
                 v-close-popup
               />
-              
+
               <q-btn
                 color="primary"
                 style="max-width: 330px"

package/src/components/dialogs/sw-info-dialog.vue

@@ -9,6 +9,7 @@
           round
           no-caps
           color="dark"
+          v-if="!isOtp"
           v-close-popup
         />
       </div>
@@ -26,16 +27,20 @@
       </div>
     </q-card-section>
     <q-card-actions class="row full-width justify-center q-mb-lg">
-      <q-btn
-        class="bg-white submitBtn"
-        unelevated
-        outline
-        no-caps
-        :label="$t('auth.close')"
-        @click="passwordUpdated ? $emit('goToLoginPage') : ''"
-        color="primary"
-        v-close-popup
-      />
+      <div>
+        <slot>
+          <q-btn
+            class="bg-white submitBtn"
+            unelevated
+            outline
+            no-caps
+            :label="$t('auth.close')"
+            @click="passwordUpdated ? $emit('goToLoginPage') : ''"
+            color="primary"
+            v-close-popup
+          />
+        </slot>
+      </div>
     </q-card-actions>
   </q-card>
 </template>
@@ -53,6 +58,7 @@ export default defineComponent({
     content: { type: String, required: true },
     image: { type: String, required: true },
     passwordUpdated: { type: Boolean },
+    isOtp: { type: Boolean, default: false, required: false },
   },
   emit: ["goToLoginPage"],
   setup(props: any) {

package/src/components/pages/AuthReporter.vue

@@ -125,7 +125,20 @@
             :sendEmailSuccess="sendEmailSuccess"
             :loading="loading"
             @retypeEmail="retypeEmail"
-          />
+          >
+            <q-btn
+              v-if="(sendEmailSuccess && isOtp)"
+              class="q-mt-md full-width"
+              unelevated
+              style="background: #fff"
+              flat
+              @click="goToOtpValidation"
+              no-caps
+              :label="$t('auth.next')"
+              color="dark"
+              v-close-popup
+            />
+          </sowell-message>
         </q-dialog>
       </div>
     </q-page>
@@ -142,7 +155,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, onMounted, watch } from "vue";
+import { defineComponent, reactive, onMounted, computed } from "vue";
 import * as packageInfo from "app/package.json";
 import SendEmail from "../dialogs/SendEmail.vue";
 import SowellMessage from "../dialogs/Message.vue";
@@ -166,15 +179,20 @@ export default defineComponent({
       sendEmailSuccess,
       authState,
       APP_SERVER_BASE_URL,
+      IS_OTP,
       onSubmit,
       retypeEmail,
       isSubmitBtnDisabled,
+      goToOtpValidation,
       icons,
     } = useAuth();
 
     const appVersion = reactive({
       versionNumber: "",
     });
+
+    const isOtp = computed(() => IS_OTP.toLowerCase() === "y")
+    
     const resetPassword = async (email: string) => {
       const data = {
         auth: {
@@ -185,6 +203,7 @@ export default defineComponent({
       try {
         forgottenPassword.value = false;
         await authState.resetPassword(data).then(() => {
+          localStorage.setItem("emailResetPassword", email);
           sendEmailSuccess.value = true;
           isReset.value = true;
         });
@@ -212,10 +231,12 @@ export default defineComponent({
       sendEmailSuccess,
       onSubmit,
       resetPassword,
+      goToOtpValidation,
       isSubmitBtnDisabled,
       retypeEmail,
       icons,
       appVersion,
+      isOtp,
     };
   },
 });

package/src/components/pages/OtpValidation.vue

@@ -0,0 +1,177 @@
+<template>
+  <q-layout>
+    <q-page class="q-pa-md row justify-center">
+      <div>
+        <div class="q-mt-xl">
+          <img
+            src="../../assets/Sowell-logo.svg"
+            class="q-mb-sm q-mr-md"
+            style="width: 190px"
+          />
+        </div>
+        <div
+          class="column justify-center full-height"
+          style="max-width: 550px; margin-top: -90px"
+        >
+          <div></div>
+          <div
+            class="text-subtitle1 q-mt-lg"
+            data-cy="validationOtp"
+            style="font-size: 34px; font-weight: 600; line-height: 34px"
+          >
+            {{ $t("auth.titleOtpValidation") }}
+          </div>
+          <div
+            class="text-subtitle1 q-mt-lg q-mb-lg"
+            style="font-size: 16px; font-weight: 400; line-height: 24px"
+          >
+            {{ $t("auth.subtitleOtpValidation") }}
+          </div>
+          <q-form class="column form" @submit="onSubmit">
+            <div>
+              <div class="q-mb-sm" style="font-size: 14px; font-weight: 600">
+                {{ $t("auth.validationCode") }}
+              </div>
+              <q-input
+                v-model="otp"
+                dense
+                :borderless="isReporterUi"
+                :outlined="!isReporterUi"
+                data-cy="validate-otp"
+                bg-color="white"
+                class="q-mb-md"
+                ><template v-slot:prepend> </template>
+              </q-input>
+            </div>
+            <q-space />
+            <div class="row justify-between">
+              <q-btn
+                :label="$t('auth.next')"
+                color="primary"
+                :loading="loading"
+                type="submit"
+                no-caps
+                class="submitBtn"
+                data-cy="send-new-otp"
+                :disable="canSubmit"
+                @click="onSubmit"
+              />
+              <q-btn
+                :label="$t('auth.login')"
+                text-color="primary"
+                type="submit"
+                no-caps
+                data-cy="login-page"
+                @click="() => router.push(LOCAL_LOGIN_ROUTE)"
+              />
+            </div>
+          </q-form>
+        </div>
+      </div>
+    </q-page>
+  </q-layout>
+</template>
+
+<script lang="ts">
+//@ts-ignore
+import { defineComponent, ref, computed } from "vue";
+import { $router, $prompts, $api } from "../../injects";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import jwt from "jwt-decode";
+
+import {
+  ionCloseOutline,
+  ionAlertCircleOutline,
+} from "@quasar/extras/ionicons-v5";
+
+interface DecodedToken {
+  uid: string;
+  cid: string;
+  exp: number;
+}
+
+export default defineComponent({
+  name: "ResetPassword",
+  components: {},
+  setup() {
+    const { t } = useI18n();
+    const router = $router();
+    const $q = useQuasar();
+    const { post } = $api();
+    const {
+      LOCAL_LOGIN_ROUTE,
+      AUTH_SERVER_VERIFY_OTP,
+      LOCAL_UPDATE_PASSWORD_ROUTE,
+      UI_PAGE,
+    } = $prompts();
+
+    const otp = ref("");
+    const loading = ref(false);
+
+    const isReporterUi = computed(() => UI_PAGE === "reporter");
+
+    const onSubmit = () => {
+      if (canSubmit && localStorage.getItem("emailResetPassword")) {
+        const data = {
+          auth: {
+            email: localStorage.getItem("emailResetPassword"),
+            password: otp.value,
+          },
+        };
+        post(AUTH_SERVER_VERIFY_OTP, data)
+          .then((response) => {
+            if (response.data.auth) {
+              let decoded = jwt(response.data.auth) as DecodedToken;
+              if (decoded) {
+                localStorage.setItem(
+                  "userInfos",
+                  JSON.stringify({
+                    uid: decoded.uid,
+                    token: response.data.auth,
+                  })
+                );
+                router.push(LOCAL_UPDATE_PASSWORD_ROUTE);
+              }
+            }
+          })
+          .catch((error) => {
+            console.log("error", error);
+            $q.notify({
+              message: t("auth.passwordRecoveryFailed"),
+              color: "negative",
+              icon: ionAlertCircleOutline,
+              position: "top",
+              actions: [
+                {
+                  color: "white",
+                  icon: ionCloseOutline,
+                },
+              ],
+            });
+          });
+      }
+    };
+
+    const canSubmit = computed(() => {
+      return !otp.value.length;
+    });
+
+    return {
+      otp,
+      loading,
+      router,
+      LOCAL_LOGIN_ROUTE,
+      isReporterUi,
+      onSubmit,
+      canSubmit,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.submitBtn {
+  width: 254px;
+}
+</style>

package/src/components/pages/WebAuth.vue

@@ -3,12 +3,9 @@
     <div class="row window-height">
       <div class="col column content-center bgWhite">
         <div class="q-mt-xl">
-          <img
-            src="../../assets/Sowell-logo.svg"
-            style="width: 210px"
-          />
+          <img src="../../assets/Sowell-logo.svg" style="width: 210px" />
         </div>
-        <div class="column col content-center justify-center center" >
+        <div class="column col content-center justify-center center">
           <div class="q-pl-md q-pr-md" style="max-width: 500px">
             <h4 class="title">{{ WELCOME_TITLE }}</h4>
             <div class="subtitle">{{ WELCOME_SUBTITLE }}</div>
@@ -22,7 +19,7 @@
                   type="email"
                   :rules="validations['email']"
                   lazy-rules
-                   data-cy="email"
+                  data-cy="email"
                   dense
                   outlined
                   input-class="text-subtitle2 text-weight-medium"
@@ -66,7 +63,7 @@
                 />
                 <div
                   class="cursor-pointer text-primary text-subtitle2"
-                   data-cy="forgot-password"
+                  data-cy="forgot-password"
                   @click="forgottenPassword = true"
                 >
                   {{ $t("auth.forgottenPassword") }}
@@ -78,15 +75,19 @@
       </div>
       <div
         class="column col justify-center content-center mobile"
-        :style="isManager ? 'background: #eef8fd' : ''"
-        :class="!isManager ? 'bgBlue' : ''"
+        :style="IS_MANAGER ? 'background: #eef8fd' : ''"
+        :class="!IS_MANAGER ? 'bgBlue' : ''"
       >
         <img
-          v-if="isManager"
+          v-if="IS_MANAGER"
           src="../../assets/illustration-login.svg"
           class="q-pl-md q-pr-md logoWhite"
         />
-        <img v-else src="../../assets/SowellWhite.svg" class="q-pl-md q-pr-md logoWhite" />
+        <img
+          v-else
+          src="../../assets/SowellWhite.svg"
+          class="q-pl-md q-pr-md logoWhite"
+        />
       </div>
     </div>
     <div>
@@ -105,7 +106,20 @@
           :title="infoDialog.title"
           :content="infoDialog.content"
           :image="infoDialog.image"
-        />
+          :isOtp="true"
+        >
+          <q-btn
+            v-if="requestedOtp"
+            class="bg-white submitBtn"
+            unelevated
+            outline
+            no-caps
+            :label="$t('auth.next')"
+            color="primary"
+            @click="goToOtpValidation"
+            v-close-popup
+          />
+        </sw-info-dialog>
       </q-dialog>
     </div>
   </q-layout>
@@ -144,14 +158,18 @@ export default defineComponent({
       WELCOME_TITLE,
       WELCOME_SUBTITLE,
       X_REQUESTED_ROLES,
+      IS_OTP,
       APP_SERVER_BASE_URL,
+      goToOtpValidation,
       onSubmit,
       retypeEmail,
       isSubmitBtnDisabled,
       icons,
     } = useAuth();
 
+    const IS_MANAGER = ["manager", "clean_manager"].includes(X_REQUESTED_ROLES);
     const isNotification = ref(false);
+    const requestedOtp = ref(false);
     const infoDialog = ref({
       title: "",
       content: "",
@@ -165,33 +183,40 @@ export default defineComponent({
           isEmail(email.value) &&
           password.value &&
           password.value.length > 5
-        ),
+        )
     );
-    const isManager = computed(() => X_REQUESTED_ROLES === "clean_manager");
     const resetPassword = async (email: string) => {
-      const data = {
-        auth: {
-          email,
-          base: APP_SERVER_BASE_URL,
-        },
-      };
-      try {
-        await authState.resetPassword(data);
-        forgottenPassword.value = false;
-        infoDialog.value = {
-          title: t("auth.mailVerificationTitle"),
-          content: t("auth.mailVerificationSubtitle"),
-          image: "emailVerification",
+      if (email) {
+        const data = {
+          auth: {
+            email,
+            base: APP_SERVER_BASE_URL,
+          },
         };
-        forgottenPassword.value = false;
-        isNotification.value = true;
-      } catch {
-        infoDialog.value = {
-          title: t("auth.userNotFoundTitle"),
-          content: t("auth.userNotFoundSubtitle"),
-          image: "userNotFound",
-        };
-        isNotification.value = true;
+        try {
+          await authState.resetPassword(data).then(() => {
+            localStorage.setItem("emailResetPassword", email);
+            infoDialog.value = {
+              title: t("auth.mailVerificationTitle"),
+              content:
+                IS_OTP.toLowerCase() === "y"
+                  ? t("auth.otpValidationCode")
+                  : t("auth.mailVerificationSubtitle"),
+              image: "emailVerification",
+            };
+            forgottenPassword.value = false;
+            isNotification.value = true;
+            requestedOtp.value = true;
+          });
+        } catch {
+          requestedOtp.value = false;
+          infoDialog.value = {
+            title: t("auth.userNotFoundTitle"),
+            content: t("auth.userNotFoundSubtitle"),
+            image: "userNotFound",
+          };
+          isNotification.value = true;
+        }
       }
     };
 
@@ -206,10 +231,12 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       isNotification,
-      isManager,
+      IS_MANAGER,
       WELCOME_SUBTITLE,
       WELCOME_TITLE,
       isSubmitBtnDisabled,
+      requestedOtp,
+      goToOtpValidation,
       resetPassword,
       retypeEmail,
       onSubmit,
@@ -220,7 +247,6 @@ export default defineComponent({
 </script>
 
 <style scoped>
-
 .center {
   margin-top: -115px;
 }

package/src/composables/auth.ts

@@ -29,6 +29,8 @@ export function useAuth() {
     X_REQUESTED_ROLES,
     WELCOME_TITLE,
     WELCOME_SUBTITLE,
+    IS_OTP,
+    LOCAL_OTP_ROUTE,
   } = $prompts();
   const { push, replace } = $router();
 
@@ -87,19 +89,18 @@ export function useAuth() {
     if (requestedRoles) options.headers["x-requested-roles"] = requestedRoles;
 
     try {
-      await authState.signin(data, options)
+      await authState.signin(data, options);
       loading.value = false;
       // @ts-ignore
       if (!window.Cypress) {
         // FIXME: encrypt password
-        localStorage.setItem("credentials", JSON.stringify(data.auth))
+        localStorage.setItem("credentials", JSON.stringify(data.auth));
       }
       push(LOCAL_SUCCESS_REDIRECTION_ROUTE);
-    }
-    catch(err) {
+    } catch (err) {
+      console.error("onSubmit", err);
       loading.value = false;
     }
-    
   };
 
   const isSubmitBtnDisabled = () => {
@@ -120,6 +121,10 @@ export function useAuth() {
     }
   };
 
+  const goToOtpValidation = () => {
+    push(LOCAL_OTP_ROUTE);
+  };
+
   onMounted(() => {
     if (authState.raw) {
       replace(LOCAL_SUCCESS_REDIRECTION_ROUTE);
@@ -146,6 +151,9 @@ export function useAuth() {
     WELCOME_TITLE,
     WELCOME_SUBTITLE,
     X_REQUESTED_ROLES,
+    IS_OTP,
+    LOCAL_OTP_ROUTE,
+    goToOtpValidation,
     onSubmit,
     retypeEmail,
     isSubmitBtnDisabled,

package/src/composables/resetPassword.ts

@@ -27,6 +27,7 @@ export function useResetPassword() {
   const passwordUpdated = ref(false);
   const showPassword = ref(false);
   const token = ref("");
+  const userInfos = JSON.parse(localStorage.getItem("userInfos") || "{}");
 
   const { patch, post } = $api();
   const router = $router();
@@ -34,6 +35,7 @@ export function useResetPassword() {
     AUTH_SERVER_SIGNING_ROUTE,
     AUTH_SERVER_UPDATE_PASSWORD_ROUTE,
     LOCAL_LOGIN_ROUTE,
+    IS_OTP,
   } = $prompts();
   const $route = router.currentRoute.value;
 
@@ -42,8 +44,12 @@ export function useResetPassword() {
     return jwt(token.value) as DecodedToken;
   }) as Ref<DecodedToken | null>;
 
+  const isOtp = computed(() => IS_OTP.toLowerCase() === "y");
   const canSubmit = computed(() => {
-    return decodedToken.value !== null && password.value.length >= 6;
+    return (
+      (decodedToken.value !== null || userInfos?.uid) &&
+      password.value.length >= 6
+    );
   });
 
   const validations = {
@@ -87,10 +93,12 @@ export function useResetPassword() {
   };
 
   const onSubmit = () => {
+    let idUser =
+      isOtp && userInfos?.uid ? userInfos?.uid : decodedToken?.value?.sub;
     const updatePasswordPayload = {
       data: {
         type: "users",
-        id: decodedToken.value.sub,
+        id: idUser,
         attributes: {
           password: password.value,
         },
@@ -98,7 +106,7 @@ export function useResetPassword() {
     };
     const updatePasswordHeaders = {
       headers: {
-        Authorization: `Bearer ${token.value}`,
+        Authorization: `Bearer ${isOtp ? userInfos?.token : token.value}`,
       },
     };
     loading.value = true;
@@ -106,14 +114,16 @@ export function useResetPassword() {
     patch(
       AUTH_SERVER_UPDATE_PASSWORD_ROUTE.replace(
         ":userId",
-        String(decodedToken.value.sub),
+        String(isOtp ? userInfos?.uid : decodedToken.value.sub)
       ),
       updatePasswordPayload,
-      updatePasswordHeaders,
+      updatePasswordHeaders
     )
       .then(() => {
         loading.value = false;
         passwordUpdated.value = true;
+        localStorage.removeItem("emailResetPassword");
+        localStorage.removeItem("userInfos");
       })
       .catch(() => {
         loading.value = false;
@@ -137,56 +147,13 @@ export function useResetPassword() {
   };
 
   onMounted(() => {
-    let key = $route.query.key as string;
-    const { decoded, email, tmpToken } = decodeKey(key);
-
-    if (!decoded) {
-      return $q.notify({
-        message: t("auth.passwordRecoveryInvalidLink"),
-        color: "negative",
-        position: "top",
-        icon: ionAlertCircleOutline,
-        actions: [
-          {
-            color: "white",
-            icon: ionCloseOutline,
-          },
-        ],
-      });
-    }
-
-    const tmpAuthPayload = {
-      auth: {
-        email: email,
-        token: tmpToken,
-      },
-    };
+    if (IS_OTP.toLowerCase() === "n") {
+      let key = $route.query.key as string;
+      const { decoded, email, tmpToken } = decodeKey(key);
 
-    post(AUTH_SERVER_SIGNING_ROUTE, tmpAuthPayload)
-      .then((response) => {
-        token.value = response.data.jwt;
-        if (!token.value) throw "Error reading the temporary token";
-      })
-      .catch((error) => {
-        if (error.response) {
-          // Request made and server responded
-          if (error.response.status === 404) {
-            return $q.notify({
-              message: t("auth.passwordRecoveryExpiredLink"),
-              color: "negative",
-              icon: ionAlertCircleOutline,
-              position: "top",
-              actions: [
-                {
-                  color: "white",
-                  icon: ionCloseOutline,
-                },
-              ],
-            });
-          }
-        }
+      if (!decoded) {
         return $q.notify({
-          message: t("auth.passwordRecoveryFailed"),
+          message: t("auth.passwordRecoveryInvalidLink"),
           color: "negative",
           position: "top",
           icon: ionAlertCircleOutline,
@@ -197,7 +164,52 @@ export function useResetPassword() {
             },
           ],
         });
-      });
+      }
+
+      const tmpAuthPayload = {
+        auth: {
+          email: email,
+          token: tmpToken,
+        },
+      };
+
+      post(AUTH_SERVER_SIGNING_ROUTE, tmpAuthPayload)
+        .then((response) => {
+          token.value = response.data.jwt;
+          if (!token.value) throw "Error reading the temporary token";
+        })
+        .catch((error) => {
+          if (error.response) {
+            // Request made and server responded
+            if (error.response.status === 404) {
+              return $q.notify({
+                message: t("auth.passwordRecoveryExpiredLink"),
+                color: "negative",
+                icon: ionAlertCircleOutline,
+                position: "top",
+                actions: [
+                  {
+                    color: "white",
+                    icon: ionCloseOutline,
+                  },
+                ],
+              });
+            }
+          }
+          return $q.notify({
+            message: t("auth.passwordRecoveryFailed"),
+            color: "negative",
+            position: "top",
+            icon: ionAlertCircleOutline,
+            actions: [
+              {
+                color: "white",
+                icon: ionCloseOutline,
+              },
+            ],
+          });
+        });
+    }
   });
 
   return {

package/src/injects/prompts.ts

@@ -18,6 +18,10 @@ export interface PromptsInterface {
   X_REQUESTED_ROLES: string;
   WELCOME_TITLE: string;
   WELCOME_SUBTITLE: string;
+  IS_OTP: string;
+  LOCAL_OTP_ROUTE: string;
+  AUTH_SERVER_VERIFY_OTP: string;
+  UI_PAGE: string;
 }
 export const $prompts = (): PromptsInterface => {
   const $prompts = inject<Record<"@sowell/auth", PromptsInterface>>("$prompts");

package/src/prompts.js

@@ -148,5 +148,26 @@ module.exports = function () {
       message: "Subtitle on login page",
       default: "",
     },
+    {
+      name: "IS_OTP",
+      type: "input",
+      required: true,
+      message: "Use OTP system  reset password (Y/N or y/n)",
+      default: "N",
+    },
+    {
+      name: "LOCAL_OTP_ROUTE",
+      type: "input",
+      required: true,
+      message: "Route to validation otp (page)",
+      default: "/otp-validation",
+    },
+    {
+      name: "AUTH_SERVER_VERIFY_OTP",
+      type: "input",
+      required: true,
+      message: "API endpoint to send OTP (without host)",
+      default: "/sign-in-otp",
+    },
   ];
 };

package/src/routes/index.ts

@@ -8,11 +8,12 @@ const {
     LOCAL_UPDATE_PASSWORD_ROUTE,
     X_REQUESTED_ROLES,
     UI_PAGE,
+    LOCAL_OTP_ROUTE,
   },
 } = prompts;
 
 // FIXME: Utiliser le UI_PAGE pour choisir les page a utiliser pour la version web ou mobile (auth et reset password)
-const webAuthRoles = ["superadmin", "clean_manager"];
+const webAuthRoles = ["superadmin", "clean_manager", "manager"];
 
 let mobileAuthPage = "";
 
@@ -54,6 +55,13 @@ const routes: RouteRecordRaw[] = [
         }`
       ),
   },
+  {
+    path: LOCAL_OTP_ROUTE,
+    name: "otp_validation",
+    component: () =>
+      // @ts-ignore
+      import("@sowell/auth/pages/OtpValidation.vue"),
+  },
 ];
 
 export default routes;