### File

`src/lib/reset-password/reset-password.component.ts`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
providers | `ResetPasswordFormProviders` `{ provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher, }`
selector | `rxap-reset-password`
imports | `ReactiveFormsModule` `FormDirective` `MatIconModule` `MatFormFieldModule` `MatInputModule` `NgIf` `MatButtonModule` `FormControlMarkDirtyDirective` `FormSubmitFailedDirective` `FormSubmittingDirective` `MatProgressBarModule` `MatSnackBarModule` `ControlErrorDirective`
styleUrls | `./reset-password.component.scss`
templateUrl | `./reset-password.component.html`

    import { NgIf } from '@angular/common';
    import {
      ChangeDetectionStrategy,
      Component,
    } from '@angular/core';
    import { ReactiveFormsModule } from '@angular/forms';
    import { MatButtonModule } from '@angular/material/button';
    import {
      ErrorStateMatcher,
      ShowOnDirtyErrorStateMatcher,
    } from '@angular/material/core';
    import { MatFormFieldModule } from '@angular/material/form-field';
    import { MatIconModule } from '@angular/material/icon';
    import { MatInputModule } from '@angular/material/input';
    import { MatProgressBarModule } from '@angular/material/progress-bar';
    import { MatSnackBarModule } from '@angular/material/snack-bar';
    import {
      FormControlMarkDirtyDirective,
      FormDirective,
      FormSubmitFailedDirective,
      FormSubmittingDirective,
    } from '@rxap/forms';
    import { ControlErrorDirective } from '@rxap/material-form-system';
    import { fadeAnimation } from '../fade-animation';
    import { ResetPasswordFormProviders } from './reset-password.form';

    @Component({
        selector: 'rxap-reset-password',
        templateUrl: './reset-password.component.html',
        styleUrls: ['./reset-password.component.scss'],
        changeDetection: ChangeDetectionStrategy.OnPush,
        providers: [
            ResetPasswordFormProviders,
            {
                provide: ErrorStateMatcher,
                useClass: ShowOnDirtyErrorStateMatcher,
            },
        ],
        animations: [
            fadeAnimation,
        ],
        imports: [
            ReactiveFormsModule,
            FormDirective,
            MatIconModule,
            MatFormFieldModule,
            MatInputModule,
            NgIf,
            MatButtonModule,
            FormControlMarkDirtyDirective,
            FormSubmitFailedDirective,
            FormSubmittingDirective,
            MatProgressBarModule,
            MatSnackBarModule,
            ControlErrorDirective,
        ]
    })
    export class ResetPasswordComponent {
    }

    <form #form="rxapForm" [@fadeAnimation]="'in'"
          class="inner mat-elevation-z5 flex flex-col items-center justify-center gap-4"
          novalidate
          rxapForm>

      <div class="header grow-0 flex flex-col items-center justify-center">

        <mat-icon class="avatar-icon grow-0" color="primary">vpn_key</mat-icon>

      </div>

      <div class="content flex flex-col gap-4">

        <div class="flex flex-col">

          <mat-form-field class="password-input">
            <mat-icon inline matPrefix>vpn_key</mat-icon>
            <mat-label i18n>New password</mat-label>
            <input #passwordInput
                   formControlName="password"
                   i18n-placeholder
                   matInput
                   placeholder="Enter your new password"
                   type="password">
            <mat-error *rxapControlError="let error key 'required'">
              Password is <strong>required</strong>
            </mat-error>
            <button (click)="passwordInput.type = 'text'" *ngIf="passwordInput.type === 'password'" mat-icon-button
                    matSuffix tabIndex="-1"
                    type="button">
              <mat-icon>visibility</mat-icon>
            </button>
            <button (click)="passwordInput.type = 'password'" *ngIf="passwordInput.type === 'text'" mat-icon-button
                    matSuffix tabIndex="-1"
                    type="button">
              <mat-icon>visibility_off</mat-icon>
            </button>
          </mat-form-field>

          <mat-form-field class="password-input">
            <mat-icon inline matPrefix>vpn_key</mat-icon>
            <mat-label i18n>Repeat password</mat-label>
            <input #passwordRepeatInput
                   formControlName="passwordRepeat"
                   i18n-placeholder
                   matInput
                   placeholder="Enter your new password again"
                   type="password">
            <mat-error *rxapControlError="let error key 'required'">
              Password is <strong>required</strong>
            </mat-error>
            <mat-error *rxapControlError="let error key 'equal'">
              Entered password are <strong>not equal</strong>
            </mat-error>
            <button (click)="passwordRepeatInput.type = 'text'"
                    *ngIf="passwordRepeatInput.type === 'password'"
                    mat-icon-button
                    matSuffix
                    tabIndex="-1"
                    type="button">
              <mat-icon>visibility</mat-icon>
            </button>
            <button (click)="passwordRepeatInput.type = 'password'"
                    *ngIf="passwordRepeatInput.type === 'text'"
                    mat-icon-button
                    matSuffix
                    tabIndex="-1"
                    type="button">
              <mat-icon>visibility_off</mat-icon>
            </button>
          </mat-form-field>

        </div>

        <div class="grow-0 flex flex-row justify-center items-center">

          <div class="grow-0">
            <button color="primary" mat-raised-button rxapFormControlMarkDirty type="submit">
              <ng-container i18n>Reset password</ng-container>
            </button>
          </div>

        </div>

      </div>

      <div *rxapFormSubmitFailed="let error" class="flex flex-row items-center justify-center">
        <mat-error>{{ error.message }}</mat-error>
      </div>

      <mat-progress-bar *rxapFormSubmitting class="loading-bar" mode="indeterminate"></mat-progress-bar>

    </form>

`./reset-password.component.scss`

    $padding: 48px;

    .inner {
      padding: $padding;
      position: relative;
      margin: 16px 0;
      background-color: var(--background-color);

      ::ng-deep .mat-mdc-form-field-icon-prefix, ::ng-deep .mat-mdc-form-field-icon-suffix {
        color: var(--hint-text-color, gray);
      }

      .header {

        .avatar-icon {
          width: 100px;
          height: 100px;
          font-size: 100px;
        }

      }

      .content {
        width: 256px + $padding;
        max-width: calc(100vw - #{$padding * 2} - 16px);

        .password-input {
          width: 100%;

          .prefix-icon {
            width: 24px;
            height: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
          ::ng-deep .mat-form-field-prefix {
            align-self: flex-end;
            margin: 4px;
          }

        }

        [type="submit"] {
          width: 256px;
          text-transform: uppercase;
        }

      }

      .loading-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
      }

    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""