Warning when using capitalized letter in login

diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 5f5b0f565235ab3e8a5f518140365d4dbf1a2fa1..27793ff0cc9345447614f5f8914aff1bd2e440ac 100644 (file)
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -28,6 +28,10 @@
             <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>
           </div>
 
           <div class="form-group">

diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts
index d8ad49081caec79b8fc99db4648a4ab1611b695b..9731383afc78cb1a1b0c61e78689389368d49bfa 100644 (file)
--- a/client/src/app/+login/login.component.ts
+++ b/client/src/app/+login/login.component.ts
@@ -141,6 +141,10 @@ The link will expire within 1 hour.`
     this.accordion = instanceAboutAccordion.accordion
   }
 
+  hasUsernameUppercase () {
+    return this.form.value['username'].match(/[A-Z]/)
+  }
+
   private loadExternalAuthToken (username: string, token: string) {
     this.isAuthenticatedWithExternalAuth = true
 

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 30d487b111966364280b8afd5c1bd7151f8117c1..bd834db701f03084742b7e6830657378b7f93d51 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -123,12 +123,16 @@ code {
   vertical-align: middle;
 }
 
-.form-error {
+.form-error,
+.form-warning {
   display: block;
-  color: $red;
   margin-top: 5px;
 }
 
+.form-error {
+  color: $red;
+}
+
 .input-error,
 my-input-toggle-hidden ::ng-deep input {
   border-color: $red !important;