chore(device): guide the user during device auth

  The flow is now:
  1. Consent page: button says "Allow & Sign In" + notice "You'll need to sign in to complete the authorization."
  2. Login page: info banner "Sign in to authorize the device and complete the connection."

Author: gianarb

apps/login/locales/en.json

@@ -22,6 +22,7 @@
   "loginname": {
     "title": "Welcome",
     "description": "Choose your login method:",
+    "deviceAuthNotice": "Sign in to authorize the device and complete the connection.",
     "register": "Create account",
     "submit": "Continue",
     "notRegistered": "Not registered?",
@@ -266,7 +267,8 @@
       "title": "{appName} would like to connect",
       "description": "{appName} will have access to:",
       "disclaimer": "By clicking Allow, you allow {appName} and Zitadel to use your information in accordance with their respective terms of service and privacy policies. You can revoke this access at any time.",
-      "submit": "Allow",
+      "signInNotice": "You'll need to sign in to complete the authorization.",
+      "submit": "Allow & Sign In",
       "deny": "Deny"
     },
     "scope": {

apps/login/src/app/(main)/(illustration)/loginname/page.tsx

@@ -1,3 +1,4 @@
+import { Alert, AlertType } from "@/components/alert";
 import { SignInWithIdp } from "@/components/sign-in-with-idp";
 import { Translated } from "@/components/translated";
 import { UsernameForm } from "@/components/username-form";
@@ -59,6 +60,8 @@ export default async function Page(props: {
 
   const lastUsedIdpId = await getLastUsedIdpId();
 
+  const isDeviceAuth = requestId?.startsWith("device_");
+
   return (
     <>
       <h1>
@@ -68,6 +71,12 @@ export default async function Page(props: {
         <Translated i18nKey="description" namespace="loginname" />
       </p>
 
+      {isDeviceAuth && (
+        <Alert type={AlertType.INFO}>
+          <Translated i18nKey="deviceAuthNotice" namespace="loginname" />
+        </Alert>
+      )}
+
       {loginSettings?.allowUsernamePassword && (
         <>
           <UsernameForm

apps/login/src/components/consent.tsx

@@ -81,6 +81,10 @@ export function ConsentScreen({
         />
       </p>
 
+      <p className="ztdl-p text-xs text-left font-medium">
+        <Translated i18nKey="request.signInNotice" namespace="device" />
+      </p>
+
       {error && (
         <div className="py-4">
           <Alert>{error}</Alert>