show device code on device authorize screen

messages/en-US.json

@@ -3741,6 +3741,7 @@
     "deviceCodeVerifying": "Verifying device authorization...",
     "signedInAs": "Signed in as",
     "deviceCodeEnterPrompt": "Enter the code displayed on the device",
+    "deviceCodeConfirmPrompt": "Confirm this matches the code on your device",
     "continue": "Continue",
     "deviceUnknownLocation": "Unknown location",
     "deviceAuthorizationRequested": "This authorization was requested from {location} on {date}. Make sure you trust this device as it will get access to the account.",

src/components/DeviceAuthConfirmation.tsx

@@ -25,6 +25,7 @@ type DeviceAuthMetadata = {
 
 type DeviceAuthConfirmationProps = {
     metadata: DeviceAuthMetadata;
+    code: string;
     onConfirm: () => void;
     onCancel: () => void;
     loading: boolean;
@@ -32,6 +33,7 @@ type DeviceAuthConfirmationProps = {
 
 export function DeviceAuthConfirmation({
     metadata,
+    code,
     onConfirm,
     onCancel,
     loading
@@ -87,9 +89,18 @@ export function DeviceAuthConfirmation({
                 </Alert>
 
                 <div className="space-y-3">
+                    <div className="flex flex-col items-center gap-1 p-3 border rounded-md text-center">
+                        <p className="text-sm text-muted-foreground">
+                            {t("deviceCodeConfirmPrompt")}
+                        </p>
+                        <p className="text-2xl font-mono font-semibold tracking-widest">
+                            {code}
+                        </p>
+                    </div>
+
                     <div className="flex items-start gap-3 p-3 border rounded-md">
-                        <Monitor className="h-5 w-5 mt-0.5" />
-                        <div className="flex-1">
+                        <Monitor className="h-5 w-5 shrink-0 mt-0.5" />
+                        <div className="flex-1 min-w-0">
                             <p className="text-sm font-medium">
                                 {metadata.applicationName}
                             </p>
@@ -112,11 +123,11 @@ export function DeviceAuthConfirmation({
                         </p>
                         <div className="space-y-1 pl-4">
                             <div className="flex items-center gap-2 text-sm">
-                                <CheckCircle2 className="h-4 w-4 text-green-500" />
+                                <CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
                                 <span>{t("deviceFullAccess")}</span>
                             </div>
                             <div className="flex items-center gap-2 text-sm">
-                                <CheckCircle2 className="h-4 w-4 text-green-500" />
+                                <CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
                                 <span>{t("deviceOrganizationsAccess")}</span>
                             </div>
                         </div>

src/components/DeviceLoginForm.tsx

@@ -268,6 +268,7 @@ export default function DeviceLoginForm({
         return (
             <DeviceAuthConfirmation
                 metadata={metadata}
+                code={code}
                 onConfirm={onConfirm}
                 onCancel={onCancel}
                 loading={loading}
@@ -319,7 +320,9 @@ export default function DeviceLoginForm({
                                         <div className="flex justify-center">
                                             <InputOTP
                                                 maxLength={8}
-                                                pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+                                                pattern={
+                                                    REGEXP_ONLY_DIGITS_AND_CHARS
+                                                }
                                                 {...field}
                                                 value={field.value
                                                     .replace(/-/g, "")
@@ -338,7 +341,9 @@ export default function DeviceLoginForm({
                                                             )
                                                             .toUpperCase()
                                                             .slice(0, 8);
-                                                    field.onChange(cleanedValue);
+                                                    field.onChange(
+                                                        cleanedValue
+                                                    );
                                                 }}
                                                 onChange={(value) => {
                                                     // Strip hyphens and convert to uppercase