mirror of https://github.com/nocodb/nocodb
Braks
2 years ago
committed by
GitHub
16 changed files with 274 additions and 173 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