From 0a9874474bb0403c132bae1fa409a09bd957eac0 Mon Sep 17 00:00:00 2001
From: Dawid Urbas <dawid@getbold.agency>
Date: Wed, 22 Nov 2023 15:53:31 +0100
Subject: [PATCH] Fix setup design

---
 src/lib/components/Init.svelte                |  2 +-
 src/lib/components/Input.svelte               |  7 +++
 src/lib/components/InputPassword.svelte       | 16 ++++++
 src/lib/components/Login.svelte               | 17 +++---
 src/lib/components/SetupContainer.svelte      |  5 ++
 src/lib/components/index.ts                   |  2 +-
 src/routes/+page.svelte                       | 11 +++-
 src/routes/done/+page.svelte                  | 27 +++++----
 src/routes/setup/+layout.svelte               |  9 ++-
 src/routes/setup/app-password/+page.svelte    | 57 +++++++++----------
 .../setup/enter-passphrase/+page.svelte       |  2 +-
 .../EnterSecretComponent.svelte               | 22 ++-----
 static/manifest.json                          |  2 +-
 13 files changed, 101 insertions(+), 78 deletions(-)
 create mode 100644 src/lib/components/Input.svelte
 create mode 100644 src/lib/components/InputPassword.svelte
 create mode 100644 src/lib/components/SetupContainer.svelte
 rename src/{lib/components => routes/setup/enter-passphrase}/EnterSecretComponent.svelte (70%)

diff --git a/src/lib/components/Init.svelte b/src/lib/components/Init.svelte
index 547d1e1..367c67c 100644
--- a/src/lib/components/Init.svelte
+++ b/src/lib/components/Init.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { Button, AppParagraph } from '$components';
 	import { dismissWindow } from '$lib/helpers';
 
diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
new file mode 100644
index 0000000..1c95da3
--- /dev/null
+++ b/src/lib/components/Input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let value = '';
+	let extraProps = '';
+	let placeholder = '';
+</script>
+
+<input bind:value class={extraProps} {placeholder} />
diff --git a/src/lib/components/InputPassword.svelte b/src/lib/components/InputPassword.svelte
new file mode 100644
index 0000000..b6eb84e
--- /dev/null
+++ b/src/lib/components/InputPassword.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import clsx from 'clsx';
+
+	export let value = '';
+	export let extraProps = '';
+	export let label = '';
+	export let error = '';
+</script>
+
+<div class={clsx('flex flex-col w-full border-black border-b-[0.5px]', extraProps)}>
+	<div class="flex justify-between items-center mb-1">
+		<label for="password" class="text-base text-secondary">{label}</label>
+		<span class="text-xs text-alert">{error}</span>
+	</div>
+	<input bind:value type="password" class="outline-none focus:outline-none" />
+</div>
diff --git a/src/lib/components/Login.svelte b/src/lib/components/Login.svelte
index 166de68..5636a97 100644
--- a/src/lib/components/Login.svelte
+++ b/src/lib/components/Login.svelte
@@ -1,7 +1,8 @@
-<script>
+<script lang="ts">
 	import { Button, AppParagraph } from '$components';
 	import { dismissWindow } from '$lib/helpers';
 	import { sessionStorageQueries } from '$queries';
+	import InputPassword from './InputPassword.svelte';
 	let password = '';
 
 	const { signInMutation } = sessionStorageQueries();
@@ -14,23 +15,19 @@
 </script>
 
 <div class="m-8">
-	<div class="flex justify-between items-center mb-4">
-		<img src="/img/holo_logo.svg" alt="Holo Key Manager Logo" />
+	<div class="flex justify-end items-center mb-4">
 		<button on:click={dismissWindow} class="bg-transparent border-none">
 			<img src="/img/close.svg" alt="Close" />
 		</button>
 	</div>
-
 	<div class="flex flex-col justify-center items-center">
-		<img src="/img/logo.svg" alt="Login" class="max-w-[48px]" />
-		<h1 class="font-bold text-2xl mt-4">Login Required</h1>
+		<img src="/img/holo_logo.svg" alt="Login" class="w-18 h-18" />
+		<h1 class="font-bold text-2xl mt-4">Welcome Back</h1>
 		<AppParagraph
 			extraProps="my-4 text-center max-w-xs"
-			text="Please enter your password to login."
+			text="Please enter your password to login into Holo Key Manager"
 		/>
-		<input bind:value={password} type="password" class="my-4" placeholder="Enter password" />
+		<InputPassword bind:value={password} label="Enter password" />
 	</div>
-
 	<Button label="Login" onClick={login} extraBottomMargin />
-	<Button label="Cancel" onClick={dismissWindow} color="secondary" />
 </div>
diff --git a/src/lib/components/SetupContainer.svelte b/src/lib/components/SetupContainer.svelte
new file mode 100644
index 0000000..5206f9d
--- /dev/null
+++ b/src/lib/components/SetupContainer.svelte
@@ -0,0 +1,5 @@
+<div
+	class="flex flex-col items-center mt-20 w-[576px] border border-light-gray rounded-xl mx-auto py-8"
+>
+	<slot />
+</div>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 1264057..e9b9bf5 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,6 +1,6 @@
 export { default as AppParagraph } from './AppParagraph.svelte';
 export { default as Button } from './Button.svelte';
 export { default as Title } from './Title.svelte';
-export { default as EnterSecretComponent } from './EnterSecretComponent.svelte';
 export { default as Init } from './Init.svelte';
 export { default as Login } from './Login.svelte';
+export { default as SetupContainer } from './SetupContainer.svelte';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 11a910e..5773084 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Init, Login } from '$components';
+	import { dismissWindow } from '$helpers';
 	import { sessionStorageQueries } from '$queries';
 
 	const { sessionQuery, setupQuery } = sessionStorageQueries();
@@ -8,7 +9,15 @@
 {#if $sessionQuery.isFetching || $setupQuery.isFetching}
 	<span>Loading</span>
 {:else if $sessionQuery.data}
-	<span>Session</span>
+	<div class="m-8">
+		<div class="flex justify-between items-center mb-4">
+			<img src="/img/holo_logo.svg" alt="Holo Key Manager Logo" />
+			<button on:click={dismissWindow} class="bg-transparent border-none">
+				<img src="/img/close.svg" alt="Close" />
+			</button>
+		</div>
+		<h1 class="font-bold text-2xl mt-4">Holo Key Manager</h1>
+	</div>
 {:else if $setupQuery.data}
 	<Login />
 {:else}
diff --git a/src/routes/done/+page.svelte b/src/routes/done/+page.svelte
index da084a3..dae3235 100644
--- a/src/routes/done/+page.svelte
+++ b/src/routes/done/+page.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
 	import { Title, AppParagraph } from '$components';
+	import { SetupContainer } from '$components';
 </script>
 
-<img src="/img/holo_logo.svg" alt="Holo Key Manager Logo" class="w-12 my-4" />
-<Title>Setup Complete</Title>
-<div class="border-b-[0.5px] mb-4 border-light-gray w-full">
-	<AppParagraph
-		extraProps="mx-auto text-center max-w-xs"
-		text="Your Holo Key Manager setup is now complete."
-	/>
-	<AppParagraph
-		extraProps="mx-auto text-center max-w-xs mb-4"
-		text="You can now login to the extension by clicking the extension icon."
-	/>
-</div>
+<SetupContainer>
+	<img src="/img/holo_logo.svg" alt="Holo Key Manager Logo" class="w-12 my-4" />
+	<Title>Setup Complete</Title>
+	<div class="border-b-[0.5px] mb-4 border-light-gray w-full">
+		<AppParagraph
+			extraProps="mx-auto text-center max-w-xs"
+			text="Your Holo Key Manager setup is now complete."
+		/>
+		<AppParagraph
+			extraProps="mx-auto text-center max-w-xs mb-4"
+			text="You can now login to the extension by clicking the extension icon."
+		/>
+	</div>
+</SetupContainer>
diff --git a/src/routes/setup/+layout.svelte b/src/routes/setup/+layout.svelte
index 955747f..725276c 100644
--- a/src/routes/setup/+layout.svelte
+++ b/src/routes/setup/+layout.svelte
@@ -1,5 +1,6 @@
-<script>
+<script lang="ts">
 	import { page } from '$app/stores';
+	import { SetupContainer } from '$components';
 	import { dismissWindow } from '$helpers';
 	import { sessionStorageQueries } from '$queries';
 
@@ -15,9 +16,7 @@
 	}
 </script>
 
-<div
-	class="flex flex-col items-center mt-20 w-[576px] border border-light-gray rounded-xl mx-auto py-8"
->
+<SetupContainer>
 	{#if allowGoBack}
 		<button class="self-start ml-6 mb-4 flex items-center" on:click={goBack}>
 			<img src="/img/arrow-left.svg" alt="Arrow" />
@@ -25,4 +24,4 @@
 		>
 	{/if}
 	<slot />
-</div>
+</SetupContainer>
diff --git a/src/routes/setup/app-password/+page.svelte b/src/routes/setup/app-password/+page.svelte
index d7a74f2..3baf1b9 100644
--- a/src/routes/setup/app-password/+page.svelte
+++ b/src/routes/setup/app-password/+page.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { keysStore } from '$stores';
 	import { goto } from '$app/navigation';
-	import { EnterSecretComponent } from '$components';
+	import { AppParagraph, Button, Title } from '$components';
 	import { onMount } from 'svelte';
-	import type { SetSecret } from '$types';
 	import { sessionStorageQueries } from '$queries';
+	import { dismissWindow } from '$helpers';
+	import InputPassword from '$components/InputPassword.svelte';
 
 	const { passwordWithDeviceKeyMutation } = sessionStorageQueries();
 
@@ -14,7 +15,7 @@
 		}
 	});
 
-	const setPassword = async (password: string): Promise<void> => {
+	const setPassword = async (): Promise<void> => {
 		if ($keysStore.keys.device !== null) {
 			$passwordWithDeviceKeyMutation.mutate(
 				{
@@ -31,38 +32,34 @@
 		}
 	};
 
-	let appPasswordState: SetSecret = 'set';
 	let confirmPassword = '';
 	let password = '';
 
 	$: charCount = password.length;
+	$: isDisabled = charCount < 8 && confirmPassword !== password;
 </script>
 
-{#if appPasswordState === 'set'}
-	<EnterSecretComponent
-		bind:inputValue={password}
-		showTooltip={false}
-		isPassword
-		isDisabled={charCount < 8}
-		title="Enter password"
-		description="Enter your desired password. This will be required every time you start a new browser session."
-		nextLabel="Set password"
-		inputState={charCount < 8
-			? 'Please enter a minimum of 8 Characters'
-			: `${charCount} characters`}
-		next={() => (appPasswordState = 'confirm')}
+<Title>Set Key Manager Password</Title>
+<AppParagraph
+	extraProps="mx-auto text-center max-w-sm"
+	text="This password secures your Key Manager extension, it would be requested each time you launch it."
+/>
+<div class="p-6 w-full">
+	<InputPassword
+		bind:value={password}
+		label="New Password (8 Characters min)"
+		extraProps="mb-6"
+		error={charCount < 8 ? 'Please enter a minimum of 8 Characters' : ''}
 	/>
-{/if}
-{#if appPasswordState === 'confirm'}
-	<EnterSecretComponent
-		bind:inputValue={confirmPassword}
-		showTooltip={false}
-		isPassword
-		isDisabled={confirmPassword !== password}
-		title="Confirm Passphrase"
-		description="Tying loose ends, please enter your passphrase again."
-		nextLabel="Next"
-		inputState={confirmPassword !== password ? 'Passwords do not match' : ``}
-		next={() => setPassword(password)}
+	<InputPassword
+		bind:value={confirmPassword}
+		label="Confirm New Password"
+		extraProps="mb-4"
+		error={confirmPassword !== password ? "Password doesn't Match" : ''}
 	/>
-{/if}
+</div>
+
+<div class="grid grid-cols-2 gap-5 w-full p-6">
+	<Button label="Cancel" onClick={dismissWindow} color="secondary" />
+	<Button disabled={isDisabled} label="Set password" onClick={setPassword} />
+</div>
diff --git a/src/routes/setup/enter-passphrase/+page.svelte b/src/routes/setup/enter-passphrase/+page.svelte
index b77864c..8d4a0b8 100644
--- a/src/routes/setup/enter-passphrase/+page.svelte
+++ b/src/routes/setup/enter-passphrase/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import PopupDialog from './PopupDialog.svelte';
 	import { passphraseStore } from '$stores';
-	import { EnterSecretComponent } from '$components';
 	import type { SetSecret } from '$lib/types';
 	import { goto } from '$app/navigation';
+	import EnterSecretComponent from './EnterSecretComponent.svelte';
 
 	let passphraseState: SetSecret = 'set';
 	let confirmPassphrase = '';
diff --git a/src/lib/components/EnterSecretComponent.svelte b/src/routes/setup/enter-passphrase/EnterSecretComponent.svelte
similarity index 70%
rename from src/lib/components/EnterSecretComponent.svelte
rename to src/routes/setup/enter-passphrase/EnterSecretComponent.svelte
index 8077ce4..7e52cd9 100644
--- a/src/lib/components/EnterSecretComponent.svelte
+++ b/src/routes/setup/enter-passphrase/EnterSecretComponent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import AppParagraph from '$components/AppParagraph.svelte';
 	import Button from '$components/Button.svelte';
-	import Tooltip from './Tooltip.svelte';
+	import Tooltip from '../../../lib/components/Tooltip.svelte';
 	import Title from '$components/Title.svelte';
 	import { dismissWindow } from '$lib/helpers';
 	import clsx from 'clsx';
@@ -13,27 +13,17 @@
 	export let description: string;
 	export let nextLabel: string;
 	export let inputState: string;
-	export let isPassword = false;
 	export let next: () => void;
 </script>
 
 <Title>{title}</Title>
 <AppParagraph extraProps="mx-auto text-center" text={description} />
 <div class="p-6 w-full">
-	{#if isPassword}
-		<input
-			type="password"
-			bind:value={inputValue}
-			class="w-full rounded border border-secondary resize-none py-1 px-2 text-sm"
-			placeholder={title}
-		/>
-	{:else}
-		<textarea
-			bind:value={inputValue}
-			class="w-full h-44 rounded border border-secondary resize-none py-1 px-2 text-sm"
-			placeholder={title}
-		/>
-	{/if}
+	<textarea
+		bind:value={inputValue}
+		class="w-full h-44 rounded border border-secondary resize-none py-1 px-2 text-sm"
+		placeholder={title}
+	/>
 	<div class="flex justify-between items-center">
 		<AppParagraph textColor={clsx(isDisabled && 'text-alert')} text={inputState} />
 		{#if showTooltip}
diff --git a/static/manifest.json b/static/manifest.json
index 27b41b2..80c6e2e 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -1,7 +1,7 @@
 {
 	"name": "Holo key manager",
 	"description": "A browser extension to manage holo keys",
-	"version": "0.0.21",
+	"version": "0.0.22",
 	"manifest_version": 3,
 	"browser_specific_settings": {
 		"gecko": {