Added timezones

2026-04-04 22:19:58 +10:00
parent 7f62c31456
commit 509efbe821
11 changed files with 516 additions and 424 deletions
@@ -1,16 +1,13 @@
-<script setup>
-import GuestLayout from '@/Layouts/GuestLayout.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
-import { Head, useForm } from '@inertiajs/vue3';
+<script setup lang="ts">
+import MainLayout from "@/Layouts/MainLayout.vue";
+import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
+import { Head, useForm } from "@inertiajs/vue3";

-defineProps({
-    status: {
-        type: String,
-    },
-});
+defineOptions({ layout: MainLayout });
+
+defineProps<{
+    status?: string;
+}>();

 const form = useForm({
    email: '',
@@ -22,47 +19,54 @@ const submit = () => {
 </script>

 <template>
-    <GuestLayout>
-        <Head title="Forgot Password" />
+    <Head title="Forgot Password" />
+    <GlassBox title="Forgot Your Password?" blurb="No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.">
+        <v-alert v-if="status" type="success" class="mb-2">{{ status }}</v-alert>

-        <div class="mb-4 text-sm text-gray-600">
-            Forgot your password? No problem. Just let us know your email
-            address and we will email you a password reset link that will allow
-            you to choose a new one.
-        </div>
+        <v-form style="width: 100%" @submit.prevent="submit">
+            <v-container>
+                <v-row>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="form.email"
+                            label="Email"
+                            type="email"
+                            autocomplete="username"
+                            autofocus
+                            :error-messages="form.errors.email"
+                        />
+                    </v-col>
+                </v-row>

-        <div
-            v-if="status"
-            class="mb-4 text-sm font-medium text-green-600"
-        >
-            {{ status }}
-        </div>
-
-        <form @submit.prevent="submit">
-            <div>
-                <InputLabel for="email" value="Email" />
-
-                <TextInput
-                    id="email"
-                    type="email"
-                    class="mt-1 block w-full"
-                    v-model="form.email"
-                    required
-                    autofocus
-                    autocomplete="username"
-                />
-
-                <InputError class="mt-2" :message="form.errors.email" />
-            </div>
-
-            <div class="mt-4 flex items-center justify-end">
-                <PrimaryButton
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    Email Password Reset Link
-                </PrimaryButton>
-            </div>
-        </form>
-    </GuestLayout>
+                <v-row>
+                    <v-col cols="12" class="d-flex justify-end">
+                        <v-btn
+                            variant="elevated"
+                            size="large"
+                            block
+                            type="submit"
+                            :loading="form.processing"
+                            :disabled="form.processing"
+                        >
+                            Email Password Reset Link
+                        </v-btn>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-form>
+    </GlassBox>
 </template>
+
+<style scoped>
+h2 {
+    font-size: 2rem;
+    text-align: center;
+}
+
+p {
+    text-align: center;
+    width: 100%;
+    opacity: 0.7;
+    margin-bottom: 1rem;
+}
+</style>