From c5745b8030b2e7fb0d3dc2c1ceb85be21dba15d3 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 8 May 2022 12:58:58 +0200
Subject: [PATCH] feat: user settings is now at workspace level

---
 frontend/CaddyfileDemo                        | 16 ------
 frontend/src/routes/__layout.svelte           |  2 +-
 frontend/src/routes/user/CenteredModal.svelte |  8 +--
 frontend/src/routes/user/login@user.svelte    |  6 +--
 .../settings@user.svelte}                     | 50 ++++++++-----------
 .../src/routes/user/workspaces@user.svelte    | 13 +++--
 6 files changed, 39 insertions(+), 56 deletions(-)
 delete mode 100644 frontend/CaddyfileDemo
 rename frontend/src/routes/{settings.svelte => user/settings@user.svelte} (85%)

diff --git a/frontend/CaddyfileDemo b/frontend/CaddyfileDemo
deleted file mode 100644
index 9fe9dc57d9..0000000000
--- a/frontend/CaddyfileDemo
+++ /dev/null
@@ -1,16 +0,0 @@
-http://localhost {  
-  bind {$ADDRESS}
-  reverse_proxy /api/* https://demo.windmill.dev {
-    	header_up Host {http.reverse_proxy.upstream.hostport}
-  }
-  reverse_proxy /* http://localhost:3000
-}
-
-
-https://localhost {  
-  bind {$ADDRESS}
-  reverse_proxy /ws/* https://demo.windmill.dev {
-    	header_up Host {http.reverse_proxy.upstream.hostport}
-  }
-}
-
diff --git a/frontend/src/routes/__layout.svelte b/frontend/src/routes/__layout.svelte
index b1ce1f4b25..c76cbd22fc 100644
--- a/frontend/src/routes/__layout.svelte
+++ b/frontend/src/routes/__layout.svelte
@@ -278,7 +278,7 @@
 					>
 						<span class="block px-4 py-2 text-sm text-gray-500">{$usersWorkspaceStore?.email}</span>
 						<a
-							href="/settings"
+							href="/user/settings"
 							class="block px-4 py-2 text-sm text-gray-700"
 							role="menuitem"
 							tabindex="-1"
diff --git a/frontend/src/routes/user/CenteredModal.svelte b/frontend/src/routes/user/CenteredModal.svelte
index 6635bcff4a..45500a0a04 100644
--- a/frontend/src/routes/user/CenteredModal.svelte
+++ b/frontend/src/routes/user/CenteredModal.svelte
@@ -2,7 +2,7 @@
 	import { SettingsService } from '../../gen';
 
 	export let subtitle: string | undefined = undefined;
-	export let title = 'Welcome to windmill.dev (alpha)';
+	export let title = 'Welcome to Windmill (beta)';
 	let version = '';
 
 	SettingsService.backendVersion().then((x) => {
@@ -10,8 +10,8 @@
 	});
 </script>
 
-<div class="flex justify-center h-screen bg-gray-50">
-	<div class="w-10/12 md:w-7/12 lg:w-4/12 xl:3/12 m-auto">
+<div class="flex justify-center min-h-screen bg-gray-50 pt-10">
+	<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:4/12 m-auto">
 		<h1 class="justify-center text-center font-medium pb-2 text-gray-700">
 			{title}
 		</h1>
@@ -27,7 +27,7 @@
 		<!-- empty row to make the form a little bit above vertical centering-->
 		<div class="py-12" />
 	</div>
-	<div class="absolute bottom-0 right-0 text-2xs text-gray-500 italic px-3 py-1">
+	<div class="absolute top-0 right-0 text-2xs text-gray-500 italic px-3 py-1">
 		windmill.dev backend v. <span class="font-mono">{version}</span>
 	</div>
 </div>
diff --git a/frontend/src/routes/user/login@user.svelte b/frontend/src/routes/user/login@user.svelte
index 2c548d8c12..72f6833b17 100644
--- a/frontend/src/routes/user/login@user.svelte
+++ b/frontend/src/routes/user/login@user.svelte
@@ -62,10 +62,10 @@
 
 <!-- Enable submit form on enter -->
 <CenteredModal subtitle={error}>
-	<div class="justify-center text-center">
+	<div class="justify-center text-center flex flex-col">
 		<span class="text-xs text-gray-600">Currently only signup through Github is supported</span>
 		<a rel="external" href="/api/oauth/login/github"
-			><button class="w-full default-button bg-black mt-2 py-2"
+			><button class="m-auto default-button bg-black mt-2 py-2 w-96"
 				>Signup or login with Github &nbsp;
 				<Icon class="text-white pb-1" data={faGithub} scale={1.4} />
 			</button></a
@@ -73,7 +73,7 @@
 	</div>
 	<div class="flex flex-row-reverse w-full">
 		<button
-			class="my-6 text-xs text-blue-400"
+			class="my-6 text-xs text-blue-400 m-auto"
 			id="showPassword"
 			on:click={() => {
 				showPassword = !showPassword;
diff --git a/frontend/src/routes/settings.svelte b/frontend/src/routes/user/settings@user.svelte
similarity index 85%
rename from frontend/src/routes/settings.svelte
rename to frontend/src/routes/user/settings@user.svelte
index be43479627..33d3b3427e 100644
--- a/frontend/src/routes/settings.svelte
+++ b/frontend/src/routes/user/settings@user.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-	import { userStore, workspaceStore } from '../stores';
+	import { usersWorkspaceStore } from '../../stores';
 
-	import { onMount } from 'svelte';
-	import type { TruncatedToken, NewToken } from '../gen';
-	import { UserService, SettingsService } from '../gen';
-	import { displayDate, sendUserToast, getToday } from '../utils';
-	import PageHeader from './components/PageHeader.svelte';
-	import CenteredPage from './components/CenteredPage.svelte';
+	import type { TruncatedToken, NewToken } from '../../gen';
+	import { UserService, SettingsService } from '../../gen';
+	import { displayDate, sendUserToast, getToday } from '../../utils';
+	import PageHeader from './../components/PageHeader.svelte';
 	import Icon from 'svelte-awesome';
 	import { faPlus } from '@fortawesome/free-solid-svg-icons';
-	import TableCustom from './components/TableCustom.svelte';
+	import TableCustom from '../components/TableCustom.svelte';
+	import CenteredModal from './CenteredModal.svelte';
 
 	let newPassword: string | undefined;
 	let passwordError: string | undefined;
@@ -21,14 +20,6 @@
 	let displayCreateToken = false;
 	let login_type = 'none';
 
-	function handleKeyUp(event: KeyboardEvent) {
-		const key = event.key || event.keyCode;
-		if (key === 13 || key === 'Enter') {
-			event.preventDefault();
-			setPassword();
-		}
-	}
-
 	async function setPassword(): Promise<void> {
 		try {
 			if (newPassword) {
@@ -90,19 +81,17 @@
 
 	loadVersion();
 	loadLoginType();
-	$: {
-		if ($workspaceStore) {
-			listTokens();
-		}
-	}
+	listTokens();
 </script>
 
-<CenteredPage>
-	<PageHeader title="User settings" />
+<CenteredModal title="User settings">
+	<div class="flex flex-row justify-between">
+		<a href="/user/workspaces">&leftarrow; Back to workspaces</a>
+	</div>
 	<div class="text-2xs text-gray-500 italic pb-6">
 		Running windmill version (backend) {version}
 	</div>
-	<h2 class="border-b">Change password</h2>
+	<h2 class="border-b">User info</h2>
 	<div class="">
 		{#if passwordError}
 			<div class="text-purple-500 text-2xs grow">{passwordError}</div>
@@ -110,10 +99,11 @@
 		<div class="flex flex-col gap-2 w-full ">
 			<div class="mt-4">
 				<label class="block w-60 mb-2 text-gray-500">
-					<input disabled value={$userStore?.email ?? ''} class="input mt-1" />
+					<div class="text-gray-700">email</div>
+					<input disabled value={$usersWorkspaceStore?.email} class="input mt-1" />
 				</label>
 				{#if login_type == 'password'}
-					<label class="block w-12/12">
+					<label class="block w-120">
 						<div class="text-gray-700">password</div>
 						<input
 							type="password"
@@ -131,6 +121,7 @@
 							text-sm
 							"
 						/>
+						<button on:click={() => setPassword()} class="mt-4 default-button">Set password</button>
 					</label>
 				{:else if login_type == 'github'}
 					<span>Authentified through Github OAuth2. Cannot set a password.</span>
@@ -243,7 +234,8 @@
 			</tbody>
 		</TableCustom>
 	</div>
-</CenteredPage>
 
-<style>
-</style>
+	<div class="flex flex-row justify-between pt-4">
+		<a href="/user/workspaces">&leftarrow; Back to workspaces</a>
+	</div>
+</CenteredModal>
diff --git a/frontend/src/routes/user/workspaces@user.svelte b/frontend/src/routes/user/workspaces@user.svelte
index e9c7dc0513..1fec8eac43 100644
--- a/frontend/src/routes/user/workspaces@user.svelte
+++ b/frontend/src/routes/user/workspaces@user.svelte
@@ -6,6 +6,8 @@
 	import { superadmin, usersWorkspaceStore, workspaceStore } from '../../stores';
 	import CenteredModal from './CenteredModal.svelte';
 	import Switch from '../components/Switch.svelte';
+	import { faUser, faUserAlt, faUserCog } from '@fortawesome/free-solid-svg-icons';
+	import Icon from 'svelte-awesome';
 
 	let invites: WorkspaceInvite[] = [];
 	let list_all_as_super_admin: boolean = false;
@@ -68,7 +70,8 @@
 			<button
 				class="
 					block
-					w-full
+					w-96
+					mx-auto
 					py-1
 					px-2
 					rounded-md
@@ -102,7 +105,8 @@
 		<div
 			class="
 					block
-					w-full
+					w-96
+					mx-auto
 					py-1
 					px-2
 					rounded-md
@@ -142,7 +146,10 @@
 			</span>
 		</div>
 	{/each}
-	<div class="flex flex-row-reverse mt-10">
+	<div class="flex justify-between mt-10">
+		<a class="mr-10" href="/user/settings">
+			<Icon data={faUserCog} class="mr-1" scale={1} />User settings</a
+		>
 		<button
 			class="default-button-secondary"
 			on:click={async () => {