nomulus/console-webapp/src/app/settings/security/eppPasswordEdit.component.ts

// Copyright 2024 The Nomulus Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import { HttpErrorResponse } from '@angular/common/http';
import { Component } from '@angular/core';
import {
  AbstractControl,
  FormControl,
  FormGroup,
  ValidatorFn,
  Validators,
} from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { RegistrarService } from 'src/app/registrar/registrar.service';
import { SecurityService } from './security.service';

type errorCode = 'required' | 'maxlength' | 'minlength' | 'passwordsDontMatch';

type errorFriendlyText = { [type in errorCode]: String };

@Component({
  selector: 'app-epp-password-edit',
  templateUrl: './eppPasswordEdit.component.html',
  styleUrls: ['./eppPasswordEdit.component.scss'],
})
export default class EppPasswordEditComponent {
  MIN_MAX_LENGHT = new String(
    'Passwords must be between 6 and 16 alphanumeric characters'
  );

  errorTextMap: errorFriendlyText = {
    required: "This field can't be empty",
    maxlength: this.MIN_MAX_LENGHT,
    minlength: this.MIN_MAX_LENGHT,
    passwordsDontMatch: "Passwords don't match",
  };

  constructor(
    public securityService: SecurityService,
    private _snackBar: MatSnackBar,
    public registrarService: RegistrarService
  ) {}

  hasError(controlName: string) {
    const maybeErrors = this.passwordUpdateForm.get(controlName)?.errors;
    const maybeError =
      maybeErrors && (Object.keys(maybeErrors)[0] as errorCode);
    if (maybeError) {
      return this.errorTextMap[maybeError];
    }
    return '';
  }

  newPasswordsMatch: ValidatorFn = (control: AbstractControl) => {
    if (
      this.passwordUpdateForm?.get('newPassword')?.value ===
      this.passwordUpdateForm?.get('newPasswordRepeat')?.value
    ) {
      this.passwordUpdateForm?.get('newPasswordRepeat')?.setErrors(null);
    } else {
      // latest angular just won't detect the error without setTimeout
      setTimeout(() => {
        this.passwordUpdateForm
          ?.get('newPasswordRepeat')
          ?.setErrors({ passwordsDontMatch: control.value });
      });
    }
    return null;
  };

  passwordUpdateForm = new FormGroup({
    oldPassword: new FormControl('', [Validators.required]),
    newPassword: new FormControl('', [
      Validators.required,
      Validators.minLength(6),
      Validators.maxLength(16),
      this.newPasswordsMatch,
    ]),
    newPasswordRepeat: new FormControl('', [
      Validators.required,
      Validators.minLength(6),
      Validators.maxLength(16),
      this.newPasswordsMatch,
    ]),
  });

  save() {
    const { oldPassword, newPassword, newPasswordRepeat } =
      this.passwordUpdateForm.value;
    if (!oldPassword || !newPassword || !newPasswordRepeat) return;
    this.securityService
      .saveEppPassword({
        registrarId: this.registrarService.registrarId(),
        oldPassword,
        newPassword,
        newPasswordRepeat,
      })
      .subscribe({
        complete: () => {
          this.goBack();
        },
        error: (err: HttpErrorResponse) => {
          this._snackBar.open(err.error);
        },
      });
  }

  goBack() {
    this.securityService.isEditingPassword = false;
  }
}