update two factor challenge page

resources/js/Pages/Auth/TwoFactorChallenge.vue

@@ -3,10 +3,16 @@
 
   <jet-authentication-card>
     <template #logo>
-      <jet-application-logo class="mx-auto h-8" />
+      <div class="sm:mx-auto sm:w-full sm:max-w-md">
+        <jet-application-logo class="mx-auto h-8 text-white" />
+      </div>
     </template>
 
-    <div class="mb-4 text-sm text-grey-600">
+    <h1 class="mb-6 text-center text-2xl font-bold text-grey-300">
+      Two Factor Verification
+    </h1>
+
+    <div class="mb-4 text-sm text-grey-400">
       <template v-if="!recovery">
         Please confirm access to your account by entering the authentication
         code provided by your authenticator application.
@@ -22,49 +28,52 @@
 
     <form @submit.prevent="submit">
       <div v-if="!recovery">
-        <jet-label for="code" value="Code" />
-        <jet-input
+        <d9-label for="code" label="Code" />
+        <d9-input
           ref="code"
           id="code"
           type="text"
           inputmode="numeric"
           class="mt-1 block w-full"
           v-model="form.code"
+          block
+          required
           autofocus
           autocomplete="one-time-code"
         />
       </div>
 
       <div v-else>
-        <jet-label for="recovery_code" value="Recovery Code" />
-        <jet-input
+        <d9-label for="recovery_code" label="Recovery Code" />
+        <d9-input
           ref="recovery_code"
           id="recovery_code"
           type="text"
           class="mt-1 block w-full"
           v-model="form.recovery_code"
+          block
           autocomplete="one-time-code"
         />
       </div>
 
       <div class="mt-4 flex items-center justify-end">
         <button
           type="button"
-          class="cursor-pointer text-sm text-grey-600 underline hover:text-grey-900"
+          class="cursor-pointer text-sm text-grey-400 underline hover:text-grey-200"
           @click.prevent="toggleRecovery"
         >
           <template v-if="!recovery"> Use a recovery code </template>
 
           <template v-else> Use an authentication code </template>
         </button>
 
-        <jet-button
+        <d9-button
           class="ml-4"
-          :class="{ 'opacity-25': form.processing }"
+          :isLoading="form.processing"
           :disabled="form.processing"
-        >
-          Log in
-        </jet-button>
+          label="Log in"
+          color="dark"
+        />
       </div>
     </form>
   </jet-authentication-card>
@@ -75,9 +84,7 @@ import { defineComponent } from "vue";
 import { Head } from "@inertiajs/inertia-vue3";
 import JetAuthenticationCard from "@/Jetstream/AuthenticationCard.vue";
 import JetApplicationLogo from "@/Jetstream/ApplicationLogo.vue";
-import JetButton from "@/Jetstream/Button.vue";
-import JetInput from "@/Jetstream/Input.vue";
-import JetLabel from "@/Jetstream/Label.vue";
+import { D9Input, D9Label, D9Button } from "@deck9/ui";
 import JetValidationErrors from "@/Jetstream/ValidationErrors.vue";
 
 export default defineComponent({
@@ -86,9 +93,9 @@ export default defineComponent({
     Head,
     JetAuthenticationCard,
     JetApplicationLogo,
-    JetButton,
-    JetInput,
-    JetLabel,
+    D9Button,
+    D9Input,
+    D9Label,
     JetValidationErrors,
   },