From 187bc664f6647be16da3a07b4d44caf7975df204 Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Sun, 29 Jan 2023 19:01:36 +0000
Subject: [PATCH] Improve username validation

---
 CHANGELOG.md              |  4 ++++
 src/views/LandingPage.vue | 26 +++++++++++++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c07865f..412d688 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Changed
+
+- Improved username validation.
+
 ## [1.12.0] - 2023-01-26
 
 ### Added
diff --git a/src/views/LandingPage.vue b/src/views/LandingPage.vue
index 6225480..8299d74 100644
--- a/src/views/LandingPage.vue
+++ b/src/views/LandingPage.vue
@@ -39,7 +39,13 @@
               >
               <div class="addon">@{{ instance.uri }}</div>
             </div>
-            <div class="form-message">Only letters, numbers and underscores are allowed.</div>
+            <div
+              v-if="!isRegistered"
+              class="form-message"
+              :class="{ error: !isUsernameValid() }"
+            >
+              Only lowercase letters, numbers and underscores are allowed.
+            </div>
           </div>
           <div class="form-control" v-if="loginType === 'password'">
             <input
@@ -141,6 +147,13 @@ watch($$(instance), () => {
   }
 }, { immediate: true })
 
+function isUsernameValid(): boolean {
+  if (!username) {
+    return true
+  }
+  return /^[a-z0-9_]+$/.test(username)
+}
+
 function isLoginFormValid(): boolean {
   if (!instance) {
     return false
@@ -153,10 +166,13 @@ function isLoginFormValid(): boolean {
     }
   } else {
     const inviteCodeValid = instance.registrations ? true : Boolean(inviteCode)
+    if (!username || !isUsernameValid()) {
+      return false
+    }
     if (loginType === "password") {
-      return Boolean(username) && Boolean(password) && inviteCodeValid
+      return Boolean(password) && inviteCodeValid
     } else {
-      return Boolean(username) && inviteCodeValid
+      return inviteCodeValid
     }
   }
 }
@@ -399,6 +415,10 @@ $text-color: #fff;
     font-size: 12px;
     margin-top: 3px;
     padding: 0 15px;
+
+    &.error {
+      color: $error-color;
+    }
   }
 
   button[type="submit"] {