rdarius/ClockyFly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Model: Qwen 3.6 35B A3

Browse Source 
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
2026-04-28 20:41:14 +03:00
parent fdfe3cd7c7
commit 646164c85d
7 changed files with 142 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/js/layouts/auth/AuthSimpleLayout.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Link } from '@inertiajs/vue3'; import { Link } from '@inertiajs/vue3';
import AppLogoIcon from '@/components/AppLogoIcon.vue';
import { home } from '@/routes'; import { home } from '@/routes';
defineProps<{ defineProps<{
@@ -11,27 +10,33 @@ defineProps<{
<template> <template>
<div <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 gap-8">
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center gap-4">
<Link <Link
:href="home()" :href="home()"
class="flex flex-col items-center gap-2 font-medium" class="flex flex-col items-center gap-2 font-medium"
> >
<div <div class="flex h-14 w-14 items-center justify-center">
class="mb-1 flex h-9 w-9 items-center justify-center rounded-md" <svg
> class="h-14 w-14 fill-current text-[#03a9f4]"
<AppLogoIcon viewBox="0 0 64 64"
class="size-9 fill-current text-[var(--foreground)] dark:text-white" xmlns="http://www.w3.org/2000/svg"
/> >
<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> </div>
<span class="sr-only">{{ title }}</span> <span class="sr-only">ClockyLog</span>
</Link> </Link>
<div class="space-y-2 text-center"> <div class="space-y-2 text-center">
<h1 class="text-xl font-medium">{{ title }}</h1> <h1 class="text-2xl font-semibold text-[#333]">{{ title }}</h1>
<p class="text-center text-sm text-muted-foreground"> <p class="text-sm text-[#607d8b]">
{{ description }} {{ description }}
</p> </p>
</div> </div>

49
resources/js/pages/Homepage.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3'; import { Head, Link } from '@inertiajs/vue3';
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'; import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { login, register } from '@/routes';
const isMobileMenuOpen = ref(false); const isMobileMenuOpen = ref(false);
const activeFeatureTab = ref(0); const activeFeatureTab = ref(0);
@@ -322,18 +323,18 @@ onMounted(() => {
<!-- Desktop Auth Buttons --> <!-- Desktop Auth Buttons -->
<div class="hidden lg:flex items-center gap-3"> <div class="hidden lg:flex items-center gap-3">
<a <Link
href="https://app.clockify.me/en/login" :href="login()"
class="text-sm font-medium text-gray-700 hover:text-gray-900 px-4 py-2" class="text-sm font-medium text-gray-700 hover:text-gray-900 px-4 py-2"
> >
Log in Log in
</a> </Link>
<a <Link
href="https://app.clockify.me/en/signup" :href="register()"
class="text-sm font-medium bg-[#0d5ad8] text-white px-5 py-2.5 rounded-md hover:bg-[0b4eb8] transition-colors" class="text-sm font-medium bg-[#0d5ad8] text-white px-5 py-2.5 rounded-md hover:bg-[#0b4eb8] transition-colors"
> >
Sign up free Sign up free
</a> </Link>
</div> </div>
<!-- Mobile menu button --> <!-- 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="/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> <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"> <div class="pt-3 border-t border-gray-200 space-y-2">
<a <Link
href="https://app.clockify.me/en/login" :href="login()"
class="block text-sm text-center text-gray-700 py-2" class="block text-sm text-center text-gray-700 py-2"
> >
Log in Log in
</a> </Link>
<a <Link
href="https://app.clockify.me/en/signup" :href="register()"
class="block text-sm text-center bg-[#0d5ad8] text-white py-2.5 rounded-md" class="block text-sm text-center bg-[#0d5ad8] text-white py-2.5 rounded-md"
> >
Sign up free Sign up free
</a> </Link>
</div> </div>
</div> </div>
</div> </div>
@@ -418,12 +419,12 @@ onMounted(() => {
<!-- CTA Buttons --> <!-- CTA Buttons -->
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4"> <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
<a <Link
href="https://app.clockify.me/signup" :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" 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! Start tracking time - it's free!
</a> </Link>
<div class="flex items-center gap-2 text-sm text-[#6b6b6b]"> <div class="flex items-center gap-2 text-sm text-[#6b6b6b]">
<img <img
src="/assets/images/signed-up-icon.svg" src="/assets/images/signed-up-icon.svg"
@@ -730,12 +731,12 @@ onMounted(() => {
</p> </p>
<div class="text-center mb-12"> <div class="text-center mb-12">
<a <Link
href="https://app.clockify.me/en/login" :href="login()"
class="inline-flex items-center gap-2 text-[#0d5ad8] hover:underline font-medium" class="inline-flex items-center gap-2 text-[#0d5ad8] hover:underline font-medium"
> >
Open Clockify in your browser Open Clockify in your browser
</a> </Link>
<p class="mt-2 text-[#6b6b6b]">or download for:</p> <p class="mt-2 text-[#6b6b6b]">or download for:</p>
</div> </div>
@@ -884,12 +885,12 @@ onMounted(() => {
24/7 Support • Cancel Anytime • 7-day Trial 24/7 Support • Cancel Anytime • 7-day Trial
</p> </p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4"> <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a <Link
href="https://app.clockify.me/signup" :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" 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 Create FREE account
</a> </Link>
<div class="flex items-center gap-2 text-sm text-[#6b6b6b]"> <div class="flex items-center gap-2 text-sm text-[#6b6b6b]">
<img <img
src="/assets/images/signed-up-icon.svg" src="/assets/images/signed-up-icon.svg"

19
resources/js/pages/auth/ForgotPassword.vue
View File

@@ -12,7 +12,7 @@ import { email } from '@/routes/password';
defineOptions({ defineOptions({
layout: { layout: {
title: 'Forgot password', 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 <div
v-if="status" 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 }} {{ status }}
</div> </div>
<div class="space-y-6"> <div class="space-y-5">
<Form v-bind="email.form()" v-slot="{ errors, processing }"> <Form v-bind="email.form()" v-slot="{ errors, processing }">
<div class="grid gap-2"> <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 <Input
id="email" id="email"
type="email" type="email"
@@ -42,25 +42,26 @@ defineProps<{
autocomplete="off" autocomplete="off"
autofocus autofocus
placeholder="email@example.com" 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" /> <InputError :message="errors.email" />
</div> </div>
<div class="my-6 flex items-center justify-start"> <div class="pt-2">
<Button <Button
class="w-full" class="w-full h-11 bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
:disabled="processing" :disabled="processing"
data-test="email-password-reset-link-button" data-test="email-password-reset-link-button"
> >
<Spinner v-if="processing" /> <Spinner v-if="processing" />
Email password reset link <span v-else>Email password reset link</span>
</Button> </Button>
</div> </div>
</Form> </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> <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>
</div> </div>
</template> </template>

50
resources/js/pages/auth/Login.vue
View File

@@ -31,7 +31,7 @@ defineProps<{
<div <div
v-if="status" 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 }} {{ status }}
</div> </div>
@@ -40,32 +40,33 @@ defineProps<{
v-bind="store.form()" v-bind="store.form()"
:reset-on-success="['password']" :reset-on-success="['password']"
v-slot="{ errors, processing }" 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"> <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 <Input
id="email" id="email"
type="email" type="email"
name="email" name="email"
required required
autofocus autofocus
:tabindex="1" tabindex="1"
autocomplete="email" autocomplete="email"
placeholder="email@example.com" 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" /> <InputError :message="errors.email" />
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
<div class="flex items-center justify-between"> <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 <TextLink
v-if="canResetPassword" v-if="canResetPassword"
:href="request()" :href="request()"
class="text-sm" class="text-sm text-[#03a9f4] hover:text-[#0288d1]"
:tabindex="5" tabindex="5"
> >
Forgot password? Forgot password?
</TextLink> </TextLink>
@@ -74,38 +75,45 @@ defineProps<{
id="password" id="password"
name="password" name="password"
required required
:tabindex="2" tabindex="2"
autocomplete="current-password" autocomplete="current-password"
placeholder="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" /> <InputError :message="errors.password" />
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center">
<Label for="remember" class="flex items-center space-x-3"> <Label for="remember" class="flex items-center space-x-2 cursor-pointer">
<Checkbox id="remember" name="remember" :tabindex="3" /> <Checkbox
<span>Remember me</span> 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> </Label>
</div> </div>
<Button <Button
type="submit" type="submit"
class="mt-4 w-full" class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
:tabindex="4" tabindex="4"
:disabled="processing" :disabled="processing"
data-test="login-button" data-test="login-button"
> >
<Spinner v-if="processing" /> <Spinner v-if="processing" />
Log in <span v-else>Log in</span>
</Button> </Button>
</div> </div>
<div <div class="text-center text-sm text-[#607d8b]">
class="text-center text-sm text-muted-foreground"
v-if="canRegister"
>
Don't have an account? 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> </div>
</Form> </Form>
</template> </template>

37
resources/js/pages/auth/Register.vue
View File

@@ -25,84 +25,87 @@ defineOptions({
v-bind="store.form()" v-bind="store.form()"
:reset-on-success="['password', 'password_confirmation']" :reset-on-success="['password', 'password_confirmation']"
v-slot="{ errors, processing }" 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"> <div class="grid gap-2">
<Label for="name">Name</Label> <Label for="name" class="text-sm font-medium text-[#333]">Name</Label>
<Input <Input
id="name" id="name"
type="text" type="text"
required required
autofocus autofocus
:tabindex="1" tabindex="1"
autocomplete="name" autocomplete="name"
name="name" name="name"
placeholder="Full 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" /> <InputError :message="errors.name" />
</div> </div>
<div class="grid gap-2"> <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 <Input
id="email" id="email"
type="email" type="email"
required required
:tabindex="2" tabindex="2"
autocomplete="email" autocomplete="email"
name="email" name="email"
placeholder="email@example.com" 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" /> <InputError :message="errors.email" />
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
<Label for="password">Password</Label> <Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
<PasswordInput <PasswordInput
id="password" id="password"
required required
:tabindex="3" tabindex="3"
autocomplete="new-password" autocomplete="new-password"
name="password" name="password"
placeholder="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" /> <InputError :message="errors.password" />
</div> </div>
<div class="grid gap-2"> <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 <PasswordInput
id="password_confirmation" id="password_confirmation"
required required
:tabindex="4" tabindex="4"
autocomplete="new-password" autocomplete="new-password"
name="password_confirmation" name="password_confirmation"
placeholder="Confirm password" 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" /> <InputError :message="errors.password_confirmation" />
</div> </div>
<Button <Button
type="submit" type="submit"
class="mt-2 w-full" class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
tabindex="5" tabindex="5"
:disabled="processing" :disabled="processing"
data-test="register-user-button" data-test="register-user-button"
> >
<Spinner v-if="processing" /> <Spinner v-if="processing" />
Create account <span v-else>Create account</span>
</Button> </Button>
</div> </div>
<div class="text-center text-sm text-muted-foreground"> <div class="text-center text-sm text-[#607d8b]">
Already have an account? Already have an account?
<TextLink <TextLink
:href="login()" :href="login()"
class="underline underline-offset-4" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4"
:tabindex="6" tabindex="6"
>Log in</TextLink >Log in</TextLink>
>
</div> </div>
</Form> </Form>
</template> </template>

27
resources/js/pages/auth/ResetPassword.vue
View File

@@ -3,16 +3,18 @@ import { Form, Head } from '@inertiajs/vue3';
import { ref } from 'vue'; import { ref } from 'vue';
import InputError from '@/components/InputError.vue'; import InputError from '@/components/InputError.vue';
import PasswordInput from '@/components/PasswordInput.vue'; import PasswordInput from '@/components/PasswordInput.vue';
import TextLink from '@/components/TextLink.vue';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner'; import { Spinner } from '@/components/ui/spinner';
import { login } from '@/routes';
import { update } from '@/routes/password'; import { update } from '@/routes/password';
defineOptions({ defineOptions({
layout: { layout: {
title: 'Reset password', 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']" :reset-on-success="['password', 'password_confirmation']"
v-slot="{ errors, processing }" v-slot="{ errors, processing }"
> >
<div class="grid gap-6"> <div class="grid gap-5">
<div class="grid gap-2"> <div class="grid gap-2">
<Label for="email">Email</Label> <Label for="email" class="text-sm font-medium text-[#333]">Email</Label>
<Input <Input
id="email" id="email"
type="email" type="email"
name="email" name="email"
autocomplete="email" autocomplete="email"
v-model="inputEmail" v-model="inputEmail"
class="mt-1 block w-full" class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] cursor-not-allowed"
readonly readonly
/> />
<InputError :message="errors.email" class="mt-2" /> <InputError :message="errors.email" class="mt-2" />
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
<Label for="password">Password</Label> <Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
<PasswordInput <PasswordInput
id="password" id="password"
name="password" name="password"
autocomplete="new-password" autocomplete="new-password"
class="mt-1 block w-full"
autofocus autofocus
placeholder="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" /> <InputError :message="errors.password" />
</div> </div>
<div class="grid gap-2"> <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 <PasswordInput
id="password_confirmation" id="password_confirmation"
name="password_confirmation" name="password_confirmation"
autocomplete="new-password" autocomplete="new-password"
class="mt-1 block w-full"
placeholder="Confirm password" 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" /> <InputError :message="errors.password_confirmation" />
</div> </div>
<Button <Button
type="submit" type="submit"
class="mt-4 w-full" class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
:disabled="processing" :disabled="processing"
data-test="reset-password-button" data-test="reset-password-button"
> >
<Spinner v-if="processing" /> <Spinner v-if="processing" />
Reset password <span v-else>Reset password</span>
</Button> </Button>
</div> </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> </Form>
</template> </template>

43
resources/js/pages/auth/VerifyEmail.vue
View File

@@ -8,9 +8,8 @@ import { send } from '@/routes/verification';
defineOptions({ defineOptions({
layout: { layout: {
title: 'Verify email', title: 'Verify your email address',
description: description: "We've sent a verification link to your email address. Check your inbox and click the link to get started.",
'Please verify your email address by clicking on the link we just emailed to you.',
}, },
}); });
@@ -24,24 +23,30 @@ defineProps<{
<div <div
v-if="status === 'verification-link-sent'" 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 A new verification link has been sent to the email address you provided during registration.
during registration.
</div> </div>
<Form <div class="space-y-5">
v-bind="send.form()" <Form
class="space-y-6 text-center" v-bind="send.form()"
v-slot="{ processing }" class="text-center"
> v-slot="{ processing }"
<Button :disabled="processing" variant="secondary"> >
<Spinner v-if="processing" /> <Button
Resend verification email class="w-full h-11 bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
</Button> :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"> <div class="text-center text-sm text-[#607d8b]">
Log out <TextLink :href="logout()" as="button" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4">
</TextLink> Log out
</Form> </TextLink>
</div>
</div>
</template> </template>