From 5b5d7e49970d70dad6dd605db434e15aa4ee4772 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 4 Apr 2021 13:44:57 +0200
Subject: [PATCH] web/admin: add edit button to application view page

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/buttons/ModalButton.ts       |  1 +
 web/src/elements/forms/ConfirmationForm.ts    | 16 +++---------
 web/src/elements/forms/DeleteForm.ts          | 20 +++++---------
 .../pages/applications/ApplicationViewPage.ts | 26 ++++++++++++++++++-
 4 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts
index 7b902b857..f1773b34d 100644
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/web/src/elements/buttons/ModalButton.ts
@@ -29,6 +29,7 @@ export class ModalButton extends LitElement {
             css`
                 :host {
                     text-align: left;
+                    font-size: var(--pf-global--FontSize--md);
                 }
                 .pf-c-modal-box.pf-m-lg {
                     overflow-y: auto;
diff --git a/web/src/elements/forms/ConfirmationForm.ts b/web/src/elements/forms/ConfirmationForm.ts
index 41d916382..e004154c8 100644
--- a/web/src/elements/forms/ConfirmationForm.ts
+++ b/web/src/elements/forms/ConfirmationForm.ts
@@ -57,18 +57,10 @@ export class ConfirmationForm extends ModalButton {
                 </h1>
             </div>
         </section>
-        <section class="pf-c-page__main-section">
-            <div class="pf-l-stack">
-                <div class="pf-l-stack__item">
-                    <div class="pf-c-card">
-                        <div class="pf-c-card__body">
-                            <form class="pf-c-form pf-m-horizontal">
-                                <slot name="body"></slot>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <section class="pf-c-page__main-section pf-m-light">
+            <form class="pf-c-form pf-m-horizontal">
+                <slot name="body"></slot>
+            </form>
         </section>
         <footer class="pf-c-modal-box__footer">
             <ak-spinner-button
diff --git a/web/src/elements/forms/DeleteForm.ts b/web/src/elements/forms/DeleteForm.ts
index 031ded926..65f1fb1d6 100644
--- a/web/src/elements/forms/DeleteForm.ts
+++ b/web/src/elements/forms/DeleteForm.ts
@@ -55,20 +55,12 @@ export class DeleteForm extends ModalButton {
                 </h1>
             </div>
         </section>
-        <section class="pf-c-page__main-section">
-            <div class="pf-l-stack">
-                <div class="pf-l-stack__item">
-                    <div class="pf-c-card">
-                        <div class="pf-c-card__body">
-                            <form class="pf-c-form pf-m-horizontal">
-                                <p>
-                                    ${t`Are you sure you want to delete ${this.objectLabel} '${this.obj?.name}'?`}
-                                </p>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <section class="pf-c-page__main-section pf-m-light">
+            <form class="pf-c-form pf-m-horizontal">
+                <p>
+                    ${t`Are you sure you want to delete ${this.objectLabel} '${this.obj?.name}'?`}
+                </p>
+            </form>
         </section>
         <footer class="pf-c-modal-box__footer">
             <ak-spinner-button
diff --git a/web/src/pages/applications/ApplicationViewPage.ts b/web/src/pages/applications/ApplicationViewPage.ts
index d55c00d2d..82aea4042 100644
--- a/web/src/pages/applications/ApplicationViewPage.ts
+++ b/web/src/pages/applications/ApplicationViewPage.ts
@@ -7,6 +7,7 @@ import "../../elements/buttons/SpinnerButton";
 import "../../elements/EmptyState";
 import "../../elements/events/ObjectChangelog";
 import "../policies/BoundPoliciesList";
+import "./ApplicationForm";
 import { Application, CoreApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
@@ -15,6 +16,7 @@ import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import AKGlobal from "../../authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 
 @customElement("ak-application-view")
 export class ApplicationViewPage extends LitElement {
@@ -32,7 +34,7 @@ export class ApplicationViewPage extends LitElement {
     application!: Application;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFContent, PFGallery, PFCard, AKGlobal].concat(
+        return [PFBase, PFPage, PFContent, PFButton, PFGallery, PFCard, AKGlobal].concat(
             css`
                 img.pf-icon {
                     max-height: 24px;
@@ -96,6 +98,28 @@ export class ApplicationViewPage extends LitElement {
                                             </dd>
                                         </div>`:
                                     html``}
+                                    <div class="pf-c-description-list__group">
+                                        <dt class="pf-c-description-list__term">
+                                            <span class="pf-c-description-list__text">${t`Edit`}</span>
+                                        </dt>
+                                        <dd class="pf-c-description-list__description">
+                                            <div class="pf-c-description-list__text">
+                                                <ak-forms-modal>
+                                                    <span slot="submit">
+                                                        ${t`Update`}
+                                                    </span>
+                                                    <span slot="header">
+                                                        ${t`Update Application`}
+                                                    </span>
+                                                    <ak-application-form slot="form" .application=${this.application}>
+                                                    </ak-application-form>
+                                                    <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                                        ${t`Edit`}
+                                                    </button>
+                                                </ak-forms-modal>
+                                            </div>
+                                        </dd>
+                                    </div>
                                 </dl>
                             </div>
                         </div>