From 15dffb3a0216c0eccc06b2fc449c423aba6811b2 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Thu, 21 Jul 2022 22:22:30 -0600
Subject: add register and login pages, DRY up more, add $comp, add new
 components

---
 src/components/HowItWorksCard.svelte  |  3 +-
 src/components/Icon.svelte            |  6 ++++
 src/components/Image.svelte           |  6 ++++
 src/components/LandingHeader.svelte   | 10 +++---
 src/components/LandingHero.svelte     | 17 +++------
 src/components/LandingInfoCard.svelte | 15 ++++----
 src/components/PrimaryButton.svelte   |  4 +--
 src/components/RegisterOrLogin.svelte | 65 +++++++++++++++++++++++++++++++++++
 src/components/index.js               |  3 ++
 src/routes/index.svelte               |  8 +----
 src/routes/login.svelte               |  5 +++
 src/routes/register.svelte            |  5 +++
 static/icons/eye.svg                  |  4 +++
 tailwind.config.cjs                   |  3 +-
 vite.config.js                        |  8 ++++-
 15 files changed, 126 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Icon.svelte
 create mode 100644 src/components/Image.svelte
 create mode 100644 src/components/RegisterOrLogin.svelte
 create mode 100644 src/routes/login.svelte
 create mode 100644 src/routes/register.svelte
 create mode 100644 static/icons/eye.svg

diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index 6f94efcb..519cdcdc 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -1,11 +1,12 @@
 <script>
+	import Icon from './Icon.svelte';
 	export let image;
 	export let step;
 	export let description;
 </script>
 
 <div class="space-y-5">
-	<img src="/icons/{image}.svg" alt={image} class="mx-auto w-32 h-32" />
+	<Icon icon={image} style="mx-auto w-32 h-32" />
 	<p class="text-2xl font-medium">{step}</p>
 	<p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
 		{description}
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
new file mode 100644
index 00000000..58a61033
--- /dev/null
+++ b/src/components/Icon.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let icon;
+	export let style;
+</script>
+
+<img src="/icons/{icon}.svg" alt={icon} class={style} />
diff --git a/src/components/Image.svelte b/src/components/Image.svelte
new file mode 100644
index 00000000..b7db2b92
--- /dev/null
+++ b/src/components/Image.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let image;
+	export let style;
+</script>
+
+<img src="/images/{image}.png" alt={image} class={style} />
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index c6cd4095..d6d55863 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -1,6 +1,7 @@
 <script>
+	import { goto } from '$app/navigation';
 	import { scroll } from '../lib/utils';
-	import { PrimaryButton, SecondaryButton } from '../components';
+	import { PrimaryButton, SecondaryButton, Icon } from '$comp';
 
 	export let howItWorks;
 	export let faq;
@@ -9,14 +10,15 @@
 <header class="w-full lg:w-5/6 pt-10 mx-auto">
 	<nav class="block xl:flex flex-wrap justify-between items-center">
 		<a href="/">
-			<img src="/icons/logo.svg" alt="logo" class="mx-auto mb-5 xl:mb-0" />
+			<Icon icon="logo" style="mx-auto mb-5 xl:mb-0" />
 		</a>
+
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
 			<button on:click={() => scroll(howItWorks)}>How It Works</button>
 			<button on:click={() => scroll(faq)}>FAQ</button>
 			<button>About</button>
-			<SecondaryButton title="Start in Seconds" />
-			<PrimaryButton title="Login" />
+			<SecondaryButton title="Start in Seconds" click={() => goto('/register')} />
+			<PrimaryButton title="Sign In" click={() => goto('/login')} />
 		</div>
 	</nav>
 </header>
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 756564de..828eed35 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -1,5 +1,6 @@
 <script>
-	import { PrimaryButton } from '../components';
+	import { goto } from '$app/navigation';
+	import { PrimaryButton, Icon, Image } from '$comp';
 </script>
 
 <div>
@@ -9,11 +10,7 @@
 		>
 			The <span class="relative">
 				easiest
-				<img
-					src="/icons/rays.svg"
-					alt="rays"
-					class="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24"
-				/>
+				<Icon icon="rays" style="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" />
 			</span> way to accept Bitcoin in your store.
 		</h1>
 		<h2
@@ -23,13 +20,9 @@
 			of Sale. No software or hardware required.
 		</h2>
 		<div class="flex justify-center">
-			<PrimaryButton title="Start in Seconds" />
+			<PrimaryButton title="Start in Seconds" click={() => goto('/register')} />
 		</div>
 	</div>
 	<!-- hero image -->
-	<img
-		src="/images/hero-image.png"
-		alt="tablet-pos"
-		class="w-full md:w-2/3 max-w-5xl mx-auto mt-20"
-	/>
+	<Image image="hero-image" style="w-full md:w-2/3 max-w-5xl mx-auto mt-20" />
 </div>
diff --git a/src/components/LandingInfoCard.svelte b/src/components/LandingInfoCard.svelte
index 2b2dd2a1..c67d3fcc 100644
--- a/src/components/LandingInfoCard.svelte
+++ b/src/components/LandingInfoCard.svelte
@@ -1,4 +1,6 @@
 <script>
+	import Image from './Image.svelte';
+
 	export let image;
 	export let title;
 	export let description;
@@ -6,14 +8,11 @@
 </script>
 
 <div class="block lg:flex justify-center lg:space-x-20 items-center">
-	{#if image}
-		<img
-			src="/images/{image}.png"
-			alt={image}
-			class="w-2/3 md:w-5/12 lg:w-2/5 xl:w-1/3 2xl:w-1/4 max-w-xl mx-auto lg:mx-0 mb-10 lg:mb-0 {order ===
-				'reverse' && 'order-last'}"
-		/>
-	{/if}
+	<Image
+		{image}
+		style="w-2/3 md:w-5/12 lg:w-2/5 xl:w-1/3 2xl:w-1/4 max-w-xl mx-auto lg:mx-0 mb-10 lg:mb-0 {order ===
+			'reverse' && 'order-last'}"
+	/>
 	<div class="w-full lg:w-1/2 max-w-3xl space-y-10 mx-auto lg:mx-0">
 		<h3 class="text-5xl font-medium text-left w-full mx-auto lg:mx-0 md:w-[500px]">{title}</h3>
 		<p class="text-secondary text-xl font-medium w-full md:w-[500px] mx-auto lg:mx-0">
diff --git a/src/components/PrimaryButton.svelte b/src/components/PrimaryButton.svelte
index 3caeb07d..4b33142b 100644
--- a/src/components/PrimaryButton.svelte
+++ b/src/components/PrimaryButton.svelte
@@ -4,5 +4,5 @@
 </script>
 
 <button class="bg-black text-white border rounded-full px-6 py-2 font-bold" on:click={click}
-	>{title}</button
->
+	>{title}
+</button>
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
new file mode 100644
index 00000000..48e8096a
--- /dev/null
+++ b/src/components/RegisterOrLogin.svelte
@@ -0,0 +1,65 @@
+<script>
+	import { Icon } from '$comp';
+
+	export let page;
+
+	let revealPassword = false;
+</script>
+
+<div class="pt-10">
+	<a href="/">
+		<Icon icon="logo" style="mx-auto mb-10" />
+	</a>
+
+	<div class="flex justify-center items-center">
+		<div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]">
+			<h1 class="text-2xl font-bold text-center">{page}</h1>
+
+			<form class="space-y-5">
+				<div>
+					<label for="username" class="font-semibold">Username</label>
+					<input type="text" required class="bg-input p-4 rounded-2xl w-full" />
+				</div>
+
+				<div class="relative">
+					<label for="password" class="block font-semibold">Password</label>
+					<input
+						type={revealPassword ? 'text' : 'password'}
+						required
+						class="block bg-input p-4 rounded-2xl w-full"
+					/>
+					<button
+						type="button"
+						on:click={() => (revealPassword = !revealPassword)}
+						class="absolute right-5 top-10"
+					>
+						<Icon icon="eye" />
+					</button>
+				</div>
+
+				{#if page === 'Register'}
+					<p class="text-secondary text-sm">
+						We recommend a long, random password generated with a password manager.
+					</p>
+				{:else}
+					<div class="flex justify-end items-center">
+						<a href="" class="underline underline-offset-4 text-black text-sm">Forgot Password?</a>
+					</div>
+				{/if}
+
+				<button type="submit" class="bg-black text-white w-full rounded-2xl p-4 font-semibold"
+					>{page}
+				</button>
+			</form>
+
+			<p class="text-secondary text-center font-medium">
+				{page === 'Register' ? 'Already have an account?' : "Don't have an account?"}
+				<a
+					href={page === 'Register' ? '/login' : '/register'}
+					class="block md:inline text-black underline underline-offset-4"
+					>{page === 'Register' ? 'Sign in' : 'Register'}
+				</a>
+			</p>
+		</div>
+	</div>
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index 448db45d..d96a8656 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -5,3 +5,6 @@ export { default as HowItWorksCard } from './HowItWorksCard.svelte';
 export { default as FaqCard } from './FaqCard.svelte';
 export { default as PrimaryButton } from './PrimaryButton.svelte';
 export { default as SecondaryButton } from './SecondaryButton.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Image } from './Image.svelte';
+export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 8912e41e..cda885a3 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,11 +1,5 @@
 <script>
-	import {
-		LandingHeader,
-		LandingHero,
-		LandingInfoCard,
-		HowItWorksCard,
-		FaqCard
-	} from '../components';
+	import { LandingHeader, LandingHero, LandingInfoCard, HowItWorksCard, FaqCard } from '$comp';
 
 	let howItWorks;
 	let faq;
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
new file mode 100644
index 00000000..c61269c1
--- /dev/null
+++ b/src/routes/login.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { RegisterOrLogin } from '$comp';
+</script>
+
+<RegisterOrLogin page="Sign in" />
diff --git a/src/routes/register.svelte b/src/routes/register.svelte
new file mode 100644
index 00000000..69ec5fd2
--- /dev/null
+++ b/src/routes/register.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { RegisterOrLogin } from '$comp';
+</script>
+
+<RegisterOrLogin page="Register" />
diff --git a/static/icons/eye.svg b/static/icons/eye.svg
new file mode 100644
index 00000000..ca6243ff
--- /dev/null
+++ b/static/icons/eye.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9999 11C17.9999 13.2091 16.2091 15 13.9999 15C11.7908 15 9.99992 13.2091 9.99992 11C9.99992 8.79086 11.7908 7 13.9999 7C16.2091 7 17.9999 8.79086 17.9999 11Z" stroke="#858A92" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.27759 11C2.97662 5.5905 8.03033 1.66666 14.0005 1.66666C19.9707 1.66666 25.0244 5.59055 26.7234 11C25.0244 16.4095 19.9707 20.3333 14.0005 20.3333C8.03033 20.3333 2.97659 16.4095 1.27759 11Z" stroke="#858A92" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 06e852ab..0d4dc4e3 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -4,7 +4,8 @@ module.exports = {
 	theme: {
 		extend: {
 			colors: {
-				secondary: '#858A92'
+				secondary: '#858A92',
+				input: '#F5F7FA'
 			}
 		}
 	},
diff --git a/vite.config.js b/vite.config.js
index 87470505..bb04f608 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,14 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import path from 'path';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	resolve: {
+		alias: {
+			$comp: path.resolve('src/components/index.js')
+		}
+	}
 };
 
 export default config;
-- 
cgit v1.2.3