Made password repeat on sign up configurable (#273)

* add noPasswordRepeat props

* fix sign up schema

* fixed small problems

---------

Co-authored-by: Zai Shi <zaishi00@outlook.com>
This commit is contained in:
Manoj Kumar 2024-09-25 23:14:00 +05:30 committed by GitHub
parent 24a9f0b86c
commit d14804d0b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 37 additions and 18 deletions

View File

@ -14,6 +14,7 @@ import { OAuthButtonGroup } from '../components/oauth-button-group';
import { useTranslation } from '../lib/translations';
export function AuthPage(props: {
noPasswordRepeat?: boolean,
fullPage?: boolean,
type: 'sign-in' | 'sign-up',
automaticRedirect?: boolean,
@ -92,11 +93,11 @@ export function AuthPage(props: {
<MagicLinkSignIn/>
</TabsContent>
<TabsContent value='password'>
{props.type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>}
{props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>}
</TabsContent>
</Tabs>
) : project.config.credentialEnabled ? (
props.type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>
props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>
) : project.config.magicLinkEnabled ? (
<MagicLinkSignIn/>
) : null}

View File

@ -1,6 +1,17 @@
'use client';
import { AuthPage } from './auth-page';
export function SignUp(props: { fullPage?: boolean, automaticRedirect?: boolean, extraInfo?: React.ReactNode }) {
return <AuthPage fullPage={!!props.fullPage} type='sign-up' automaticRedirect={!!props.automaticRedirect} extraInfo={props.extraInfo} />;
export function SignUp(props: {
fullPage?: boolean,
automaticRedirect?: boolean,
noPasswordRepeat?: boolean,
extraInfo?: React.ReactNode,
}) {
return <AuthPage
fullPage={!!props.fullPage}
type='sign-up'
automaticRedirect={!!props.automaticRedirect}
noPasswordRepeat={props.noPasswordRepeat}
extraInfo={props.extraInfo}
/>;
}

View File

@ -12,7 +12,7 @@ import { useStackApp } from "..";
import { useTranslation } from "../lib/translations";
import { FormWarningText } from "./elements/form-warning";
export function CredentialSignUp() {
export function CredentialSignUp(props: { noPasswordRepeat?: boolean }) {
const { t } = useTranslation();
const schema = yupObject({
@ -28,7 +28,9 @@ export function CredentialSignUp() {
}
}
}),
passwordRepeat: yupString().nullable().oneOf([yup.ref('password'), "", null], t('Passwords do not match')).required(t('Please repeat your password'))
...(!props.noPasswordRepeat && {
passwordRepeat: yupString().nullable().oneOf([yup.ref('password'), "", null], t('Passwords do not match')).required(t('Please repeat your password'))
})
});
const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({
@ -74,18 +76,23 @@ export function CredentialSignUp() {
}}
/>
<FormWarningText text={errors.password?.message?.toString()} />
<Label htmlFor="repeat-password" className="mt-4 mb-1">Repeat Password</Label>
<PasswordInput
id="repeat-password"
{...registerPasswordRepeat}
onChange={(e) => {
clearErrors('password');
clearErrors('passwordRepeat');
runAsynchronously(registerPasswordRepeat.onChange(e));
}}
/>
<FormWarningText text={errors.passwordRepeat?.message?.toString()} />
{
!props.noPasswordRepeat && (
<>
<Label htmlFor="repeat-password" className="mt-4 mb-1">Repeat Password</Label>
<PasswordInput
id="repeat-password"
{...registerPasswordRepeat}
onChange={(e) => {
clearErrors('password');
clearErrors('passwordRepeat');
runAsynchronously(registerPasswordRepeat.onChange(e));
}}
/>
<FormWarningText text={errors.passwordRepeat?.message?.toString()} />
</>
)
}
<Button type="submit" className="mt-6" loading={loading}>
Sign Up