Warning when using capitalized letter in login

3 files changed, 14 insertions, 2 deletions

diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 5f5b0f565..27793ff0c 100644
--- 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 d8ad49081..9731383af 100644
--- 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 30d487b11..bd834db70 100644
--- 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;