{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<PageHeader as |p|>
  <p.levelLeft>
    <h1 data-test-title class="title is-3">
      Reset password
    </h1>
  </p.levelLeft>
</PageHeader>

<form {{on "submit" (perform this.updatePassword) on="submit"}}>
  <div class="box is-sideless is-fullwidth is-marginless">
    <Hds::Alert @type="inline" class="has-bottom-margin-m" as |A|>
      <A.Title>Current user</A.Title>
      <A.Description data-test-current-user-banner>You are updating the password for
        <strong>{{@username}}</strong>
        on the
        <strong>{{@backend}}</strong>
        auth mount.</A.Description>
    </Hds::Alert>
    <FormFieldLabel for="reset-password" @label="New password" />
    <MaskedInput
      id="reset-password"
      @name="reset-password"
      @value={{this.newPassword}}
      @onChange={{fn (mut this.newPassword)}}
    />
  </div>

  <Hds::ButtonSet class="has-top-margin-m">
    <Hds::Button
      @text="Save"
      @icon={{if this.updatePassword.isRunning "loading"}}
      disabled={{this.updatePassword.isRunning}}
      type="submit"
      data-test-reset-password-save
    />
    {{#if this.error}}
      <Hds::Alert @type="compact" @color="critical" class="has-left-margin-s" data-test-reset-password-error as |A|>
        <A.Title>Error</A.Title>
        <A.Description>
          {{this.error}}
        </A.Description>
      </Hds::Alert>
    {{/if}}
  </Hds::ButtonSet>
</form>