chore(ui): Add global errors to signin steps (#3746)

clerk · Jul 18, 2024 · d6cf9a3 · d6cf9a3
1 parent aa0efec
commit d6cf9a3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/.changeset/happy-pants-sleep.md b/.changeset/happy-pants-sleep.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -72,6 +72,12 @@ export function SignInComponentLoaded() {
                   </Card.Header>
 
                   <Card.Body>
+                    <Common.GlobalError>
+                      {({ message }) => {
+                        return <Alert>{message}</Alert>;
+                      }}
+                    </Common.GlobalError>
+
                     <Connections disabled={isGlobalLoading} />
 
                     {hasConnection && hasIdentifier ? <Seperator>{t('dividerText')}</Seperator> : null}
@@ -223,6 +229,12 @@ export function SignInComponentLoaded() {
                       </Card.Description>
                     </Card.Header>
                     <Card.Body>
+                      <Common.GlobalError>
+                        {({ message }) => {
+                          return <Alert>{message}</Alert>;
+                        }}
+                      </Common.GlobalError>
+
                       <PasswordField
                         alternativeFieldTrigger={
                           isPasswordResetSupported ? (
@@ -485,6 +497,11 @@ export function SignInComponentLoaded() {
                     <Card.Description>{t('signIn.alternativeMethods.subtitle')}</Card.Description>
                   </Card.Header>
                   <Card.Body>
+                    <Common.GlobalError>
+                      {({ message }) => {
+                        return <Alert>{message}</Alert>;
+                      }}
+                    </Common.GlobalError>
                     <div className='flex flex-col gap-2'>
                       <Connections disabled={isGlobalLoading} />
 
@@ -551,6 +568,11 @@ export function SignInComponentLoaded() {
                     <Card.Title>{t('signIn.forgotPasswordAlternativeMethods.title')}</Card.Title>
                   </Card.Header>
                   <Card.Body>
+                    <Common.GlobalError>
+                      {({ message }) => {
+                        return <Alert>{message}</Alert>;
+                      }}
+                    </Common.GlobalError>
                     <div className='flex flex-col justify-center gap-4'>
                       <SignIn.SupportedStrategy
                         name='reset_password_email_code'
@@ -631,6 +653,11 @@ export function SignInComponentLoaded() {
                     <Card.Title>{t('signIn.resetPassword.title')}</Card.Title>
                   </Card.Header>
                   <Card.Body>
+                    <Common.GlobalError>
+                      {({ message }) => {
+                        return <Alert>{message}</Alert>;
+                      }}
+                    </Common.GlobalError>
                     <div className='flex flex-col justify-center gap-4'>
                       <PasswordField
                         name='password'