Add avatar icon as login property w/ default.

marmelab · Jul 1, 2024 · 6f10f1c · 6f10f1c
1 parent 3a9de0c
commit 6f10f1c
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/packages/ra-ui-materialui/src/auth/Login.tsx b/packages/ra-ui-materialui/src/auth/Login.tsx
@@ -27,8 +27,13 @@ import { LoginForm as DefaultLoginForm } from './LoginForm';
  *     );
  */
 export const Login = (props: LoginProps) => {
-    const { children = defaultLoginForm, backgroundImage, ...rest } = props;
-    const containerRef = useRef<HTMLDivElement>(null);
+    const {
+        children = defaultLoginForm,
+        backgroundImage,
+        avatarIcon = defaultAvatarIcon,
+        ...rest
+    } = props;
+    const containerRef = useRef<HTMLDivElement>();
     let backgroundImageLoaded = false;
     const checkAuth = useCheckAuth();
     const navigate = useNavigate();
@@ -68,9 +73,7 @@ export const Login = (props: LoginProps) => {
         <Root {...rest} ref={containerRef}>
             <Card className={LoginClasses.card}>
                 <div className={LoginClasses.avatar}>
-                    <Avatar className={LoginClasses.icon}>
-                        <LockIcon />
-                    </Avatar>
+                    <Avatar className={LoginClasses.icon}>{avatarIcon}</Avatar>
                 </div>
                 {children}
             </Card>
@@ -80,7 +83,10 @@ export const Login = (props: LoginProps) => {
 
 const defaultLoginForm = <DefaultLoginForm />;
 
+const defaultAvatarIcon = <LockIcon />;
+
 export interface LoginProps extends HtmlHTMLAttributes<HTMLDivElement> {
+    avatarIcon?: ReactNode;
     backgroundImage?: string;
     children?: ReactNode;
     className?: string;