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
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import AppLogoIcon from '@/components/AppLogoIcon.vue';
|
||||
import { home } from '@/routes';
|
||||
|
||||
defineProps<{
|
||||
@@ -11,27 +10,33 @@ defineProps<{
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10"
|
||||
class="flex min-h-screen flex-col items-center justify-center bg-[#f2f6f8] p-6"
|
||||
>
|
||||
<div class="w-full max-w-sm">
|
||||
<div class="w-full max-w-[440px]">
|
||||
<div class="flex flex-col gap-8">
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<Link
|
||||
:href="home()"
|
||||
class="flex flex-col items-center gap-2 font-medium"
|
||||
>
|
||||
<div
|
||||
class="mb-1 flex h-9 w-9 items-center justify-center rounded-md"
|
||||
<div class="flex h-14 w-14 items-center justify-center">
|
||||
<svg
|
||||
class="h-14 w-14 fill-current text-[#03a9f4]"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<AppLogoIcon
|
||||
class="size-9 fill-current text-[var(--foreground)] dark:text-white"
|
||||
/>
|
||||
<circle cx="32" cy="32" r="30" fill="#03a9f4" />
|
||||
<circle cx="32" cy="32" r="26" fill="white" />
|
||||
<rect x="30" y="12" width="4" height="18" rx="2" fill="#03a9f4" />
|
||||
<rect x="30" y="28" width="4" height="20" rx="2" fill="#333" transform="rotate(60 32 32)" />
|
||||
<circle cx="32" cy="32" r="3" fill="#03a9f4" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="sr-only">{{ title }}</span>
|
||||
<span class="sr-only">ClockyLog</span>
|
||||
</Link>
|
||||
<div class="space-y-2 text-center">
|
||||
<h1 class="text-xl font-medium">{{ title }}</h1>
|
||||
<p class="text-center text-sm text-muted-foreground">
|
||||
<h1 class="text-2xl font-semibold text-[#333]">{{ title }}</h1>
|
||||
<p class="text-sm text-[#607d8b]">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { login, register } from '@/routes';
|
||||
|
||||
const isMobileMenuOpen = ref(false);
|
||||
const activeFeatureTab = ref(0);
|
||||
@@ -322,18 +323,18 @@ onMounted(() => {
|
||||
|
||||
<!-- Desktop Auth Buttons -->
|
||||
<div class="hidden lg:flex items-center gap-3">
|
||||
<a
|
||||
href="https://app.clockify.me/en/login"
|
||||
<Link
|
||||
:href="login()"
|
||||
class="text-sm font-medium text-gray-700 hover:text-gray-900 px-4 py-2"
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
<a
|
||||
href="https://app.clockify.me/en/signup"
|
||||
class="text-sm font-medium bg-[#0d5ad8] text-white px-5 py-2.5 rounded-md hover:bg-[0b4eb8] transition-colors"
|
||||
</Link>
|
||||
<Link
|
||||
:href="register()"
|
||||
class="text-sm font-medium bg-[#0d5ad8] text-white px-5 py-2.5 rounded-md hover:bg-[#0b4eb8] transition-colors"
|
||||
>
|
||||
Sign up free
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
@@ -372,18 +373,18 @@ onMounted(() => {
|
||||
<a href="/customers" class="block text-sm text-gray-600 hover:text-gray-900">Reviews</a>
|
||||
<a href="/help" class="block text-sm text-gray-600 hover:text-gray-900">Support</a>
|
||||
<div class="pt-3 border-t border-gray-200 space-y-2">
|
||||
<a
|
||||
href="https://app.clockify.me/en/login"
|
||||
<Link
|
||||
:href="login()"
|
||||
class="block text-sm text-center text-gray-700 py-2"
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
<a
|
||||
href="https://app.clockify.me/en/signup"
|
||||
</Link>
|
||||
<Link
|
||||
:href="register()"
|
||||
class="block text-sm text-center bg-[#0d5ad8] text-white py-2.5 rounded-md"
|
||||
>
|
||||
Sign up free
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -418,12 +419,12 @@ onMounted(() => {
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a
|
||||
href="https://app.clockify.me/signup"
|
||||
class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[0b4eb8] transition-colors"
|
||||
<Link
|
||||
:href="register()"
|
||||
class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[#0b4eb8] transition-colors"
|
||||
>
|
||||
Start tracking time - it's free!
|
||||
</a>
|
||||
</Link>
|
||||
<div class="flex items-center gap-2 text-sm text-[#6b6b6b]">
|
||||
<img
|
||||
src="/assets/images/signed-up-icon.svg"
|
||||
@@ -730,12 +731,12 @@ onMounted(() => {
|
||||
</p>
|
||||
|
||||
<div class="text-center mb-12">
|
||||
<a
|
||||
href="https://app.clockify.me/en/login"
|
||||
<Link
|
||||
:href="login()"
|
||||
class="inline-flex items-center gap-2 text-[#0d5ad8] hover:underline font-medium"
|
||||
>
|
||||
Open Clockify in your browser
|
||||
</a>
|
||||
</Link>
|
||||
<p class="mt-2 text-[#6b6b6b]">or download for:</p>
|
||||
</div>
|
||||
|
||||
@@ -884,12 +885,12 @@ onMounted(() => {
|
||||
24/7 Support • Cancel Anytime • 7-day Trial
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a
|
||||
href="https://app.clockify.me/signup"
|
||||
class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[0b4eb8] transition-colors"
|
||||
<Link
|
||||
:href="register()"
|
||||
class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[#0b4eb8] transition-colors"
|
||||
>
|
||||
Create FREE account
|
||||
</a>
|
||||
</Link>
|
||||
<div class="flex items-center gap-2 text-sm text-[#6b6b6b]">
|
||||
<img
|
||||
src="/assets/images/signed-up-icon.svg"
|
||||
|
||||
@@ -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>
|
||||
|
||||
<div class="space-y-5">
|
||||
<Form
|
||||
v-bind="send.form()"
|
||||
class="space-y-6 text-center"
|
||||
class="text-center"
|
||||
v-slot="{ processing }"
|
||||
>
|
||||
<Button :disabled="processing" variant="secondary">
|
||||
<Button
|
||||
class="w-full h-11 bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
|
||||
:disabled="processing"
|
||||
>
|
||||
<Spinner v-if="processing" />
|
||||
Resend verification email
|
||||
<span v-else>Resend verification email</span>
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
<TextLink :href="logout()" as="button" class="mx-auto block text-sm">
|
||||
<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>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user