From e40488b944d27ba1ae4c5228aba271a5d70da907 Mon Sep 17 00:00:00 2001 From: Philipp Reinking <philipp@deck9.co> Date: Tue, 20 Aug 2024 17:18:09 +0200 Subject: [PATCH] update two factor challenge page --- .../js/Pages/Auth/TwoFactorChallenge.vue | 43 +++++++++++-------- 1 file changed, 25 insertions(+), 18 deletions(-) diff --git a/resources/js/Pages/Auth/TwoFactorChallenge.vue b/resources/js/Pages/Auth/TwoFactorChallenge.vue index b11fb089..fc86d9ca 100644 --- a/resources/js/Pages/Auth/TwoFactorChallenge.vue +++ b/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,27 +28,30 @@ <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> @@ -50,7 +59,7 @@ <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> @@ -58,13 +67,13 @@ <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, },