a _little_ more design on the login page

This commit is contained in:
Scott Chacon 2023-02-21 12:47:21 +01:00
parent 85f3c82e53
commit f674dfa02d
2 changed files with 84 additions and 8 deletions

View File

@ -27,7 +27,10 @@
<div>
{#if $user}
<button on:click={() => user.delete()}>Log out</button>
<button
class="py-1 px-3 rounded text-white bg-blue-400"
on:click={() => user.delete()}>Log out</button
>
{:else if $token !== null}
{#await Promise.all([open($token.url), pollForUser($token.token)])}
<div>Log in in your system browser</div>
@ -39,8 +42,10 @@
if you are not redirected automatically, you can
</p>
{:else}
<button on:click={() => api.login.token.create().then(token.set)}
>Log in</button
<button
class="py-1 px-3 rounded text-white bg-blue-400"
on:click={() => api.login.token.create().then(token.set)}
>Sign up or Log in</button
>
{/if}
</div>

View File

@ -6,9 +6,80 @@
const { user, api } = data;
</script>
<div>
{#if $user}
<div>Welcome, {$user.name}!</div>
{/if}
<Login {user} {api} />
<div class="p-4 mx-auto">
<div class="max-w-xl mx-auto p-4">
{#if $user}
<div>Welcome, {$user.name}!</div>
<Login {user} {api} />
{:else}
<div class="text-2xl text-white text-center p-4">
Connect to GitButler Cloud
</div>
<div class="text-white space-y-4">
<div>
Sign up or log in to GitButler Cloud for more tools and
features:
</div>
<ul class="text-zinc-400 pb-4 space-y-1">
<li class="flex flex-row space-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="white"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
/>
</svg>
<span
>Backup everything you do in any of your projects</span
>
</li>
<li class="flex flex-row space-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="white"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
/>
</svg>
<span>Sync your data across devices</span>
</li>
<li class="flex flex-row space-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="white"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
/>
</svg>
<span>AI commit message automated suggestions</span>
</li>
</ul>
<div class="mt-8">
<Login {user} {api} />
</div>
</div>
{/if}
</div>
</div>