LDAP Configure Page Component

ui/app/adapters/ldap/config.js

@@ -7,4 +7,8 @@ import SecretsEnginePathAdapter from 'vault/adapters/secrets-engine-path';
 
 export default class LdapConfigAdapter extends SecretsEnginePathAdapter {
   path = 'config';
+
+  async rotateRoot(backend) {
+    return this.ajax(this._getURL(backend, 'rotate-root'), 'POST');
+  }
 }

ui/app/models/ldap/config.js

@@ -121,4 +121,9 @@ export default class LdapConfigModel extends Model {
     defaultShown: 'Default 90 seconds.',
   })
   request_timeout;
+
+  async rotateRoot() {
+    const adapter = this.store.adapterFor('ldap/config');
+    return adapter.rotateRoot(this.backend);
+  }
 }

ui/lib/ldap/addon/components/page/configure.hbs

@@ -0,0 +1,113 @@
+<PageHeader as |p|>
+  <p.top>
+    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
+  </p.top>
+  <p.levelLeft>
+    <h1 class="title is-3">Configure LDAP</h1>
+  </p.levelLeft>
+</PageHeader>
+
+<hr class="is-marginless has-background-gray-200" />
+
+<form class="has-top-margin-l" {{on "submit" (perform this.save)}}>
+  <Hds::Form::RadioCard::Group @name="schema options" as |RadioGroup|>
+    {{#each this.schemaOptions as |option|}}
+      <RadioGroup.RadioCard
+        @checked={{eq option.value @model.schema}}
+        {{on "change" (fn (mut @model.schema) option.value)}}
+        data-test-radio-card={{option.title}}
+        as |Card|
+      >
+        <Card.Icon @name={{option.icon}} />
+        <Card.Label>{{option.title}}</Card.Label>
+        <Card.Description>{{option.description}}</Card.Description>
+      </RadioGroup.RadioCard>
+    {{/each}}
+  </Hds::Form::RadioCard::Group>
+
+  <div class="has-top-margin-xl">
+    <MessageError @errorMessage={{this.error}} />
+
+    <h2 class="title is-4">Schema Options</h2>
+    <hr class="has-background-gray-200" />
+
+    {{#if @model.schema}}
+      <div class="has-top-margin-l">
+        <FormFieldGroups @model={{@model}} @groupName="formFieldGroups" @modelValidations={{this.modelValidations}} />
+      </div>
+    {{else}}
+      <EmptyState
+        class="is-shadowless has-top-margin-l"
+        @title="Choose an option"
+        @message="Pick an option above to see available configuration options"
+      />
+    {{/if}}
+  </div>
+
+  <hr class="has-background-gray-200 has-top-margin-l" />
+
+  <div class="has-top-margin-l has-bottom-margin-l is-flex">
+    <button
+      data-test-config-save
+      class="button is-primary"
+      type="submit"
+      disabled={{or this.save.isRunning (not @model.schema)}}
+      {{on "click" (perform this.save)}}
+    >
+      Save
+    </button>
+    <button
+      data-test-config-cancel
+      class="button has-left-margin-xs"
+      type="button"
+      disabled={{or this.save.isRunning this.fetchInferred.isRunning}}
+      {{on "click" this.cancel}}
+    >
+      Back
+    </button>
+    {{#if this.invalidFormMessage}}
+      <AlertInline
+        @type="danger"
+        @paddingTop={{true}}
+        @message={{this.invalidFormMessage}}
+        @mimicRefresh={{true}}
+        data-test-invalid-form-message
+      />
+    {{/if}}
+  </div>
+</form>
+
+{{#if this.showRotatePrompt}}
+  <Modal
+    @title="Rotate your root password?"
+    @type="info"
+    @isActive={{this.showRotatePrompt}}
+    @showCloseButton={{true}}
+    @onClose={{fn (mut this.showRotatePrompt) false}}
+  >
+    <section class="modal-card-body">
+      <p>
+        It’s best practice to rotate the administrator (root) password immediately after the initial configuration of the
+        LDAP engine. The rotation will update the password both in Vault and your directory server. Once rotated,
+        <span class="has-text-weight-semibold">only Vault knows the new root password.</span>
+      </p>
+      <br />
+      <p>
+        Would you like to rotate your new credentials? You can also do this later.
+      </p>
+    </section>
+    <footer class="modal-card-foot modal-card-foot-outlined">
+      <button
+        data-test-save-with-rotate
+        type="button"
+        class="button is-primary"
+        {{on "click" (fn (perform this.save) null true)}}
+      >
+        Save and rotate
+      </button>
+      <button data-test-save-without-rotate type="button" class="button" {{on "click" (fn (perform this.save) null false)}}>
+        Save without rotating
+      </button>
+    </footer>
+  </Modal>
+{{/if}}

ui/lib/ldap/addon/components/page/configure.ts

@@ -0,0 +1,113 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import { waitFor } from '@ember/test-waiters';
+import errorMessage from 'vault/utils/error-message';
+
+import type LdapConfigModel from 'vault/models/ldap/config';
+import { Breadcrumb, ValidationMap } from 'vault/vault/app-types';
+import type FlashMessageService from 'vault/services/flash-messages';
+import type RouterService from '@ember/routing/router-service';
+
+interface Args {
+  model: LdapConfigModel;
+  breadcrumbs: Array<Breadcrumb>;
+}
+interface SchemaOption {
+  title: string;
+  icon: string;
+  description: string;
+  value: string;
+}
+
+export default class LdapConfigurePageComponent extends Component<Args> {
+  @service declare readonly flashMessages: FlashMessageService;
+  @service declare readonly router: RouterService;
+
+  @tracked showRotatePrompt = false;
+  @tracked modelValidations: ValidationMap | null = null;
+  @tracked invalidFormMessage = '';
+  @tracked error = '';
+
+  get schemaOptions(): Array<SchemaOption> {
+    return [
+      {
+        title: 'OpenLDAP',
+        icon: 'folder',
+        description:
+          'OpenLDAP is one of the most popular open source directory service developed by the OpenLDAP Project.',
+        value: 'openldap',
+      },
+      {
+        title: 'AD',
+        icon: 'microsoft',
+        description:
+          'Active Directory is a directory service developed by Microsoft for Windows domain networks.',
+        value: 'ad',
+      },
+      {
+        title: 'RACF',
+        icon: 'users',
+        description:
+          "For managing IBM's Resource Access Control Facility (RACF) security system, the generated passwords must be 8 characters or less.",
+        value: 'racf',
+      },
+    ];
+  }
+
+  leave(route: string) {
+    this.router.transitionTo(`vault.cluster.secrets.backend.ldap.${route}`);
+  }
+
+  validate() {
+    const { isValid, state, invalidFormMessage } = this.args.model.validate();
+    this.modelValidations = isValid ? null : state;
+    this.invalidFormMessage = isValid ? '' : invalidFormMessage;
+    return isValid;
+  }
+
+  async rotateRoot() {
+    try {
+      await this.args.model.rotateRoot();
+    } catch (error) {
+      // since config save was successful at this point we only want to show the error in a flash message
+      this.flashMessages.danger(`Error rotating root password \n ${errorMessage(error)}`);
+    }
+  }
+
+  @task
+  @waitFor
+  *save(event: Event | null, rotate: boolean) {
+    if (event) {
+      event.preventDefault();
+    }
+    const isValid = this.validate();
+    // show rotate creds prompt for new models when form state is valid
+    this.showRotatePrompt = isValid && this.args.model.isNew && !this.showRotatePrompt;
+
+    if (isValid && !this.showRotatePrompt) {
+      try {
+        yield this.args.model.save();
+        // if save was triggered from confirm action in rotate password prompt we need to make an additional request
+        if (rotate) {
+          yield this.rotateRoot();
+        }
+        this.flashMessages.success('Successfully configured LDAP engine');
+        this.leave('configuration');
+      } catch (error) {
+        this.error = errorMessage(error, 'Error saving configuration. Please try again or contact support');
+      }
+    }
+  }
+
+  @action
+  cancel() {
+    const { model } = this.args;
+    const transitionRoute = model.isNew ? 'overview' : 'configuration';
+    const cleanupMethod = model.isNew ? 'unloadRecord' : 'rollbackAttributes';
+    model[cleanupMethod]();
+    this.leave(transitionRoute);
+  }
+}

ui/lib/ldap/addon/routes/configure.ts

@@ -38,9 +38,9 @@ export default class LdapConfigureRoute extends Route {
     super.setupController(controller, resolvedModel, transition);
 
     controller.breadcrumbs = [
-      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: 'Secrets', route: 'secrets', linkExternal: true },
       { label: resolvedModel.backend, route: 'overview' },
-      { label: 'configure' },
+      { label: 'Configure' },
     ];
   }
 }

ui/lib/ldap/addon/templates/configure.hbs

@@ -0,0 +1 @@
+<Page::Configure @model={{this.model}} @breadcrumbs={{this.breadcrumbs}} />

ui/lib/ldap/package.json

@@ -5,6 +5,7 @@
     "ember-engine"
   ],
   "dependencies": {
+    "@hashicorp/design-system-components": "*",
     "ember-cli-htmlbars": "*",
     "ember-cli-babel": "*",
     "ember-concurrency": "*",