-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/bus 928 password reset (#56)
* [BUS-928] reset password flow * [BUS-928] fix problem resulting from merge conflict * [BUS-928] code review changes
- Loading branch information
1 parent
ebf4f9c
commit b10aa74
Showing
14 changed files
with
289 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <script setup lang="ts"> | ||
| import type { FormkitFields } from '~/types/formkit'; | ||
| const customerStore = useCustomerStore(); | ||
| const { query } = useRoute(); | ||
| const { t } = useI18n(); | ||
| const { pushSuccess, pushError } = useNotifications(); | ||
| const hashIsValid = ref(true); | ||
| onMounted(async () => { | ||
| try { | ||
| const response = await customerStore.isRecoveryHashValid({ hash: query.hash }); | ||
| hashIsValid.value = !response.isExpired; | ||
| } catch (error) { | ||
| hashIsValid.value = false; | ||
| } | ||
| }); | ||
| const handlePasswordChange = async (fields: FormkitFields) => { | ||
| try { | ||
| await customerStore.recoverPassword({ | ||
| hash: query.hash, | ||
| ...fields, | ||
| }); | ||
| pushSuccess(t('account.recoverPassword.recover.successMessage')); | ||
| navigateTo('/account/login'); | ||
| } catch (error) { | ||
| pushError(t('account.recoverPassword.recover.errorMessage')); | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <template> | ||
| <template v-if="!hashIsValid"> | ||
| <p class="text-center text-status-danger">{{ $t('account.recoverPassword.recover.linkNotValid') }}</p> | ||
| <NuxtLink | ||
| to="/account/recover" | ||
| class="m-auto mt-4 flex w-1/2 items-center justify-center rounded bg-brand-primary px-4 py-2 text-white hover:bg-brand-primary-dark" | ||
| > | ||
| {{ $t('account.recoverPassword.recover.requestNewLink') }} | ||
| </NuxtLink> | ||
| </template> | ||
|
|
||
| <FormKit | ||
| v-else | ||
| type="form" | ||
| :submit-label="$t('account.recoverPassword.recover.submitLabel')" | ||
| :classes="{ | ||
| form: 'w-full flex flex-wrap flex-col gap-4', | ||
| actions: 'w-full', | ||
| }" | ||
| @submit="handlePasswordChange" | ||
| > | ||
| <h5>{{ $t('account.recoverPassword.recover.heading') }}</h5> | ||
| <FormKit | ||
| type="password" | ||
| :label="$t('account.recoverPassword.recover.passwordLabel')" | ||
| name="newPassword" | ||
| :placeholder="$t('account.login.email.placeholder')" | ||
| validation="required|length:8" | ||
| /> | ||
|
|
||
| <FormKit | ||
| type="password" | ||
| :label="$t('account.recoverPassword.recover.confirmLabel')" | ||
| name="newPasswordConfirm" | ||
| :placeholder="$t('account.login.email.placeholder')" | ||
| validation="required|confirm:newPassword" | ||
| /> | ||
| </FormKit> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <script setup lang="ts"> | ||
| import type { FormkitFields } from '~/types/formkit'; | ||
| const customerStore = useCustomerStore(); | ||
| const { getStorefrontUrl } = useInternationalization(); | ||
| const formSent = ref(false); | ||
| const handleReset = async (fields: FormkitFields) => { | ||
| try { | ||
| await customerStore.resetPassword({ | ||
| ...fields, | ||
| storefrontUrl: getEnvironmentStorefrontUrl(), | ||
| }); | ||
| } catch (error) { | ||
| // we won't do anything here because we don't want the user to know if the email is registered | ||
| } finally { | ||
| formSent.value = true; | ||
| } | ||
| }; | ||
| // helper method to get a correct url for testing in dev mode | ||
| // TODO: maybe change for prod env? | ||
| const getEnvironmentStorefrontUrl = (): string => { | ||
| const storefrontUrl = getStorefrontUrl(); | ||
| return import.meta.dev ? storefrontUrl + ':3000' : storefrontUrl; | ||
| }; | ||
| </script> | ||
|
|
||
| <template> | ||
| <h3 class="mb-4">{{ $t('account.recoverPassword.request.heading') }}</h3> | ||
| <FormKit | ||
| v-if="!formSent" | ||
| type="form" | ||
| :submit-label="$t('account.recoverPassword.request.submitLabel')" | ||
| :classes="{ | ||
| form: 'w-full flex flex-wrap flex-col gap-4', | ||
| actions: 'w-full', | ||
| }" | ||
| @submit="handleReset" | ||
| > | ||
| <p class="text-sm">{{ $t('account.recoverPassword.request.subHeading') }}</p> | ||
| <FormKit | ||
| type="email" | ||
| :label="$t('account.login.email.label')" | ||
| name="email" | ||
| :placeholder="$t('account.login.email.placeholder')" | ||
| validation="required|email" | ||
| /> | ||
| </FormKit> | ||
|
|
||
| <template v-if="formSent"> | ||
| <p> | ||
| {{ $t('account.recoverPassword.request.successMessage') }} | ||
| </p> | ||
| <NuxtLink | ||
| to="/account/login" | ||
| class="mt-4 flex w-full justify-center rounded bg-brand-primary px-4 py-2 text-white hover:bg-brand-primary-dark" | ||
| > | ||
| {{ $t('account.recoverPassword.request.loginButtonLabel') }} | ||
| </NuxtLink> | ||
| </template> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import type { operations } from '@shopware/api-client/api-types'; | ||
|
|
||
| export function usePasswordRecovery() { | ||
| const { apiClient } = useShopwareContext(); | ||
|
|
||
| async function recoverPassword( | ||
| recoverPasswordData: operations['recoveryPassword post /account/recovery-password-confirm']['body'], | ||
| ) { | ||
| const response = await apiClient.invoke('recoveryPassword post /account/recovery-password-confirm', { | ||
| body: recoverPasswordData, | ||
| }); | ||
| return response.data; | ||
| } | ||
|
|
||
| async function isRecoveryHashValid(recoverHash: { hash: string }) { | ||
| const response = await apiClient.invoke( | ||
| 'getCustomerRecoveryIsExpired post /account/customer-recovery-is-expired', | ||
| { | ||
| body: recoverHash, | ||
| }, | ||
| ); | ||
| return response.data; | ||
| } | ||
|
|
||
| return { | ||
| isRecoveryHashValid, | ||
| recoverPassword, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.