Better validation on username account creation.

wordplaydev · Oct 24, 2023 · 0865c25 · 0865c25
1 parent 30ed718
commit 0865c25
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/src/locale/en-US.json b/src/locale/en-US.json
@@ -4184,7 +4184,7 @@
                     "enter": "It looks like your login link came from a different browser or device. Can you enter your email again, just so we're sure it's you?",
                     "play": "You're logged in, we can save your projects online now! Want to create something?",
                     "emailrules": "Don't provide your email if you are 12 or younger.",
-                    "usernamerules": "Usernames should not contain identiable information. Passwords must be at least 10 characters long.",
+                    "usernamerules": "If you're creating an account, *usernames* should not contain identiable information (e.g., names), cannot be an email addresses, and should be at least 5 characters long. *Passwords* must be at least 10 characters long; if you're not using a password manager, choose three long words you'll remember.",
                     "change": "Want to change your email? Submit a new one and we'll send a confirmation to the old one.",
                     "sent": "Check your email for a login link.",
                     "logout": "Leaving a shared device and want to keep your projects private? Logout and we'll remove your projects from this device. They will still be stored online.",

diff --git a/src/routes/login/Login.svelte b/src/routes/login/Login.svelte
@@ -39,7 +39,15 @@
     $: emailSubmittable = !sent && validEmail(email);
 
     $: usernameSubmittable =
-        !sent && username.length > 4 && password.length >= 10;
+        !sent && isValidUsername(username) && isValidPassword(password);
+
+    function isValidUsername(username: string) {
+        return !validEmail(username) && username.length >= 5;
+    }
+
+    function isValidPassword(pass: string) {
+        return pass.length >= 10;
+    }
 
     async function startEmailLogin() {
         if (auth && emailSubmittable) {
@@ -204,11 +212,6 @@
 {/if}
 <Subheader>{$locales.get((l) => l.ui.page.login.subheader.username)}</Subheader>
 <form class="login-form" on:submit={startUsernameLogin}>
-    <Note
-        ><MarkupHtmlView
-            markup={$locales.get((l) => l.ui.page.login.prompt.usernamerules)}
-        /></Note
-    >
     <TextField
         description={$locales.get(
             (l) => l.ui.page.login.field.username.description
@@ -218,6 +221,7 @@
         )}
         bind:text={username}
         editable={!sent}
+        validator={(name) => isValidUsername(name)}
     />
     <div>
         <TextField
@@ -230,6 +234,7 @@
             )}
             bind:text={password}
             editable={!sent}
+            validator={(pass) => isValidPassword(pass)}
         />
         <Button
             submit
@@ -239,6 +244,9 @@
             action={() => undefined}>&gt;</Button
         ></div
     >
+    <MarkupHtmlView
+        markup={$locales.get((l) => l.ui.page.login.prompt.usernamerules)}
+    />
 </form>
 
 {#if sent === true}

diff --git a/src/routes/login/Profile.svelte b/src/routes/login/Profile.svelte
@@ -79,8 +79,8 @@
 
     function readyToDeleteAccount(email: string) {
         const finalEmail = username
-            ? `${confirmEmail}${HiddenUsernameEmailDomain}`
-            : confirmEmail;
+            ? `${email}${HiddenUsernameEmailDomain}`
+            : email;
         return validEmail(finalEmail) && finalEmail === user.email;
     }
 </script>