chore: improve SignIn & SignUp styling

.changeset/yummy-suns-trade.md

@@ -0,0 +1,6 @@
+---
+'@asgardeo/react': patch
+'@asgardeo/i18n': patch
+---
+
+improve `SignIn` & `SignUp` styling

packages/i18n/src/translations/en-US.ts

@@ -54,7 +54,7 @@ const translations: I18nTranslations = {
 
   /* Base Sign In */
   'signin.title': 'Sign In',
-  'signin.subtitle': 'Enter your credentials to continue.',
+  'signin.subtitle': 'Welcome back! Please sign in to continue.',
 
   /* Base Sign Up */
   'signup.title': 'Sign Up',

packages/react/src/components/presentation/SignIn/BaseSignIn.styles.ts

@@ -44,11 +44,12 @@ const useStyles = (theme: Theme, colorScheme: string) => {
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
 
     const header = css`
       gap: 0;
+      align-items: center;
     `;
 
     const title = css`
@@ -57,7 +58,7 @@ const useStyles = (theme: Theme, colorScheme: string) => {
     `;
 
     const subtitle = css`
-      margin-top: calc(${theme.vars.spacing.unit} * 1);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
       color: ${theme.vars.colors.text.secondary};
     `;
 
@@ -144,7 +145,7 @@ const useStyles = (theme: Theme, colorScheme: string) => {
     `;
 
     const flowMessagesContainer = css`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
 
     const flowMessageItem = css`

packages/react/src/components/presentation/SignIn/SignIn.tsx

@@ -70,7 +70,7 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', children, ...rest}
    * Initialize the authentication flow.
    */
   const handleInitialize = async (): Promise<EmbeddedSignInFlowInitiateResponse> => {
-    return await signIn({response_mode: 'direct'}) as EmbeddedSignInFlowInitiateResponse;
+    return (await signIn({response_mode: 'direct'})) as EmbeddedSignInFlowInitiateResponse;
   };
 
   /**
@@ -80,7 +80,7 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', children, ...rest}
     payload: EmbeddedSignInFlowHandleRequestPayload,
     request: Request,
   ): Promise<EmbeddedSignInFlowHandleResponse> => {
-    return await signIn(payload, request) as EmbeddedSignInFlowHandleResponse;
+    return (await signIn(payload, request)) as EmbeddedSignInFlowHandleResponse;
   };
 
   /**
@@ -123,6 +123,9 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', children, ...rest}
       onSuccess={handleSuccess}
       className={className}
       size={size}
+      showLogo={true}
+      showSubtitle={true}
+      showTitle={true}
       {...rest}
     />
   );

packages/react/src/components/presentation/SignIn/component-driven/BaseSignIn.tsx

@@ -31,6 +31,7 @@ import useFlow from '../../../../contexts/Flow/useFlow';
 import FlowProvider from '../../../../contexts/Flow/FlowProvider';
 import {FormField, useForm} from '../../../../hooks/useForm';
 import {renderSignInComponents} from './SignInOptionFactory';
+import {extractErrorMessage} from '../../SignUp/transformer';
 
 /**
  * Render props for custom UI rendering
@@ -61,11 +62,6 @@ export interface BaseSignInRenderProps {
    */
   isLoading: boolean;
 
-  /**
-   * Current error message
-   */
-  error: string | null;
-
   /**
    * Flow components
    */
@@ -174,6 +170,21 @@ export interface BaseSignInProps {
    * Render props function for custom UI
    */
   children?: (props: BaseSignInRenderProps) => ReactNode;
+
+  /**
+   * Whether to show the title.
+   */
+  showTitle?: boolean;
+
+  /**
+   * Whether to show the subtitle.
+   */
+  showSubtitle?: boolean;
+
+  /**
+   * Whether to show the logo.
+   */
+  showLogo?: boolean;
 }
 
 /**
@@ -225,17 +236,19 @@ export interface BaseSignInProps {
  * </BaseSignIn>
  * ```
  */
-const BaseSignIn: FC<BaseSignInProps> = props => {
+const BaseSignIn: FC<BaseSignInProps> = ({showLogo = true, ...rest}: BaseSignInProps): ReactElement => {
   const {theme} = useTheme();
   const styles = useStyles(theme, theme.vars.colors.text.primary);
 
   return (
     <div>
-      <div className={styles.logoContainer}>
-        <Logo size="large" />
-      </div>
+      {showLogo && (
+        <div className={styles.logoContainer}>
+          <Logo size="large" />
+        </div>
+      )}
       <FlowProvider>
-        <BaseSignInContent {...props} />
+        <BaseSignInContent showLogo={showLogo} {...rest} />
       </FlowProvider>
     </div>
   );
@@ -257,17 +270,37 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   variant = 'outlined',
   isLoading: externalIsLoading,
   children,
+  showTitle = true,
+  showSubtitle = true,
+  showLogo = true,
 }) => {
   const {theme} = useTheme();
   const {t} = useTranslation();
-  const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages} = useFlow();
+  const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages} = useFlow();
   const styles = useStyles(theme, theme.vars.colors.text.primary);
 
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
 
   const isLoading: boolean = externalIsLoading || isSubmitting;
 
+  /**
+   * Handle error responses and extract meaningful error messages
+   * Uses the transformer's extractErrorMessage function for consistency
+   */
+  const handleError = useCallback(
+    (error: any) => {
+      const errorMessage: string = extractErrorMessage(error, t);
+
+      // Clear existing messages and add the error message
+      clearMessages();
+      addMessage({
+        type: 'error',
+        message: errorMessage,
+      });
+    },
+    [t, addMessage, clearMessages],
+  );
+
   /**
    * Extract form fields from flow components
    */
@@ -351,7 +384,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     }
 
     setIsSubmitting(true);
-    setError(null);
+    clearMessages();
 
     try {
       // Filter out empty or undefined input values
@@ -380,8 +413,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
       await onSubmit?.(payload, component);
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : t('errors.sign.in.flow.failure');
-      setError(errorMessage);
+      handleError(err);
       onError?.(err as Error);
     } finally {
       setIsSubmitting(false);
@@ -435,7 +467,6 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         handleInputChange,
         {
           buttonClassName: buttonClasses,
-          error,
           inputClassName: inputClasses,
           onInputBlur: handleInputBlur,
           onSubmit: handleSubmit,
@@ -451,7 +482,6 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
       isLoading,
       size,
       variant,
-      error,
       inputClasses,
       buttonClasses,
       handleInputBlur,
@@ -467,7 +497,6 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
       touched: touchedFields,
       isValid: isFormValid,
       isLoading,
-      error,
       components,
       handleInputChange,
       handleSubmit,
@@ -507,13 +536,21 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
   return (
     <Card className={cx(containerClasses, styles.card)} variant={variant}>
-      <Card.Header className={styles.header}>
-        <Card.Title level={2} className={styles.title}>
-          {flowTitle || t('signin.title')}
-        </Card.Title>
-        <Typography variant="body1" className={styles.subtitle}>
-          {flowSubtitle || t('signin.subtitle')}
-        </Typography>
+      {(showTitle || showSubtitle) && (
+        <Card.Header className={styles.header}>
+          {showTitle && (
+            <Card.Title level={2} className={styles.title}>
+              {flowTitle || t('signin.title')}
+            </Card.Title>
+          )}
+          {showSubtitle && (
+            <Typography variant="body1" className={styles.subtitle}>
+              {flowSubtitle || t('signin.subtitle')}
+            </Typography>
+          )}
+        </Card.Header>
+      )}
+      <Card.Content>
         {flowMessages && flowMessages.length > 0 && (
           <div className={styles.flowMessagesContainer}>
             {flowMessages.map((message, index) => (
@@ -527,16 +564,6 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
             ))}
           </div>
         )}
-      </Card.Header>
-
-      <Card.Content>
-        {error && (
-          <Alert variant="error" className={cx(styles.errorContainer, errorClasses)}>
-            <Alert.Title>{t('errors.title')}</Alert.Title>
-            <Alert.Description>{error}</Alert.Description>
-          </Alert>
-        )}
-
         <div className={styles.contentContainer}>{components && renderComponents(components)}</div>
       </Card.Content>
     </Card>

packages/react/src/components/presentation/SignIn/component-driven/SignInOptionFactory.tsx

@@ -71,7 +71,6 @@ const createSignInComponentFromFlow = (
   onInputChange: (name: string, value: string) => void,
   options: {
     buttonClassName?: string;
-    error?: string | null;
     inputClassName?: string;
     key?: string | number;
     onInputBlur?: (name: string) => void;
@@ -216,7 +215,6 @@ export const renderSignInComponents = (
   onInputChange: (name: string, value: string) => void,
   options?: {
     buttonClassName?: string;
-    error?: string | null;
     inputClassName?: string;
     onInputBlur?: (name: string) => void;
     onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;