web-app/src/app/login/login-form/login-form.component.html at d3225e4f214f93c059fce596642e22408c2c9adf · openMF/web-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<!-- Basic Auth: Username/password form -->
@if (!oauthEnabled) {
  <div>
    <form class="layout-column" [formGroup]="loginForm" (ngSubmit)="login()" id="login-form">
      <mat-form-field class="login-field flex-align-center" appearance="fill">
        <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
        <input
          matInput
          type="text"
          autocomplete="username"
          formControlName="username"
          [placeholder]="'labels.placeholders.Enter your username' | translate"
        />
        <mifosx-m3-icon matIconPrefix name="account_circle"></mifosx-m3-icon>
        @if (loginForm.controls.username.hasError('required')) {
          <mat-error>
            {{ 'labels.inputs.Username' | translate }}
            <strong>{{ 'labels.commons.is required' | translate }}</strong>
          </mat-error>
        }
      </mat-form-field>

      <!-- Password Field -->
      <mat-form-field class="login-field" appearance="fill">
        <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
        <input
          matInput
          [type]="passwordInputType"
          autocomplete="current-password"
          formControlName="password"
          [placeholder]="'labels.placeholders.Enter your password' | translate"
          (keyup.enter)="onEnter($event)"
          (keydown)="checkCapsLock($event)"
          (keyup)="checkCapsLock($event)"
          (focus)="checkCapsLock($event)"
          (click)="checkCapsLock($event)"
          (blur)="isCapsLockOn = false"
        />
        <mifosx-m3-icon matIconPrefix name="lock"></mifosx-m3-icon>
        @if (isCapsLockOn) {
          <mifosx-m3-icon
            matSuffix
            name="keyboard_capslock"
            [matTooltip]="'labels.commons.Caps Lock is on' | translate"
            role="status"
            aria-live="polite"
            [attr.aria-label]="'labels.commons.Caps Lock is on' | translate"
            class="caps-lock-warning"
          ></mifosx-m3-icon>
        }
        @if (loginForm.controls.password.value && !loading) {
          <button
            type="button"
            matSuffix
            mat-icon-button
            (click)="togglePasswordVisibility()"
            [attr.aria-label]="passwordInputType === 'password' ? 'Show password' : 'Hide password'"
          >
            @if (passwordInputType === 'password') {
              <mifosx-m3-icon name="visibility"></mifosx-m3-icon>
            } @else {
              <mifosx-m3-icon name="visibility_off"></mifosx-m3-icon>
            }
          </button>
        }
        @if (loginForm.controls.password.hasError('required')) {
          <mat-error>
            {{ 'labels.inputs.Password' | translate }}
            <strong>
              {{ 'labels.commons.pass is required' | translate: { min: minPasswordLength } }}
            </strong>
          </mat-error>
        } @else if (loginForm.controls.password.hasError('minlength')) {
          <mat-error>
            {{
              'Password is required'
                | translate
                  : {
                      min: loginForm.controls.password.errors?.minlength?.requiredLength
                    }
            }}
          </mat-error>
        }
      </mat-form-field>

      <!-- Loading Progress -->
      @if (loading) {
        <mat-progress-bar mode="indeterminate" class="login-progress"></mat-progress-bar>
      }

      <!-- Submit Button -->
      <mifosx-m3-button
        variant="filled"
        type="submit"
        class="login-submit-button"
        [disabled]="!loginForm.valid || loading"
        [fullWidth]="true"
        [label]="(loading ? 'labels.buttons.Signing in...' : 'labels.buttons.Login') | translate"
      >
        @if (loading) {
          <mat-spinner [diameter]="20" class="button-spinner"></mat-spinner>
        }
      </mifosx-m3-button>
    </form>
  </div>
}

<!-- OAuth/OIDC: Simple login button (no credentials needed) -->
@if (oauthEnabled) {
  <div class="layout-column">
    <button
      mat-raised-button
      color="primary"
      class="login-button-first flex-align-center"
      (click)="loginOAuth()"
      [disabled]="loading"
    >
      {{ 'labels.buttons.Login' | translate }}
      @if (loading) {
        <mat-spinner [diameter]="20"></mat-spinner>
      }
    </button>
  </div>
}