improve signup container

packages/features/auth/src/components/auth-layout.tsx

@@ -7,9 +7,8 @@ export function AuthLayoutShell({
   return (
     <div
       className={
-        'sm:py-auto flex flex-col items-center justify-center py-6' +
-        ' bg-background lg:bg-muted/30 gap-y-10 lg:gap-y-8' +
-        ' animate-in fade-in slide-in-from-top-16 zoom-in-95 duration-1000'
+        'sm:py-auto flex flex-col items-center justify-center py-6 h-screen' +
+        ' bg-background lg:bg-muted/30 gap-y-10 lg:gap-y-8'
       }
     >
       {Logo ? <Logo /> : null}

packages/features/auth/src/components/oauth-providers.tsx

@@ -113,12 +113,16 @@ export const OauthProviders: React.FC<{
                   );
                 }}
               >
-                <Trans
-                  i18nKey={'auth:signInWithProvider'}
-                  values={{
-                    provider: getProviderName(provider),
-                  }}
-                />
+                {provider === 'keycloak' ? (
+                  <Trans i18nKey={'auth:signInWithKeycloak'} />
+                ) : (
+                  <Trans
+                    i18nKey={'auth:signInWithProvider'}
+                    values={{
+                      provider: getProviderName(provider),
+                    }}
+                  />
+                )}
               </AuthProviderButton>
             );
           })}

packages/features/auth/src/components/password-sign-up-container.tsx

@@ -10,9 +10,18 @@ import { useCaptchaToken } from '../captcha/client';
 import { usePasswordSignUpFlow } from '../hooks/use-sign-up-flow';
 import { AuthErrorAlert } from './auth-error-alert';
 import { PasswordSignUpForm } from './password-sign-up-form';
+import { Spinner } from '@kit/ui/makerkit/spinner';
 
 interface EmailPasswordSignUpContainerProps {
-  displayTermsCheckbox?: boolean;
+  authConfig: {
+    providers: {
+      password: boolean;
+      magicLink: boolean;
+      oAuth: string[];
+    };
+    displayTermsCheckbox: boolean | undefined;
+    isMailerAutoconfirmEnabled: boolean;
+  };
   defaultValues?: {
     email: string;
   };
@@ -21,10 +30,10 @@ interface EmailPasswordSignUpContainerProps {
 }
 
 export function EmailPasswordSignUpContainer({
+  authConfig,
   defaultValues,
   onSignUp,
   emailRedirectTo,
-  displayTermsCheckbox,
 }: EmailPasswordSignUpContainerProps) {
   const { captchaToken, resetCaptchaToken } = useCaptchaToken();
 
@@ -43,7 +52,12 @@ export function EmailPasswordSignUpContainer({
   return (
     <>
       <If condition={showVerifyEmailAlert}>
-        <SuccessAlert />
+        {authConfig.isMailerAutoconfirmEnabled ? (
+          <div className="flex justify-center">
+            <Spinner />
+          </div>
+        ) : <SuccessAlert />
+        }
       </If>
 
       <If condition={!showVerifyEmailAlert}>
@@ -53,7 +67,7 @@ export function EmailPasswordSignUpContainer({
           onSubmit={onSignupRequested}
           loading={loading}
           defaultValues={defaultValues}
-          displayTermsCheckbox={displayTermsCheckbox}
+          displayTermsCheckbox={authConfig.displayTermsCheckbox}
         />
       </If>
     </>

packages/features/auth/src/components/sign-up-methods-container.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type { Provider } from '@supabase/supabase-js';
+import { useRouter } from 'next/navigation';
 
 import { isBrowser } from '@kit/shared/utils';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -19,15 +20,20 @@ export function SignUpMethodsContainer(props: {
     updateAccount: string;
   };
 
-  providers: {
-    password: boolean;
-    magicLink: boolean;
-    oAuth: Provider[];
+  authConfig: {
+    providers: {
+      password: boolean;
+      magicLink: boolean;
+      oAuth: Provider[];
+    };
+    displayTermsCheckbox: boolean | undefined;
+    isMailerAutoconfirmEnabled: boolean;
   };
 
-  displayTermsCheckbox?: boolean;
   inviteToken?: string;
 }) {
+  const router = useRouter();
+
   const redirectUrl = getCallbackUrl(props);
   const defaultValues = getDefaultValues();
 
@@ -37,26 +43,33 @@ export function SignUpMethodsContainer(props: {
         <InviteAlert />
       </If>
 
-      <If condition={props.providers.password}>
+      <If condition={props.authConfig.providers.password}>
         <EmailPasswordSignUpContainer
           emailRedirectTo={props.paths.callback}
           defaultValues={defaultValues}
-          displayTermsCheckbox={props.displayTermsCheckbox}
-          //onSignUp={() => redirect(redirectUrl)}
+          authConfig={props.authConfig}
+          onSignUp={() => {
+            if (!props.authConfig.isMailerAutoconfirmEnabled) {
+              return;
+            }
+            setTimeout(() => {
+              router.replace(props.paths.updateAccount)
+            }, 2_500);
+          }}
         />
       </If>
 
-      <If condition={props.providers.magicLink}>
+      <If condition={props.authConfig.providers.magicLink}>
         <MagicLinkAuthContainer
           inviteToken={props.inviteToken}
           redirectUrl={redirectUrl}
           shouldCreateUser={true}
           defaultValues={defaultValues}
-          displayTermsCheckbox={props.displayTermsCheckbox}
+          displayTermsCheckbox={props.authConfig.displayTermsCheckbox}
         />
       </If>
 
-      <If condition={props.providers.oAuth.length}>
+      <If condition={props.authConfig.providers.oAuth.length}>
         <div className="relative">
           <div className="absolute inset-0 flex items-center">
             <Separator />
@@ -70,7 +83,7 @@ export function SignUpMethodsContainer(props: {
         </div>
 
         <OauthProviders
-          enabledProviders={props.providers.oAuth}
+          enabledProviders={props.authConfig.providers.oAuth}
           inviteToken={props.inviteToken}
           shouldCreateUser={true}
           paths={{