Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Merge pull request #592 from kaname-png/ui-reworks

Browse Source 
feat(routes): rework ui from login and register page
This commit is contained in:
Andras Bacsai 2022-09-06 08:42:26 +02:00 committed by GitHub
commit 9acd5c94e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 133 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ui/src/routes/__layout.svelte
View File

@ -404,7 +404,7 @@
{/if} {/if}
{/if} {/if}
<main> <main>
<div class="pl-14 lg:px-20"> <div class={$appSession.userId ? 'pl-14 lg:px-20' : null}>
<slot /> <slot />
</div> </div>
</main> </main>

55
apps/ui/src/routes/login.svelte
View File

@ -49,18 +49,39 @@
<title>{$t('login.login')}</title> <title>{$t('login.login')}</title>
</svelt:head> </svelt:head>
<div class="flex h-screen flex-col items-center justify-center"> <div class="flex lg:flex-row flex-col h-screen">
<div class="flex justify-center px-4"> <div class="bg-neutral-focus h-screen lg:flex hidden flex-col justify-end p-20 flex-1">
<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2"> <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} {#if $appSession.whiteLabeledDetails.icon}
<div class="avatar" style="width: 40px; height: 40px">
<img <img
class="w-32 mx-auto pb-8"
src={$appSession.whiteLabeledDetails.icon} src={$appSession.whiteLabeledDetails.icon}
alt="Icon for white labeled version of Coolify" alt="Icon for white labeled version of Coolify"
/> />
</div>
{:else} {: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} {/if}
</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 <input
type="email" type="email"
name="email" name="email"
@ -80,35 +101,31 @@
class="w-full" class="w-full"
/> />
<div class="flex flex-col space-y-2 items-center justify-center pt-8"> <div class="flex space-y-3 flex-col pt-3">
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
class="btn btn-sm w-full hover:bg-coollabs-100" class="btn"
class:loading class:loading
class:bg-coollabs={!loading} class:bg-coollabs={!loading}
>{loading ? $t('login.authenticating') : $t('login.login')}</button >{loading ? $t('login.authenticating') : $t('login.login')}</button
> >
{#if $appSession.registrationEnabled}
<button on:click|preventDefault={gotoRegister} class="btn w-full" <button on:click|preventDefault={gotoRegister} class="btn btn-ghost"
>{$t('register.register')}</button >{$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> </div>
</form> </form>
</div>
{#if browser && window.location.host === 'demo.coolify.io'} {#if browser && window.location.host === 'demo.coolify.io'}
<div class="pt-5 font-bold"> <div class="pt-5 font-bold">
Registration is <span class="text-pink-500">open</span>, just fill in an email (does not need Registration is <span class="text-pink-500">open</span>, just fill in an email (does not
to be live email address for the demo instance) and a password. need to be live email address for the demo instance) and a password.
</div> </div>
<div class="pt-5 font-bold"> <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 All users gets an <span class="text-pink-500">own namespace</span>, so you won't be able
access other users data. to access other users data.
</div> </div>
{/if} {/if}
</div>
</div>
</div> </div>

54
apps/ui/src/routes/register.svelte
View File

@ -61,7 +61,14 @@
} }
</script> </script>
<div class="icons fixed top-0 left-0 m-3 cursor-pointer" on:click={() => goto('/')}> <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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" class="h-6 w-6"
@ -77,22 +84,35 @@
<line x1="5" y1="12" x2="11" y2="18" /> <line x1="5" y1="12" x2="11" y2="18" />
<line x1="5" y1="12" x2="11" y2="6" /> <line x1="5" y1="12" x2="11" y2="6" />
</svg> </svg>
</div> </div>
<div class="flex h-screen flex-col items-center justify-center"> <div class="flex flex-row items-center space-x-3">
{#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">
{#if $appSession.whiteLabeledDetails.icon} {#if $appSession.whiteLabeledDetails.icon}
<div class="avatar" style="width: 40px; height: 40px">
<img <img
class="w-32 mx-auto pb-8"
src={$appSession.whiteLabeledDetails.icon} src={$appSession.whiteLabeledDetails.icon}
alt="Icon for white labeled version of Coolify" alt="Icon for white labeled version of Coolify"
/> />
</div>
{:else} {: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} {/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 <input
type="email" type="email"
name="email" name="email"
@ -101,7 +121,7 @@
required required
bind:this={emailEl} bind:this={emailEl}
bind:value={email} bind:value={email}
class="w-56 md:w-96" class="w-full"
/> />
<input <input
type="password" type="password"
@ -110,7 +130,7 @@
bind:this={passwordEl} bind:this={passwordEl}
bind:value={password} bind:value={password}
required required
class="w-56 md:w-96" class="w-full"
/> />
<input <input
type="password" type="password"
@ -118,13 +138,13 @@
placeholder={$t('forms.password_again')} placeholder={$t('forms.password_again')}
bind:value={passwordCheck} bind:value={passwordCheck}
required 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 <button
type="submit" type="submit"
class="btn btn-sm" class="btn"
disabled={loading} disabled={loading}
class:bg-transparent={loading} class:bg-transparent={loading}
class:bg-coollabs={!loading} class:bg-coollabs={!loading}
@ -132,11 +152,11 @@
> >
</div> </div>
</form> </form>
</div>
{#if userCount === 0} {#if userCount === 0}
<div class="pt-5"> <div class="pt-5">
{$t('register.first_user')} {$t('register.first_user')}
</div> </div>
{/if} {/if}
{/if} </div>
</div>
</div> </div>