From 20325863527aa6cd56a333cc5c2a82b22ef327dc Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 16 Nov 2021 11:44:13 +0100
Subject: [PATCH] Show the warning about casing on the login screen as well

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/User/Login.vue | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/js/src/views/User/Login.vue b/js/src/views/User/Login.vue
index 5d0700d4c..6a5322a24 100644
--- a/js/src/views/User/Login.vue
+++ b/js/src/views/User/Login.vue
@@ -45,7 +45,12 @@
           {{ error }}
         </b-message>
         <form @submit="loginAction">
-          <b-field :label="$t('Email')" label-for="email">
+          <b-field
+            :label="$t('Email')"
+            label-for="email"
+            :message="caseWarningText"
+            :type="caseWarningType"
+          >
             <b-input
               aria-required="true"
               required
@@ -277,6 +282,26 @@ export default class Login extends Vue {
       return this.$router.push("/");
     }
   }
+
+  get hasCaseWarning(): boolean {
+    return this.credentials.email !== this.credentials.email.toLowerCase();
+  }
+
+  get caseWarningText(): string | undefined {
+    if (this.hasCaseWarning) {
+      return this.$t(
+        "Emails usually don't contain capitals, make sure you haven't made a typo."
+      ) as string;
+    }
+    return undefined;
+  }
+
+  get caseWarningType(): string | undefined {
+    if (this.hasCaseWarning) {
+      return "is-warning";
+    }
+    return undefined;
+  }
 }
 </script>
 
@@ -284,4 +309,7 @@ export default class Login extends Vue {
 .container .columns {
   margin: 1rem auto 3rem;
 }
+::v-deep .help.is-warning {
+  color: #755033;
+}
 </style>