Require device authorization confirmation

idp/dex/web/templates/approval.html

@@ -1,26 +1,45 @@
 {{ template "header.html" . }}
 
 <div class="nb-card">
+    {{ if .DeviceUserCode }}
+    <h1 class="nb-heading">Authorize Device</h1>
+    <p class="nb-subheading">
+        {{ .Client }} wants to sign in. Confirm this code matches the code shown on your device.
+    </p>
+    <div class="nb-device-code" aria-label="Device verification code">{{ .DeviceUserCode }}</div>
+    <p class="nb-warning">
+        Only continue if you started this sign-in and the code matches your device.
+    </p>
+    {{ else }}
     <h1 class="nb-heading">Grant Access</h1>
     <p class="nb-subheading">{{ .Client }} wants to access your account</p>
+    {{ end }}
 
     <form method="post">
-        <input type="hidden" name="req" value="{{ .ReqID }}"/>
+        <input type="hidden" name="req" value="{{ .AuthReqID }}"/>
         <input type="hidden" name="approval" value="approve"/>
         <button type="submit" class="nb-btn">
+            {{ if .DeviceUserCode }}
+            Authorize Device
+            {{ else }}
             Allow Access
+            {{ end }}
         </button>
     </form>
 
     <div class="nb-divider"></div>
 
     <form method="post">
-        <input type="hidden" name="req" value="{{ .ReqID }}"/>
+        <input type="hidden" name="req" value="{{ .AuthReqID }}"/>
         <input type="hidden" name="approval" value="rejected"/>
         <button type="submit" class="nb-btn-connector" style="margin-bottom:0">
+            {{ if .DeviceUserCode }}
+            Deny
+            {{ else }}
             Deny Access
+            {{ end }}
         </button>
     </form>
 </div>
 
-{{ template "footer.html" . }}
+{{ template "footer.html" . }}

idp/dex/web/templates/header.html

@@ -39,6 +39,8 @@
         .nb-icon-email{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a7b1b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E")}
         .nb-icon-default{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a7b1b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E")}
         .nb-error{background-color:rgba(153,27,27,.2);border:1px solid rgba(153,27,27,.5);border-radius:8px;padding:12px 16px;color:#f87171;font-size:13px;text-align:center;margin-bottom:16px}
+        .nb-device-code{padding:14px 16px;background-color:rgba(63,68,75,.5);border:1px solid rgba(63,68,75,.8);border-radius:8px;color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:24px;font-weight:600;letter-spacing:3px;text-align:center;margin-bottom:16px}
+        .nb-warning{color:#fbbf24;font-size:13px;text-align:center;margin-bottom:24px}
         .nb-link{color:#f68330;text-decoration:none;font-size:13px}
         .nb-link:hover{text-decoration:underline}
         .nb-back-link{text-align:center;margin-top:20px}
@@ -67,4 +69,4 @@
                 </clipPath>
             </defs>
         </svg>
-    </div>
+    </div>