feat: auth form styling

aminnausin · aminnausin · commit 645bb6055355 · 2025-06-11T16:16:12.000-04:00
diff --git a/resources/js/components/cards/SessionCard.vue b/resources/js/components/cards/SessionCard.vue
@@ -35,7 +35,7 @@ const agent = computed(() => {
                 {{ session.ip_address }},
 
                 <span v-if="session.is_current" class="font-semibold text-green-500 animate-pulse ms-1">
-                    <span class="session-state-indicator recent rounded bg-green-500 size-2 inline-block animate-pulse"></span>
+                    <span class="recent rounded bg-green-500 size-2 inline-block animate-pulse"></span>
                     This device
                 </span>
                 <span v-else>Last active {{ session.last_active }}</span>
@@ -45,7 +45,7 @@ const agent = computed(() => {
 </template>
 
 <style lang="css" scoped>
-.session-state-indicator.recent {
-    box-shadow: 0 0 10px rgba(108, 198, 68, 0.5);
+.recent {
+    box-shadow: 0 0 4px rgba(108, 198, 68, 0.5);
 }
 </style>
diff --git a/resources/js/components/forms/BaseForm.vue b/resources/js/components/forms/BaseForm.vue
@@ -1,7 +1,14 @@
+<script setup lang="ts">
+defineProps<{ footerClass?: string }>();
+</script>
 <template>
     <form class="flex flex-col gap-4">
         <slot></slot>
 
-        <slot name="footer"></slot>
+        <template v-if="$slots.footer">
+            <footer :class="[`mt-4`, footerClass]">
+                <slot name="footer"></slot>
+            </footer>
+        </template>
     </form>
 </template>
diff --git a/resources/js/components/forms/RecoveryForm.vue b/resources/js/components/forms/RecoveryForm.vue
@@ -39,14 +39,13 @@ const handleSubmit = async () => {
 </script>
 <template>
     <BaseForm @submit.prevent="handleSubmit">
-        {{ form.processing }}
         <FormItem v-for="(field, index) in fields" :key="index">
             <FormInputLabel :field="field" />
             <FormInput v-model="form.fields[field.name]" :field="field" class="!mt-0" />
             <FormErrorList :errors="form.errors" :field-name="field.name" />
         </FormItem>
 
-        <ButtonForm variant="auth" type="button" @click="handleSubmit" :disabled="form.processing" class="!justify-center !capitalize">Email password reset link</ButtonForm>
+        <ButtonForm variant="auth" type="button" @click="handleSubmit" :disabled="form.processing" class="!justify-center !capitalize w-full">Email password reset link</ButtonForm>
     </BaseForm>
     <span class="mx-auto text-gray-600 dark:text-gray-400">
         Or, return to
diff --git a/resources/js/components/forms/ResetPassword.vue b/resources/js/components/forms/ResetPassword.vue
@@ -77,6 +77,8 @@ const handleSubmit = async () => {
             <FormErrorList :errors="form.errors" :field-name="field.name" />
         </FormItem>
 
-        <ButtonForm variant="auth" type="button" @click="handleSubmit" :disabled="form.processing" class="!justify-center !capitalize">Reset Password</ButtonForm>
+        <template #footer>
+            <ButtonForm variant="auth" type="button" @click="handleSubmit" :disabled="form.processing" class="!justify-center !capitalize w-full">Reset Password</ButtonForm>
+        </template>
     </BaseForm>
 </template>
