From a49171f8cc46ec1a15c5404f14319dc94cb2be9d Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 5 Sep 2022 09:29:58 +0200
Subject: [PATCH] ui: login page

---
 apps/ui/src/lib/store.ts           |  1 +
 apps/ui/src/routes/__layout.svelte | 22 ++++++++++------------
 apps/ui/src/routes/login.svelte    | 21 +++++++++++++--------
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/apps/ui/src/lib/store.ts b/apps/ui/src/lib/store.ts
index 5c7ee92a3..4114026d5 100644
--- a/apps/ui/src/lib/store.ts
+++ b/apps/ui/src/lib/store.ts
@@ -3,6 +3,7 @@ import cuid from 'cuid';
 import { writable, readable, type Writable } from 'svelte/store';
 
 interface AppSession {
+    registrationEnabled: boolean;
     ipv4: string | null,
     ipv6: string | null,
     version: string | null,
diff --git a/apps/ui/src/routes/__layout.svelte b/apps/ui/src/routes/__layout.svelte
index fcf040cd5..cd6033532 100644
--- a/apps/ui/src/routes/__layout.svelte
+++ b/apps/ui/src/routes/__layout.svelte
@@ -66,6 +66,7 @@
 <script lang="ts">
 	export let baseSettings: any;
 	export let supportedServiceTypesAndVersions: any;
+	$appSession.registrationEnabled = baseSettings.registrationEnabled;
 	$appSession.ipv4 = baseSettings.ipv4;
 	$appSession.ipv6 = baseSettings.ipv6;
 	$appSession.version = baseSettings.version;
@@ -142,7 +143,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -172,7 +173,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentcolor"
@@ -202,7 +203,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -232,7 +233,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -268,7 +269,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -295,7 +296,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -319,11 +320,10 @@
 					class="icons bg-coolgray-200"
 					class:text-iam={$page.url.pathname.startsWith('/iam')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
-					data-tip="IAM"
 					><svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
 						viewBox="0 0 24 24"
+						class="h-9 w-9"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -344,12 +344,11 @@
 					class="icons bg-coolgray-200"
 					class:text-settings={$page.url.pathname.startsWith('/settings')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
-					data-tip="Settings"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
 						viewBox="0 0 24 24"
+						class="h-9 w-9"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -367,12 +366,11 @@
 				<div
 					id="logout"
 					class="icons bg-coolgray-200 hover:text-error"
-					data-tip="Logout"
 					on:click={logout}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="ml-1 h-7 w-7"
+						class="ml-1 h-8 w-8"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
diff --git a/apps/ui/src/routes/login.svelte b/apps/ui/src/routes/login.svelte
index 88bd5e698..c97987f0d 100644
--- a/apps/ui/src/routes/login.svelte
+++ b/apps/ui/src/routes/login.svelte
@@ -69,7 +69,7 @@
 				required
 				bind:this={emailEl}
 				bind:value={email}
-				class="w-56 md:w-96"
+				class="w-full"
 			/>
 			<input
 				type="password"
@@ -77,22 +77,27 @@
 				placeholder={$t('forms.password')}
 				bind:value={password}
 				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 flex-col space-y-2 items-center justify-center pt-8">
 				<button
 					type="submit"
 					disabled={loading}
-					class="btn btn-sm"
+					class="btn btn-sm w-full hover:bg-coollabs-100"
 					class:loading
 					class:bg-coollabs={!loading}
 					>{loading ? $t('login.authenticating') : $t('login.login')}</button
 				>
-
-				<button on:click|preventDefault={gotoRegister} class="btn btn-sm"
-					>{$t('register.register')}</button
-				>
+				{#if $appSession.registrationEnabled}
+					<button on:click|preventDefault={gotoRegister} class="btn w-full"
+						>{$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>