- <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
- <div class="form-group">
- <div>
- <label i18n for="username">Username or email address</label>
- <input
- type="text" id="username" i18n-placeholder placeholder="Example: john@example.com" required tabindex="1"
- formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
- >
+ <form class="w-100 m-0" myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
+ <ng-container *ngIf="!otpStep">
+ <div class="form-group">
+ <div>
+ <label i18n for="username">Username or email address</label>
+ <input
+ type="text" id="username" i18n-placeholder placeholder="Example: john@example.com" required tabindex="1"
+ formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
+ >
+ </div>
+
+ <div *ngIf="formErrors.username" class="form-error">{{ formErrors.username }}</div>
+
+ <div *ngIf="hasUsernameUppercase()" i18n class="form-warning">
+ ⚠️ Most email addresses do not include capital letters.
+ </div>