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}
|
||||
<main>
|
||||
<div class="pl-14 lg:px-20">
|
||||
<div class={$appSession.userId ? 'pl-14 lg:px-20' : null}>
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user