From 83d303ba9ad2572733782bfa34c064836a18091b Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 13 Oct 2022 17:02:01 +0200
Subject: [PATCH] web/flows: improve display for action-showing stages

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../flow/providers/oauth2/DeviceCodeFinish.ts | 32 ++++---------------
 .../stages/access_denied/AccessDeniedStage.ts | 31 +++++++++++++++---
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/web/src/flow/providers/oauth2/DeviceCodeFinish.ts b/web/src/flow/providers/oauth2/DeviceCodeFinish.ts
index c2f082b13..199b8aaaf 100644
--- a/web/src/flow/providers/oauth2/DeviceCodeFinish.ts
+++ b/web/src/flow/providers/oauth2/DeviceCodeFinish.ts
@@ -1,34 +1,14 @@
 import "@goauthentik/elements/EmptyState";
 import "@goauthentik/flow/FormStatic";
-import { BaseStage } from "@goauthentik/flow/stages/base";
+import { AccessDeniedStage } from "@goauthentik/flow/stages/access_denied/AccessDeniedStage";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, TemplateResult, html } from "lit";
+import { TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
-import PFForm from "@patternfly/patternfly/components/Form/form.css";
-import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
-import PFList from "@patternfly/patternfly/components/List/list.css";
-import PFLogin from "@patternfly/patternfly/components/Login/login.css";
-import PFTitle from "@patternfly/patternfly/components/Title/title.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
-
-import {
-    OAuthDeviceCodeFinishChallenge,
-    OAuthDeviceCodeFinishChallengeResponseRequest,
-} from "@goauthentik/api";
-
 @customElement("ak-flow-provider-oauth2-code-finish")
-export class DeviceCodeFinish extends BaseStage<
-    OAuthDeviceCodeFinishChallenge,
-    OAuthDeviceCodeFinishChallengeResponseRequest
-> {
-    static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle, AKGlobal];
-    }
-
+export class DeviceCodeFinish extends AccessDeniedStage {
     render(): TemplateResult {
         if (!this.challenge) {
             return html`<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>`;
@@ -39,10 +19,12 @@ export class DeviceCodeFinish extends BaseStage<
             <div class="pf-c-login__main-body">
                 <form class="pf-c-form">
                     <div class="pf-c-form__group">
-                        <p>
+                        <p class="big-icon">
                             <i class="pf-icon pf-icon-ok"></i>
-                            ${t`You've successfully authenticated your device.`}
                         </p>
+                        <h3 class="pf-c-title pf-m-3xl reason">
+                            ${t`You've successfully authenticated your device.`}
+                        </h3>
                         <hr />
                         <p>${t`You can close this tab now.`}</p>
                     </div>
diff --git a/web/src/flow/stages/access_denied/AccessDeniedStage.ts b/web/src/flow/stages/access_denied/AccessDeniedStage.ts
index db506fe44..cb74205f8 100644
--- a/web/src/flow/stages/access_denied/AccessDeniedStage.ts
+++ b/web/src/flow/stages/access_denied/AccessDeniedStage.ts
@@ -4,7 +4,7 @@ import { BaseStage } from "@goauthentik/flow/stages/base";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -24,7 +24,30 @@ export class AccessDeniedStage extends BaseStage<
     FlowChallengeResponseRequest
 > {
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle, AKGlobal];
+        return [
+            PFBase,
+            PFLogin,
+            PFForm,
+            PFList,
+            PFFormControl,
+            PFTitle,
+            AKGlobal,
+            css`
+                .big-icon {
+                    display: flex;
+                    width: 100%;
+                    justify-content: center;
+                    height: 5rem;
+                }
+                .big-icon i {
+                    font-size: 3rem;
+                }
+                .reason {
+                    margin-bottom: 1rem;
+                    text-align: center;
+                }
+            `,
+        ];
     }
 
     render(): TemplateResult {
@@ -48,10 +71,10 @@ export class AccessDeniedStage extends BaseStage<
                         </div>
                     </ak-form-static>
                     <div class="pf-c-form__group">
-                        <p>
+                        <p class="big-icon">
                             <i class="pf-icon pf-icon-error-circle-o"></i>
-                            ${t`Request has been denied.`}
                         </p>
+                        <h3 class="pf-c-title pf-m-3xl reason">${t`Request has been denied.`}</h3>
                         ${this.challenge?.errorMessage &&
                         html`<hr />
                             <p>${this.challenge.errorMessage}</p>`}