Model: Qwen 3.6 35B A3
Prompt: use 'https://app.clockify.me/signup' design to make login and register buttons link to acutal login and register pages on the project. We don't need "Continue with X" social buttons, only method of authentiction for now will be email/password Stats: Context: 88,970 tokens Time: 37m 48s
This commit is contained in:
Darius Rapalis
@@ -12,7 +12,7 @@ import { email } from '@/routes/password';
|
||||
defineOptions({
|
||||
layout: {
|
||||
title: 'Forgot password',
|
||||
description: 'Enter your email to receive a password reset link',
|
||||
description: 'Enter your email and we\'ll send you a link to reset your password',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -26,15 +26,15 @@ defineProps<{
|
||||
|
||||
<div
|
||||
v-if="status"
|
||||
class="mb-4 text-center text-sm font-medium text-green-600"
|
||||
class="mb-2 text-center text-sm font-medium text-green-600"
|
||||
>
|
||||
{{ status }}
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-5">
|
||||
<Form v-bind="email.form()" v-slot="{ errors, processing }">
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email address</Label>
|
||||
<Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
@@ -42,25 +42,26 @@ defineProps<{
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
placeholder="email@example.com"
|
||||
class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
||||
/>
|
||||
<InputError :message="errors.email" />
|
||||
</div>
|
||||
|
||||
<div class="my-6 flex items-center justify-start">
|
||||
<div class="pt-2">
|
||||
<Button
|
||||
class="w-full"
|
||||
class="w-full h-11 bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
|
||||
:disabled="processing"
|
||||
data-test="email-password-reset-link-button"
|
||||
>
|
||||
<Spinner v-if="processing" />
|
||||
Email password reset link
|
||||
<span v-else>Email password reset link</span>
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
<div class="space-x-1 text-center text-sm text-muted-foreground">
|
||||
<div class="text-center text-sm text-[#607d8b]">
|
||||
<span>Or, return to</span>
|
||||
<TextLink :href="login()">log in</TextLink>
|
||||
<TextLink :href="login()" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4">log in</TextLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -31,7 +31,7 @@ defineProps<{
|
||||
|
||||
<div
|
||||
v-if="status"
|
||||
class="mb-4 text-center text-sm font-medium text-green-600"
|
||||
class="mb-2 text-center text-sm font-medium text-green-600"
|
||||
>
|
||||
{{ status }}
|
||||
</div>
|
||||
@@ -40,32 +40,33 @@ defineProps<{
|
||||
v-bind="store.form()"
|
||||
:reset-on-success="['password']"
|
||||
v-slot="{ errors, processing }"
|
||||
class="flex flex-col gap-6"
|
||||
class="flex flex-col gap-5"
|
||||
>
|
||||
<div class="grid gap-6">
|
||||
<div class="grid gap-5">
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email address</Label>
|
||||
<Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
autofocus
|
||||
:tabindex="1"
|
||||
tabindex="1"
|
||||
autocomplete="email"
|
||||
placeholder="email@example.com"
|
||||
class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
||||
/>
|
||||
<InputError :message="errors.email" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<Label for="password">Password</Label>
|
||||
<Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
|
||||
<TextLink
|
||||
v-if="canResetPassword"
|
||||
:href="request()"
|
||||
class="text-sm"
|
||||
:tabindex="5"
|
||||
class="text-sm text-[#03a9f4] hover:text-[#0288d1]"
|
||||
tabindex="5"
|
||||
>
|
||||
Forgot password?
|
||||
</TextLink>
|
||||
@@ -74,38 +75,45 @@ defineProps<{
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
:tabindex="2"
|
||||
tabindex="2"
|
||||
autocomplete="current-password"
|
||||
placeholder="Password"
|
||||
class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
||||
/>
|
||||
<InputError :message="errors.password" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<Label for="remember" class="flex items-center space-x-3">
|
||||
<Checkbox id="remember" name="remember" :tabindex="3" />
|
||||
<span>Remember me</span>
|
||||
<div class="flex items-center">
|
||||
<Label for="remember" class="flex items-center space-x-2 cursor-pointer">
|
||||
<Checkbox
|
||||
id="remember"
|
||||
name="remember"
|
||||
tabindex="3"
|
||||
class="border-[#e9e9ed] data-[checked]:border-[#03a9f4] data-[checked]:bg-[#03a9f4] focus:ring-[#03a9f4]"
|
||||
/>
|
||||
<span class="text-sm text-[#546e7a]">Remember me</span>
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
class="mt-4 w-full"
|
||||
:tabindex="4"
|
||||
class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
|
||||
tabindex="4"
|
||||
:disabled="processing"
|
||||
data-test="login-button"
|
||||
>
|
||||
<Spinner v-if="processing" />
|
||||
Log in
|
||||
<span v-else>Log in</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-center text-sm text-muted-foreground"
|
||||
v-if="canRegister"
|
||||
>
|
||||
<div class="text-center text-sm text-[#607d8b]">
|
||||
Don't have an account?
|
||||
<TextLink :href="register()" :tabindex="5">Sign up</TextLink>
|
||||
<TextLink
|
||||
:href="register()"
|
||||
tabindex="5"
|
||||
class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4"
|
||||
>Sign up</TextLink>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
@@ -25,84 +25,87 @@ defineOptions({
|
||||
v-bind="store.form()"
|
||||
:reset-on-success="['password', 'password_confirmation']"
|
||||
v-slot="{ errors, processing }"
|
||||
class="flex flex-col gap-6"
|
||||
class="flex flex-col gap-5"
|
||||
>
|
||||
<div class="grid gap-6">
|
||||
<div class="grid gap-5">
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
<Label for="name" class="text-sm font-medium text-[#333]">Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
required
|
||||
autofocus
|
||||
:tabindex="1"
|
||||
tabindex="1"
|
||||
autocomplete="name"
|
||||
name="name"
|
||||
placeholder="Full name"
|
||||
class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
||||
/>
|
||||
<InputError :message="errors.name" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email address</Label>
|
||||
<Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
:tabindex="2"
|
||||
tabindex="2"
|
||||
autocomplete="email"
|
||||
name="email"
|
||||
placeholder="email@example.com"
|
||||
class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
||||
/>
|
||||
<InputError :message="errors.email" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="password">Password</Label>
|
||||
<Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
|
||||
<PasswordInput
|
||||
id="password"
|
||||
required
|
||||
:tabindex="3"
|
||||
tabindex="3"
|
||||
autocomplete="new-password"
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
||||
/>
|
||||
<InputError :message="errors.password" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="password_confirmation">Confirm password</Label>
|
||||
<Label for="password_confirmation" class="text-sm font-medium text-[#333]">Confirm password</Label>
|
||||
<PasswordInput
|
||||
id="password_confirmation"
|
||||
required
|
||||
:tabindex="4"
|
||||
tabindex="4"
|
||||
autocomplete="new-password"
|
||||
name="password_confirmation"
|
||||
placeholder="Confirm password"
|
||||
class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
||||
/>
|
||||
<InputError :message="errors.password_confirmation" />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
class="mt-2 w-full"
|
||||
class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
|
||||
tabindex="5"
|
||||
:disabled="processing"
|
||||
data-test="register-user-button"
|
||||
>
|
||||
<Spinner v-if="processing" />
|
||||
Create account
|
||||
<span v-else>Create account</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-sm text-muted-foreground">
|
||||
<div class="text-center text-sm text-[#607d8b]">
|
||||
Already have an account?
|
||||
<TextLink
|
||||
:href="login()"
|
||||
class="underline underline-offset-4"
|
||||
:tabindex="6"
|
||||
>Log in</TextLink
|
||||
>
|
||||
class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4"
|
||||
tabindex="6"
|
||||
>Log in</TextLink>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
@@ -3,16 +3,18 @@ import { Form, Head } from '@inertiajs/vue3';
|
||||
import { ref } from 'vue';
|
||||
import InputError from '@/components/InputError.vue';
|
||||
import PasswordInput from '@/components/PasswordInput.vue';
|
||||
import TextLink from '@/components/TextLink.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { login } from '@/routes';
|
||||
import { update } from '@/routes/password';
|
||||
|
||||
defineOptions({
|
||||
layout: {
|
||||
title: 'Reset password',
|
||||
description: 'Please enter your new password below',
|
||||
description: 'Enter your new password below',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -33,55 +35,60 @@ const inputEmail = ref(props.email);
|
||||
:reset-on-success="['password', 'password_confirmation']"
|
||||
v-slot="{ errors, processing }"
|
||||
>
|
||||
<div class="grid gap-6">
|
||||
<div class="grid gap-5">
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Label for="email" class="text-sm font-medium text-[#333]">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
autocomplete="email"
|
||||
v-model="inputEmail"
|
||||
class="mt-1 block w-full"
|
||||
class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] cursor-not-allowed"
|
||||
readonly
|
||||
/>
|
||||
<InputError :message="errors.email" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="password">Password</Label>
|
||||
<Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
|
||||
<PasswordInput
|
||||
id="password"
|
||||
name="password"
|
||||
autocomplete="new-password"
|
||||
class="mt-1 block w-full"
|
||||
autofocus
|
||||
placeholder="Password"
|
||||
class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
||||
/>
|
||||
<InputError :message="errors.password" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="password_confirmation"> Confirm password </Label>
|
||||
<Label for="password_confirmation" class="text-sm font-medium text-[#333]">Confirm password</Label>
|
||||
<PasswordInput
|
||||
id="password_confirmation"
|
||||
name="password_confirmation"
|
||||
autocomplete="new-password"
|
||||
class="mt-1 block w-full"
|
||||
placeholder="Confirm password"
|
||||
class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
||||
/>
|
||||
<InputError :message="errors.password_confirmation" />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
class="mt-4 w-full"
|
||||
class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
|
||||
:disabled="processing"
|
||||
data-test="reset-password-button"
|
||||
>
|
||||
<Spinner v-if="processing" />
|
||||
Reset password
|
||||
<span v-else>Reset password</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-sm text-[#607d8b]">
|
||||
<span>Or, return to</span>
|
||||
<TextLink :href="login()" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4">log in</TextLink>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
@@ -8,9 +8,8 @@ import { send } from '@/routes/verification';
|
||||
|
||||
defineOptions({
|
||||
layout: {
|
||||
title: 'Verify email',
|
||||
description:
|
||||
'Please verify your email address by clicking on the link we just emailed to you.',
|
||||
title: 'Verify your email address',
|
||||
description: "We've sent a verification link to your email address. Check your inbox and click the link to get started.",
|
||||
},
|
||||
});
|
||||
|
||||
@@ -24,24 +23,30 @@ defineProps<{
|
||||
|
||||
<div
|
||||
v-if="status === 'verification-link-sent'"
|
||||
class="mb-4 text-center text-sm font-medium text-green-600"
|
||||
class="mb-2 text-center text-sm font-medium text-green-600"
|
||||
>
|
||||
A new verification link has been sent to the email address you provided
|
||||
during registration.
|
||||
A new verification link has been sent to the email address you provided during registration.
|
||||
</div>
|
||||
|
||||
<Form
|
||||
v-bind="send.form()"
|
||||
class="space-y-6 text-center"
|
||||
v-slot="{ processing }"
|
||||
>
|
||||
<Button :disabled="processing" variant="secondary">
|
||||
<Spinner v-if="processing" />
|
||||
Resend verification email
|
||||
</Button>
|
||||
<div class="space-y-5">
|
||||
<Form
|
||||
v-bind="send.form()"
|
||||
class="text-center"
|
||||
v-slot="{ processing }"
|
||||
>
|
||||
<Button
|
||||
class="w-full h-11 bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
|
||||
:disabled="processing"
|
||||
>
|
||||
<Spinner v-if="processing" />
|
||||
<span v-else>Resend verification email</span>
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
<TextLink :href="logout()" as="button" class="mx-auto block text-sm">
|
||||
Log out
|
||||
</TextLink>
|
||||
</Form>
|
||||
<div class="text-center text-sm text-[#607d8b]">
|
||||
<TextLink :href="logout()" as="button" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4">
|
||||
Log out
|
||||
</TextLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user