From d14804d0b4e68b835ad1b1174b9cd2db762047aa Mon Sep 17 00:00:00 2001
From: Manoj Kumar <95513071+Iamsidar07@users.noreply.github.com>
Date: Wed, 25 Sep 2024 23:14:00 +0530
Subject: [PATCH] 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>
---
 .../stack/src/components-page/auth-page.tsx   |  5 +--
 .../stack/src/components-page/sign-up.tsx     | 15 ++++++--
 .../src/components/credential-sign-up.tsx     | 35 +++++++++++--------
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/packages/stack/src/components-page/auth-page.tsx b/packages/stack/src/components-page/auth-page.tsx
index 39e8704e8..367c7e4d2 100644
--- a/packages/stack/src/components-page/auth-page.tsx
+++ b/packages/stack/src/components-page/auth-page.tsx
@@ -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}
diff --git a/packages/stack/src/components-page/sign-up.tsx b/packages/stack/src/components-page/sign-up.tsx
index 48c80fdd7..2fd0b83f3 100644
--- a/packages/stack/src/components-page/sign-up.tsx
+++ b/packages/stack/src/components-page/sign-up.tsx
@@ -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}
+  />;
 }
diff --git a/packages/stack/src/components/credential-sign-up.tsx b/packages/stack/src/components/credential-sign-up.tsx
index 7d0db193f..542b2a367 100644
--- a/packages/stack/src/components/credential-sign-up.tsx
+++ b/packages/stack/src/components/credential-sign-up.tsx
@@ -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