From 7f9f440789df8d77a43e4fdaa818f68fa46e2209 Mon Sep 17 00:00:00 2001
From: Kaname <56084970+kaname-png@users.noreply.github.com>
Date: Mon, 5 Sep 2022 19:21:19 +0000
Subject: [PATCH] feat(routes): rework ui from login and register page

---
 apps/ui/src/routes/__layout.svelte |   2 +-
 apps/ui/src/routes/login.svelte    | 127 ++++++++++++++++-------------
 apps/ui/src/routes/register.svelte | 100 ++++++++++++++---------
 3 files changed, 133 insertions(+), 96 deletions(-)

diff --git a/apps/ui/src/routes/__layout.svelte b/apps/ui/src/routes/__layout.svelte
index cd6033532..901aedea5 100644
--- a/apps/ui/src/routes/__layout.svelte
+++ b/apps/ui/src/routes/__layout.svelte
@@ -404,7 +404,7 @@
 	{/if}
 {/if}
 <main>
-	<div class="pl-14 lg:px-20">
+	<div class={$appSession.userId ? 'pl-14 lg:px-20' : null}>
 		<slot />
 	</div>
 </main>
diff --git a/apps/ui/src/routes/login.svelte b/apps/ui/src/routes/login.svelte
index c97987f0d..40f5fc2fe 100644
--- a/apps/ui/src/routes/login.svelte
+++ b/apps/ui/src/routes/login.svelte
@@ -49,66 +49,83 @@
 	<title>{$t('login.login')}</title>
 </svelt:head>
 
-<div class="flex h-screen flex-col items-center justify-center">
-	<div class="flex justify-center px-4">
-		<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
+<div class="flex lg:flex-row flex-col h-screen">
+	<div class="bg-neutral-focus h-screen lg:flex hidden flex-col justify-end p-20 flex-1">
+		<h1 class="title lg:text-6xl mb-5 border-gradient">Coolify</h1>
+		<h3 class="title">Made self-hosting simple.</h3>
+	</div>
+	<div class="flex flex-1 flex-col lg:max-w-2xl">
+		<div class="flex flex-row p-8 items-center space-x-3">
 			{#if $appSession.whiteLabeledDetails.icon}
-				<img
-					class="w-32 mx-auto pb-8"
-					src={$appSession.whiteLabeledDetails.icon}
-					alt="Icon for white labeled version of Coolify"
-				/>
+				<div class="avatar" style="width: 40px; height: 40px">
+					<img
+						src={$appSession.whiteLabeledDetails.icon}
+						alt="Icon for white labeled version of Coolify"
+					/>
+				</div>
 			{:else}
-				<div class="text-6xl font-bold border-gradient w-48 mx-auto border-b-4 mb-8">Coolify</div>
+				<div>
+					<div class="avatar" style="width: 40px; height: 40px">
+						<img src="favicon.png" alt="Coolify icon" />
+					</div>
+				</div>
+				<div class="prose">
+					<h4>Coolify dashboard</h4>
+				</div>
 			{/if}
-			<input
-				type="email"
-				name="email"
-				placeholder={$t('forms.email')}
-				autocomplete="off"
-				required
-				bind:this={emailEl}
-				bind:value={email}
-				class="w-full"
-			/>
-			<input
-				type="password"
-				name="password"
-				placeholder={$t('forms.password')}
-				bind:value={password}
-				required
-				class="w-full"
-			/>
+		</div>
+		<div
+			class="w-full md:px-20 lg:px-10 xl:px-20 p-6 flex flex-col h-full justify-center items-center"
+		>
+			<div class="mb-5 w-full prose prose-neutral">
+				<h1 class="m-0 white">Welcome back</h1>
+				<h5>Please login to continue.</h5>
+			</div>
+			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-3 w-full">
+				<input
+					type="email"
+					name="email"
+					placeholder={$t('forms.email')}
+					autocomplete="off"
+					required
+					bind:this={emailEl}
+					bind:value={email}
+					class="w-full"
+				/>
+				<input
+					type="password"
+					name="password"
+					placeholder={$t('forms.password')}
+					bind:value={password}
+					required
+					class="w-full"
+				/>
 
-			<div class="flex flex-col space-y-2 items-center justify-center pt-8">
-				<button
-					type="submit"
-					disabled={loading}
-					class="btn btn-sm w-full hover:bg-coollabs-100"
-					class:loading
-					class:bg-coollabs={!loading}
-					>{loading ? $t('login.authenticating') : $t('login.login')}</button
-				>
-				{#if $appSession.registrationEnabled}
-					<button on:click|preventDefault={gotoRegister} class="btn w-full"
+				<div class="flex space-y-3 flex-col pt-3">
+					<button
+						type="submit"
+						disabled={loading}
+						class="btn"
+						class:loading
+						class:bg-coollabs={!loading}
+						>{loading ? $t('login.authenticating') : $t('login.login')}</button
+					>
+
+					<button on:click|preventDefault={gotoRegister} class="btn btn-ghost"
 						>{$t('register.register')}</button
 					>
-				{:else}
-					<div class="text-stone-600 text-xs">
-						Registration is disabled. Please ask an admin to activate it.
-					</div>
-				{/if}
-			</div>
-		</form>
+				</div>
+			</form>
+			{#if browser && window.location.host === 'demo.coolify.io'}
+				<div class="pt-5 font-bold">
+					Registration is <span class="text-pink-500">open</span>, just fill in an email (does not
+					need to be live email address for the demo instance) and a password.
+				</div>
+				<div class="pt-5 font-bold">
+					All users gets an <span class="text-pink-500">own namespace</span>, so you won't be able
+					to access other users data.
+				</div>
+			{/if}
+		</div>
 	</div>
-	{#if browser && window.location.host === 'demo.coolify.io'}
-		<div class="pt-5 font-bold">
-			Registration is <span class="text-pink-500">open</span>, just fill in an email (does not need
-			to be live email address for the demo instance) and a password.
-		</div>
-		<div class="pt-5 font-bold">
-			All users gets an <span class="text-pink-500">own namespace</span>, so you won't be able to
-			access other users data.
-		</div>
-	{/if}
 </div>
diff --git a/apps/ui/src/routes/register.svelte b/apps/ui/src/routes/register.svelte
index 1a2eb7487..0cdf81c4a 100644
--- a/apps/ui/src/routes/register.svelte
+++ b/apps/ui/src/routes/register.svelte
@@ -61,38 +61,58 @@
 	}
 </script>
 
-<div class="icons fixed top-0 left-0 m-3 cursor-pointer" on:click={() => goto('/')}>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		class="h-6 w-6"
-		viewBox="0 0 24 24"
-		stroke-width="1.5"
-		stroke="currentColor"
-		fill="none"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-		<line x1="5" y1="12" x2="19" y2="12" />
-		<line x1="5" y1="12" x2="11" y2="18" />
-		<line x1="5" y1="12" x2="11" y2="6" />
-	</svg>
-</div>
-<div class="flex h-screen flex-col items-center justify-center">
-	{#if $appSession.userId}
-		<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
-	{:else}
-		<div class="flex justify-center px-4">
-			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
+<div class="flex lg:flex-row flex-col h-screen">
+	<div class="bg-neutral-focus h-screen lg:flex hidden flex-col justify-end p-20 flex-1">
+		<h1 class="title lg:text-6xl mb-5 border-gradient">Coolify</h1>
+		<h3 class="title">Made self-hosting simple.</h3>
+	</div>
+	<div class="flex flex-1 flex-col lg:max-w-2xl">
+		<div class="flex flex-row p-8 items-center space-x-3 justify-between">
+			<div class="icons cursor-pointer" on:click={() => goto('/')}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<line x1="5" y1="12" x2="19" y2="12" />
+					<line x1="5" y1="12" x2="11" y2="18" />
+					<line x1="5" y1="12" x2="11" y2="6" />
+				</svg>
+			</div>
+			<div class="flex flex-row items-center space-x-3">
 				{#if $appSession.whiteLabeledDetails.icon}
-					<img
-						class="w-32 mx-auto pb-8"
-						src={$appSession.whiteLabeledDetails.icon}
-						alt="Icon for white labeled version of Coolify"
-					/>
+					<div class="avatar" style="width: 40px; height: 40px">
+						<img
+							src={$appSession.whiteLabeledDetails.icon}
+							alt="Icon for white labeled version of Coolify"
+						/>
+					</div>
 				{:else}
-					<div class="text-6xl font-bold border-gradient w-48 mx-auto border-b-4 mb-8">Coolify</div>
+					<div>
+						<div class="avatar" style="width: 40px; height: 40px">
+							<img src="favicon.png" alt="Coolify icon" />
+						</div>
+					</div>
+					<div class="prose">
+						<h4>Coolify dashboard</h4>
+					</div>
 				{/if}
+			</div>
+		</div>
+		<div
+			class="w-full md:px-20 lg:px-10 xl:px-20 p-6 flex flex-col h-full justify-center items-center"
+		>
+			<div class="mb-5 w-full prose prose-neutral">
+				<h1 class="m-0 white">Get started</h1>
+				<h5>Enter the required fields to complete the registration.</h5>
+			</div>
+			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-3 w-full">
 				<input
 					type="email"
 					name="email"
@@ -101,7 +121,7 @@
 					required
 					bind:this={emailEl}
 					bind:value={email}
-					class="w-56 md:w-96"
+					class="w-full"
 				/>
 				<input
 					type="password"
@@ -110,7 +130,7 @@
 					bind:this={passwordEl}
 					bind:value={password}
 					required
-					class="w-56 md:w-96"
+					class="w-full"
 				/>
 				<input
 					type="password"
@@ -118,13 +138,13 @@
 					placeholder={$t('forms.password_again')}
 					bind:value={passwordCheck}
 					required
-					class="w-56 md:w-96"
+					class="w-full"
 				/>
 
-				<div class="flex space-x-2 h-8 items-center justify-center pt-8">
+				<div class="flex space-y-3 flex-col pt-3">
 					<button
 						type="submit"
-						class="btn btn-sm"
+						class="btn"
 						disabled={loading}
 						class:bg-transparent={loading}
 						class:bg-coollabs={!loading}
@@ -132,11 +152,11 @@
 					>
 				</div>
 			</form>
+			{#if userCount === 0}
+				<div class="pt-5">
+					{$t('register.first_user')}
+				</div>
+			{/if}
 		</div>
-		{#if userCount === 0}
-			<div class="pt-5">
-				{$t('register.first_user')}
-			</div>
-		{/if}
-	{/if}
+	</div>
 </div>