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

File

Metadata

results matching ""

No results matching ""