@eeplatform/nuxt-layer-common 1.7.28 → 1.7.30

package/components/Layout/Header.vue

@@ -186,7 +186,7 @@
                 rounded="xl"
                 variant="tonal"
                 size="x-large"
-                @click="logout()"
+                :to="{ name: 'logout' }"
                 class="text-none text-subtitle-1 font-weight-regular"
               >
                 Logout
@@ -246,8 +246,7 @@ function setSearchValue() {
 
 const { redirect, drawer } = useLocal();
 
-const { APP_MAIN, APP_ACCOUNT, APP_ADMIN, APP_NAME, APP_NAME_ROUTE } =
-  useRuntimeConfig().public;
+const { APP_NAME, APP_NAME_ROUTE } = useRuntimeConfig().public;
 
 const theme = useTheme();
 
@@ -261,15 +260,6 @@ const profile = computed(() => {
   return `/api/public/${currentUser.value?.profile}`;
 });
 
-function logout() {
-  if (APP_NAME.toLowerCase() !== "main") {
-    redirect(`${APP_MAIN}/logout`);
-    return;
-  }
-
-  useRouter().push({ name: "logout" });
-}
-
 const name = computed(() => {
   let name = "";
   if (currentUser.value?.firstName) {

package/composables/useEnrollment.ts

@@ -25,7 +25,14 @@ export default function useEnrollment() {
       lastName: "",
       extensionName: "",
       birthDate: "",
-      placeOfBirth: "",
+      placeOfBirth: {
+        region: "",
+        regionName: "",
+        province: "",
+        provinceName: "",
+        cityMunicipality: "",
+        cityMunicipalityName: "",
+      },
       sex: "",
       motherTongue: "",
       age: 0,
@@ -60,8 +67,11 @@ export default function useEnrollment() {
         streetName: "",
         sitio: "",
         barangay: "",
+        barangayName: "",
         municipalityCity: "",
+        municipalityCityName: "",
         province: "",
+        provinceName: "",
         country: "",
         zipCode: "",
       },
@@ -91,7 +101,7 @@ export default function useEnrollment() {
     },
     remarks: "",
     alternativeLearningOptions: [],
-    isCertifiedAndConsented: true,
+    isCertifiedAndConsented: false,
   });
 
   function add(value: TTLearner) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@eeplatform/nuxt-layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.7.28",
+  "version": "1.7.30",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"

package/pages/forgot-password.vue

@@ -0,0 +1,76 @@
+<template>
+  <v-row no-gutters class="fill-height" justify="center" align-content="center">
+    <v-col cols="12" class="mb-6">
+      <v-row no-gutters justify="center">
+        <nuxt-link
+          class="text-h2 font-weight-bold text-decoration-none"
+          style="color: unset"
+          :to="{ name: 'index' }"
+        >
+          EEPlatform
+        </nuxt-link>
+      </v-row>
+    </v-col>
+
+    <v-col cols="12" lg="3" md="4" sm="6">
+      <v-form v-model="isValid" @submit.prevent="submit(email)">
+        <v-row no-gutters>
+          <v-col cols="12">
+            <v-row no-gutters>
+              <v-col cols="12" class="text-h6 font-weight-bold"> Email </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="email"
+                  :rules="[requiredRule, emailRule]"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="message" cols="12" class="my-2 text-center font-italic">
+            {{ message }}
+          </v-col>
+
+          <v-col cols="12">
+            <v-row no-gutters justify="center">
+              <v-btn
+                type="submit"
+                variant="tonal"
+                :disabled="!isValid"
+                rounded="xl"
+                size="large"
+              >
+                submit
+              </v-btn>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2 text-center">
+            All good? <nuxt-link :to="{ name: 'index' }">Login</nuxt-link>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "plain",
+});
+const { requiredRule, emailRule } = useUtils();
+const email = ref("");
+const isValid = ref(false);
+
+const { forgotPassword } = useLocalAuth();
+const message = ref("");
+
+async function submit(email = "") {
+  try {
+    const result: any = await forgotPassword(email);
+    message.value = result.message;
+  } catch (error: any) {
+    message.value = error.message;
+  }
+}
+</script>

package/pages/login.vue

@@ -0,0 +1,139 @@
+<template>
+  <v-row
+    no-gutters
+    class="fill-height pa-8"
+    justify="center"
+    align-content="center"
+  >
+    <v-col cols="12" lg="3" md="4" sm="6">
+      <v-form
+        v-model="isValid"
+        @submit.prevent="submit({ email, password })"
+        :disabled="loading"
+      >
+        <v-row no-gutters>
+          <v-col cols="12">
+            <v-row no-gutters justify="center">
+              <span
+                class="text-h4 text-sm-h4 text-md-h4 text-lg-h4 text-xl-h4 font-weight-bold text-decoration-none text-center"
+              >
+                E-Governance Ecosystem Platform
+              </span>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-4">
+            <v-row no-gutters>
+              <v-col cols="12" class="text-h6 font-weight-bold"> Email </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="email"
+                  :rules="[requiredRule, emailRule]"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12">
+            <v-row no-gutters>
+              <v-col cols="12" class="text-h6 font-weight-bold">
+                Password
+              </v-col>
+              <v-col cols="12">
+                <InputPassword v-model="password" :rules="[requiredRule]" />
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="message" cols="12" class="my-2 text-center font-italic">
+            {{ message }}
+          </v-col>
+
+          <v-col cols="12" class="mt-4">
+            <v-row no-gutters justify="center">
+              <v-btn
+                block
+                type="submit"
+                variant="tonal"
+                :disabled="!isValid"
+                rounded="xl"
+                size="large"
+                class="text-none"
+                :loading="loading"
+              >
+                Login
+              </v-btn>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="text-center font-weight-bold mt-4">
+            <nuxt-link
+              :to="{ name: 'forgot-password' }"
+              class="text-decoration-none text-primary"
+            >
+              Forgot password?
+            </nuxt-link>
+          </v-col>
+
+          <v-col cols="12" class="my-4">
+            <v-divider></v-divider>
+          </v-col>
+
+          <v-col cols="12">
+            <v-row no-gutters justify="center">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                rounded="xl"
+                size="large"
+                class="text-none"
+                :to="{ name: 'sign-up' }"
+              >
+                Create new account
+              </v-btn>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "plain",
+});
+const { requiredRule, emailRule } = useUtils();
+const email = ref("");
+const password = ref("");
+const isValid = ref(false);
+
+const { login, setSession } = useLocalAuth();
+
+const { redirect, landingPage } = useLocal();
+
+const APP_ACCOUNT = useRuntimeConfig().public.APP_ACCOUNT;
+
+const message = ref("");
+
+const loading = ref(false);
+
+async function submit({ email = "", password = "" } = {}) {
+  loading.value = true;
+  try {
+    await login({ email, password });
+
+    if (landingPage.value) {
+      await redirect(landingPage.value);
+      return;
+    }
+
+    await redirect(APP_ACCOUNT, "home");
+  } catch (error: any) {
+    message.value = error.data.message;
+  } finally {
+    loading.value = false;
+  }
+}
+</script>

package/pages/logout.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-row no-gutters class="fill-height" justify="center" align-content="center">
+    <v-col cols="12" class="mt-2 text-center font-weight-bold">
+      You have been logged out.
+      <nuxt-link :to="{ name: 'index' }">Login</nuxt-link>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "plain",
+});
+
+const { cookieConfig } = useLocal();
+
+useCookie("sid", cookieConfig).value = null;
+useCookie("user", cookieConfig).value = null;
+useCookie("role", cookieConfig).value = null;
+useCookie("org", cookieConfig).value = null;
+
+const sid = useCookie("sid", cookieConfig).value;
+if (sid) {
+  try {
+    useLazyAsyncData("logout", () =>
+      useNuxtApp().$api(`/api/auth/${sid}`, {
+        method: "DELETE",
+      }),
+    );
+  } catch (error) {
+    console.error("Logout failed:", error);
+  }
+}
+</script>

package/pages/reset-password/[otp].vue

@@ -0,0 +1,106 @@
+<template>
+  <v-row no-gutters class="fill-height" justify="center" align-content="center">
+    <v-col cols="12" lg="3" md="4" sm="6">
+      <v-form
+        v-model="isValid"
+        @submit.prevent="submit(otp, newPassword, confirmPassword)"
+      >
+        <v-row no-gutters>
+          <v-col cols="12">
+            <v-row no-gutters justify="center">
+              <nuxt-link
+                class="text-h2 font-weight-bold text-decoration-none"
+                style="color: unset"
+                :to="{ name: 'index' }"
+              >
+                EEPlatform
+              </nuxt-link>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-6">
+            <v-row no-gutters>
+              <v-col cols="12" class="text-h6 font-weight-bold">
+                New Password
+              </v-col>
+              <v-col cols="12">
+                <InputPassword
+                  id="newPassword"
+                  v-model="newPassword"
+                  :rules="[requiredRule, passwordRule]"
+                />
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12">
+            <v-row no-gutters>
+              <v-col cols="12" class="text-h6 font-weight-bold">
+                Confirm New Password
+              </v-col>
+              <v-col cols="12">
+                <InputPassword
+                  id="confirmPassword"
+                  v-model="confirmPassword"
+                  :rules="[requiredRule, passwordRule]"
+                  :errorMessages="
+                    confirmPassword && newPassword !== confirmPassword
+                      ? 'Password mismatch!'
+                      : ''
+                  "
+                />
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="message" cols="12" class="my-2 font-italic text-center">
+            {{ message }}
+          </v-col>
+
+          <v-col cols="12">
+            <v-row no-gutters justify="center">
+              <v-btn
+                type="submit"
+                variant="tonal"
+                :disabled="!isValid"
+                rounded="xl"
+                size="large"
+              >
+                submit
+              </v-btn>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-6 text-center">
+            All good?
+            <nuxt-link :to="{ name: 'login' }">Sign in</nuxt-link>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "plain",
+});
+const { requiredRule, passwordRule } = useUtils();
+const newPassword = ref("");
+const confirmPassword = ref("");
+const isValid = ref(false);
+const otp = (useRoute().params.otp as string) ?? "";
+
+const { resetPassword } = useLocalAuth();
+
+const message = ref("");
+
+async function submit(otp = "", newPassword = "", confirmPassword = "") {
+  try {
+    const result: any = await resetPassword(otp, newPassword, confirmPassword);
+    message.value = result.message;
+  } catch (error: any) {
+    message.value = error.data.message;
+  }
+}
+</script>

package/pages/sign-up/[id].vue

@@ -0,0 +1,214 @@
+<template>
+  <v-row no-gutters class="fill-height" justify="center" align-content="center">
+    <v-col cols="12" class="mb-6">
+      <v-row no-gutters justify="center">
+        <nuxt-link
+          class="text-h2 font-weight-bold text-decoration-none"
+          style="color: unset"
+          :to="{ name: 'index' }"
+        >
+          EEPlatform
+        </nuxt-link>
+      </v-row>
+    </v-col>
+
+    <v-col
+      v-if="validating"
+      cols="12"
+      class="text-subtitle-1 font-weight-medium text-center font-italic"
+    >
+      {{ message }}
+    </v-col>
+    <v-col v-else cols="12" lg="3" md="4" sm="6">
+      <v-row no-gutters>
+        <v-col v-if="validInvitation" cols="12">
+          <v-form
+            v-model="isValid"
+            @submit.prevent="
+              submit({ firstName, lastName, password, id, referralCode, type })
+            "
+            id="form1"
+            autocomplete="off"
+            :disabled="isFormDisabled"
+          >
+            <v-row no-gutters>
+              <v-col cols="12">
+                <v-row no-gutters>
+                  <InputLabel
+                    class="text-capitalize"
+                    title="First Name"
+                    required
+                  />
+                  <v-col cols="12">
+                    <v-text-field
+                      v-model="firstName"
+                      density="comfortable"
+                      :rules="[requiredRule]"
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+              </v-col>
+
+              <v-col cols="12" class="mt-2">
+                <v-row no-gutters>
+                  <InputLabel
+                    class="text-capitalize"
+                    title="Last Name"
+                    required
+                  />
+                  <v-col cols="12">
+                    <v-text-field
+                      v-model="lastName"
+                      density="comfortable"
+                      :rules="[requiredRule]"
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+              </v-col>
+
+              <v-col cols="12">
+                <v-row no-gutters>
+                  <InputLabel
+                    class="text-capitalize"
+                    title="Password"
+                    required
+                  />
+                  <v-col cols="12">
+                    <InputPassword v-model="password" :rules="[requiredRule]" />
+                  </v-col>
+                </v-row>
+              </v-col>
+
+              <v-col
+                v-if="message"
+                cols="12"
+                :class="'my-2 text-center font-italic' + msgColor"
+              >
+                {{ message }}
+              </v-col>
+
+              <v-col cols="12" v-if="!isFormDisabled">
+                <v-btn
+                  block
+                  type="submit"
+                  variant="text"
+                  :disabled="!isValid"
+                  rounded="xl"
+                  size="large"
+                  :loading="loading"
+                >
+                  submit
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-col>
+
+        <v-col
+          v-else
+          cols="12"
+          class="text-subtitle-1 font-weight-medium text-center font-italic"
+        >
+          <span>{{ message }}</span>
+          <v-row no-gutters justify="center">
+            <nuxt-link :to="{ name: 'index' }">Go to homepage</nuxt-link>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "plain",
+});
+const { verify } = useLocalAuth();
+
+const id = (useRoute().params.id as string) ?? "";
+
+const validating = ref(true);
+const validInvitation = ref(false);
+
+const message = ref("Validating invitation...");
+const msgColor = ref("text-error");
+
+const type = ref("");
+const referralCode = ref("");
+const loading = ref(false);
+
+async function validate() {
+  try {
+    const result = await verify(id);
+
+    if (result.type) {
+      type.value = result.type;
+    }
+
+    if (result.referralCode) {
+      referralCode.value = result.referralCode;
+    }
+
+    validInvitation.value = true;
+    message.value = "";
+  } catch (error: any) {
+    message.value = error.data.message;
+  }
+  validating.value = false;
+}
+
+await validate();
+
+const { requiredRule } = useUtils();
+const firstName = ref("");
+const lastName = ref("");
+const password = ref("");
+
+const isValid = ref(false);
+
+const { createUserByVerification } = useUser();
+
+const countdown = ref(5); // Countdown from 5 seconds
+const isFormDisabled = ref(false);
+
+async function submit({
+  firstName = "",
+  lastName = "",
+  password = "",
+  id = "",
+  type = "",
+  referralCode = "",
+} = {}) {
+  message.value = "";
+  loading.value = true;
+  try {
+    const res = await createUserByVerification({
+      firstName,
+      lastName,
+      password,
+      id,
+      type,
+      referralCode,
+    });
+
+    isFormDisabled.value = true;
+
+    msgColor.value = " text-none";
+
+    message.value = `${res.message} Redirecting in ${countdown.value} seconds...`;
+
+    // Start countdown
+    const interval = setInterval(() => {
+      countdown.value--;
+      message.value = `${res.message} Redirecting in ${countdown.value} seconds...`;
+      if (countdown.value <= 0) {
+        clearInterval(interval);
+        navigateTo({ name: "index" });
+      }
+    }, 1000);
+  } catch (error: any) {
+    message.value = error.data.message;
+  }
+  loading.value = false;
+}
+</script>