From b9c33825648d20f4b38c4dd61f42ac3c7816f6e3817fa6d53dd371ade6342990 Mon Sep 17 00:00:00 2001
From: Claude Dev <support+claude@ezscale.cloud>
Date: Sat, 14 Mar 2026 17:01:17 -0400
Subject: [PATCH] Replace AppTextField with VTextField in auth pages (#4)

Remove AppTextField wrapper imports from all 6 auth pages (Login, Register,
ForgotPassword, ResetPassword, ConfirmPassword, TwoFactorChallenge) and use
VTextField directly, relying on Vuetify defaults for variant/density/color.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../ts/Pages/Auth/ConfirmPassword.vue         |  3 +-
 .../ts/Pages/Auth/ForgotPassword.vue          |  3 +-
 website/resources/ts/Pages/Auth/Login.vue     | 30 ++++++++++++---
 website/resources/ts/Pages/Auth/Register.vue  | 37 ++++++++++++++++---
 .../resources/ts/Pages/Auth/ResetPassword.vue |  7 ++--
 .../ts/Pages/Auth/TwoFactorChallenge.vue      |  5 +--
 6 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/website/resources/ts/Pages/Auth/ConfirmPassword.vue b/website/resources/ts/Pages/Auth/ConfirmPassword.vue
index 00a25fa..98905e7 100644
--- a/website/resources/ts/Pages/Auth/ConfirmPassword.vue
+++ b/website/resources/ts/Pages/Auth/ConfirmPassword.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { useForm } from '@inertiajs/vue3'
 import AuthLayout from '@/Layouts/AuthLayout.vue'
-import AppTextField from '@/Components/app-form-elements/AppTextField.vue'
 
 defineOptions({ layout: AuthLayout })
 
@@ -30,7 +29,7 @@ const submit = (): void => {
     <VForm @submit.prevent="submit">
       <VRow>
         <VCol cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.password"
             label="Password"
             placeholder="············"
diff --git a/website/resources/ts/Pages/Auth/ForgotPassword.vue b/website/resources/ts/Pages/Auth/ForgotPassword.vue
index 68cd919..c7cfd0e 100644
--- a/website/resources/ts/Pages/Auth/ForgotPassword.vue
+++ b/website/resources/ts/Pages/Auth/ForgotPassword.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { useForm } from '@inertiajs/vue3'
 import AuthLayout from '@/Layouts/AuthLayout.vue'
-import AppTextField from '@/Components/app-form-elements/AppTextField.vue'
 
 interface Props {
   status?: string
@@ -43,7 +42,7 @@ const submit = (): void => {
     <VForm @submit.prevent="submit">
       <VRow>
         <VCol cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.email"
             label="Email"
             type="email"
diff --git a/website/resources/ts/Pages/Auth/Login.vue b/website/resources/ts/Pages/Auth/Login.vue
index 6b01d35..62f4ecd 100644
--- a/website/resources/ts/Pages/Auth/Login.vue
+++ b/website/resources/ts/Pages/Auth/Login.vue
@@ -2,15 +2,24 @@
 import { useForm, Link } from '@inertiajs/vue3'
 import { ref } from 'vue'
 import AuthLayout from '@/Layouts/AuthLayout.vue'
-import AppTextField from '@/Components/app-form-elements/AppTextField.vue'
 
 defineOptions({ layout: AuthLayout })
 
-interface Props {
-  status?: string
+interface SelectedPlan {
+  id: number
+  name: string
+  price: string
+  currency: string
+  billing_cycle: string
+  service_type: string
 }
 
-defineProps<Props>()
+interface Props {
+  status?: string
+  selectedPlan?: SelectedPlan | null
+}
+
+const props = defineProps<Props>()
 
 const isPasswordVisible = ref(false)
 
@@ -47,11 +56,20 @@ const submit = (): void => {
       {{ status }}
     </VAlert>
 
+    <VAlert
+      v-if="props.selectedPlan"
+      type="info"
+      variant="tonal"
+      class="mb-4"
+    >
+      Sign in to complete your purchase of <strong>{{ props.selectedPlan.name }}</strong>
+    </VAlert>
+
     <VForm @submit.prevent="submit">
       <VRow>
         <!-- email -->
         <VCol cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.email"
             autofocus
             label="Email"
@@ -63,7 +81,7 @@ const submit = (): void => {
 
         <!-- password -->
         <VCol cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.password"
             label="Password"
             placeholder="············"
diff --git a/website/resources/ts/Pages/Auth/Register.vue b/website/resources/ts/Pages/Auth/Register.vue
index 1d11389..072adfb 100644
--- a/website/resources/ts/Pages/Auth/Register.vue
+++ b/website/resources/ts/Pages/Auth/Register.vue
@@ -2,10 +2,26 @@
 import { useForm, Link } from '@inertiajs/vue3'
 import { ref } from 'vue'
 import AuthLayout from '@/Layouts/AuthLayout.vue'
-import AppTextField from '@/Components/app-form-elements/AppTextField.vue'
 
 defineOptions({ layout: AuthLayout })
 
+interface SelectedPlan {
+  id: number
+  name: string
+  price: string
+  currency: string
+  billing_cycle: string
+  service_type: string
+}
+
+interface Props {
+  selectedPlan?: SelectedPlan | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selectedPlan: null,
+})
+
 const isPasswordVisible = ref(false)
 const privacyPolicy = ref(false)
 
@@ -26,7 +42,7 @@ const submit = (): void => {
 <template>
   <VCardText>
     <h4 class="text-h4 mb-1">
-      Adventure starts here
+      {{ props.selectedPlan ? 'Create your account' : 'Adventure starts here' }}
     </h4>
     <p class="mb-0">
       Start hosting your projects with EZSCALE
@@ -34,11 +50,20 @@ const submit = (): void => {
   </VCardText>
 
   <VCardText>
+    <VAlert
+      v-if="props.selectedPlan"
+      type="info"
+      variant="tonal"
+      class="mb-4"
+    >
+      Create an account to get started with <strong>{{ props.selectedPlan.name }}</strong> &mdash; ${{ props.selectedPlan.price }}/{{ props.selectedPlan.billing_cycle }}
+    </VAlert>
+
     <VForm @submit.prevent="submit">
       <VRow>
         <!-- name -->
         <VCol cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.name"
             autofocus
             label="Full Name"
@@ -49,7 +74,7 @@ const submit = (): void => {
 
         <!-- email -->
         <VCol cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.email"
             label="Email"
             type="email"
@@ -60,7 +85,7 @@ const submit = (): void => {
 
         <!-- password -->
         <VCol cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.password"
             label="Password"
             placeholder="············"
@@ -74,7 +99,7 @@ const submit = (): void => {
 
         <!-- confirm password -->
         <VCol cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.password_confirmation"
             label="Confirm Password"
             placeholder="············"
diff --git a/website/resources/ts/Pages/Auth/ResetPassword.vue b/website/resources/ts/Pages/Auth/ResetPassword.vue
index eddbc07..07a5419 100644
--- a/website/resources/ts/Pages/Auth/ResetPassword.vue
+++ b/website/resources/ts/Pages/Auth/ResetPassword.vue
@@ -2,7 +2,6 @@
 import { useForm } from '@inertiajs/vue3'
 import { ref } from 'vue'
 import AuthLayout from '@/Layouts/AuthLayout.vue'
-import AppTextField from '@/Components/app-form-elements/AppTextField.vue'
 
 interface Props {
   token: string
@@ -43,7 +42,7 @@ const submit = (): void => {
     <VForm @submit.prevent="submit">
       <VRow>
         <VCol cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.email"
             label="Email"
             type="email"
@@ -54,7 +53,7 @@ const submit = (): void => {
         </VCol>
 
         <VCol cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.password"
             label="New Password"
             placeholder="············"
@@ -67,7 +66,7 @@ const submit = (): void => {
         </VCol>
 
         <VCol cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.password_confirmation"
             label="Confirm Password"
             placeholder="············"
diff --git a/website/resources/ts/Pages/Auth/TwoFactorChallenge.vue b/website/resources/ts/Pages/Auth/TwoFactorChallenge.vue
index 92c91a0..c7b714a 100644
--- a/website/resources/ts/Pages/Auth/TwoFactorChallenge.vue
+++ b/website/resources/ts/Pages/Auth/TwoFactorChallenge.vue
@@ -2,7 +2,6 @@
 import { ref } from 'vue'
 import { useForm } from '@inertiajs/vue3'
 import AuthLayout from '@/Layouts/AuthLayout.vue'
-import AppTextField from '@/Components/app-form-elements/AppTextField.vue'
 
 defineOptions({ layout: AuthLayout })
 
@@ -44,7 +43,7 @@ const toggleRecovery = (): void => {
     <VForm @submit.prevent="submit">
       <VRow>
         <VCol v-if="!useRecovery" cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.code"
             label="Code"
             type="text"
@@ -57,7 +56,7 @@ const toggleRecovery = (): void => {
         </VCol>
 
         <VCol v-else cols="12">
-          <AppTextField
+          <VTextField
             v-model="form.recovery_code"
             label="Recovery Code"
             type="text"