Add avatars, profiles, and auth flows

resources/js/pages/Login.jsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 export default function Login() {
   const { login } = useAuth()
   const navigate = useNavigate()
-  const [email, setEmail] = useState('')
+  const [loginValue, setLoginValue] = useState('')
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
@@ -18,7 +18,7 @@ export default function Login() {
     setError('')
     setLoading(true)
     try {
-      await login(email, password)
+      await login(loginValue, password)
       navigate('/')
     } catch (err) {
       setError(err.message)
@@ -28,7 +28,7 @@ export default function Login() {
   }
 
   return (
-    <Container className="py-5">
+    <Container fluid className="py-5">
       <Card className="bb-card mx-auto" style={{ maxWidth: '480px' }}>
         <Card.Body>
           <Card.Title className="mb-3">{t('auth.login_title')}</Card.Title>
@@ -36,11 +36,12 @@ export default function Login() {
           {error && <p className="text-danger">{error}</p>}
           <Form onSubmit={handleSubmit}>
             <Form.Group className="mb-3">
-              <Form.Label>{t('form.email')}</Form.Label>
+              <Form.Label>{t('auth.login_identifier')}</Form.Label>
               <Form.Control
-                type="email"
-                value={email}
-                onChange={(event) => setEmail(event.target.value)}
+                type="text"
+                value={loginValue}
+                onChange={(event) => setLoginValue(event.target.value)}
+                placeholder={t('auth.login_placeholder')}
                 required
               />
             </Form.Group>