Merge pull request #4 from zacksmash/two-factor-story

Two factor story

Author: zacksmash

README.md

@@ -42,7 +42,6 @@ If you run into errors, you'll probably need to review the [Laravel Fortify](htt
 - Visit `config/fortify.php` and uncomment `Features::twoFactorAuthentication()`
 - Visit `resources/js/pages/auth/TwoFactorChallenge.vue` and uncomment the import
 - Visit `resources/js/pages/settings/TwoFactorAuth.vue` and uncomment the imports
-- Visit `resources/js/pages/Dashboard.vue` and uncomment the `TwoFactorAuth` import and component
 
 ### Wayfinder Issues
 If you run into Node error screens, you may need to compile the Wayfinder types again.

app/Http/Middleware/HandleInertiaRequests.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Http\Request;
 use Inertia\Middleware;
+use Laravel\Fortify\Features;
 
 class HandleInertiaRequests extends Middleware
 {
@@ -39,7 +40,10 @@ public function share(Request $request): array
             ...parent::share($request),
             'name' => config('app.name'),
             'auth' => [
-                'user' => $request->user(),
+                'user' => auth()->check() ? array_merge($request->user()->toArray(), [
+                    'two_factor_enabled' => Features::enabled(Features::twoFactorAuthentication())
+                    && ! is_null($request->user()->two_factor_secret),
+                ]) : null,
             ],
             'status' => $request->session()->get('status'),
         ];

package-lock.json

@@ -27,6 +27,7 @@
     },
     "dependencies": {
         "@inertiajs/vue3": "^2.1.2",
+        "axios": "^1.11.0",
         "tailwindcss": "^4.0.0",
         "vue": "^3.5.13"
     }

package.json

@@ -22,7 +22,7 @@
     }
 
     button {
-        @apply inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-150 hover:bg-gray-100;
+        @apply inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-150 hover:bg-gray-100 mr-2;
     }
 
     a[href] {
@@ -80,4 +80,16 @@
     mark {
         @apply bg-green-200 text-green-900 p-1 px-2 rounded-md border border-green-300 text-sm;
     }
+
+    dialog {
+        @apply fixed inset-0 z-50 p-4 bg-white border border-gray-300 rounded-md shadow-lg max-w-lg mx-auto my-20;
+
+        input {
+            @apply w-full;
+        }
+
+        button {
+            @apply mt-2 block w-full;
+        }
+    }
 }

resources/css/app.css

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import axios from 'axios'
+import { Ref, nextTick, reactive, ref } from 'vue'
+import ConfirmablePasswordController from '@/wayfinder/actions/Laravel/Fortify/Http/Controllers/ConfirmablePasswordController'
+import { confirmation } from '@/wayfinder/routes/password'
+
+const emit = defineEmits(['confirmed'])
+
+const confirmingPassword = ref(false)
+
+const form = reactive({
+    password: '',
+    error: '',
+    processing: false,
+})
+
+const passwordInput: Ref<HTMLInputElement | null> = ref(null)
+
+const startConfirmingPassword = () => {
+    axios.get(confirmation.url()).then(response => {
+        if (response.data.confirmed) {
+            emit('confirmed')
+        } else {
+            confirmingPassword.value = true
+
+            nextTick(() => passwordInput.value?.focus())
+        }
+    })
+}
+
+const confirmPassword = () => {
+    form.processing = true
+
+    axios.post(ConfirmablePasswordController.store.url(), {
+        password: form.password,
+    }).then(() => {
+        form.processing = false
+
+        closeModal()
+        nextTick().then(() => emit('confirmed'))
+    }).catch(error => {
+        form.processing = false
+        form.error = error.response.data.errors.password[0]
+        passwordInput.value?.focus()
+    })
+}
+
+const closeModal = () => {
+    confirmingPassword.value = false
+    form.password = ''
+    form.error = ''
+}
+</script>
+
+<template>
+    <span>
+        <span @click="startConfirmingPassword">
+            <slot/>
+        </span>
+
+        <dialog :open="confirmingPassword">
+            <form>
+                <input
+                    type="text"
+                    name="email"
+                    autocomplete="username email"
+                    style="display: none;"
+                >
+
+                <div>
+                    <input
+                        ref="passwordInput"
+                        v-model="form.password"
+                        type="password"
+                        placeholder="Password"
+                        autocomplete="current-password"
+                        @keyup.enter="confirmPassword"
+                    >
+
+                    <div v-if="form.error">
+                        <mark>{{ form.error }}</mark>
+                    </div>
+                </div>
+
+                <button
+                    :disabled="form.processing"
+                    @click="confirmPassword"
+                >
+                    Confirm
+                </button>
+
+                <button type="button" @click="closeModal">
+                    Cancel
+                </button>
+            </form>
+        </dialog>
+    </span>
+</template>

resources/js/components/ConfirmsPassword.vue

@@ -5,13 +5,14 @@ import { logout } from '@/wayfinder/routes'
 
 import Profile from '@/pages/settings/Profile.vue'
 import Password from '@/pages/settings/Password.vue'
-// import TwoFactorAuth from '@/pages/settings/TwoFactorAuth.vue'
+import TwoFactorAuth from '@/pages/settings/TwoFactorAuth.vue'
 
 const user = computed(() => usePage().props.auth.user)
 const props = defineProps<{
     canUpdateProfile: boolean;
     canUpdatePassword?: boolean;
     canManageTwoFactorAuthentication?: boolean;
+    confirmsTwoFactorAuthentication?: boolean;
 }>()
 </script>
 <template>
@@ -48,10 +49,10 @@ const props = defineProps<{
             </section>
         </template>
 
-        <!-- <template v-if="props.canManageTwoFactorAuthentication">
+        <template v-if="props.canManageTwoFactorAuthentication">
             <hr>
 
-            <TwoFactorAuth/>
-        </template> -->
+            <TwoFactorAuth :requires-confirmation="props.confirmsTwoFactorAuthentication"/>
+        </template>
     </div>
 </template>

resources/js/pages/Dashboard.vue

@@ -11,6 +11,13 @@ import PasswordController from '@/wayfinder/actions/Laravel/Fortify/Http/Control
         reset-on-success
         :reset-on-error="['password', 'password_confirmation', 'current_password']"
     >
+        <input
+            type="text"
+            name="email"
+            autocomplete="username email"
+            style="display: none;"
+        >
+
         <div>
             <label for="current_password">Password</label>