From 707c439aae6efb75d2145f31ef4c46e2a9c795f6 Mon Sep 17 00:00:00 2001
From: MrMelon54 <github@mrmelon54.com>
Date: Wed, 12 Oct 2022 00:51:52 +0100
Subject: [PATCH] Add dynamic password constraints

---
 src/routes/login/LoginRoute.svelte | 49 ++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/src/routes/login/LoginRoute.svelte b/src/routes/login/LoginRoute.svelte
index e69de29..36e88c8 100644
--- a/src/routes/login/LoginRoute.svelte
+++ b/src/routes/login/LoginRoute.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  let inputUsername: string = "";
+  let inputPassword: string = "";
+
+  function submitLogin() {
+    console.info(inputUsername);
+  }
+
+  function conDone(v: boolean): string {
+    return v ? "follows-constraint" : "missing-constraint";
+  }
+</script>
+
+<form class="login-form" method="post" on:submit|preventDefault={submitLogin}>
+  <h1>Sign In</h1>
+
+  <section>
+    <label for="email">Email</label>
+    <input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputUsername} />
+  </section>
+
+  <section>
+    <label for="current-password">Password</label>
+    <input id="current-password" name="current-password" type="password" autocomplete="current-password" aria-describedby="password-constraints" required bind:value={inputPassword} />
+    <div id="password-constraints">
+      <ul>
+        <li class={conDone(inputPassword.length >= 8)}>Eight or more characters</li>
+        <li class={conDone(inputPassword.toLocaleLowerCase() != inputPassword)}>Uppercase characters</li>
+        <li class={conDone(inputPassword.toLocaleUpperCase() != inputPassword)}>Lowercase characters</li>
+        <li class={conDone(/\d/.test(inputPassword))}>Numeric digit</li>
+        <li class={conDone(/\W/.test(inputPassword))}>Special symbol</li>
+      </ul>
+    </div>
+  </section>
+
+  <section>
+    <button type="submit" />
+  </section>
+</form>
+
+<style>
+  #password-constraints > ul > li.follows-constraint {
+    color: #bdd358;
+  }
+
+  #password-constraints > ul > li.missing-constraint {
+    color: #e5625e;
+  }
+</style>