From c8d21a53ee0938bea6659fa558aae61987f43f0a Mon Sep 17 00:00:00 2001 From: Kabin Date: Mon, 6 Jan 2025 17:23:55 +0545 Subject: [PATCH 1/8] feat: add stub account info component to user package --- packages/vue-ui/src/Data/Index.vue | 12 ++--- .../src/components/AuthGoogleCallback.vue | 3 +- .../src/components/profile/AccountInfo.vue | 46 +++++++++++++++++++ packages/vue-user/src/store.ts | 8 ++-- packages/vue-user/src/supertokens/index.ts | 4 +- packages/vue-user/src/supertokens/login.ts | 8 ++-- packages/vue-user/src/supertokens/signup.ts | 8 ++-- packages/vue-user/src/types/config.ts | 1 + 8 files changed, 69 insertions(+), 21 deletions(-) create mode 100644 packages/vue-user/src/components/profile/AccountInfo.vue diff --git a/packages/vue-ui/src/Data/Index.vue b/packages/vue-ui/src/Data/Index.vue index baa64743e..8473bd9bc 100644 --- a/packages/vue-ui/src/Data/Index.vue +++ b/packages/vue-ui/src/Data/Index.vue @@ -1,14 +1,14 @@ @@ -38,8 +38,8 @@ const props = defineProps({ required: true, }, value: { + default: "", type: [Object, String, Number] as PropType, - required: true, }, }); diff --git a/packages/vue-user/src/components/AuthGoogleCallback.vue b/packages/vue-user/src/components/AuthGoogleCallback.vue index eecefe33f..ff3f35975 100644 --- a/packages/vue-user/src/components/AuthGoogleCallback.vue +++ b/packages/vue-user/src/components/AuthGoogleCallback.vue @@ -19,6 +19,7 @@ import { useTranslations } from "../index"; import useUserStore from "../store"; import { verifySessionRoles } from "../supertokens"; +import type { UserType } from "../types"; import type { AppConfig } from "@dzangolab/vue3-config"; const config = useConfig() as AppConfig; @@ -48,7 +49,7 @@ onMounted(async () => { (supportedRoles && (await verifySessionRoles(supportedRoles))) || !supportedRoles?.length ) { - setUser(response.user); + setUser(response.user as UserType); router.push({ name: "home" }); } diff --git a/packages/vue-user/src/components/profile/AccountInfo.vue b/packages/vue-user/src/components/profile/AccountInfo.vue new file mode 100644 index 000000000..2a0086024 --- /dev/null +++ b/packages/vue-user/src/components/profile/AccountInfo.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/vue-user/src/store.ts b/packages/vue-user/src/store.ts index 7e633aacd..5a017bd57 100644 --- a/packages/vue-user/src/store.ts +++ b/packages/vue-user/src/store.ts @@ -16,13 +16,13 @@ import type { PasswordResetPayload, PasswordResetRequestPayload, UpdatePasswordPayload, - User, + UserType, } from "./types"; const USER_KEY = "user"; const useUserStore = defineStore("user", () => { - const user = ref(undefined); + const user = ref(undefined); const changePassword = async ( payload: UpdatePasswordPayload, @@ -33,7 +33,7 @@ const useUserStore = defineStore("user", () => { return response; }; - const getUser = (): User => { + const getUser = (): UserType => { if (user.value) { return user.value; } @@ -81,7 +81,7 @@ const useUserStore = defineStore("user", () => { return doResetPassword(payload); }; - const setUser = (userData: User | undefined) => { + const setUser = (userData: UserType | undefined) => { user.value = userData; localStorage.setItem(USER_KEY, JSON.stringify(userData)); diff --git a/packages/vue-user/src/supertokens/index.ts b/packages/vue-user/src/supertokens/index.ts index c0a1bd3f2..b2d6100cf 100644 --- a/packages/vue-user/src/supertokens/index.ts +++ b/packages/vue-user/src/supertokens/index.ts @@ -17,7 +17,7 @@ import { SUPERTOKENS_API_BASE_PATH_DEFAULT } from "../constant"; import useUserStore from "../store"; import verifyEmail, { getVerificationStatus } from "./verify-email"; -import type { User } from "../types"; +import type { UserType } from "../types"; import type { AppConfig } from "@dzangolab/vue3-config"; const initSupertokens = (config: AppConfig) => { @@ -47,7 +47,7 @@ const isLoggedIn = async () => { return await Session.doesSessionExist(); }; -const getUser = async (): Promise => { +const getUser = async (): Promise => { const { getUser } = useUserStore(); if (await isLoggedIn()) { diff --git a/packages/vue-user/src/supertokens/login.ts b/packages/vue-user/src/supertokens/login.ts index 4c7daee70..7bff1f9f3 100644 --- a/packages/vue-user/src/supertokens/login.ts +++ b/packages/vue-user/src/supertokens/login.ts @@ -1,11 +1,11 @@ import { emailPasswordSignIn } from "supertokens-web-js/recipe/thirdpartyemailpassword"; -import type { LoginCredentials, User } from "../types"; +import type { LoginCredentials, UserType } from "../types"; const login = async ( credentials: LoginCredentials, -): Promise => { - let user: User | undefined; +): Promise => { + let user: UserType | undefined; let response; const data = { @@ -29,7 +29,7 @@ const login = async ( } if (response.status === "OK") { - user = response.user; + user = response.user as UserType; return user; } else if (response.status === "WRONG_CREDENTIALS_ERROR") { diff --git a/packages/vue-user/src/supertokens/signup.ts b/packages/vue-user/src/supertokens/signup.ts index e25c0eb7f..90698787d 100644 --- a/packages/vue-user/src/supertokens/signup.ts +++ b/packages/vue-user/src/supertokens/signup.ts @@ -1,11 +1,11 @@ import { emailPasswordSignUp } from "supertokens-web-js/recipe/thirdpartyemailpassword"; -import type { LoginCredentials, User } from "../types"; +import type { LoginCredentials, UserType } from "../types"; const signup = async ( credentials: LoginCredentials, -): Promise => { - let user: User | undefined; +): Promise => { + let user: UserType | undefined; let response; const data = { @@ -29,7 +29,7 @@ const signup = async ( } if (response.status === "OK") { - user = response.user; + user = response.user as UserType; return user; } else if (response.status === "FIELD_ERROR") { diff --git a/packages/vue-user/src/types/config.ts b/packages/vue-user/src/types/config.ts index d44e9fd7a..52ba3ca9d 100644 --- a/packages/vue-user/src/types/config.ts +++ b/packages/vue-user/src/types/config.ts @@ -16,6 +16,7 @@ interface DzangolabVueUserConfig { showCheckbox?: boolean; }; }; + updateEmail?: boolean; }; password?: { minLength: number; From e6c455c91b3ad0672127e6eb69750bc41b76312b Mon Sep 17 00:00:00 2001 From: Kabin Date: Mon, 6 Jan 2025 18:12:48 +0545 Subject: [PATCH 2/8] feat: add update email modal to user package --- .../components/profile/UpdateEmailModal.vue | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 packages/vue-user/src/components/profile/UpdateEmailModal.vue diff --git a/packages/vue-user/src/components/profile/UpdateEmailModal.vue b/packages/vue-user/src/components/profile/UpdateEmailModal.vue new file mode 100644 index 000000000..66f23e1af --- /dev/null +++ b/packages/vue-user/src/components/profile/UpdateEmailModal.vue @@ -0,0 +1,33 @@ + + + + + From 673f31eb29ef0a60c36d9376cf0632f6bfafe1e0 Mon Sep 17 00:00:00 2001 From: Kabin Date: Tue, 7 Jan 2025 11:52:03 +0545 Subject: [PATCH 3/8] feat: add account info component to user package --- packages/vue-user/src/components/index.ts | 2 ++ .../src/components/profile/AccountInfo.vue | 30 ++++++++++++++++--- .../components/profile/UpdateEmailModal.vue | 5 +++- 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/packages/vue-user/src/components/index.ts b/packages/vue-user/src/components/index.ts index 9fc3e12ba..71f57abc7 100644 --- a/packages/vue-user/src/components/index.ts +++ b/packages/vue-user/src/components/index.ts @@ -1,3 +1,4 @@ +export { default as AccountInfo } from "./profile/AccountInfo.vue"; export { default as ChangePasswordForm } from "./ChangePasswordForm.vue"; export { default as DropdownUserMenu } from "./DropdownUserMenu.vue"; export { default as InvitationForm } from "./invitation/InvitationForm.vue"; @@ -9,4 +10,5 @@ export { default as SignInUpMenu } from "./SignInUpMenu.vue"; export { default as SignupForm } from "./SignupForm.vue"; export { default as TermsAndConditions } from "./TermsAndConditions.vue"; export { default as UpdateEmailForm } from "./profile/UpdateEmailForm.vue"; +export { default as UpdateEmailModal } from "./profile/UpdateEmailModal.vue"; export { default as UserMenu } from "./UserMenu.vue"; diff --git a/packages/vue-user/src/components/profile/AccountInfo.vue b/packages/vue-user/src/components/profile/AccountInfo.vue index 2a0086024..918d640eb 100644 --- a/packages/vue-user/src/components/profile/AccountInfo.vue +++ b/packages/vue-user/src/components/profile/AccountInfo.vue @@ -5,13 +5,14 @@ :label="t('user.profile.accountInfo.label')" > + + @@ -33,7 +40,9 @@ export default { import { useConfig } from "@dzangolab/vue3-config"; import { useI18n } from "@dzangolab/vue3-i18n"; import { Data } from "@dzangolab/vue3-ui"; +import { ref } from "vue"; +import UpdateEmailModal from "./UpdateEmailModal.vue"; import { useTranslations } from "../../index"; import useUserStore from "../../store"; @@ -43,4 +52,17 @@ const { user: userConfig } = useConfig(); const { user } = useUserStore(); const canUpdateEmail = userConfig?.features?.updateEmail && !user?.thirdParty; + +const showModal = ref(false); + + diff --git a/packages/vue-user/src/components/profile/UpdateEmailModal.vue b/packages/vue-user/src/components/profile/UpdateEmailModal.vue index 66f23e1af..416a61d46 100644 --- a/packages/vue-user/src/components/profile/UpdateEmailModal.vue +++ b/packages/vue-user/src/components/profile/UpdateEmailModal.vue @@ -3,6 +3,7 @@ class="update-email-modal" :show="show" :title="t('user.profile.accountInfo.title')" + @on:close="$emit('on:close')" > @@ -10,7 +11,7 @@ @@ -30,4 +31,6 @@ defineProps({ type: Boolean, }, }); + +defineEmits(["on:close"]); From b280c1c8624aa6cec1a0713e48b846c1ef5da6b2 Mon Sep 17 00:00:00 2001 From: Kabin Date: Tue, 7 Jan 2025 18:22:13 +0545 Subject: [PATCH 4/8] chore: get user state for email update --- packages/vue-user/src/components/profile/AccountInfo.vue | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/vue-user/src/components/profile/AccountInfo.vue b/packages/vue-user/src/components/profile/AccountInfo.vue index 918d640eb..6ccd1981f 100644 --- a/packages/vue-user/src/components/profile/AccountInfo.vue +++ b/packages/vue-user/src/components/profile/AccountInfo.vue @@ -40,6 +40,7 @@ export default { import { useConfig } from "@dzangolab/vue3-config"; import { useI18n } from "@dzangolab/vue3-i18n"; import { Data } from "@dzangolab/vue3-ui"; +import { storeToRefs } from "pinia"; import { ref } from "vue"; import UpdateEmailModal from "./UpdateEmailModal.vue"; @@ -49,9 +50,12 @@ import useUserStore from "../../store"; const messages = useTranslations(); const { t } = useI18n({ messages }); const { user: userConfig } = useConfig(); -const { user } = useUserStore(); +const userStore = useUserStore(); -const canUpdateEmail = userConfig?.features?.updateEmail && !user?.thirdParty; +const { user } = storeToRefs(userStore); + +const canUpdateEmail = + userConfig?.features?.updateEmail && !user.value?.thirdParty; const showModal = ref(false); From 9cff09b0669a919365f6bd58b1fe430aa6e86a02 Mon Sep 17 00:00:00 2001 From: Kabin Date: Wed, 8 Jan 2025 10:07:27 +0545 Subject: [PATCH 5/8] chore: add account info to profile page --- packages/vue-user/src/views/Profile.vue | 5 ++++- .../vue-user/src/views/__test__/snapshot/Profile.test.ts | 1 + .../__test__/snapshot/__snapshots__/Profile.test.ts.snap | 6 ++++-- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/vue-user/src/views/Profile.vue b/packages/vue-user/src/views/Profile.vue index 140b175da..499b517a4 100644 --- a/packages/vue-user/src/views/Profile.vue +++ b/packages/vue-user/src/views/Profile.vue @@ -1,5 +1,7 @@