mirror of https://github.com/nocodb/nocodb
Wing-Kam Wong
2 years ago
15 changed files with 274 additions and 175 deletions
@ -0,0 +1,158 @@
|
||||
<script lang="ts" setup> |
||||
import { message, navigateTo, reactive, ref, useApi, useGlobal, useI18n, useRouter } from '#imports' |
||||
|
||||
const router = useRouter() |
||||
|
||||
const { api, error, isLoading } = useApi({ useGlobalInstance: true }) |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const { signOut } = useGlobal() |
||||
|
||||
const formValidator = ref() |
||||
|
||||
const form = reactive({ |
||||
currentPassword: '', |
||||
password: '', |
||||
passwordRepeat: '', |
||||
}) |
||||
|
||||
const formRules = { |
||||
currentPassword: [ |
||||
// Current password is required |
||||
{ required: true, message: t('msg.error.signUpRules.passwdRequired') }, |
||||
], |
||||
password: [ |
||||
// Password is required |
||||
{ required: true, message: t('msg.error.signUpRules.passwdRequired') }, |
||||
{ min: 8, message: t('msg.error.signUpRules.passwdLength') }, |
||||
], |
||||
passwordRepeat: [ |
||||
// PasswordRepeat is required |
||||
{ required: true, message: t('msg.error.signUpRules.passwdRequired') }, |
||||
// Passwords match |
||||
{ |
||||
validator: (_: unknown, _v: string) => { |
||||
return new Promise((resolve, reject) => { |
||||
if (form.password === form.passwordRepeat) return resolve(true) |
||||
reject(new Error(t('msg.error.signUpRules.passwdMismatch'))) |
||||
}) |
||||
}, |
||||
message: t('msg.error.signUpRules.passwdMismatch'), |
||||
}, |
||||
], |
||||
} |
||||
|
||||
const passwordChange = async () => { |
||||
const valid = formValidator.value.validate() |
||||
if (!valid) return |
||||
|
||||
error.value = null |
||||
|
||||
await api.auth.passwordChange({ |
||||
currentPassword: form.currentPassword, |
||||
newPassword: form.password, |
||||
}) |
||||
|
||||
message.success(t('msg.success.passwordChanged')) |
||||
|
||||
signOut() |
||||
|
||||
navigateTo('/signin') |
||||
} |
||||
|
||||
const resetError = () => { |
||||
if (error.value) error.value = null |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)"> |
||||
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" /> |
||||
|
||||
<div |
||||
class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer" |
||||
@click="() => router.back()" |
||||
> |
||||
<MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" /> |
||||
</div> |
||||
|
||||
<h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.changePwd') }}</h1> |
||||
|
||||
<a-form |
||||
ref="formValidator" |
||||
data-cy="nc-user-settings-form" |
||||
layout="vertical" |
||||
class="change-password lg:max-w-3/4 w-full !mx-auto" |
||||
no-style |
||||
:model="form" |
||||
@finish="passwordChange" |
||||
> |
||||
<Transition name="layout"> |
||||
<div v-if="error" class="mx-auto mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1"> |
||||
<div data-cy="nc-user-settings-form__error" class="flex items-center gap-2 justify-center"> |
||||
<MaterialSymbolsWarning /> |
||||
{{ error }} |
||||
</div> |
||||
</div> |
||||
</Transition> |
||||
|
||||
<a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.currentPassword"> |
||||
<a-input-password |
||||
v-model:value="form.currentPassword" |
||||
data-cy="nc-user-settings-form__current-password" |
||||
size="large" |
||||
class="password" |
||||
:placeholder="$t('placeholder.password.current')" |
||||
@focus="resetError" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<a-form-item :label="$t('placeholder.password.new')" name="password" :rules="formRules.password"> |
||||
<a-input-password |
||||
v-model:value="form.password" |
||||
data-cy="nc-user-settings-form__new-password" |
||||
size="large" |
||||
class="password" |
||||
:placeholder="$t('placeholder.password.new')" |
||||
@focus="resetError" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<a-form-item :label="$t('placeholder.password.confirm')" name="passwordRepeat" :rules="formRules.passwordRepeat"> |
||||
<a-input-password |
||||
v-model:value="form.passwordRepeat" |
||||
data-cy="nc-user-settings-form__new-password-repeat" |
||||
size="large" |
||||
class="password" |
||||
:placeholder="$t('placeholder.password.confirm')" |
||||
@focus="resetError" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<div class="text-center"> |
||||
<button data-cy="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit"> |
||||
<span class="flex items-center gap-2"> |
||||
<MdiKeyChange /> |
||||
{{ $t('activity.changePwd') }} |
||||
</span> |
||||
</button> |
||||
</div> |
||||
</a-form> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
.change-password { |
||||
.ant-input-affix-wrapper, |
||||
.ant-input { |
||||
@apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded; |
||||
} |
||||
|
||||
.password { |
||||
input { |
||||
@apply !border-none !m-0; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,142 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { message, navigateTo, reactive, ref, useApi, useGlobal, useI18n } from '#imports' |
||||
|
||||
const { api, error } = useApi({ useGlobalInstance: true }) |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const { signOut } = useGlobal() |
||||
|
||||
const formValidator = ref() |
||||
|
||||
const form = reactive({ |
||||
currentPassword: '', |
||||
password: '', |
||||
passwordRepeat: '', |
||||
}) |
||||
|
||||
const formRules = { |
||||
currentPassword: [ |
||||
// Current password is required |
||||
{ required: true, message: t('msg.error.signUpRules.passwdRequired') }, |
||||
], |
||||
password: [ |
||||
// Password is required |
||||
{ required: true, message: t('msg.error.signUpRules.passwdRequired') }, |
||||
{ min: 8, message: t('msg.error.signUpRules.passwdLength') }, |
||||
], |
||||
passwordRepeat: [ |
||||
// PasswordRepeat is required |
||||
{ required: true, message: t('msg.error.signUpRules.passwdRequired') }, |
||||
// Passwords match |
||||
{ |
||||
validator: (_: unknown, _v: string) => { |
||||
return new Promise((resolve, reject) => { |
||||
if (form.password === form.passwordRepeat) return resolve(true) |
||||
reject(new Error(t('msg.error.signUpRules.passwdMismatch'))) |
||||
}) |
||||
}, |
||||
message: t('msg.error.signUpRules.passwdMismatch'), |
||||
}, |
||||
], |
||||
} |
||||
|
||||
const passwordChange = async () => { |
||||
const valid = formValidator.value.validate() |
||||
if (!valid) return |
||||
|
||||
error.value = null |
||||
|
||||
await api.auth.passwordChange({ |
||||
currentPassword: form.currentPassword, |
||||
newPassword: form.password, |
||||
}) |
||||
|
||||
message.success(t('msg.success.passwordChanged')) |
||||
|
||||
signOut() |
||||
|
||||
navigateTo('/signin') |
||||
} |
||||
|
||||
const resetError = () => { |
||||
if (error.value) error.value = null |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<NuxtLayout> |
||||
<div class="mt-4 w-1/2 mx-auto"> |
||||
<a-form ref="formValidator" layout="vertical" :model="form" class="change-password" @finish="passwordChange"> |
||||
<div class="md:relative flex flex-col gap-2 w-full h-full p-8 w-full"> |
||||
<h1 class="prose-2xl font-bold mb-4">{{ $t('activity.changePwd') }}</h1> |
||||
|
||||
<Transition name="layout"> |
||||
<div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1"> |
||||
<div class="flex items-center gap-2 justify-center"> |
||||
<MaterialSymbolsWarning /> |
||||
{{ error }} |
||||
</div> |
||||
</div> |
||||
</Transition> |
||||
|
||||
<a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.currentPassword"> |
||||
<a-input-password |
||||
v-model:value="form.currentPassword" |
||||
size="large" |
||||
class="password" |
||||
:placeholder="$t('placeholder.password.current')" |
||||
@focus="resetError" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<a-form-item :label="$t('placeholder.password.new')" name="password" :rules="formRules.password"> |
||||
<a-input-password |
||||
v-model:value="form.password" |
||||
size="large" |
||||
class="password" |
||||
:placeholder="$t('placeholder.password.new')" |
||||
@focus="resetError" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<a-form-item :label="$t('placeholder.password.confirm')" name="passwordRepeat" :rules="formRules.passwordRepeat"> |
||||
<a-input-password |
||||
v-model:value="form.passwordRepeat" |
||||
size="large" |
||||
class="password" |
||||
:placeholder="$t('placeholder.password.confirm')" |
||||
@focus="resetError" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<div class="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full"> |
||||
<button class="scaling-btn bg-opacity-100" type="submit"> |
||||
<span class="flex items-center gap-2"> |
||||
<MdiKeyChange /> |
||||
{{ $t('activity.changePwd') }} |
||||
</span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</a-form> |
||||
</div> |
||||
</NuxtLayout> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
.change-password { |
||||
@apply border-1 shadow-md rounded; |
||||
|
||||
.ant-input-affix-wrapper, |
||||
.ant-input { |
||||
@apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded; |
||||
} |
||||
|
||||
.password { |
||||
input { |
||||
@apply !border-none; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,63 @@
|
||||
import { isTestSuiteActive, roles } from "../../support/page_objects/projectConstants"; |
||||
|
||||
|
||||
const newPassword = `${roles.owner.credentials.password}1`; |
||||
const currentPasswordIsWrong = "Current password is wrong"; |
||||
const passwordsNotMatching = "Passwords do not match"; |
||||
|
||||
export const genTest = (apiType, dbType) => { |
||||
if (!isTestSuiteActive(apiType, dbType)) return; |
||||
|
||||
describe('User settings', () => { |
||||
it('Visit user settings page', () => { |
||||
cy.get("[data-cy='nc-noco-brand-icon']").click(); |
||||
|
||||
cy.get("[data-cy='nc-menu-accounts']").click(); |
||||
cy.get("[data-cy='nc-menu-accounts__user-settings']").click(); |
||||
|
||||
cy.get("[data-cy='nc-user-settings-form']").should("exist"); |
||||
}); |
||||
|
||||
describe('Update password and verify user settings form validation', () => { |
||||
beforeEach(() => { |
||||
cy.get("[data-cy='nc-user-settings-form__current-password']").clear(); |
||||
cy.get("[data-cy='nc-user-settings-form__new-password']").clear(); |
||||
cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").clear(); |
||||
}) |
||||
|
||||
it('Verifies current password', () => { |
||||
cy.get("[data-cy='nc-user-settings-form__current-password']").type('WrongPassword'); |
||||
cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword); |
||||
cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(newPassword); |
||||
cy.get("[data-cy='nc-user-settings-form__submit']").click(); |
||||
cy.get("[data-cy='nc-user-settings-form__error']").should("exist").should("contain", currentPasswordIsWrong); |
||||
}); |
||||
|
||||
it('Verifies passwords match', () => { |
||||
cy.get("[data-cy='nc-user-settings-form__current-password']").type(roles.owner.credentials.password); |
||||
cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword); |
||||
cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(`${newPassword}NotMatching`); |
||||
cy.get("[data-cy='nc-user-settings-form__submit']").click(); |
||||
cy.get(".ant-form-item-explain-error").should("exist").should("contain", passwordsNotMatching); |
||||
}); |
||||
|
||||
it('Changes user password & signs out', () => { |
||||
cy.get("[data-cy='nc-user-settings-form__current-password']").type(roles.owner.credentials.password); |
||||
cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword); |
||||
cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(newPassword); |
||||
cy.get("[data-cy='nc-user-settings-form__submit']").click(); |
||||
cy.get("[data-cy='nc-user-settings-form__submit']").should("not.exist"); |
||||
}); |
||||
}) |
||||
|
||||
describe('Sign in with new password', () => { |
||||
it('Verifies new password works', () => { |
||||
cy.get("[data-cy='nc-form-signin']").should("exist"); |
||||
cy.get("[data-cy='nc-form-signin__email']").type(roles.owner.credentials.username); |
||||
cy.get("[data-cy='nc-form-signin__password']").type(newPassword); |
||||
cy.get("[data-cy='nc-form-signin__submit']").click(); |
||||
cy.get("[data-cy='nc-menu-accounts']").should("exist"); |
||||
}) |
||||
}) |
||||
}); |
||||
}; |
||||
Loading…
Reference in new issue