@goweekdays/layer-common 1.3.2 → 1.3.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @goweekdays/layer-common
 
+## 1.3.4
+
+### Patch Changes
+
+- 8e83e63: Fix role, member, and user management
+
+## 1.3.3
+
+### Patch Changes
+
+- 425729b: Fix component API call query
+
 ## 1.3.2
 
 ### Patch Changes

package/components/InvitationMain.vue

@@ -145,14 +145,16 @@ const {
   data: getInviteReq,
   refresh: getInvitations,
   status: getInviteReqStatus,
-} = await useLazyAsyncData("get-invitations", () =>
-  getVerifications({
-    page: page.value,
-    search: headerSearch.value,
-    status: props.status,
-    type: "user-invite,member-invite",
-    app: props.app,
-  })
+} = await useLazyAsyncData(
+  `get-all-invitations-${props.status}-${page.value}`,
+  () =>
+    getVerifications({
+      page: page.value,
+      search: headerSearch.value,
+      status: props.status,
+      type: "user-invite,member-invite",
+      org: props.org,
+    })
 );
 
 const loading = computed(() => getInviteReqStatus.value === "pending");

package/components/MemberInvite.vue

@@ -11,19 +11,22 @@
     <v-card-text style="max-height: 100vh; overflow-y: auto">
       <v-form v-model="valid" :disabled="localProps.disabled">
         <v-row no-gutters>
-          <v-col cols="12" class="mb-1">
+          <v-col v-if="!isAdmin" cols="12" class="mb-1">
             <v-row no-gutters>
               <InputLabel
                 class="text-capitalize"
-                title="Email"
+                title="App"
                 :required="isMutable"
               />
               <v-col cols="12">
-                <v-text-field
-                  v-model="invite.email"
-                  :rules="isMutable ? [requiredRule, emailRule] : []"
-                  :readonly="!isMutable"
-                ></v-text-field>
+                <v-select
+                  v-model="invite.app"
+                  :items="apps"
+                  item-title="name"
+                  item-value="code"
+                  :rules="isMutable ? [requiredRule] : []"
+                  :loading="loadingApps"
+                ></v-select>
               </v-col>
             </v-row>
           </v-col>
@@ -49,14 +52,19 @@
             </v-row>
           </v-col>
 
-          <v-col v-if="!localProps.app" cols="12" class="mb-1">
+          <v-col cols="12" class="mb-1">
             <v-row no-gutters>
-              <InputLabel class="text-capitalize" title="App" required />
+              <InputLabel
+                class="text-capitalize"
+                title="Email"
+                :required="isMutable"
+              />
               <v-col cols="12">
-                <v-select
-                  v-model="invite.app"
-                  :rules="[requiredRule]"
-                ></v-select>
+                <v-text-field
+                  v-model="invite.email"
+                  :rules="isMutable ? [requiredRule, emailRule] : []"
+                  :readonly="!isMutable"
+                ></v-text-field>
               </v-col>
             </v-row>
           </v-col>
@@ -181,6 +189,8 @@ const invite = defineModel<TMemberInvitation>({
   default: () => useMember().invitation.value,
 });
 
+invite.value.app = localProps.app;
+
 const message = defineModel("message", { default: "" });
 
 const valid = ref(false);
@@ -193,7 +203,10 @@ const roles = ref<Array<Record<string, any>>>([]);
 
 const { data: roleData, status: roleReqStatus } = await useLazyAsyncData(
   `get-all-role-app-${localProps.app}-${localProps.org ?? "org"}`,
-  () => getAllRoles({ org: localProps.org, app: localProps.app, limit: 50 })
+  () => getAllRoles({ org: localProps.org, app: invite.value.app, limit: 50 }),
+  {
+    watch: [() => invite.value.app],
+  }
 );
 
 const loadingRoles = computed(() => roleReqStatus.value === "pending");
@@ -203,4 +216,26 @@ watchEffect(() => {
     roles.value = roleData.value.items;
   }
 });
+
+const isAdmin = computed(() => localProps.app === "admin");
+
+const apps = ref<TApp[]>([]);
+
+const { getAll: getAllApps } = useApps();
+
+const { data: appsData, status: appsReqStatus } = useLazyAsyncData(
+  "get-all-apps-invite-member-form",
+  () => getAllApps({ limit: 100 }),
+  {
+    immediate: !isAdmin.value,
+  }
+);
+
+const loadingApps = computed(() => appsReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (appsData.value && appsData.value.items) {
+    apps.value = appsData.value.items;
+  }
+});
 </script>

package/components/MemberMain.vue

@@ -96,6 +96,7 @@
 
     <v-dialog v-model="dialogAssignRole" width="450" persistent>
       <MemberForm
+        :app="type"
         title="Assign Role"
         v-model="member"
         mode="assign-role"
@@ -291,7 +292,7 @@ async function submitInvite() {
   disabledInvite.value = true;
   try {
     await inviteMember({
-      app: props.type,
+      app: invitation.value.app,
       org: props.orgId,
       email: invitation.value.email,
       role: invitation.value.role,

package/components/RoleForm.vue

@@ -11,6 +11,26 @@
     <v-card-text style="max-height: 100vh; overflow-y: auto">
       <v-form v-model="valid">
         <v-row no-gutters>
+          <v-col v-if="isOrg" cols="12" class="mb-1">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="App"
+                :required="isMutable"
+              />
+              <v-col cols="12">
+                <v-select
+                  v-model="role.app"
+                  :items="apps"
+                  item-title="name"
+                  item-value="code"
+                  :readonly="!isMutable"
+                  :loading="loadingApps"
+                ></v-select>
+              </v-col>
+            </v-row>
+          </v-col>
+
           <v-col cols="12" class="mb-1">
             <v-row no-gutters>
               <InputLabel
@@ -65,26 +85,6 @@
               </v-col>
             </v-row>
           </v-col>
-
-          <v-col v-if="!localProps.app && isMutable" cols="12" class="mb-1">
-            <v-row no-gutters>
-              <InputLabel
-                class="text-capitalize"
-                title="App"
-                :required="isMutable"
-              />
-              <v-col cols="12">
-                <v-select
-                  v-model="role.app"
-                  :items="apps"
-                  item-title="name"
-                  item-value="code"
-                  :readonly="!isMutable"
-                  :loading="loadingApps"
-                ></v-select>
-              </v-col>
-            </v-row>
-          </v-col>
         </v-row>
       </v-form>
 
@@ -222,6 +222,8 @@ const apps = ref<TApp[]>([]);
 
 const { getAll: getAllApps } = useApps();
 
+const isOrg = computed(() => localProps.app === "org");
+
 const {
   data: appsData,
   status: appsReqStatus,
@@ -233,14 +235,10 @@ const {
       limit: 20,
     }),
   {
-    immediate: false,
+    immediate: isOrg.value,
   }
 );
 
-if (!localProps.app) {
-  refreshApps();
-}
-
 const loadingApps = computed(() => appsReqStatus.value === "pending");
 
 watchEffect(() => {

package/components/RolePermissionMain.vue

@@ -105,7 +105,7 @@
         content="Are you sure you want to delete this role? This action cannot be undone."
         @cancel="setRole({ mode: 'delete' })"
         @confirm="submitDelete()"
-        :message="message"
+        v-model:message="message"
       />
     </v-dialog>
   </v-row>
@@ -136,8 +136,7 @@ const props = defineProps({
         title: "permissions",
         value: "permissions",
       },
-      { title: "App", value: "type" },
-      { title: "Action", value: "action-table" },
+      { title: "App", value: "app" },
     ],
   },
   canCreateRole: {
@@ -189,7 +188,7 @@ function setRole({
     JSON.parse(
       JSON.stringify({
         ...data,
-        app: props.app,
+        app: mode === "admin" ? props.app : data.app,
       })
     )
   );
@@ -215,6 +214,8 @@ function setRole({
 
 const items = ref<Array<Record<string, any>>>([]);
 
+const isOrg = computed(() => props.app === "org");
+
 const {
   data: getRoleReq,
   refresh: getRoles,
@@ -225,8 +226,8 @@ const {
     _getRoles({
       page: page.value,
       search: headerSearch.value,
-      app: props.app,
       org: props.org,
+      app: isOrg.value ? "" : props.app,
     }),
   {
     watch: [page, headerSearch],

package/composables/useLocalAuth.ts

@@ -41,38 +41,10 @@ export default function useLocalAuth() {
   }
 
   async function forgotPassword(email: string) {
-    if (!email) {
-      throw new Error("Email is required for password reset request.");
-    }
-
-    try {
-      const response = await $fetch("/api/auth/forget-password", {
-        method: "POST",
-        body: JSON.stringify({ email }),
-        headers: { "Content-Type": "application/json" },
-      });
-      return response;
-    } catch (error) {
-      console.error("Error in password reset request:", error);
-      throw error;
-    }
-  }
-
-  async function resetPassword(
-    otp: string,
-    newPassword: string,
-    passwordConfirmation: string
-  ) {
-    try {
-      return await $fetch("/api/auth/reset-password", {
-        method: "POST",
-        body: JSON.stringify({ otp, newPassword, passwordConfirmation }),
-        headers: { "Content-Type": "application/json" },
-      });
-    } catch (error) {
-      console.error("Error resetting password:", error);
-      throw error;
-    }
+    return $fetch<Record<string, any>>("/api/verifications/forget-password", {
+      method: "POST",
+      body: JSON.stringify({ email }),
+    });
   }
 
   function verify(id: string) {
@@ -94,7 +66,6 @@ export default function useLocalAuth() {
     logout,
     getCurrentUser,
     forgotPassword,
-    resetPassword,
     verify,
     loggedInUser,
   };

package/composables/useUser.ts

@@ -87,6 +87,17 @@ export default function useUser() {
     });
   }
 
+  async function resetPassword(value: {
+    id: string;
+    newPassword: string;
+    confirmPassword: string;
+  }) {
+    return $fetch("/api/users/password", {
+      method: "PATCH",
+      body: value,
+    });
+  }
+
   return {
     inviteUser,
     updateName,
@@ -98,5 +109,6 @@ export default function useUser() {
     getUsers,
     createUserByVerification,
     getById,
+    resetPassword,
   };
 }

package/composables/useVerification.ts

@@ -6,10 +6,11 @@ export default function useUser() {
     page = 1,
     email = "",
     app = "",
+    org = "",
   } = {}) {
     return $fetch<Record<string, any>>("/api/verifications", {
       method: "GET",
-      query: { status, search, page, type, email, app },
+      query: { status, search, page, type, email, app, org },
     });
   }
 

package/package.json

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

package/pages/forgot-password.vue

@@ -66,11 +66,12 @@ const { forgotPassword } = useLocalAuth();
 const message = ref("");
 
 async function submit(email = "") {
+  message.value = "";
   try {
-    const result: any = await forgotPassword(email);
-    message.value = result.message;
+   const result = await forgotPassword(email);
+   message.value = result.message;
   } catch (error: any) {
-    message.value = error.message;
+    message.value = error.response?._data?.message || "An error occurred.";
   }
 }
 </script>

package/pages/index.vue

@@ -1,3 +1,94 @@
 <template>
-  <h1>index</h1>
+  <v-row no-gutters class="fill-height" justify="center" align-content="center">
+    <v-col cols="12" class="text-center">
+      <span class="text-h1 font-weight-bold">{{ APP_NAME }}</span>
+    </v-col>
+
+    <v-col cols="12" class="text-center mt-6" v-if="currentUser">
+      <v-row no-gutters justify="center">
+        <v-btn
+          class="text-lowercase"
+          rounded="xl"
+          variant="tonal"
+          size="large"
+          @click="handleSignin()"
+        >
+          <span class="d-inline-block text-truncate" style="width: 300px">
+            Sign-in as {{ currentUser?.email }}
+          </span>
+        </v-btn>
+      </v-row>
+    </v-col>
+
+    <v-col cols="12" class="text-center mt-6" v-else>
+      <v-row justify="center">
+        <v-col cols="12" lg="2" md="3" sm="3">
+          <v-btn
+            block
+            class="text-lowercase"
+            rounded="xl"
+            variant="tonal"
+            size="large"
+            :to="{ name: 'login' }"
+          >
+            Sign In
+          </v-btn>
+        </v-col>
+
+        <v-col cols="12">
+          Don't have an account?
+          <nuxt-link :href="`${APP_MAIN}/sign-up`">Sign up</nuxt-link>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
 </template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "plain",
+});
+
+const { APP_NAME, APP_MAIN, APP } = useRuntimeConfig().public;
+
+const { getCurrentUser, currentUser, loggedInUser } = useLocalAuth();
+try {
+  await getCurrentUser();
+} catch (error) {
+  console.log(error);
+}
+
+const { getByApp } = useMember();
+
+const isPartnerApp = computed(() =>
+  [
+    "org",
+    "marketplace",
+    "services",
+    "stay",
+    "ride",
+    "eat",
+    "experience",
+    "job",
+  ].includes(APP)
+);
+
+const { data: member } = await useLazyAsyncData(
+  "get-member-by-app",
+  () => getByApp({ app: APP, user: loggedInUser() }),
+  { immediate: isPartnerApp.value }
+);
+
+function handleSignin() {
+  if (APP === "main") {
+    navigateTo({ name: "feeds" });
+  } else if (APP === "admin") {
+    navigateTo({ name: "home" });
+  } else {
+    navigateTo({
+      name: "org-dashboard",
+      params: { org: member.value?.org ?? "org" },
+    });
+  }
+}
+</script>

package/pages/login.vue

@@ -127,7 +127,7 @@ async function submit({ email = "", password = "" } = {}) {
     await login({ email, password });
 
     if (APP === "main") {
-      await navigateTo({ name: "feed" });
+      await navigateTo({ name: "feeds" });
       return;
     }
 
@@ -148,7 +148,16 @@ async function submit({ email = "", password = "" } = {}) {
       return;
     }
   } catch (error: any) {
-    message.value = error.response._data.message;
+    if (
+      error.response &&
+      error.response._data &&
+      error.response._data.message
+    ) {
+      message.value = error.response._data.message;
+    } else {
+      message.value = "An unexpected error occurred. Please try again.";
+    }
+    console.log(error);
   } finally {
     loading.value = false;
   }

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

@@ -0,0 +1,110 @@
+<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' }"
+              >
+                GoWeekdays
+              </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: 'index' }">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 } = useUser();
+
+const message = ref("");
+
+async function submit(id = "", newPassword = "", confirmPassword = "") {
+  try {
+    const result: any = await resetPassword({
+      id,
+      newPassword,
+      confirmPassword,
+    });
+    message.value = result.message;
+  } catch (error: any) {
+    message.value = error.response._data.message;
+  }
+}
+</script>

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

@@ -139,15 +139,7 @@ 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;
-    }
+    await verify(id);
 
     validInvitation.value = true;
     message.value = "";

package/pages/verify/invitation/[id].vue

@@ -0,0 +1,163 @@
+<template>
+  <v-row no-gutters class="fill-height" justify="center" align-content="center">
+    <v-col
+      v-if="validating"
+      cols="12"
+      class="text-subtitle-1 font-weight-medium text-center"
+    >
+      {{ 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 })"
+            id="form1"
+            autocomplete="off"
+          >
+            <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="errorOnSubmit"
+                cols="12"
+                class="my-2 text-error text-center"
+              >
+                {{ message }}
+              </v-col>
+
+              <v-col cols="12">
+                <v-btn
+                  block
+                  type="submit"
+                  variant="text"
+                  :disabled="!isValid"
+                  rounded="xl"
+                  size="large"
+                >
+                  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"
+        >
+          <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 invite = ref<Record<string, any> | null>(null);
+
+async function validate() {
+  try {
+    invite.value = await verify(id);
+    validInvitation.value = true;
+  } 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 errorOnSubmit = ref(false);
+
+async function submit({
+  firstName = "",
+  lastName = "",
+  password = "",
+  id = "",
+} = {}) {
+  errorOnSubmit.value = false;
+  try {
+    await createUserByVerification({
+      firstName,
+      lastName,
+      password,
+      id,
+      type: invite.value?.type,
+    });
+    await navigateTo({ name: "index" });
+  } catch (error: any) {
+    message.value = error.response._data.message;
+    errorOnSubmit.value = true;
+  }
+}
+</script>

package/pages/verify/member-invite/[id].vue

@@ -0,0 +1,67 @@
+<template>
+  <v-row no-gutters class="fill-height" justify="center" align-content="center">
+    <v-col cols="12" class="text-subtitle-1 font-weight-medium text-center">
+      {{ message }}
+    </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 invite = ref<Record<string, any> | null>(null);
+
+async function validate() {
+  try {
+    invite.value = await verify(id);
+    validInvitation.value = true;
+    message.value =
+      invite.value.message || "Successfully accepted the invitation!";
+  } 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 errorOnSubmit = ref(false);
+
+async function submit({
+  firstName = "",
+  lastName = "",
+  password = "",
+  id = "",
+} = {}) {
+  errorOnSubmit.value = false;
+  try {
+    await createUserByVerification({
+      firstName,
+      lastName,
+      password,
+      id,
+      type: invite.value?.type,
+    });
+  } catch (error: any) {
+    message.value = error.response._data.message;
+    errorOnSubmit.value = true;
+  }
+}
+</script>