Implement authentication forms with toggle between login and registration

Author: Vianpyro

components/authentication/Login.vue

@@ -0,0 +1,7 @@
+<template>
+    <form id="login-form">
+        <input type="email" id="login-email" name="email" placeholder="Email" required autofocus>
+        <input type="password" id="login-password" name="password" placeholder="Password" required>
+        <button type="submit">Login</button>
+    </form>
+</template>

components/authentication/Register.vue

@@ -0,0 +1,30 @@
+<template>
+    <form id="register-form">
+        <input type="text" id="register-username" name="username" placeholder="Username" required>
+        <input type="email" id="register-email" name="email" placeholder="Email" required>
+
+        <div>
+            <input type="password" id="register-password" name="password" placeholder="Password" required>
+            <input class="show-password-check" id="show-password-input" type="checkbox" tabindex="-1">
+            <label class="show-password" for="show-password-input" title="Show Password"></label>
+            <progress id="password-strength" class="hidden"></progress>
+        </div>
+
+        <div>
+            <input type="password" id="register-password-confirm" name="password-confirm"
+                placeholder="Confirm password" required>
+            <input class="show-password-check" id="show-password-confirm-input" type="checkbox" tabindex="-1">
+            <label class="show-password" for="show-password-confirm-input" title="Show Password"></label>
+        </div>
+
+        <button type="submit">Register</button>
+    </form>
+</template>
+
+<style scoped>
+#password-strength {
+    appearance: none;
+    height: 0.5rem;
+    width: 100%;
+}
+</style>

pages/login.vue

@@ -1,5 +1,117 @@
 <template>
-    <div>
-        Login
+    <div id="authentication">
+        <section id="login">
+            <Login />
+            <a id="go-to-login" @click="goToRegister">Don't have an account? <span class="link-color">Register</span></a>
+        </section>
+        <section id="register" class="hidden">
+            <Register />
+            <a id="go-to-register" @click="goToLogin">Already have an account? <span class="link-color">Login</span></a>
+        </section>
     </div>
 </template>
+
+<script setup>
+import Login from '@/components/authentication/Login.vue';
+import Register from '@/components/authentication/Register.vue';
+
+const goToLogin = () => {
+    document.getElementById('login').classList.remove('hidden');
+    document.getElementById('register').classList.add('hidden');
+};
+
+const goToRegister = () => {
+    document.getElementById('login').classList.add('hidden');
+    document.getElementById('register').classList.remove('hidden');
+};
+</script>
+
+<style scoped>
+a {
+    cursor: pointer;
+}
+
+section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.link-color {
+    color: var(--color-primary);
+}
+
+#authentication {
+    display: flex;
+    align-items: center;
+}
+
+:deep(button[type="submit"]) {
+    margin-top: 1rem;
+}
+
+:deep(input[type="checkbox"]) {
+    display: none;
+}
+
+:deep(form) {
+    display: flex;
+    width: clamp(300px, 80%, 600px);
+    flex-direction: column;
+    border: 1px solid var(--background-color-secondary);
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    gap: 1rem;
+}
+
+:deep(form>div) {
+    display: flex;
+    flex-direction: column;
+}
+
+:deep(input) {
+    padding: 0.5rem;
+    border: none;
+    border-radius: var(--border-radius);
+    width: calc(100% - 0.5rem * 2);
+}
+
+:deep(.password-input>label) {
+    background-image: "url(../images/tabler--eye.svg)";
+    height: 2rem;
+    width: 2rem;
+    background-repeat: no-repeat;
+    background-size: contain;
+    cursor: pointer;
+}
+
+:deep(.show-password-check:checked+label.show-password) {
+    background-image: "url(../images/tabler--eye-off.svg)";
+}
+
+/* Pseudo-elements */
+
+:deep(input:placeholder-shown) {
+    border-bottom: 1px solid light-dark(black, white);
+}
+
+:deep(
+    input:user-valid,
+    input.valid
+) {
+    background-color: rgb(0 255 0 / 5%);
+    border: 1px solid green;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+:deep(
+    input:user-invalid,
+    input.invalid
+) {
+    background-color: rgb(255 0 0 / 5%);
+    border: 1px solid red;
+    box-sizing: border-box;
+    width: 100%;
+}
+</style>