refactor(auth-ui): polish device authorization, signup, and SSO screens

- Replace custom lists with datum-ui Badge components for requested scopes in device authorization.
- Add a BackLink and refine the description and layout on the signup method page.
- Inline the active login name in the SSO linked accounts card description and adjust icon fallbacks.

Author: yahyafakhroji

app/modules/i18n/locales/en.po

@@ -109,7 +109,7 @@ msgstr "Authorize"
 msgid "Authorize device"
 msgstr "Authorize device"
 
-#: app/routes/sso/index.tsx:175
+#: app/routes/sso/index.tsx:186
 msgid "Available accounts to link"
 msgstr "Available accounts to link"
 
@@ -136,7 +136,7 @@ msgid "Change your password"
 msgstr "Change your password"
 
 #: app/routes/password/reset.tsx:97
-#: app/routes/signup/method.tsx:221
+#: app/routes/signup/method.tsx:222
 #: app/routes/signup/password.tsx:145
 msgid "Check your email"
 msgstr "Check your email"
@@ -174,7 +174,7 @@ msgstr "Confirm new password"
 msgid "Confirm password"
 msgstr "Confirm password"
 
-#: app/routes/sso/index.tsx:130
+#: app/routes/sso/index.tsx:137
 msgid "Connected accounts"
 msgstr "Connected accounts"
 
@@ -230,7 +230,7 @@ msgstr "Email code"
 
 #: app/routes/login/index.tsx:390
 #: app/routes/login/method.tsx:125
-#: app/routes/signup/method.tsx:264
+#: app/routes/signup/method.tsx:265
 msgid "Email me a sign-in link"
 msgstr "Email me a sign-in link"
 
@@ -299,7 +299,7 @@ msgstr "Enter your password"
 msgid "Enter your SMS code"
 msgstr "Enter your SMS code"
 
-#: app/routes/signup/method.tsx:243
+#: app/routes/signup/method.tsx:244
 msgid "Finish creating your account"
 msgstr "Finish creating your account"
 
@@ -449,10 +449,6 @@ msgstr "Register passkey"
 msgid "Registration is currently unavailable. Please contact your administrator."
 msgstr "Registration is currently unavailable. Please contact your administrator."
 
-#: app/routes/device/authorize.tsx:115
-msgid "Requested permissions"
-msgstr "Requested permissions"
-
 #: app/routes/login/verify/email.tsx:95
 #: app/routes/login/verify/sms.tsx:92
 #: app/routes/verify/index.tsx:200
@@ -492,7 +488,7 @@ msgstr "Service temporarily unavailable. Please try again."
 msgid "Session active"
 msgstr "Session active"
 
-#: app/routes/signup/method.tsx:300
+#: app/routes/signup/method.tsx:301
 #: app/routes/signup/password.tsx:160
 msgid "Set a password"
 msgstr "Set a password"
@@ -549,7 +545,7 @@ msgstr "Sign in with LDAP"
 #: app/routes/logout/index.tsx:48
 #: app/routes/logout/index.tsx:54
 #: app/routes/signed-in.tsx:99
-#: app/routes/sso/index.tsx:201
+#: app/routes/sso/index.tsx:212
 msgid "Sign out"
 msgstr "Sign out"
 
@@ -651,11 +647,11 @@ msgstr "Too many attempts. Please wait a moment and try again."
 msgid "Two-factor verification"
 msgstr "Two-factor verification"
 
-#: app/routes/sso/index.tsx:161
+#: app/routes/sso/index.tsx:172
 msgid "Unlink"
 msgstr "Unlink"
 
-#: app/routes/signup/method.tsx:282
+#: app/routes/signup/method.tsx:283
 msgid "Use a passkey"
 msgstr "Use a passkey"
 
@@ -736,7 +732,7 @@ msgstr "We've sent a password reset link to <0>{0}</0>"
 
 #. placeholder {0}: (actionData as { email: string }).email
 #. placeholder {0}: actionData.email
-#: app/routes/signup/method.tsx:223
+#: app/routes/signup/method.tsx:224
 #: app/routes/signup/password.tsx:147
 msgid "We've sent a verification link to <0>{0}</0>"
 msgstr "We've sent a verification link to <0>{0}</0>"
@@ -754,9 +750,10 @@ msgstr "You are signed in"
 msgid "You are signed in as <0>{loginName}</0>"
 msgstr "You are signed in as <0>{loginName}</0>"
 
-#: app/routes/sso/index.tsx:122
-msgid "You can link multiple accounts to your Datum account."
-msgstr "You can link multiple accounts to your Datum account."
+#. placeholder {0}: loginName && ( <> Logged in as <span className="font-medium">{loginName}</span>. </> )
+#: app/routes/sso/index.tsx:123
+msgid "You can link multiple accounts to your Datum account. {0}"
+msgstr "You can link multiple accounts to your Datum account. {0}"
 
 #: app/routes/signed-in.tsx:72
 msgid "You can now close this window and return to the device where you started."
@@ -782,6 +779,10 @@ msgstr "You must be signed in to link an external account."
 msgid "You'll need to set a password to complete your signup."
 msgstr "You'll need to set a password to complete your signup."
 
+#: app/routes/signup/method.tsx:246
+msgid "You're almost done! <0>{loginName}</0>"
+msgstr "You're almost done! <0>{loginName}</0>"
+
 #: app/routes/logout/success.tsx:12
 msgid "You've been signed out"
 msgstr "You've been signed out"

app/routes/device/authorize.tsx

@@ -10,8 +10,9 @@ import {
 import { paths } from '@/routes/paths';
 import { providerForRequest } from '@/server/auth-context.server';
 import { getCsrfToken, assertCsrf } from '@/server/csrf';
+import { Badge } from '@datum-cloud/datum-ui/badge';
 import { Button, LinkButton } from '@datum-cloud/datum-ui/button';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   data,
   redirect,
@@ -61,7 +62,6 @@ export default function DeviceAuthorize() {
   const loaderData = useLoaderData<typeof loader>();
   const actionData = useActionData<typeof action>();
   const navigation = useNavigation();
-  const { t } = useLingui();
   const isSubmitting = navigation.state === 'submitting';
 
   // Inline-only error surface for the deny/authorize ACTION error: it renders in a
@@ -112,13 +112,13 @@ export default function DeviceAuthorize() {
           </p>
         )}
         {scope.length > 0 && (
-          <ul aria-label={t`Requested permissions`} className="flex flex-col gap-2">
+          <div className="flex flex-wrap items-center gap-3">
             {scope.map((s) => (
-              <li key={s} className="rounded-md border px-3 py-2 text-sm break-all">
+              <Badge type="quaternary" key={s}>
                 {s}
-              </li>
+              </Badge>
             ))}
-          </ul>
+          </div>
         )}
         <RRForm method="post" className="flex w-full flex-col gap-4">
           <input type="hidden" name="csrf" value={csrfToken} />

app/routes/signup/method.tsx

@@ -1,6 +1,7 @@
 import { AuthCard } from '@/components/auth-card/auth-card';
 import { AuthCeremony } from '@/components/auth-ceremony/auth-ceremony';
 import { AuthFormFields } from '@/components/auth-form/auth-form-fields';
+import { BackLink } from '@/components/back-link/back-link';
 import { useAuthActionError } from '@/hooks/use-auth-action-error';
 import { readSessions, serializeSessions } from '@/modules/auth/session/cookie';
 import { genericCheckYourEmail } from '@/resources/schemas/check-your-email.schema';
@@ -242,12 +243,12 @@ export default function SignupMethod() {
     <AuthCeremony
       title={<Trans>Finish creating your account</Trans>}
       description={
-        <>
-          {firstName} {lastName} · {loginName}
-        </>
+        <Trans>
+          You're almost done! <span className="font-medium">{loginName}</span>
+        </Trans>
       }
       error={errorMessage}>
-      <div className="flex flex-col gap-3">
+      <div className="flex w-full flex-col gap-3">
         {/* Email-link (passwordless) — always shown when email entry is allowed */}
         {view.showEmailLink ? (
           <RRForm method="post">
@@ -302,6 +303,8 @@ export default function SignupMethod() {
           </RRForm>
         ) : null}
       </div>
+
+      <BackLink />
     </AuthCeremony>
   );
 }

app/routes/sso/index.tsx

@@ -119,10 +119,17 @@ export default function SsoPage() {
   return (
     <AuthCard
       title={<Trans>Linked accounts</Trans>}
-      description={<Trans>You can link multiple accounts to your Datum account.</Trans>}>
+      description={
+        <Trans>
+          You can link multiple accounts to your Datum account.{' '}
+          {loginName && (
+            <>
+              Logged in as <span className="font-medium">{loginName}</span>.
+            </>
+          )}
+        </Trans>
+      }>
       <div className="flex w-full flex-col gap-4">
-        {loginName ? <p className="text-foreground text-center text-sm">{loginName}</p> : null}
-
         {/* Linked IdPs */}
         {linked.length > 0 ? (
           <section className="flex flex-col gap-3">
@@ -137,8 +144,12 @@ export default function SsoPage() {
                   {/* 755-M6: provider icon + name badge (joined from the active-IdP list).
                       Falls back to the bare IdP user name / id when the provider is no longer
                       active. Icon is non-interactive — no nested-interactive a11y violation. */}
-                  <span className="flex min-w-0 items-center gap-2">
-                    <IdpIcon type={link.type} name={link.name} logoUrl={link.logoUrl} />
+                  <span className="flex min-w-0 items-center gap-3">
+                    <IdpIcon
+                      type={link.type}
+                      name={link.name || link.idpUserName || link.idpId}
+                      logoUrl={link.logoUrl}
+                    />
                     <span className="flex min-w-0 flex-col">
                       <span className="text-foreground truncate text-sm">
                         {link.name || link.idpUserName || link.idpId}