Kevin
120 lines
7.4 KiB
Vue
120 lines
7.4 KiB
Vue
<script lang="ts" setup>
|
|
import { Link, useForm } from '@inertiajs/vue3'
|
|
import { computed } from 'vue'
|
|
import EmptyLayout from '~/pages/layout/emptyLayout.vue'
|
|
|
|
defineOptions({ layout: EmptyLayout })
|
|
|
|
const props = defineProps<{ errors?: Record<string, string> }>()
|
|
|
|
const vineErrors = computed(() => {
|
|
if (props.errors && !Array.isArray(props.errors)) {
|
|
return props.errors
|
|
}
|
|
return {}
|
|
})
|
|
|
|
const authError = computed(() => {
|
|
if (props.errors && !Array.isArray(props.errors)) {
|
|
return props.errors
|
|
}
|
|
return null
|
|
})
|
|
|
|
const form = useForm({
|
|
email: '',
|
|
password: '',
|
|
})
|
|
|
|
function getErrorMessage(field: string): string | null {
|
|
return vineErrors.value[field] || null
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gradient-to-br from-gray-100 to-gray-200">
|
|
<div class="w-full max-w-md p-6 sm:p-8 bg-white rounded-lg shadow-lg">
|
|
<div class="flex flex-col items-center justify-center mb-8">
|
|
<div class="mb-4">
|
|
<svg
|
|
class="w-12 h-12 sm:w-14 sm:h-14 text-indigo-600"
|
|
fill="currentColor"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
viewBox="0 0 494.000000 555.000000"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g transform="translate(0.000000,555.000000) scale(0.100000,-0.100000)">
|
|
<path
|
|
d="M3090 3400 l0 -1950 -1190 0 -1190 0 0 234 c0 190 3 236 14 245 23 19 164 30 606 46 228 9 485 20 570 25 134 9 895 40 965 40 23 0 25 -4 25 -44 l0 -44 -82 -6 c-46 -3 -146 -8 -223 -11 -77 -3 -239 -12 -360 -20 -121 -8 -335 -19 -475 -25 -387 -15 -650 -32 -650 -41 0 -12 196 -11 515 1 257 10 1267 32 1271 27 7 -9 12 -74 6 -84 -7 -11 -190 -21 -777 -43 -437 -16 -748 -30 -777 -36 -16 -3 -28 -10 -28 -15 0 -13 837 -11 1237 2 360 12 343 15 343 -53 0 -36 -1 -37 -42 -42 -24 -3 -182 -8 -353 -11 -501 -10 -923 -31 -907 -47 4 -4 315 -7 690 -6 l682 3 -1 1445 c-1 795 -3 1488 -3 1540 -1 52 -2 249 -4 437 l-2 343 -23 5 c-23 6 -39 -1 -417 -200 -107 -56 -242 -127 -300 -157 -151 -80 -311 -164 -415 -218 -49 -26 -133 -70 -185 -97 -99 -53 -146 -77 -450 -238 -378 -199 -494 -265 -467 -265 3 0 134 64 293 143 159 79 381 188 494 243 113 54 440 216 727 360 494 248 613 303 613 285 0 -7 -59 -49 -135 -96 -66 -42 -219 -120 -875 -449 -377 -188 -741 -375 -810 -413 -69 -39 -150 -83 -180 -99 -32 -16 -48 -29 -39 -31 8 -2 57 17 107 42 51 25 94 45 96 45 2 0 95 44 207 99 346 167 404 190 404 162 0 -20 -55 -51 -385 -219 -304 -155 -360 -187 -360 -202 0 -14 22 -12 92 6 33 8 62 13 64 11 8 -8 -8 -37 -21 -37 -17 0 -95 -58 -95 -71 0 -14 52 -2 117 27 28 13 55 24 60 24 4 0 96 40 203 89 107 49 198 87 203 84 4 -2 7 -14 7 -27 0 -19 -16 -31 -97 -69 -67 -32 -87 -45 -64 -42 18 3 84 5 146 5 l112 0 17 45 c21 53 56 85 149 131 136 69 42 42 -156 -45 -62 -27 -67 -27 -67 7 0 23 8 31 63 56 34 17 148 72 254 123 106 51 194 93 198 93 3 0 5 -7 5 -16 0 -8 5 -24 11 -35 15 -28 39 -7 39 35 0 17 4 36 8 42 4 6 54 32 112 59 58 26 152 70 210 97 217 104 220 104 220 53 0 -42 -4 -45 -177 -121 -73 -32 -131 -59 -129 -61 2 -2 46 6 97 17 128 29 306 29 402 1 38 -11 75 -25 83 -32 11 -9 14 -43 14 -150 l0 -138 -27 -18 c-77 -52 -150 -70 -353 -84 l-155 -10 -45 -49 c-80 -86 -204 -129 -390 -136 l-125 -4 -17 -35 c-24 -45 -70 -79 -138 -101 -58 -18 -85 -34 -58 -34 9 0 18 -4 20 -9 4 -11 271 68 523 154 36 12 97 29 150 41 63 14 -125 -59 -495 -192 -173 -61 -71 -56 125 6 56 18 222 69 410 125 44 13 135 42 203 65 68 22 127 38 133 35 9 -6 4 -254 -7 -302 -2 -12 -13 -27 -23 -32 -17 -9 -19 -2 -31 94 -6 58 -16 105 -21 105 -5 0 -9 -58 -9 -128 0 -121 -1 -130 -23 -150 -34 -32 -47 -28 -47 16 -1 57 -11 196 -15 208 -4 14 -134 59 -143 49 -4 -3 -5 -92 -3 -196 3 -191 -1 -219 -34 -219 -9 0 -14 49 -19 183 -4 106 -11 186 -18 192 -7 7 -9 -49 -5 -192 3 -157 2 -203 -8 -203 -16 0 -25 88 -25 241 0 68 -4 120 -10 124 -12 7 -12 10 -10 -212 1 -143 -1 -173 -13 -173 -19 0 -27 69 -27 233 0 78 -4 127 -10 127 -6 0 -10 -42 -10 -105 0 -58 -2 -105 -5 -105 -2 0 -36 17 -75 37 -117 61 -220 50 -305 -33 -25 -24 -48 -44 -50 -44 -3 0 -5 29 -5 65 0 78 -11 87 -112 89 l-68 1 0 30 c0 17 -4 36 -9 43 -5 8 -48 22 -97 32 -49 10 -163 34 -254 53 -173 37 -338 63 -346 54 -5 -5 8 -8 246 -67 291 -71 324 -80 376 -95 l51 -15 5 -348 c3 -191 2 -351 -2 -355 -8 -9 -114 -1 -487 40 l-253 27 -30 -29 c-22 -21 -31 -25 -34 -14 -2 8 -7 199 -10 424 -5 396 -5 411 14 440 16 24 20 47 20 112 l0 81 -54 46 c-29 25 -56 46 -60 46 -3 0 -6 -609 -6 -1354 0 -1225 2 -1354 16 -1360 9 -3 37 -6 62 -6 59 0 65 -4 87 -63 10 -26 22 -50 26 -53 5 -3 9 -14 9 -25 0 -16 -7 -19 -55 -19 -59 0 -125 -21 -125 -40 0 -9 435 -11 1693 -8 1641 3 1694 4 1722 22 l29 19 -22 18 -22 18 40 54 c40 54 61 67 108 67 l22 0 -2 1718 -3 1717 -51 26 c-27 14 -208 102 -402 194 -193 92 -417 203 -498 246 -81 44 -153 79 -160 79 -12 0 -14 -307 -14 -1950z m338 1624 c106 -52 196 -94 200 -94 17 0 353 -174 381 -198 l32 -27 3 -1140 c3 -1319 1 -1584 -16 -1567 -22 22 -44 800 -48 1687 -1 363 -5 738 -9 834 l-6 174 -125 70 c-69 38 -174 94 -235 125 -181 91 -379 202 -400 224 l-20 20 25 -7 c14 -4 112 -50 218 -101z m-788 -93 c0 -12 -288 -151 -313 -151 -19 0 -19 2 -7 14 13 13 232 126 270 139 24 9 50 8 50 -2z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-gray-800">PC Creator</h1>
|
|
</div>
|
|
|
|
<form class="space-y-4 sm:space-y-6">
|
|
<div>
|
|
<label class="block">
|
|
<span class="text-sm font-medium text-gray-700 mb-2 block">Email</span>
|
|
<input
|
|
v-model="form.email"
|
|
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
|
|
name="email"
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block">
|
|
<span class="text-sm font-medium text-gray-700 mb-2 block">Password</span>
|
|
<input
|
|
v-model="form.password"
|
|
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
|
|
name="password"
|
|
type="password"
|
|
placeholder="Enter your password"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-2">
|
|
<label class="flex items-center cursor-pointer">
|
|
<input
|
|
class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-2 focus:ring-indigo-500/40"
|
|
type="checkbox"
|
|
/>
|
|
<span class="ml-2 text-sm text-gray-600">Remember me</span>
|
|
</label>
|
|
</div>
|
|
|
|
<Link
|
|
:data="form"
|
|
as="button"
|
|
class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-6 sm:mt-8 text-base font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition"
|
|
href="/auth/login"
|
|
method="post"
|
|
type="button"
|
|
>
|
|
Login
|
|
</Link>
|
|
|
|
<Link
|
|
as="button"
|
|
class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-3 sm:mt-4 text-base font-semibold text-indigo-600 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition"
|
|
href="/auth/signup"
|
|
type="button"
|
|
>
|
|
Create an account
|
|
</Link>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* No inline styles - using Tailwind classes only */
|
|
</style>
|