From 4864b313067443ac80347471b8030ce14b5bf337 Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Fri, 12 Jan 2024 14:32:03 -0800
Subject: [PATCH] web: add RAC Provider to the list of providers understood by
 the wizard

This commit also creates a new, simple alert that knows how to look up the enterprise requirements
and chooses to fill itself in with a notice saying "A license is required for this provider," or
nothing.  That harmonizes the display across both wizards, and reduces the demands on the wizards
themselves to "know" about enterprise features.
---
 ...rd-authentication-method-choice.choices.ts |  23 ++++
 ...ion-wizard-authentication-method-choice.ts |   6 +-
 ...pplication-wizard-authentication-by-rac.ts | 128 ++++++++++++++++++
 web/src/admin/applications/wizard/types.ts    |   2 +
 web/src/admin/providers/ProviderWizard.ts     |   2 +-
 5 files changed, 158 insertions(+), 3 deletions(-)
 create mode 100644 web/src/admin/applications/wizard/methods/rac/ak-application-wizard-authentication-by-rac.ts

diff --git a/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.choices.ts b/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.choices.ts
index 2c0442915..d0e2c4d0c 100644
--- a/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.choices.ts
+++ b/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.choices.ts
@@ -1,3 +1,5 @@
+import "@goauthentik/admin/common/ak-license-notice";
+
 import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
 
@@ -8,6 +10,7 @@ import type {
     ModelRequest,
     OAuth2ProviderRequest,
     ProxyProviderRequest,
+    RACProviderRequest,
     RadiusProviderRequest,
     SAMLProviderRequest,
     SCIMProviderRequest,
@@ -19,6 +22,9 @@ type ProviderRenderer = () => TemplateResult;
 
 type ModelConverter = (provider: OneOfProvider) => ModelRequest;
 
+type ProviderNoteProvider = () => TemplateResult | undefined;
+type ProviderNote = ProviderNoteProvider | undefined;
+
 /**
  * There's an internal key and an API key because "Proxy" has three different subtypes.
  */
@@ -30,12 +36,14 @@ type ProviderType = [
     ProviderRenderer,      // Function that returns the provider's wizard panel as a TemplateResult
     ProviderModelEnumType, // key used by the API to distinguish between providers
     ModelConverter,        // Handler that takes a generic provider and returns one specifically typed to its panel
+    ProviderNote?,
 ];
 
 export type LocalTypeCreate = TypeCreate & {
     formName: string;
     modelName: ProviderModelEnumType;
     converter: ModelConverter;
+    note?: ProviderNote;
 };
 
 // prettier-ignore
@@ -103,6 +111,19 @@ const _providerModelsTable: ProviderType[] = [
             mode: ProxyMode.ForwardDomain,
         }),
     ],
+    [
+        "racprovider",
+        msg("Remote Access Provider"),
+        msg("Remotely access computers/servers via RDP/SSH/VNC"),
+        () =>
+            html`<ak-application-wizard-authentication-for-rac></ak-application-wizard-authentication-for-rac>`,
+        ProviderModelEnum.RacRacprovider,
+        (provider: OneOfProvider) => ({
+            providerModel: ProviderModelEnum.RacRacprovider,
+            ...(provider as RACProviderRequest),
+        }),
+        () => html`<ak-license-notice></ak-license-notice>`
+    ],
     [
         "samlprovider",
         msg("SAML (Security Assertion Markup Language)"),
@@ -148,6 +169,7 @@ function mapProviders([
     _,
     modelName,
     converter,
+    note,
 ]: ProviderType): LocalTypeCreate {
     return {
         formName,
@@ -156,6 +178,7 @@ function mapProviders([
         component: "",
         modelName,
         converter,
+        note,
     };
 }
 
diff --git a/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.ts b/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.ts
index e13e11eca..08cb7693d 100644
--- a/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.ts
+++ b/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.ts
@@ -7,7 +7,7 @@ import "@goauthentik/elements/forms/HorizontalFormElement";
 
 import { msg } from "@lit/localize";
 import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { map } from "lit/directives/map.js";
 
 import BasePanel from "../BasePanel";
@@ -48,7 +48,9 @@ export class ApplicationWizardAuthenticationMethodChoice extends BasePanel {
                 @change=${this.handleChoice}
             />
             <label class="pf-c-radio__label" for="provider-${type.formName}">${type.name}</label>
-            <span class="pf-c-radio__description">${type.description}</span>
+            <span class="pf-c-radio__description"
+                >${type.description}${type.note ? type.note() : nothing}</span
+            >
         </div>`;
     }
 
diff --git a/web/src/admin/applications/wizard/methods/rac/ak-application-wizard-authentication-by-rac.ts b/web/src/admin/applications/wizard/methods/rac/ak-application-wizard-authentication-by-rac.ts
new file mode 100644
index 000000000..e9c26cf31
--- /dev/null
+++ b/web/src/admin/applications/wizard/methods/rac/ak-application-wizard-authentication-by-rac.ts
@@ -0,0 +1,128 @@
+import "@goauthentik/admin/applications/wizard/ak-wizard-title";
+import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-text-input";
+import "@goauthentik/elements/CodeMirror";
+import "@goauthentik/elements/forms/FormGroup";
+import "@goauthentik/elements/forms/HorizontalFormElement";
+import YAML from "yaml";
+
+import { msg } from "@lit/localize";
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import {
+    FlowsInstancesListDesignationEnum,
+    PaginatedEndpointList,
+    PaginatedRACPropertyMappingList,
+    PropertymappingsApi,
+    RACProvider,
+    RacApi,
+} from "@goauthentik/api";
+
+import BaseProviderPanel from "../BaseProviderPanel";
+
+@customElement("ak-application-wizard-authentication-by-rac")
+export class ApplicationWizardAuthenticationByRAC extends BaseProviderPanel {
+    @state()
+    endpoints?: PaginatedEndpointList;
+
+    @state()
+    propertyMappings?: PaginatedRACPropertyMappingList;
+
+    constructor() {
+        super();
+        new RacApi(DEFAULT_CONFIG).racEndpointsList({}).then((endpoints) => {
+            this.endpoints = endpoints;
+        });
+        new PropertymappingsApi(DEFAULT_CONFIG)
+            .propertymappingsRacList({
+                ordering: "name",
+            })
+            .then((propertyMappings) => {
+                this.propertyMappings = propertyMappings;
+            });
+    }
+
+    render() {
+        const provider = this.wizard.provider as RACProvider | undefined;
+        const selected = new Set(Array.from(provider?.propertyMappings ?? []));
+        const errors = this.wizard.errors.provider;
+
+        return html`<ak-wizard-title
+                >${msg("Configure Remote Access Provider Provider")}</ak-wizard-title
+            >
+            <form class="pf-c-form pf-m-horizontal" @input=${this.handleChange}>
+                <ak-text-input
+                    name="name"
+                    label=${msg("Name")}
+                    value=${ifDefined(provider?.name)}
+                    .errorMessages=${errors?.name ?? []}
+                    required
+                ></ak-text-input>
+
+                <ak-form-element-horizontal
+                    name="authorizationFlow"
+                    label=${msg("Authorization flow")}
+                    ?required=${true}
+                >
+                    <ak-flow-search
+                        flowType=${FlowsInstancesListDesignationEnum.Authorization}
+                        .currentFlow=${provider?.authorizationFlow}
+                        required
+                    ></ak-flow-search>
+                    <p class="pf-c-form__helper-text">
+                        ${msg("Flow used when authorizing this provider.")}
+                    </p>
+                </ak-form-element-horizontal>
+
+                <ak-text-input
+                    name="connectionExpiry"
+                    label=${msg("Connection expiry")}
+                    required
+                    value="${provider?.connectionExpiry ?? "hours=8"}"
+                    help=${msg(
+                        "Determines how long a session lasts before being disconnected and requiring re-authorization.",
+                    )}
+                    required
+                ></ak-text-input>
+
+                <ak-form-group .expanded=${true}>
+                    <span slot="header"> ${msg("Protocol settings")} </span>
+                    <div slot="body" class="pf-c-form">
+                        <ak-form-element-horizontal
+                            label=${msg("Property mappings")}
+                            ?required=${true}
+                            name="propertyMappings"
+                        >
+                            <select class="pf-c-form-control" multiple>
+                                ${this.propertyMappings?.results.map(
+                                    (mapping) =>
+                                        html`<option
+                                            value=${ifDefined(mapping.pk)}
+                                            ?selected=${selected.has(mapping.pk)}
+                                        >
+                                            ${mapping.name}
+                                        </option>`,
+                                )}
+                            </select>
+                            <p class="pf-c-form__helper-text">
+                                ${msg("Hold control/command to select multiple items.")}
+                            </p>
+                        </ak-form-element-horizontal>
+                        <ak-form-element-horizontal label=${msg("Settings")} name="settings">
+                            <ak-codemirror
+                                mode="yaml"
+                                value="${YAML.stringify(provider?.settings ?? {})}"
+                            >
+                            </ak-codemirror>
+                            <p class="pf-c-form__helper-text">${msg("Connection settings.")}</p>
+                        </ak-form-element-horizontal>
+                    </div>
+                </ak-form-group>
+            </form>`;
+    }
+}
+
+export default ApplicationWizardAuthenticationByRAC;
diff --git a/web/src/admin/applications/wizard/types.ts b/web/src/admin/applications/wizard/types.ts
index a6e86cac1..d36340c87 100644
--- a/web/src/admin/applications/wizard/types.ts
+++ b/web/src/admin/applications/wizard/types.ts
@@ -6,6 +6,7 @@ import {
     type OAuth2ProviderRequest,
     type ProvidersSamlImportMetadataCreateRequest,
     type ProxyProviderRequest,
+    type RACProviderRequest,
     type RadiusProviderRequest,
     type SAMLProviderRequest,
     type SCIMProviderRequest,
@@ -16,6 +17,7 @@ export type OneOfProvider =
     | Partial<SCIMProviderRequest>
     | Partial<SAMLProviderRequest>
     | Partial<ProvidersSamlImportMetadataCreateRequest>
+    | Partial<RACProviderRequest>
     | Partial<RadiusProviderRequest>
     | Partial<ProxyProviderRequest>
     | Partial<OAuth2ProviderRequest>
diff --git a/web/src/admin/providers/ProviderWizard.ts b/web/src/admin/providers/ProviderWizard.ts
index ca80f995e..88ab8da8b 100644
--- a/web/src/admin/providers/ProviderWizard.ts
+++ b/web/src/admin/providers/ProviderWizard.ts
@@ -53,7 +53,7 @@ export class InitialProviderWizardPage extends WithLicenseSummary(WizardPage) {
                 <div class="pf-c-hint__title">${msg("Try the new application wizard")}</div>
                 <div class="pf-c-hint__body">
                     ${msg(
-                        "The new application wizard greatly simplifies the steps required to create applications and providers.",
+                        "The new application wizard greatly simplifies the steps required to create applications and providers."
                     )}
                 </div>
                 <div class="pf-c-hint__footer">