i18n, deny consent, handle error

apps/login/locales/de.json

@@ -187,7 +187,26 @@
     "allSetup": "Sie haben bereits einen Authentifikator eingerichtet!",
     "linkWithIDP": "oder verknüpfe mit einem Identitätsanbieter"
   },
+  "device": {
+    "usercode": {
+      "title": "Gerätecode",
+      "description": "Geben Sie den Code ein.",
+      "submit": "Weiter"
+    },
+    "request": {
+      "title": "{appName} möchte eine Verbindung herstellen:",
+      "description": "Durch Klicken auf Zulassen erlauben Sie dieser App und Zitadel, Ihre Informationen gemäß ihren jeweiligen Nutzungsbedingungen und Datenschutzrichtlinien zu verwenden. Sie können diesen Zugriff jederzeit widerrufen.",
+      "submit": "Zulassen",
+      "deny": "Ablehnen"
+    },
+    "scope": {
+      "email": "Zugriff auf Ihre E-Mail-Adresse.",
+      "profile": "Zugriff auf Ihre vollständigen Profilinformationen.",
+      "offline_access": "Erlauben Sie den Offline-Zugriff auf Ihr Konto."
+    }
+  },
   "error": {
+    "noDeviceRequest": " Es wurde keine Geräteanforderung gefunden. Bitte überprüfen Sie die URL.",
     "unknownContext": "Der Kontext des Benutzers konnte nicht ermittelt werden. Stellen Sie sicher, dass Sie zuerst den Benutzernamen eingeben oder einen loginName als Suchparameter angeben.",
     "sessionExpired": "Ihre aktuelle Sitzung ist abgelaufen. Bitte melden Sie sich erneut an.",
     "failedLoading": "Daten konnten nicht geladen werden. Bitte versuchen Sie es erneut.",

apps/login/locales/en.json

@@ -196,7 +196,8 @@
     "request": {
       "title": "{appName} would like to connect:",
       "description": "By clicking Allow, you allow this app 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"
+      "submit": "Allow",
+      "deny": "Deny"
     },
     "scope": {
       "email": "Access your email address.",
@@ -205,6 +206,7 @@
     }
   },
   "error": {
+    "noDeviceRequest": "No device request found.",
     "unknownContext": "Could not get the context of the user. Make sure to enter the username first or provide a loginName as searchParam.",
     "sessionExpired": "Your current session has expired. Please login again.",
     "failedLoading": "Failed to load data. Please try again.",

apps/login/locales/es.json

@@ -187,7 +187,26 @@
     "allSetup": "¡Ya has configurado un autenticador!",
     "linkWithIDP": "o vincúlalo con un proveedor de identidad"
   },
+  "device": {
+    "usercode": {
+      "title": "Código del dispositivo",
+      "description": "Introduce el código.",
+      "submit": "Continuar"
+    },
+    "request": {
+      "title": "{appName} desea conectarse:",
+      "description": "Al hacer clic en Permitir, autorizas a esta aplicación y a Zitadel a usar tu información de acuerdo con sus respectivos términos de servicio y políticas de privacidad. Puedes revocar este acceso en cualquier momento.",
+      "submit": "Permitir",
+      "deny": "Denegar"
+    },
+    "scope": {
+      "email": "Accede a tu dirección de correo electrónico.",
+      "profile": "Accede a la información completa de tu perfil.",
+      "offline_access": "Permitir acceso sin conexión a tu cuenta."
+    }
+  },
   "error": {
+    "noDeviceRequest": "No se encontró ninguna solicitud de dispositivo.",
     "unknownContext": "No se pudo obtener el contexto del usuario. Asegúrate de ingresar primero el nombre de usuario o proporcionar un loginName como parámetro de búsqueda.",
     "sessionExpired": "Tu sesión actual ha expirado. Por favor, inicia sesión de nuevo.",
     "failedLoading": "No se pudieron cargar los datos. Por favor, inténtalo de nuevo.",

apps/login/locales/it.json

@@ -187,7 +187,26 @@
     "allSetup": "Hai già configurato un autenticatore!",
     "linkWithIDP": "o collega con un Identity Provider"
   },
+  "device": {
+    "usercode": {
+      "title": "Codice dispositivo",
+      "description": "Inserisci il codice.",
+      "submit": "Continua"
+    },
+    "request": {
+      "title": "{appName} desidera connettersi:",
+      "description": "Cliccando su Consenti, autorizzi questa app e Zitadel a utilizzare le tue informazioni in conformità con i rispettivi termini di servizio e politiche sulla privacy. Puoi revocare questo accesso in qualsiasi momento.",
+      "submit": "Consenti",
+      "deny": "Nega"
+    },
+    "scope": {
+      "email": "Accedi al tuo indirizzo email.",
+      "profile": "Accedi alle informazioni complete del tuo profilo.",
+      "offline_access": "Consenti l'accesso offline al tuo account."
+    }
+  },
   "error": {
+    "noDeviceRequest": "Nessuna richiesta di dispositivo trovata.",
     "unknownContext": "Impossibile ottenere il contesto dell'utente. Assicurati di inserire prima il nome utente o di fornire un loginName come parametro di ricerca.",
     "sessionExpired": "La tua sessione attuale è scaduta. Effettua nuovamente l'accesso.",
     "failedLoading": "Impossibile caricare i dati. Riprova.",

apps/login/locales/pl.json

@@ -187,7 +187,26 @@
     "allSetup": "Już skonfigurowałeś metodę uwierzytelniania!",
     "linkWithIDP": "lub połącz z dostawcą tożsamości"
   },
+  "device": {
+    "usercode": {
+      "title": "Kod urządzenia",
+      "description": "Wprowadź kod.",
+      "submit": "Kontynuuj"
+    },
+    "request": {
+      "title": "{appName} chce się połączyć:",
+      "description": "Klikając Zezwól, pozwalasz tej aplikacji i Zitadel na korzystanie z Twoich informacji zgodnie z ich odpowiednimi warunkami użytkowania i politykami prywatności. Możesz cofnąć ten dostęp w dowolnym momencie.",
+      "submit": "Zezwól",
+      "deny": "Odmów"
+    },
+    "scope": {
+      "email": "Uzyskaj dostęp do swojego adresu e-mail.",
+      "profile": "Uzyskaj dostęp do pełnych informacji o swoim profilu.",
+      "offline_access": "Zezwól na dostęp offline do swojego konta."
+    }
+  },
   "error": {
+    "noDeviceRequest": "Nie znaleziono żądania urządzenia.",
     "unknownContext": "Nie udało się pobrać kontekstu użytkownika. Upewnij się, że najpierw wprowadziłeś nazwę użytkownika lub podałeś login jako parametr wyszukiwania.",
     "sessionExpired": "Twoja sesja wygasła. Zaloguj się ponownie.",
     "failedLoading": "Nie udało się załadować danych. Spróbuj ponownie.",

apps/login/locales/ru.json

@@ -187,7 +187,26 @@
     "allSetup": "Аутентификатор уже настроен!",
     "linkWithIDP": "или привязать через Identity Provider"
   },
+  "device": {
+    "usercode": {
+      "title": "Код устройства",
+      "description": "Введите код.",
+      "submit": "Продолжить"
+    },
+    "request": {
+      "title": "{appName} хочет подключиться:",
+      "description": "Нажимая «Разрешить», вы разрешаете этому приложению и Zitadel использовать вашу информацию в соответствии с их условиями использования и политиками конфиденциальности. Вы можете отозвать этот доступ в любое время.",
+      "submit": "Разрешить",
+      "deny": "Запретить"
+    },
+    "scope": {
+      "email": "Доступ к вашему адресу электронной почты.",
+      "profile": "Доступ к полной информации вашего профиля.",
+      "offline_access": "Разрешить офлайн-доступ к вашему аккаунту."
+    }
+  },
   "error": {
+    "noDeviceRequest": "Не найдена ни одна заявка на устройство.",
     "unknownContext": "Не удалось получить контекст пользователя. Укажите имя пользователя или loginName в параметрах поиска.",
     "sessionExpired": "Ваша сессия истекла. Войдите снова.",
     "failedLoading": "Ошибка загрузки данных. Попробуйте ещё раз.",

apps/login/locales/zh.json

@@ -187,7 +187,26 @@
     "allSetup": "您已经设置好了一个认证器！",
     "linkWithIDP": "或将其与身份提供者关联"
   },
+  "device": {
+    "usercode": {
+      "title": "设备代码",
+      "description": "输入代码。",
+      "submit": "继续"
+    },
+    "request": {
+      "title": "{appName} 想要连接：",
+      "description": "点击“允许”即表示您允许此应用程序和 Zitadel 根据其各自的服务条款和隐私政策使用您的信息。您可以随时撤销此访问权限。",
+      "submit": "允许",
+      "deny": "拒绝"
+    },
+    "scope": {
+      "email": "访问您的电子邮件地址。",
+      "profile": "访问您的完整个人资料信息。",
+      "offline_access": "允许离线访问您的账户。"
+    }
+  },
   "error": {
+    "noDeviceRequest": "没有找到设备请求。",
     "unknownContext": "无法获取用户的上下文。请先输入用户名或提供 loginName 作为搜索参数。",
     "sessionExpired": "当前会话已过期，请重新登录。",
     "failedLoading": "加载数据失败，请再试一次。",

apps/login/src/app/(login)/device/consent/page.tsx

@@ -33,7 +33,9 @@ export default async function Page(props: {
     userCode,
   });
 
-  console.log(deviceAuthorizationRequest);
+  if (!deviceAuthorizationRequest) {
+    return <div>{t("error.noDeviceRequest")}</div>;
+  }
 
   let defaultOrganization;
   if (!organization) {
@@ -71,7 +73,8 @@ export default async function Page(props: {
         </h1>
 
         <ConsentScreen
-          scope={deviceAuthorizationRequest?.scope}
+          deviceAuthorizationRequestId={deviceAuthorizationRequest?.id}
+          scope={deviceAuthorizationRequest.scope}
           nextUrl={`/loginname?` + params}
         />
       </div>

apps/login/src/components/consent.tsx

@@ -1,15 +1,43 @@
+import { denyDeviceAuthorization } from "@/lib/server/oidc";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Alert } from "./alert";
 import { Button, ButtonVariants } from "./button";
+import { Spinner } from "./spinner";
 
 export function ConsentScreen({
   scope,
   nextUrl,
+  deviceAuthorizationRequestId,
 }: {
   scope?: string[];
   nextUrl: string;
+  deviceAuthorizationRequestId: string;
 }) {
   const t = useTranslations();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+  const router = useRouter();
+
+  async function denyDeviceAuth() {
+    setLoading(true);
+    const response = await denyDeviceAuthorization(deviceAuthorizationRequestId)
+      .catch(() => {
+        setError("Could not register user");
+        return;
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+
+    if (response && "redirect" in response && response.redirect) {
+      return router.push("/device");
+    }
+
+    return response;
+  }
 
   return (
     <div className="pt-4 w-full flex flex-col items-center space-y-4">
@@ -38,9 +66,22 @@ export function ConsentScreen({
         {t("device.request.description")}
       </p>
 
+      {error && (
+        <div className="py-4">
+          <Alert>{error}</Alert>
+        </div>
+      )}
+
       <div className="mt-4 flex w-full flex-row items-center">
-        <Button variant={ButtonVariants.Destructive} data-testid="deny-button">
-          Deny
+        <Button
+          onClick={() => {
+            denyDeviceAuth();
+          }}
+          variant={ButtonVariants.Destructive}
+          data-testid="deny-button"
+        >
+          {loading && <Spinner className="h-5 w-5 mr-2" />}
+          {t("device.request.deny")}
         </Button>
         <span className="flex-grow"></span>
 
@@ -51,7 +92,7 @@ export function ConsentScreen({
             className="self-end"
             variant={ButtonVariants.Primary}
           >
-            continue
+            {t("device.request.submit")}
           </Button>
         </Link>
       </div>

apps/login/src/lib/server/oidc.ts

@@ -1,6 +1,9 @@
 "use server";
 
-import { getDeviceAuthorizationRequest as zitadelGetDeviceAuthorizationRequest } from "@/lib/zitadel";
+import {
+  authorizeOrDenyDeviceAuthorization,
+  getDeviceAuthorizationRequest as zitadelGetDeviceAuthorizationRequest,
+} from "@/lib/zitadel";
 import { headers } from "next/headers";
 import { getServiceUrlFromHeaders } from "../service";
 
@@ -13,3 +16,14 @@ export async function getDeviceAuthorizationRequest(userCode: string) {
     userCode,
   });
 }
+
+export async function denyDeviceAuthorization(deviceAuthorizationId: string) {
+  const _headers = await headers();
+  const { serviceUrl } = getServiceUrlFromHeaders(_headers);
+
+  // without the session, device auth request is denied
+  return authorizeOrDenyDeviceAuthorization({
+    serviceUrl,
+    deviceAuthorizationId,
+  });
+}