Add passphrase page

package.json

@@ -26,13 +26,16 @@
 		"postcss": "^8.4.31",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
-		"tailwindcss": "^3.3.3",
-		"tiny-glob": "^0.2.9",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"clsx": "^2.0.0",
+		"svelte": "^4.0.5",
+		"tailwindcss": "^3.3.3",
+		"tiny-glob": "^0.2.9"
+	}
 }

src/lib/components/AppParagraph.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	export let text: string;
+	export let textColor = 'text-secondary';
 	export let extraProps = '';
 </script>
 
-<p class="text-base text-gray font-normal max-w-xs {extraProps}">
+<p class="{textColor} text-base font-normal {extraProps}">
 	{text}
 </p>

src/lib/components/Button.svelte

@@ -3,17 +3,27 @@
 	export let onClick: () => void;
 	export let color: 'primary' | 'secondary' = 'primary';
 	export let arrow = false;
+	export let extraBottomMargin = false;
+	export let disabled = false;
+
+	import clsx from 'clsx';
 </script>
 
 <button
-	class="max-w-xs p-2 my-2 rounded-2xl w-full text-base font-bold relative flex justify-center
-    items-center {color === 'primary'
-		? 'bg-primary text-white'
-		: 'bg-white text-gray border border-gray'}"
+	class={clsx(
+		'max-w-xs p-2 my-2 rounded-2xl text-base font-bold relative flex justify-center w-full',
+		{
+			'bg-primary-disabled text-white': color === 'primary' && disabled,
+			'bg-primary text-white': color === 'primary' && !disabled,
+			'bg-white text-secondary border border-secondary': color !== 'primary',
+			'mb-4': extraBottomMargin
+		}
+	)}
 	on:click={onClick}
+	{disabled}
 >
 	<span>{label}</span>
 	{#if arrow}
-		<img src="/img/arrow.svg" alt="Arrow" class="absolute right-4" />
+		<img src="/img/arrow-right.svg" alt="Arrow" class="absolute right-4" />
 	{/if}
 </button>

src/lib/components/Tooltip.svelte

@@ -0,0 +1,8 @@
+<div class="relative cursor-pointer group">
+	<slot name="content" />
+	<div
+		class="absolute invisible group-hover:visible z-10 bottom-full left-1/2 transform -translate-x-1/2 bg-white px-4 py-2 text-secondary text-sm rounded-md transition-opacity opacity-0 group-hover:opacity-100 shadow-lg w-96"
+	>
+		<slot name="body" />
+	</div>
+</div>

src/lib/helpers/index.ts

@@ -0,0 +1 @@
+export * from './navigation';

src/lib/helpers/navigation.ts

@@ -0,0 +1,3 @@
+export function dismissExtensionWindow() {
+	return window.close();
+}

src/lib/stores/const.ts

@@ -0,0 +1 @@
+export const passphrase = 'passphrase';

src/lib/stores/index.ts

@@ -0,0 +1,2 @@
+export * from './passphraseStore';
+export * from './const';

src/lib/stores/passphraseStore.ts

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+const passphraseStore = writable('');
+
+export { passphraseStore };

src/lib/types/index.ts

@@ -0,0 +1 @@
+export * from './password';

src/lib/types/password.ts

@@ -0,0 +1 @@
+export type SetPassphrase = 'set' | 'confirm';

src/routes/+page.svelte

@@ -1,12 +1,9 @@
 <script>
 	import Button from '$components/Button.svelte';
 	import AppParagraph from '$components/AppParagraph.svelte';
+	import { dismissExtensionWindow } from '$lib/helpers';
 	function redirectToSetup() {
-		window.open('setup.html', '_blank');
-	}
-
-	function dismissExtensionWindow() {
-		return window.close();
+		window.open('setup/start.html', '_blank');
 	}
 </script>
 
@@ -22,11 +19,11 @@
 		<img src="/img/setup.svg" alt="Close" class="max-w-[48px]" />
 		<p class="font-bold text-2xl mt-4">Setup Required</p>
 		<AppParagraph
-			extraProps="my-4 text-center"
+			extraProps="my-4 text-center max-w-xs"
 			text="You are yet to setup Holo Key Manager. Click “start setup” to begin."
 		/>
 	</div>
 
-	<Button label="Start setup" onClick={redirectToSetup} />
+	<Button label="Start setup" onClick={redirectToSetup} extraBottomMargin />
 	<Button label="Cancel" onClick={dismissExtensionWindow} color="secondary" />
 </div>

src/routes/setup/+layout.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { page } from '$app/stores';
+	import { setContext } from 'svelte';
+	import { passphrase, passphraseStore } from '$stores';
+
+	function dismissExtensionWindow() {
+		window.history.back();
+	}
+
+	setContext(passphrase, passphraseStore);
+</script>
+
+<div
+	class="flex flex-col items-center mt-20 w-[576px] border border-light-gray rounded-xl mx-auto py-8"
+>
+	{#if !$page.url.pathname.includes('start')}
+		<button class="self-start ml-6 mb-4 flex items-center" on:click={dismissExtensionWindow}>
+			<img src="/img/arrow-left.svg" alt="Arrow" />
+			<span class="ml-2 text-base">Back</span></button
+		>
+	{/if}
+	<slot />
+</div>

src/routes/setup/enter-passphrase/+page.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import PopupDialog from './PopupDialog.svelte';
+	import { getContext } from 'svelte';
+	import { passphrase } from '$stores';
+	import EnterPassphraseComponent from './EnterPassphraseComponent.svelte';
+	import type { SetPassphrase } from '$lib/types';
+	import type { Writable } from 'svelte/store';
+
+	const passphraseStore = getContext<Writable<string>>(passphrase);
+
+	let passphraseState: SetPassphrase = 'set';
+	let confirmPassphrase = '';
+	let showDialog = false;
+
+	$: charCount = $passphraseStore.length;
+</script>
+
+{#if passphraseState === 'set'}
+	<EnterPassphraseComponent
+		bind:inputValue={$passphraseStore}
+		isRed={charCount < 20}
+		title="Enter Passphrase"
+		description="Enter your desired passphrase and remind to keep it safe."
+		nextLabel="Set Passphrase"
+		inputState={charCount < 20
+			? 'Please enter a minimum of 20 Characters'
+			: `${charCount} characters`}
+		next={() => (showDialog = true)}
+	/>
+	{#if showDialog}
+		<PopupDialog next={() => (passphraseState = 'confirm')} dismiss={() => (showDialog = false)} />
+	{/if}
+{/if}
+
+{#if passphraseState === 'confirm'}
+	<EnterPassphraseComponent
+		bind:inputValue={confirmPassphrase}
+		isRed={confirmPassphrase !== $passphraseStore}
+		title="Confirm Passphrase"
+		description="Tying loose ends, please enter your passphrase again."
+		nextLabel="Next"
+		inputState={confirmPassphrase !== $passphraseStore ? 'Passphrases do not match' : ``}
+		next={() => null}
+	/>
+{/if}

src/routes/setup/enter-passphrase/EnterPassphraseComponent.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import AppParagraph from '$components/AppParagraph.svelte';
+	import Button from '$components/Button.svelte';
+	import Tooltip from '$components/Tooltip.svelte';
+	import { dismissExtensionWindow } from '$lib/helpers';
+	import clsx from 'clsx';
+
+	export let inputValue: string;
+	export let isRed: boolean;
+	export let title: string;
+	export let description: string;
+	export let nextLabel: string;
+	export let inputState: string;
+	export let next: () => void;
+</script>
+
+<h1 class="text-4xl font-bold text-center mb-2">{title}</h1>
+<AppParagraph extraProps="mx-auto text-center" text={description} />
+<div class="p-6 w-full">
+	<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(isRed && 'text-alert')} text={inputState} />
+		<Tooltip>
+			<div slot="content">
+				<div class="flex items-center text-primary text-base">
+					<p>What is passphrase</p>
+					<img src="/img/question.svg" alt="Question icon" class="ml-2" />
+				</div>
+			</div>
+			<div slot="body">
+				<strong class="text-sm text-black">Passphrase</strong>
+				<p>
+					This is can be a word or sentence of your choice. E.g Manager (word) or The quick brown
+					fox jumps over the lazy dog (sentence). Make your passphrase as strong as possible. It
+					should be long, include a mix of many different types of characters, and be hard to guess.
+				</p>
+				<p class="pt-2">
+					You can optionally turn off your internet while doing this for added security.
+				</p>
+				<div class="pt-2">
+					<strong>Tip:</strong> Write down or store your passphrase in a password manager.
+				</div>
+			</div>
+		</Tooltip>
+	</div>
+</div>
+
+<div class="grid grid-cols-2 gap-5 w-full p-6">
+	<Button label="Cancel" onClick={dismissExtensionWindow} color="secondary" />
+	<Button disabled={inputValue.length < 20} label={nextLabel} onClick={next} />
+</div>

src/routes/setup/enter-passphrase/PopupDialog.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let dismiss: () => void;
+	export let next: () => void;
+</script>
+
+<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-500 bg-opacity-70">
+	<div class="bg-white p-10 rounded-md shadow-lg flex flex-col items-center">
+		<img src="/img/noun.svg" alt="Noun" />
+		<div class="my-4">
+			<h2 class="text-xl font-semibold">Important</h2>
+		</div>
+		<p>Did you remember to write down your passphrase?</p>
+		<div class="mt-4 flex flex-col justify-center w-36 mx-auto">
+			<button class="bg-tertiary text-white font-bold py-2 px-4 rounded-full m-2" on:click={next}>
+				Yes
+			</button>
+			<button class="underline text-quaternary font-bold py-2 px-4 m-2 bg-white" on:click={dismiss}>
+				Go back
+			</button>
+		</div>
+	</div>
+</div>

src/routes/setup/start/+page.svelte

@@ -0,0 +1,25 @@
+<script>
+	import Button from '$components/Button.svelte';
+	import AppParagraph from '$components/AppParagraph.svelte';
+	import { goto } from '$app/navigation';
+</script>
+
+<img src="/img/holo_logo.svg" alt="Holo Key Manager Logo" class="w-12 my-4" />
+<h1 class="text-4xl font-bold text-center">Holo Key Manager</h1>
+<div class="border-b-[0.5px] my-4 border-light-gray w-full">
+	<AppParagraph extraProps="mx-auto text-center max-w-xs" text="Welcome to Holo Key Manager." />
+	<AppParagraph
+		extraProps="mx-auto text-center max-w-xs mb-4"
+		text="Let’s setup up your hApps key manager."
+	/>
+</div>
+<AppParagraph
+	extraProps="my-4 max-w-xs"
+	text="Holo Key Manager is a secure key manager for creating and managing Holochain keys. Get easy access to all your keys. You can set up and manager one or more keys for each application"
+/>
+<AppParagraph
+	extraProps="my-4 max-w-xs"
+	text="First time user? Select “first time setup” below. If you have already setup the key manager in the past you can select “Import existing keys"
+/>
+<Button arrow label="First time setup" onClick={() => goto('/setup/enter-passphrase')} />
+<Button label="Import existing keys" onClick={() => null} color="secondary" />

svelte.config.js

@@ -11,7 +11,10 @@ const config = {
 		adapter: adapter(),
 		appDir: 'app',
 		alias: {
-			$components: path.resolve('./src/lib/components')
+			$components: path.resolve('./src/lib/components'),
+			$helpers: path.resolve('./src/lib/helpers'),
+			$stores: path.resolve('./src/lib/stores'),
+			$types: path.resolve('./src/lib/types')
 		}
 	}
 };