-
Notifications
You must be signed in to change notification settings - Fork 95
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2577 from NationalSecurityAgency/t#2490/reset_pas…
…sword T#2490/reset password
- Loading branch information
Showing
11 changed files
with
454 additions
and
8 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
108 changes: 108 additions & 0 deletions
108
dashboard-prime/src/components/access/RequestPasswordReset.vue
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,108 @@ | ||
| <script setup> | ||
| import { computed, onMounted, ref, watch } from 'vue'; | ||
| import { useRouter } from 'vue-router'; | ||
| import { useForm } from 'vee-validate'; | ||
| import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'; | ||
| import * as yup from 'yup'; | ||
| import Logo1 from '@/components/brand/Logo1.vue'; | ||
| import AccessService from '@/components/access/AccessService.js'; | ||
| import { string } from 'yup'; | ||
| const router = useRouter() | ||
| const appConfig = useAppConfig() | ||
| const username = ref(''); | ||
| const serverError = ref(''); | ||
| onMounted(() => { | ||
| AccessService.isResetSupported().then((response) => { | ||
| if (response === false) { | ||
| router.replace({ name: 'ResetNotSupportedPage' }); | ||
| } | ||
| }); | ||
| }) | ||
| watch(username, (newVal, oldVal) => { | ||
| if (newVal.trim() !== oldVal.trim()) { | ||
| serverError.value = ''; | ||
| } | ||
| }) | ||
| const disabled = computed(() => { | ||
| return !meta.value.valid || serverError.value !== ''; | ||
| }) | ||
| const schema = yup.object().shape({ | ||
| username: string().required().email().min(appConfig.minUsernameLength).label('Email Address'), | ||
| }) | ||
| const { values, meta, handleSubmit, validate, errors } = useForm({ | ||
| validationSchema: schema, | ||
| initialValues: { | ||
| username: '', | ||
| } | ||
| }) | ||
| const reset = (username) => { | ||
| AccessService.requestPasswordReset(username).then((response) => { | ||
| serverError.value = ''; | ||
| if (response.success) { | ||
| router.push({ name: 'RequestResetConfirmation', params: { email: username } }); | ||
| } | ||
| }).catch((err) => { | ||
| if (err && err.response && err.response.data && err.response.data.explanation) { | ||
| serverError.value = err.response.data.explanation; | ||
| } else { | ||
| serverError.value = `Password reset request failed due to ${err.response.status}`; | ||
| } | ||
| }); | ||
| } | ||
| const resetPassword = handleSubmit((values) => { | ||
| reset(values.username) | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div class="grid justify-content-center text-center"> | ||
| <div class="col md:col-8 lg:col-7 xl:col-4 mt-3" style="min-width: 20rem;"> | ||
| <div class="mt-5"> | ||
| <logo1 /> | ||
| <div class="text-3xl mt-4 text-primary">Reset Password For SkillTree Dashboard</div> | ||
| </div> | ||
| <Card class="mt-3 text-left"> | ||
| <template #content> | ||
| <div class="w-full"> | ||
| <SkillsTextInput | ||
| label="Email Address" | ||
| size="small" | ||
| :is-required="true" | ||
| @keyup.enter="resetPassword" | ||
| placeholder="Enter email" | ||
| v-model="username" | ||
| data-cy="forgotPasswordEmail" | ||
| id="username" | ||
| name="username"/> | ||
| </div> | ||
| <small class="text-danger text-red-500" v-if="serverError" data-cy="resetFailedError" role="alert">{{ serverError }}</small> | ||
| <div class="flex justify-content-end mt-2"> | ||
| <SkillsButton variant="outline-success" | ||
| label="Reset Password" | ||
| icon="fas fa-arrow-circle-right" | ||
| @click="resetPassword" | ||
| :disabled="disabled" | ||
| data-cy="resetPassword"> | ||
| </SkillsButton> | ||
| </div> | ||
| </template> | ||
| </Card> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| </style> |
58 changes: 58 additions & 0 deletions
58
dashboard-prime/src/components/access/RequestResetConfirmation.vue
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,58 @@ | ||
| <script setup> | ||
| import { onMounted, ref, watch } from 'vue'; | ||
| import { useRoute, useRouter } from 'vue-router'; | ||
| import Logo1 from '@/components/brand/Logo1.vue'; | ||
| const router = useRouter(); | ||
| const route = useRoute(); | ||
| const email = ref(route.params.email); | ||
| const timer = ref(-1); | ||
| onMounted(() => { | ||
| timer.value = 10; | ||
| }); | ||
| watch(timer, (value) => { | ||
| if (value > 0) { | ||
| setTimeout(() => { | ||
| timer.value -= 1; | ||
| }, 1000); | ||
| } else { | ||
| router.push({ name: 'Login' }); | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div class="grid justify-content-center text-center" data-cy="resetRequestConfirmation"> | ||
| <div class="col md:col-8 lg:col-7 xl:col-4 mt-3" style="min-width: 20rem;"> | ||
| <div class="mt-5"> | ||
| <logo1 /> | ||
| <div class="text-3xl mt-4 text-primary">Reset Password For SkillTree Dashboard</div> | ||
| </div> | ||
| <Card class="mt-3 text-left"> | ||
| <template #content> | ||
| <p>A password reset link has been sent to <span class="text-primary font-weight-bold">{{ email }}</span>. You will be forwarded to the login page in {{ timer }} seconds.</p> | ||
| <div class="flex justify-content-center mt-2"> | ||
| <router-link :to="{ name: 'Login' }"> | ||
| <SkillsButton icon="fas fa-sign-in-alt" | ||
| outlined | ||
| size="small" | ||
| data-cy="loginPage" | ||
| id="loginPageBtn" | ||
| label="Return to Login Page"> | ||
| </SkillsButton> | ||
| </router-link> | ||
| </div> | ||
| </template> | ||
| </Card> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| </style> |
56 changes: 56 additions & 0 deletions
56
dashboard-prime/src/components/access/ResetConfirmation.vue
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,56 @@ | ||
| <script setup> | ||
| import { onMounted, ref, watch } from 'vue'; | ||
| import { useRouter } from 'vue-router'; | ||
| import Logo1 from '@/components/brand/Logo1.vue'; | ||
| const router = useRouter(); | ||
| const timer = ref(-1); | ||
| onMounted(() => { | ||
| timer.value = 10; | ||
| }); | ||
| watch(timer, (value) => { | ||
| if (value > 0) { | ||
| setTimeout(() => { | ||
| timer.value -= 1; | ||
| }, 1000); | ||
| } else { | ||
| router.push({ name: 'Login' }); | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div class="grid justify-content-center text-center" data-cy="resetConfirmation"> | ||
| <div class="col md:col-8 lg:col-7 xl:col-4 mt-3" style="min-width: 20rem;"> | ||
| <div class="mt-5"> | ||
| <logo1 /> | ||
| <div class="text-3xl mt-4 text-primary">Password Successfully Reset!</div> | ||
| </div> | ||
| <Card class="mt-3 text-left"> | ||
| <template #content> | ||
| <p>Your password has been successfully reset! You will be forwarded to the login page in {{ timer }} seconds.</p> | ||
| <div class="flex justify-content-center mt-2"> | ||
| <router-link :to="{ name: 'Login' }"> | ||
| <SkillsButton icon="fas fa-sign-in-alt" | ||
| outlined | ||
| size="small" | ||
| data-cy="loginPage" | ||
| id="loginPageBtn" | ||
| label="Return to Login Page"> | ||
| </SkillsButton> | ||
| </router-link> | ||
| </div> | ||
| </template> | ||
| </Card> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| </style> |
26 changes: 26 additions & 0 deletions
26
dashboard-prime/src/components/access/ResetNotSupportedPage.vue
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,26 @@ | ||
| <script setup> | ||
| import Logo1 from '@/components/brand/Logo1.vue'; | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div class="grid justify-content-center text-center" data-cy="resetNotSupported"> | ||
| <div class="col md:col-8 lg:col-7 xl:col-5 mt-3" style="min-width: 20rem;"> | ||
| <div class="mt-5"> | ||
| <logo1 /> | ||
| <div class="text-3xl mt-4 text-primary">Password Reset not currently enabled</div> | ||
| </div> | ||
| <Card class="mt-3 text-left"> | ||
| <template #content> | ||
| Password Reset is not currently enabled on this system. Please contact your SkillTree administrator. Return to the <router-link :to="{ name: 'Login' }" data-cy="loginPage">login page</router-link>? | ||
| </template> | ||
| </Card> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| </style> |
Oops, something went wrong.