mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-16 01:31:19 +10:00
Many new improvments and features to the UI (#76)
* feat(general): many new improvments and features to the UI * fix: fix lints and run preetier * fix: furthermore fixes * chore: fix preetier eslint issue * stlye: reposition mark all as read button for better placement * fix: fix inccorect positioning on the mark all as read buton, again * fix: fix account related issue with predefined types and styling * fix: fix notification button dissapearance & type definition * fix: fix auth page styling * stlye: fixed styling on users list * fix: fix lint dead code collector * fix: please the prettier gods * fix(notifications): seriously serialising * chore: please the prettier gods once again, o holy one * fix: remove eslint thing, im blaming eslint for that one --------- Co-authored-by: Aden <aden@adenmgb.com>
This commit is contained in:
Aden Lindsay
GitHub
@ -1,187 +1,192 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex min-h-screen bg-zinc-950 flex-1 flex-col justify-center py-12 sm:px-6 lg:px-8"
|
||||
>
|
||||
<div class="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<DropLogo class="mx-auto h-10 w-auto" />
|
||||
<h2
|
||||
class="mt-6 text-center text-2xl font-bold font-display leading-9 tracking-tight text-zinc-100"
|
||||
>
|
||||
Create your Drop account
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex min-h-screen flex-1 bg-zinc-900">
|
||||
<div
|
||||
class="flex flex-1 flex-col justify-center px-4 py-8 sm:px-6 lg:flex-none lg:px-20 xl:px-24"
|
||||
>
|
||||
<div class="mx-auto w-full max-w-sm lg:w-96">
|
||||
<div>
|
||||
<DropLogo class="h-8 w-auto" />
|
||||
<h2
|
||||
class="mt-4 text-2xl font-bold font-display leading-9 tracking-tight text-zinc-100"
|
||||
>
|
||||
Create your Drop account
|
||||
</h2>
|
||||
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
||||
Fill in your details below to create your account.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
|
||||
<div class="bg-zinc-900 px-6 py-12 shadow sm:rounded-lg sm:px-12">
|
||||
<form class="space-y-6" @submit.prevent="() => register_wrapper()">
|
||||
<div>
|
||||
<label
|
||||
for="display-name"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Display Name</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="display-name"
|
||||
v-model="displayName"
|
||||
name="display-name"
|
||||
type="text"
|
||||
autocomplete="display-name"
|
||||
required
|
||||
placeholder="AwesomeDropGamer771"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Email address</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validEmail ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be in the format user@example.com
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
required
|
||||
:disabled="!!invitation?.email"
|
||||
placeholder="me@example.com"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-px bg-zinc-700" />
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Username</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validUsername ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be 5 or more characters, and lowercase
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
name="username"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
required
|
||||
:disabled="!!invitation?.username"
|
||||
placeholder="myUsername"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-px bg-zinc-700" />
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Password</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validPassword ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be 14 or more characters
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="password"
|
||||
required
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="confirm-password"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Confirm Password</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validConfirmPassword ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be the same as above
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmPassword"
|
||||
name="confirm-password"
|
||||
type="password"
|
||||
autocomplete="confirm-password"
|
||||
required
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LoadingButton type="submit" :loading="loading" class="w-full">
|
||||
Create
|
||||
</LoadingButton>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
<div class="mt-6">
|
||||
<div class="bg-zinc-900">
|
||||
<form class="space-y-4" @submit.prevent="() => register_wrapper()">
|
||||
<div>
|
||||
<label
|
||||
for="display-name"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Display Name</label
|
||||
>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
id="display-name"
|
||||
v-model="displayName"
|
||||
name="display-name"
|
||||
type="text"
|
||||
autocomplete="display-name"
|
||||
required
|
||||
placeholder="AwesomeDropGamer771"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Email address</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validEmail ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be in the format user@example.com
|
||||
</p>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
required
|
||||
:disabled="!!invitation?.email"
|
||||
placeholder="me@example.com"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-px bg-zinc-700" />
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Username</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validUsername ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be 5 or more characters, and lowercase
|
||||
</p>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
name="username"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
required
|
||||
:disabled="!!invitation?.username"
|
||||
placeholder="myUsername"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-px bg-zinc-700" />
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Password</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validPassword ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be 14 or more characters
|
||||
</p>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="password"
|
||||
required
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="confirm-password"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Confirm Password</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validConfirmPassword ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be the same as above
|
||||
</p>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmPassword"
|
||||
name="confirm-password"
|
||||
type="password"
|
||||
autocomplete="confirm-password"
|
||||
required
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LoadingButton type="submit" :loading="loading" class="w-full">
|
||||
Create
|
||||
</LoadingButton>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-3">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon
|
||||
class="h-5 w-5 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- todo: feature to add custom text here -->
|
||||
<p v-if="false" class="mt-10 text-center text-sm text-zinc-400">
|
||||
What's Drop?
|
||||
{{ " " }}
|
||||
<NuxtLink
|
||||
to="https://github.com/Drop-OSS/drop"
|
||||
target="_blank"
|
||||
class="font-semibold leading-6 text-blue-600 hover:text-blue-500"
|
||||
>Check us out here →</NuxtLink
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative hidden w-0 flex-1 lg:block">
|
||||
<img
|
||||
src="/wallpapers/signin.jpg"
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user