From 8193754ff2fcb7a9a84a8a179529c1a3920610a5 Mon Sep 17 00:00:00 2001
From: Levminer <levminer@levminer.com>
Date: Mon, 11 Jul 2022 15:10:51 +0200
Subject: [PATCH] Landing window design

---
 interface/windows/confirm.svelte |  22 +++----
 interface/windows/landing.svelte | 108 ++++++++++++++++++++++++++-----
 2 files changed, 100 insertions(+), 30 deletions(-)

diff --git a/interface/windows/confirm.svelte b/interface/windows/confirm.svelte
index a30deac..46c193c 100644
--- a/interface/windows/confirm.svelte
+++ b/interface/windows/confirm.svelte
@@ -13,11 +13,11 @@
 					<h5>Password</h5>
 					<div class="flex items-center justify-center">
 						<input class="input passwordInput mt-1" type="password" />
-						<svg xmlns="http://www.w3.org/2000/svg" on:click={showPassword} class="showPassword0 relative right-9 h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+						<svg xmlns="http://www.w3.org/2000/svg" on:click={showPassword} class="showPassword relative right-9 h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 							<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
 							<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
 						</svg>
-						<svg xmlns="http://www.w3.org/2000/svg" on:click={showPassword} class="hidePassword0 relative right-9 hidden h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+						<svg xmlns="http://www.w3.org/2000/svg" on:click={showPassword} class="hidePassword relative right-9 hidden h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 							<path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
 						</svg>
 					</div>
@@ -54,23 +54,19 @@
 <script>
 	import Details from "../components/details.svelte"
 
-	let passwordShown = false
-
 	const showPassword = () => {
-		if (passwordShown === false) {
-			document.querySelector(".showPassword0").style.display = "none"
-			document.querySelector(".hidePassword0").style.display = "block"
+		const inputState = document.querySelector(".passwordInput").getAttribute("type")
 
-			document.querySelector(".passwordInput").setAttribute("type", "text")
+		if (inputState === "password") {
+			document.querySelector(".showPassword").style.display = "none"
+			document.querySelector(".hidePassword").style.display = "block"
 
-			passwordShown = true
+			document.querySelector(".passwordInput").setAttribute("type", "text")
 		} else {
-			document.querySelector(".showPassword0").style.display = "block"
-			document.querySelector(".hidePassword0").style.display = "none"
+			document.querySelector(".showPassword").style.display = "block"
+			document.querySelector(".hidePassword").style.display = "none"
 
 			document.querySelector(".passwordInput").setAttribute("type", "password")
-
-			passwordShown = false
 		}
 	}
 </script>
diff --git a/interface/windows/landing.svelte b/interface/windows/landing.svelte
index e6f048f..3ec88a9 100644
--- a/interface/windows/landing.svelte
+++ b/interface/windows/landing.svelte
@@ -34,15 +34,15 @@
 		<Details>
 			<div class="flex justify-between">
 				<div>
-					<h4>Go back</h4>
-					<h5>Choose a different login method.</h5>
+					<h4>Looking for more methods?</h4>
+					<h5>Check out Authme Pro.</h5>
 				</div>
 				<div>
-					<button class="button">
+					<button class="smallButton">
 						<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
+							<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
 						</svg>
-						Go back
+						More information
 					</button>
 				</div>
 			</div>
@@ -51,7 +51,7 @@
 </div>
 
 <div class="transparent-900 m-auto mt-40 mb-60 w-3/5 rounded-2xl p-10 text-center">
-	<h1>Authme</h1>
+	<h1>Require password</h1>
 
 	<div class="mx-auto flex w-4/5 flex-col items-center justify-center rounded-2xl p-10">
 		<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
@@ -60,15 +60,73 @@
 		</div>
 
 		<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
-			<div class="mx-auto flex w-full items-center justify-center gap-5 sm:flex-wrap ">
-				<div class="flex flex-col items-center justify-center gap-2">
-					<h5 class="">Password</h5>
-					<input class="input" type="password" />
+			<div class="mx-auto flex w-full items-center justify-center gap-5 text-left sm:flex-wrap">
+				<div>
+					<h5>Password</h5>
+					<div class="flex items-center justify-center">
+						<input class="input passwordInput0 mt-1" type="password" />
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							on:click={() => {
+								showPassword(0)
+							}}
+							class="showPassword0 relative right-9 h-6 w-6 cursor-pointer"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+							<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+						</svg>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							on:click={() => {
+								showPassword(0)
+							}}
+							class="hidePassword0 relative right-9 hidden h-6 w-6 cursor-pointer"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+						</svg>
+					</div>
 				</div>
 
-				<div class="flex flex-col items-center justify-center gap-2">
+				<div>
 					<h5>Confirm password</h5>
-					<input class="input" type="password" />
+					<div class="flex items-center justify-center">
+						<input class="input passwordInput1 mt-1" type="password" />
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							on:click={() => {
+								showPassword(1)
+							}}
+							class="showPassword1 relative right-9 h-6 w-6 cursor-pointer"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+							<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+						</svg>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							on:click={() => {
+								showPassword(1)
+							}}
+							class="hidePassword1 relative right-9 hidden h-6 w-6 cursor-pointer"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+						</svg>
+					</div>
 				</div>
 			</div>
 
@@ -83,11 +141,11 @@
 		<Details>
 			<div class="flex justify-between">
 				<div>
-					<h4>Go back</h4>
-					<h5>Choose a different login method.</h5>
+					<h4>Choose a different method</h4>
+					<h5>Go back to the previous page and choose a different login method.</h5>
 				</div>
-				<div>
-					<button class="button">
+				<div class="ml-20">
+					<button class="smallButton">
 						<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 							<path stroke-linecap="round" stroke-linejoin="round" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
 						</svg>
@@ -99,6 +157,22 @@
 	</div>
 </div>
 
-<script>
+<script lang="ts">
 	import Details from "../components/details.svelte"
+
+	const showPassword = (id: number) => {
+		const inputState = document.querySelector(`.passwordInput${id}`).getAttribute("type")
+
+		if (inputState === "password") {
+			document.querySelector(`.showPassword${id}`).style.display = "none"
+			document.querySelector(`.hidePassword${id}`).style.display = "block"
+
+			document.querySelector(`.passwordInput${id}`).setAttribute("type", "text")
+		} else {
+			document.querySelector(`.showPassword${id}`).style.display = "block"
+			document.querySelector(`.hidePassword${id}`).style.display = "none"
+
+			document.querySelector(`.passwordInput${id}`).setAttribute("type", "password")
+		}
+	}
 </script>