Add avatars, profiles, and auth flows

resources/js/pages/Profile.jsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react'
+import { Container } from 'react-bootstrap'
+import { useParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { getUserProfile } from '../api/client'
+
+export default function Profile() {
+  const { id } = useParams()
+  const { t } = useTranslation()
+  const [profile, setProfile] = useState(null)
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    setError('')
+
+    getUserProfile(id)
+      .then((data) => {
+        if (!active) return
+        setProfile(data)
+      })
+      .catch((err) => {
+        if (!active) return
+        setError(err.message)
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+
+    return () => {
+      active = false
+    }
+  }, [id])
+
+  return (
+    <Container fluid className="py-5 bb-portal-shell">
+      <div className="bb-portal-card">
+        <div className="bb-portal-card-title">{t('profile.title')}</div>
+        {loading && <p className="bb-muted">{t('profile.loading')}</p>}
+        {error && <p className="text-danger">{error}</p>}
+        {profile && (
+          <div className="bb-profile">
+            <div className="bb-profile-avatar">
+              {profile.avatar_url ? (
+                <img src={profile.avatar_url} alt="" />
+              ) : (
+                <i className="bi bi-person" aria-hidden="true" />
+              )}
+            </div>
+            <div className="bb-profile-meta">
+              <div className="bb-profile-name">{profile.name}</div>
+              {profile.created_at && (
+                <div className="bb-muted">
+                  {t('profile.registered')} {profile.created_at.slice(0, 10)}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </Container>
+  )
+}