diff options
-rw-r--r-- | src/locales/en-US.json | 10 | ||||
-rw-r--r-- | src/router/index.js | 8 | ||||
-rw-r--r-- | src/views/ChangePassword/ChangePassword.vue | 115 | ||||
-rw-r--r-- | src/views/ChangePassword/index.js | 2 |
4 files changed, 135 insertions, 0 deletions
diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 2a418040..76d9aaf1 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -35,6 +35,7 @@ "invalidValue": "Invalid value", "lengthMustBeBetween": "Length must be between %{min} – %{max} characters", "mustBeAtLeast": "Must be at least %{value}", + "passwordsDoNotMatch": "Passwords do not match", "required": "Required", "search": "Search", "selectAnOption": "Select an option", @@ -93,6 +94,7 @@ "sslCertificates": "@:appPageTitle.sslCertificates" }, "appPageTitle": { + "changePassword": "Change password", "dateTimeSettings": "Date and time settings", "eventLogs": "Event logs", "firmware": "Firmware", @@ -113,6 +115,14 @@ "sslCertificates": "SSL Certificates", "unauthorized": "Unauthorized" }, + "pageChangePassword": { + "changePassword": "Change password", + "changePasswordAlertMessage": "The password is expired and must be changed.", + "confirmNewPassword": "Confirm new password", + "goBack": "Go back", + "newPassword": "New password", + "username": "Username" + }, "pageDateTimeSettings": { "alert": { "message": "To change how date and time are displayed (either UTC or browser offset) throughout the application, visit ", diff --git a/src/router/index.js b/src/router/index.js index 3d8c646a..8fa42c89 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -158,6 +158,14 @@ const routes = [ meta: { title: 'appPageTitle.login' } + }, + { + path: '/change-password', + name: 'change-password', + component: () => import('@/views/ChangePassword'), + meta: { + title: 'appPageTitle.changePassword' + } } ] }, diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue new file mode 100644 index 00000000..0b1b6897 --- /dev/null +++ b/src/views/ChangePassword/ChangePassword.vue @@ -0,0 +1,115 @@ +<template> + <div class="change-password-container mx-auto ml-md-5 mb-3"> + <alert variant="danger" class="mb-4"> + <p>{{ $t('pageChangePassword.changePasswordAlertMessage') }}</p> + </alert> + <dl> + <dt>{{ $t('pageChangePassword.username') }}</dt> + <dd>{{ username }}</dd> + </dl> + <b-form novalidate @submit.prevent="changePassword"> + <b-form-group + label-for="password" + :label="$t('pageChangePassword.newPassword')" + > + <input-password-toggle> + <b-form-input + id="password" + v-model="form.password" + autofocus="autofocus" + type="password" + :state="getValidationState($v.form.password)" + @blur="$v.form.password.$touch()" + > + </b-form-input> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.password.required"> + {{ $t('global.form.fieldRequired') }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + <b-form-group + label-for="password-confirm" + :label="$t('pageChangePassword.confirmNewPassword')" + > + <input-password-toggle> + <b-form-input + id="password-confirm" + v-model="form.passwordConfirm" + type="password" + :state="getValidationState($v.form.passwordConfirm)" + @blur="$v.form.passwordConfirm.$touch()" + > + </b-form-input> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.passwordConfirm.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-else-if="!$v.form.passwordConfirm.sameAsPassword"> + {{ $t('global.form.passwordsDoNotMatch') }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + <div class="text-right"> + <b-button type="button" variant="link" to="login" @click="goBack"> + {{ $t('pageChangePassword.goBack') }} + </b-button> + <b-button type="submit" variant="primary"> + {{ $t('pageChangePassword.changePassword') }} + </b-button> + </div> + </b-form> + </div> +</template> + +<script> +import { required, sameAs } from 'vuelidate/lib/validators'; +import Alert from '@/components/Global/Alert'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin'; +import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; + +export default { + name: 'ChangePassword', + components: { Alert, InputPasswordToggle }, + mixins: [VuelidateMixin], + data() { + return { + form: { + password: null, + passwordConfirm: null + }, + username: this.$store.getters['global/username'] + }; + }, + validations() { + return { + form: { + password: { required }, + passwordConfirm: { + required, + sameAsPassword: sameAs('password') + } + } + }; + }, + methods: { + goBack() { + // Remove temporary session created if navigating back + // to the Login page + this.$store.commit('authentication/logout'); + }, + changePassword() { + // Should make PATCH request with new password + // then reroute to Overview page + } + } +}; +</script> + +<style lang="scss" scoped> +.change-password-container { + max-width: 360px; +} +</style> diff --git a/src/views/ChangePassword/index.js b/src/views/ChangePassword/index.js new file mode 100644 index 00000000..9de0af42 --- /dev/null +++ b/src/views/ChangePassword/index.js @@ -0,0 +1,2 @@ +import ChangePassword from './ChangePassword.vue'; +export default ChangePassword; |