Merge pull request #592 from kaname-png/ui-reworks
feat(routes): rework ui from login and register page
This commit is contained in:
Andras Bacsai
GitHub
commit
9acd5c94e8
@ -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>
|
||||||
|
|||||||
@ -49,66 +49,83 @@
|
|||||||
<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}
|
||||||
<img
|
<div class="avatar" style="width: 40px; height: 40px">
|
||||||
class="w-32 mx-auto pb-8"
|
<img
|
||||||
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}
|
||||||
<input
|
</div>
|
||||||
type="email"
|
<div
|
||||||
name="email"
|
class="w-full md:px-20 lg:px-10 xl:px-20 p-6 flex flex-col h-full justify-center items-center"
|
||||||
placeholder={$t('forms.email')}
|
>
|
||||||
autocomplete="off"
|
<div class="mb-5 w-full prose prose-neutral">
|
||||||
required
|
<h1 class="m-0 white">Welcome back</h1>
|
||||||
bind:this={emailEl}
|
<h5>Please login to continue.</h5>
|
||||||
bind:value={email}
|
</div>
|
||||||
class="w-full"
|
<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-3 w-full">
|
||||||
/>
|
<input
|
||||||
<input
|
type="email"
|
||||||
type="password"
|
name="email"
|
||||||
name="password"
|
placeholder={$t('forms.email')}
|
||||||
placeholder={$t('forms.password')}
|
autocomplete="off"
|
||||||
bind:value={password}
|
required
|
||||||
required
|
bind:this={emailEl}
|
||||||
class="w-full"
|
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">
|
<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>
|
||||||
<div class="text-stone-600 text-xs">
|
</form>
|
||||||
Registration is disabled. Please ask an admin to activate it.
|
{#if browser && window.location.host === 'demo.coolify.io'}
|
||||||
</div>
|
<div class="pt-5 font-bold">
|
||||||
{/if}
|
Registration is <span class="text-pink-500">open</span>, just fill in an email (does not
|
||||||
</div>
|
need to be live email address for the demo instance) and a password.
|
||||||
</form>
|
</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>
|
</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>
|
</div>
|
||||||
|
|||||||
@ -61,38 +61,58 @@
|
|||||||
}
|
}
|
||||||
</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">
|
||||||
<svg
|
<div class="bg-neutral-focus h-screen lg:flex hidden flex-col justify-end p-20 flex-1">
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<h1 class="title lg:text-6xl mb-5 border-gradient">Coolify</h1>
|
||||||
class="h-6 w-6"
|
<h3 class="title">Made self-hosting simple.</h3>
|
||||||
viewBox="0 0 24 24"
|
</div>
|
||||||
stroke-width="1.5"
|
<div class="flex flex-1 flex-col lg:max-w-2xl">
|
||||||
stroke="currentColor"
|
<div class="flex flex-row p-8 items-center space-x-3 justify-between">
|
||||||
fill="none"
|
<div class="icons cursor-pointer" on:click={() => goto('/')}>
|
||||||
stroke-linecap="round"
|
<svg
|
||||||
stroke-linejoin="round"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
class="h-6 w-6"
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
viewBox="0 0 24 24"
|
||||||
<line x1="5" y1="12" x2="19" y2="12" />
|
stroke-width="1.5"
|
||||||
<line x1="5" y1="12" x2="11" y2="18" />
|
stroke="currentColor"
|
||||||
<line x1="5" y1="12" x2="11" y2="6" />
|
fill="none"
|
||||||
</svg>
|
stroke-linecap="round"
|
||||||
</div>
|
stroke-linejoin="round"
|
||||||
<div class="flex h-screen flex-col items-center justify-center">
|
>
|
||||||
{#if $appSession.userId}
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||||
<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
|
<line x1="5" y1="12" x2="19" y2="12" />
|
||||||
{:else}
|
<line x1="5" y1="12" x2="11" y2="18" />
|
||||||
<div class="flex justify-center px-4">
|
<line x1="5" y1="12" x2="11" y2="6" />
|
||||||
<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row items-center space-x-3">
|
||||||
{#if $appSession.whiteLabeledDetails.icon}
|
{#if $appSession.whiteLabeledDetails.icon}
|
||||||
<img
|
<div class="avatar" style="width: 40px; height: 40px">
|
||||||
class="w-32 mx-auto pb-8"
|
<img
|
||||||
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>
|
||||||
|
{#if userCount === 0}
|
||||||
|
<div class="pt-5">
|
||||||
|
{$t('register.first_user')}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if userCount === 0}
|
</div>
|
||||||
<div class="pt-5">
|
|
||||||
{$t('register.first_user')}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user