# All files / js/pages/auth Login.vue

0% Statements 0/13
0% Branches 0/17
0% Functions 0/7
0% Lines 0/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126

     <script setup lang="ts">
    import AuthenticatedSessionController from '@/actions/App/Http/Controllers/Auth/AuthenticatedSessionController';
    import InputError from '@/components/InputError.vue';
    import TextLink from '@/components/TextLink.vue';
    import { Button } from '@/components/ui/button';
    import { Checkbox } from '@/components/ui/checkbox';
    import { Input } from '@/components/ui/input';
    import { Label } from '@/components/ui/label';
    import AuthBase from '@/layouts/AuthLayout.vue';
    import { request } from '@/routes/password';
    import { Form, Head } from '@inertiajs/vue3';
    import { LoaderCircle } from 'lucide-vue-next';

    defineProps<{
        status?: string;
        canResetPassword: boolean;
    }>();
    </script>

    <template>
        <AuthBase
            title="Welcome back"
            description="Sign in to your JobCardOnline account to continue"
        >
            <Head title="Log in" />

            <div
                v-if="status"
                class="mb-6 rounded-lg bg-green-50 p-4 text-center text-sm font-medium text-green-700 border border-green-200"
            >
                {{ status }}
            </div>

            <Form
                v-bind="AuthenticatedSessionController.store.form()"
                :reset-on-success="['password']"
                v-slot="{ errors, processing }"
                class="space-y-6"
            >
                <div class="space-y-5">
                    <div class="space-y-2">
                        <Label for="email" class="text-sm font-medium text-gray-700">Email address</Label>
                        <Input
                            id="email"
                            type="email"
                            name="email"
                            required
                            autofocus
                            :tabindex="1"
                            autocomplete="email"
                            placeholder="Enter your email"
                            class="h-12 px-4 text-base border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                        />
                        <InputError :message="errors.email" />
                    </div>

                    <div class="space-y-2">
                        <div class="flex items-center justify-between">
                            <Label for="password" class="text-sm font-medium text-gray-700">Password</Label>
                            <TextLink
                                v-if="canResetPassword"
                                :href="request()"
                                class="text-sm text-blue-600 hover:text-blue-500 font-medium"
                                :tabindex="5"
                            >
                                Forgot password?
                            </TextLink>
                        </div>
                        <Input
                            id="password"
                            type="password"
                            name="password"
                            required
                            :tabindex="2"
                            autocomplete="current-password"
                            placeholder="Enter your password"
                            class="h-12 px-4 text-base border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                        />
                        <InputError :message="errors.password" />
                    </div>

                    <div class="flex items-center justify-between">
                        <Label for="remember" class="flex items-center space-x-3 cursor-pointer">
                            <Checkbox
                                id="remember"
                                name="remember"
                                :tabindex="3"
                                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                            />
                            <span class="text-sm text-gray-700">Remember me for 30 days</span>
                        </Label>
                    </div>

                    <Button
                        type="submit"
                        class="w-full h-12 text-base font-medium bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                        :tabindex="4"
                        :disabled="processing"
                        data-test="login-button"
                    >
                        <LoaderCircle
                            v-if="processing"
                            class="h-5 w-5 animate-spin mr-2"
                        />
                        {{ processing ? 'Signing in...' : 'Sign in to your account' }}
                    </Button>
                </div>

                <div class="mt-6 text-center">
                    <p class="text-sm text-gray-600">
                        Looking for client access?
                        <a href="/client-login" class="ml-1 font-medium text-blue-600 hover:text-blue-500">
                            Client Login
                        </a>
                    </p>
                    <p class="mt-2 text-sm text-gray-600">
                        Don't have a client account?
                        <a href="/client-zone/register" class="font-medium text-blue-600 hover:text-blue-500">
                            Register for client access
                        </a>
                    </p>
                </div>
            </Form>
        </AuthBase>
    </template>