Show the device better in the device consent page

Author: sandhose

frontend/package-lock.json

@@ -76,7 +76,7 @@
     "rimraf": "^5.0.5",
     "storybook": "^7.6.0",
     "storybook-react-i18next": "^2.0.9",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.1",
     "typescript": "5.3.2",
     "vite": "^4.5.0",
     "vite-plugin-compression": "^0.5.1",

frontend/package.json

@@ -61,6 +61,59 @@
   color: var(--cpd-color-text-secondary);
 }
 
+.consent-device-card {
+  display: flex;
+  gap: var(--cpd-space-4x);
+  flex-direction: column;
+  text-align: start;
+  margin: var(--cpd-space-2x) 0;
+
+  border-radius: var(--cpd-space-4x);
+  background-color: var(--cpd-color-bg-canvas-default);
+  border: 1px solid var(--cpd-color-border-interactive-secondary);
+  box-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
+  padding: var(--cpd-space-6x);
+
+  & .device {
+    display: flex;
+    gap: var(--cpd-space-4x);
+    align-items: center;
+
+    & svg {
+      aspect-ratio: 1;
+      border-radius: var(--cpd-space-2x);
+      background-color: var(--cpd-color-bg-subtle-secondary);
+      color: var(--cpd-color-icon-secondary);
+      padding: var(--cpd-space-2x);
+      height: var(--cpd-space-10x);
+      width: var(--cpd-space-10x);
+    }
+
+    & .name {
+      font: var(--cpd-font-body-md-semibold);
+      letter-spacing: var(--cpd-font-letter-spacing-body-md);
+      color: var(--cpd-color-text-primary);
+    }
+  }
+
+  & .meta {
+    display: flex;
+    gap: var(--cpd-space-10x);
+
+    & .key {
+      font: var(--cpd-font-body-sm-regular);
+      letter-spacing: var(--cpd-font-letter-spacing-body-sm);
+      color: var(--cpd-color-text-secondary);
+    }
+
+    & .value {
+      font: var(--cpd-font-body-md-regular);
+      letter-spacing: var(--cpd-font-letter-spacing-body-md);
+      color: var(--cpd-color-text-primary);
+    }
+  }
+}
+
 .consent-client-icon {
   display: block;
   height: var(--cpd-space-16x);
@@ -89,12 +142,13 @@
 
 .consent-scope-list {
   --border-radius: var(--cpd-space-4x);
+
   & ul {
     display: flex;
     flex-direction: column;
     gap: var(--cpd-space-1x);
 
-    & > li {
+    &>li {
       font: var(--cpd-font-body-md-regular);
       letter-spacing: var(--cpd-font-letter-spacing-body-md);
       color: var(--cpd-color-text-primary);
@@ -115,11 +169,11 @@
         border-bottom-right-radius: var(--border-radius);
       }
 
-      & > p {
+      &>p {
         flex: 1;
       }
 
-      & > svg {
+      &>svg {
         display: block;
         height: var(--cpd-space-6x);
         width: var(--cpd-space-6x);
@@ -208,6 +262,7 @@
       font: var(--cpd-font-body-lg-regular);
       letter-spacing: var(--cpd-font-letter-spacing-body-lg);
       color: var(--cpd-color-text-secondary);
+      text-wrap: balance;
 
       & em {
         font-style: normal;

frontend/src/templates.css

@@ -31,21 +31,38 @@
 
       <div class="header">
         <h1 class="title">Allow access to your account?</h1>
+
+        <div class="consent-device-card">
+          <div class="device">
+            {{ icon.web_browser() }}
+            {# TODO: Infer from the user agent #}
+            <div class="name">Device</div>
+          </div>
+          <div class="meta">
+            {# TODO: add the IP address #}
+            <div>
+              <div class="key">Access requested</div>
+              <div class="value">{{ _.relative_date(grant.created_at) | title }} {{ _.short_time(grant.created_at) }}</div>
+            </div>
+            <div>
+              <div class="key">Code</div>
+              <div class="value">{{ grant.user_code }}</div>
+            </div>
+          </div>
+        </div>
+
         <p class="text">
-          {% if client.client_uri %}
-            <a target="_blank" href="{{ client.client_uri }}">{{ client_name }}</a>
-          {% else %}
-            {{ client_name }}
-          {% endif %}
-          wants to access your account. This will allow <span class="whitespace-nowrap">{{ client_name }}</span> to:</p>
+          Another device wants to access your account.
+          This will allow <span class="whitespace-nowrap">{{ client_name }}</span> to:
+        </p>
       </div>
     </header>
 
     <section class="consent-scope-list">
       {{ scope.list(scopes=grant.scope) }}
     </section>
 
-    <section class="text-center cpd-text-secondary cpd-text-body-md-regular">
+    <section class="text-center text-balance cpd-text-secondary cpd-text-body-md-regular">
       <span class="font-semibold cpd-text-primary">Make sure that you trust <span class="whitespace-nowrap">{{ client_name }}</span>.</span>
       You may be sharing sensitive information with this site or app.
       {% if client.policy_uri or client.tos_uri %}
@@ -62,10 +79,6 @@ <h1 class="title">Allow access to your account?</h1>
       {% endif %}
     </section>
 
-    <section class="cpd-text-primary cpd-text-body-md-regular">
-      This request was made on another device, which should display the following code: {{ grant.user_code }}.
-    </section>
-
     <section class="flex flex-col gap-6">
       <form method="POST" class="cpd-form-root">
         <input type="hidden" name="csrf" value="{{ csrf_token }}" />