feat: enhance identity provider form to cover all providers and relev…

…ant fields, hide advanced fields by default
canonical · Mar 22, 2024 · ef62667 · ef62667
1 parent 46cb0c6
commit ef62667
Show file tree

Hide file tree

Showing 5 changed files with 288 additions and 92 deletions.
diff --git a/ui/src/pages/providers/ProviderCreate.tsx b/ui/src/pages/providers/ProviderCreate.tsx
@@ -26,11 +26,11 @@ const ProviderCreate: FC = () => {
 
   const formik = useFormik<ProviderFormTypes>({
     initialValues: {
-      client_secret: "secret-9",
-      id: "okta_347646e49b484037b83690b020f9f629",
-      client_id: "347646e4-9b48-4037-b836-90b020f9f629",
-      provider: "okta",
-      mapper: "file:///etc/config/kratos/okta_schema.jsonnet",
+      provider: "generic",
+      id: "",
+      client_id: "",
+      client_secret: "",
+      mapper_url: "file:///etc/config/kratos/okta_schema.jsonnet",
       scope: "email",
     },
     validationSchema: ProviderCreateSchema,

diff --git a/ui/src/pages/providers/ProviderEdit.tsx b/ui/src/pages/providers/ProviderEdit.tsx
@@ -36,12 +36,21 @@ const ProviderEdit: FC = () => {
 
   const formik = useFormik<ProviderFormTypes>({
     initialValues: {
+      apple_private_key: provider?.apple_private_key,
+      apple_private_key_id: provider?.apple_private_key_id,
+      apple_team_id: provider?.apple_team_id,
+      auth_url: provider?.auth_url,
+      client_id: provider?.client_id,
       client_secret: provider?.client_secret,
       id: provider?.id,
-      client_id: provider?.client_id,
+      issuer_url: provider?.issuer_url,
+      mapper_url: provider?.mapper_url,
+      microsoft_tenant: provider?.microsoft_tenant,
       provider: provider?.provider,
-      mapper: provider?.mapper_url,
-      scope: provider?.scope.join(","),
+      requested_claims: provider?.requested_claims,
+      scope: provider?.scope?.join(","),
+      subject_source: provider?.subject_source,
+      token_url: provider?.token_url,
     },
     enableReinitialize: true,
     validationSchema: ProviderEditSchema,

diff --git a/ui/src/pages/providers/ProviderForm.tsx b/ui/src/pages/providers/ProviderForm.tsx
@@ -1,14 +1,112 @@
 import React, { FC } from "react";
-import { Form, Input, Select } from "@canonical/react-components";
+import {
+  Button,
+  Form,
+  Input,
+  Select,
+  Textarea,
+} from "@canonical/react-components";
 import { FormikProps } from "formik";
 
+const providerOptions = [
+  {
+    label: "Generic OAuth2 / OIDC provider",
+    value: "generic",
+  },
+  {
+    label: "Apple",
+    value: "apple",
+  },
+  {
+    label: "Auth0",
+    value: "auth0",
+  },
+  {
+    label: "AWS",
+    value: "aws",
+  },
+  {
+    label: "Dingtalk",
+    value: "dingtalk",
+  },
+  {
+    label: "Discord",
+    value: "discord",
+  },
+  {
+    label: "Facebook",
+    value: "facebook",
+  },
+  {
+    label: "GitHub",
+    value: "github",
+  },
+  {
+    label: "GitHub-App",
+    value: "github-app",
+  },
+  {
+    label: "Gitlab",
+    value: "gitlab",
+  },
+  {
+    label: "Google",
+    value: "google",
+  },
+  {
+    label: "Linkedin",
+    value: "linkedin",
+  },
+  {
+    label: "Microsoft",
+    value: "microsoft",
+  },
+  {
+    label: "Netid",
+    value: "netid",
+  },
+  {
+    label: "Okta",
+    value: "okta",
+  },
+  {
+    label: "Patreon",
+    value: "patreon",
+  },
+  {
+    label: "Slack",
+    value: "slack",
+  },
+  {
+    label: "Spotify",
+    value: "spotify",
+  },
+  {
+    label: "VK",
+    value: "vk",
+  },
+  {
+    label: "Yandex",
+    value: "yandex",
+  },
+];
+
 export interface ProviderFormTypes {
   id?: string;
   client_id?: string;
   client_secret?: string;
+  auth_url?: string;
+  issuer_url?: string;
+  token_url?: string;
+  subject_source?: string;
+  microsoft_tenant?: string;
   provider?: string;
-  mapper?: string;
+  mapper_url?: string;
   scope?: string;
+  apple_team_id?: string;
+  apple_private_key_id?: string;
+  apple_private_key?: string;
+  requested_claims?: string;
 }
 
 interface Props {
@@ -17,87 +115,177 @@ interface Props {
 }
 
 const ProviderForm: FC<Props> = ({ formik, isEdit = false }) => {
+  const [advanced, setAdvanced] = React.useState(false);
+
   return (
     <Form onSubmit={formik.handleSubmit}>
-      <Input
-        id="id"
-        name="id"
-        type="text"
-        label="Name"
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        value={formik.values.id}
-        error={formik.touched.id ? formik.errors.id : null}
-        disabled={isEdit}
-        required
-      />
       <Select
+        {...formik.getFieldProps("provider")}
         id="provider"
-        name="provider"
-        options={[
-          "apple",
-          "auth0",
-          "aws",
-          "generic",
-          "github",
-          "google",
-          "microsoft",
-          "okta",
-          "spotify",
-        ].map((item) => {
-          return { label: item, value: item };
-        })}
+        options={providerOptions}
         label="Provider"
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        value={formik.values.provider}
         error={formik.touched.provider ? formik.errors.provider : null}
       />
       <Input
-        id="scope"
-        name="scope"
+        {...formik.getFieldProps("id")}
+        id="id"
         type="text"
-        label="Scope"
-        help="Scope specifies optional requested permissions"
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        value={formik.values.scope}
-        error={formik.touched.scope ? formik.errors.scope : null}
+        label="Name"
+        error={formik.touched.id ? formik.errors.id : null}
+        disabled={isEdit}
       />
       <Input
+        {...formik.getFieldProps("client_id")}
         id="client_id"
-        name="client_id"
         type="text"
         label="Client ID"
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        value={formik.values.client_id}
         error={formik.touched.client_id ? formik.errors.client_id : null}
         disabled={isEdit}
       />
-      <Input
-        id="client_secret"
-        name="client_secret"
-        type="text"
-        label="Client secret"
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        value={formik.values.client_secret}
-        error={
-          formik.touched.client_secret ? formik.errors.client_secret : null
-        }
-      />
-      <Input
-        id="mapper"
-        name="mapper"
-        type="text"
-        label="Mapper"
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        value={formik.values.mapper}
-        error={formik.touched.mapper ? formik.errors.mapper : null}
-        disabled={isEdit}
-      />
+      {!["apple"].includes(formik.values.provider ?? "") && (
+        <Input
+          {...formik.getFieldProps("client_secret")}
+          id="client_secret"
+          type="text"
+          label="Client secret"
+          error={
+            formik.touched.client_secret ? formik.errors.client_secret : null
+          }
+        />
+      )}
+      {formik.values.provider === "microsoft" && (
+        <>
+          <Input
+            {...formik.getFieldProps("microsoft_tenant")}
+            id="microsoft_tenant"
+            type="text"
+            label="Tenant"
+            error={
+              formik.touched.microsoft_tenant
+                ? formik.errors.microsoft_tenant
+                : null
+            }
+          />
+          <Input
+            {...formik.getFieldProps("subject_source")}
+            id="subject_source"
+            type="text"
+            label="Subject source"
+            error={
+              formik.touched.subject_source
+                ? formik.errors.subject_source
+                : null
+            }
+          />
+        </>
+      )}
+      {formik.values.provider === "apple" && (
+        <>
+          <Textarea
+            {...formik.getFieldProps("apple_private_key")}
+            id="apple_private_key"
+            label="Apple Private Key"
+            error={
+              formik.touched.apple_private_key
+                ? formik.errors.apple_private_key
+                : null
+            }
+          />
+          <Input
+            {...formik.getFieldProps("apple_team_id")}
+            id="apple_team_id"
+            type="text"
+            label="Apple Team ID"
+            error={
+              formik.touched.apple_team_id ? formik.errors.apple_team_id : null
+            }
+          />
+          <Input
+            {...formik.getFieldProps("apple_private_key_id")}
+            id="apple_private_key_id"
+            type="text"
+            label="Apple Private Key ID"
+            error={
+              formik.touched.apple_private_key_id
+                ? formik.errors.apple_private_key_id
+                : null
+            }
+          />
+        </>
+      )}
+      <Button
+        appearance="base"
+        type="button"
+        hasIcon
+        onClick={() => {
+          setAdvanced(!advanced);
+        }}
+        aria-label="Toggle advanced view"
+        className="p-accordion__tab"
+        aria-expanded={advanced ? "true" : "false"}
+      >
+        <strong className="p-heading--5 p-inline-list__item">Advanced</strong>
+      </Button>
+      {advanced && (
+        <>
+          {!["apple"].includes(formik.values.provider ?? "") && (
+            <>
+              <Input
+                {...formik.getFieldProps("auth_url")}
+                id="auth_url"
+                type="text"
+                label="Auth URL"
+                error={formik.touched.auth_url ? formik.errors.auth_url : null}
+              />
+              <Input
+                {...formik.getFieldProps("token_url")}
+                id="token_url"
+                type="text"
+                label="Token URL"
+                error={
+                  formik.touched.token_url ? formik.errors.token_url : null
+                }
+              />
+              <Input
+                {...formik.getFieldProps("issuer_url")}
+                id="issuer_url"
+                type="text"
+                label="Issuer URL"
+                error={
+                  formik.touched.issuer_url ? formik.errors.issuer_url : null
+                }
+              />
+            </>
+          )}
+          <Input
+            {...formik.getFieldProps("requested_claims")}
+            id="requested_claims"
+            type="text"
+            label="Requested claims"
+            error={
+              formik.touched.requested_claims
+                ? formik.errors.requested_claims
+                : null
+            }
+          />
+          <Input
+            {...formik.getFieldProps("mapper_url")}
+            id="mapper_url"
+            type="text"
+            label="Mapper"
+            error={formik.touched.mapper_url ? formik.errors.mapper_url : null}
+            disabled={isEdit}
+          />
+          <Input
+            {...formik.getFieldProps("scope")}
+            id="scope"
+            type="text"
+            label="Scope"
+            help="Scope specifies optional requested permissions"
+            error={formik.touched.scope ? formik.errors.scope : null}
+          />
+        </>
+      )}
     </Form>
   );
 };