Set up the Register view (without webauthn registration)

app/Http/Controllers/Auth/RegisterController.php

@@ -45,8 +45,10 @@ public function register(UserStoreRequest $request)
         $this->guard()->login($user);
 
         return response()->json([
-            'message' => 'account created',
-            'name'    => $user->name,
+            'message'     => 'account created',
+            'name'        => $user->name,
+            'preferences' => $this->guard()->user()->preferences,
+            'is_admin'    => $this->guard()->user()->is_admin,
         ], 201);
     }
 

resources/js_vue3/components/formElements/FormPasswordField.vue

@@ -10,7 +10,7 @@
     const hasCapsLockOn = ref(false)
 
     const props = defineProps({
-        modelValue: [String, Number, Boolean],
+        modelValue: [String],
         label: {
             type: String,
             default: ''
@@ -48,19 +48,19 @@
     })
 
     const hasLowerCase = computed(() => {
-        return /[a-z]/.test(modelValue)
+        return /[a-z]/.test(props.modelValue)
     })
     const hasUpperCase = computed(() => {
-        return /[A-Z]/.test(modelValue)
+        return /[A-Z]/.test(props.modelValue)
     })
     const hasNumber = computed(() => {
-        return /[0-9]/.test(modelValue)
+        return /[0-9]/.test(props.modelValue)
     })
     const hasSpecialChar = computed(() => {
-        return /[^A-Za-z0-9]/.test(modelValue)
+        return /[^A-Za-z0-9]/.test(props.modelValue)
     })
     const IsLongEnough = computed(() => {
-        return modelValue.length >= 8
+        return props.modelValue.length >= 8
     })
 
     function checkCapsLock(event) {
@@ -86,7 +86,7 @@
                 :value="modelValue" 
                 :placeholder="placeholder" 
                 v-bind="$attrs" 
-                v-on:change="$emit('update:modelValue', $event.target.value)"
+                v-on:input="$emit('update:modelValue', $event.target.value)"
                 v-on:keyup="checkCapsLock"
             />
             <span v-if="currentType == 'password'" role="button" id="btnTogglePassword" tabindex="0" class="icon is-small is-right is-clickable" @keyup.enter="setFieldType('text')" @click="setFieldType('text')" :title="$t('auth.forms.reveal_password')">

resources/js_vue3/views/auth/Register.vue

@@ -0,0 +1,174 @@
+<script setup>
+    import Form from '@/components/formElements/Form'
+    import { useUserStore } from '@/stores/user'
+    import { useNotifyStore } from '@/stores/notify'
+
+    const user = useUserStore()
+    const notify = useNotifyStore()
+    const showWebauthnRegistration = ref(false)
+    const deviceRegistered = ref(false)
+    
+    const registerForm = reactive(new Form({
+        name : '',
+        email : '',
+        password : '',
+        password_confirmation : '',
+    }))
+
+    const securityDeviceForm = reactive(new Form({
+        name : ''
+    }))
+
+    /**
+     * Register a new user
+     */
+    async function register(e) {
+        registerForm.password_confirmation = registerForm.password
+
+        registerForm.post('/user').then(response => {
+            user.$patch({
+                name: response.data.name,
+                preferences: response.data.preferences,
+                isAdmin: response.data.is_admin ?? false,
+            })
+            user.applyTheme()
+
+            showWebauthnRegistration.value = true
+        })
+    }
+
+    /**
+     * Register a new security device
+     */
+    async function registerWebauthnDevice() {
+
+    }
+
+    onBeforeRouteLeave(() => {
+        notify.clear()
+    })
+</script>
+
+<template>
+    <div>
+        <!-- webauthn registration -->
+        <FormWrapper v-if="showWebauthnRegistration" title="auth.authentication" punchline="auth.webauthn.enhance_security_using_webauthn">
+            <div v-if="deviceRegistered" class="field">
+                <label id="lblDeviceRegistrationSuccess" class="label mb-5">{{ $t('auth.webauthn.device_successfully_registered') }}&nbsp;<font-awesome-icon :icon="['fas', 'check']" /></label>
+                <form @submit.prevent="handleDeviceSubmit" @keydown="deviceForm.onKeydown($event)">
+                    <FormField v-model="securityDeviceForm.name" fieldName="name" :fieldError="securityDeviceForm.errors.get('name')" inputType="text" placeholder="iPhone 12, TouchID, Yubikey 5C" label="auth.forms.name_this_device" />
+                    <FormButtons :isBusy="securityDeviceForm.isBusy" :isDisabled="deviceForm.isDisabled" caption="commons.continue" />
+                </form>
+            </div>
+            <div v-else class="field is-grouped">
+                <!-- register button -->
+                <div class="control">
+                    <button type="button" id="btnRegisterNewDevice" @click="registerWebauthnDevice()" class="button is-link">{{ $t('auth.webauthn.register_a_device') }}</button>
+                </div>
+                <!-- dismiss button -->
+                <div class="control">
+                    <RouterLink id="btnMaybeLater" :to="{ name: 'accounts' }" class="button is-text">{{ $t('auth.maybe_later') }}</RouterLink>
+                </div>
+            </div>
+        </FormWrapper>
+        <!-- User registration form -->
+        <FormWrapper v-else title="auth.register" punchline="auth.forms.register_punchline">
+            <form @submit.prevent="register" @keydown="registerForm.onKeydown($event)">
+                <FormField v-model="registerForm.name" fieldName="name" :fieldError="registerForm.errors.get('name')" inputType="text" label="auth.forms.name" :maxLength="255" autofocus />
+                <FormField v-model="registerForm.email" fieldName="email" :fieldError="registerForm.errors.get('email')" inputType="email" label="auth.forms.email" :maxLength="255" />
+                <FormPasswordField v-model="registerForm.password" fieldName="password" :fieldError="registerForm.errors.get('password')" :showRules="true" label="auth.forms.password" />
+                <FormButtons :isBusy="registerForm.isBusy" :isDisabled="registerForm.isDisabled" caption="auth.register" submitId="btnRegister" />
+            </form>
+            <div class="nav-links">
+                <p>{{ $t('auth.forms.already_register') }}&nbsp;<RouterLink id="lnkSignIn" :to="{ name: 'login' }" class="is-link">{{ $t('auth.sign_in') }}</RouterLink></p>
+            </div>
+        </FormWrapper>
+        <!-- footer -->
+        <VueFooter />
+    </div>
+</template>
+<!-- 
+<script>
+
+    import WebauthnService from './../../webauthn/webauthnService'
+    import { webauthnAbortService } from './../../webauthn/webauthnAbortService'
+    import { identifyRegistrationError }  from './../../webauthn/identifyRegistrationError'
+
+    export default {
+        data(){
+            return {
+                deviceRegistered: false,
+                deviceId : null
+            }
+        },
+
+        methods : {
+
+            /**
+             * Register a new security device
+             */
+            async registerWebauthnDevice() {
+                let webauthnService = new WebauthnService()
+
+                // Check https context
+                if (!window.isSecureContext) {
+                    this.$notify({ type: 'is-danger', text: this.$t('errors.https_required') })
+                    return false
+                }
+
+                // Check browser support
+                if (webauthnService.doesntSupportWebAuthn) {
+                    this.$notify({ type: 'is-danger', text: this.$t('errors.browser_does_not_support_webauthn') })
+                    return false
+                }
+
+                const registerOptions = await this.axios.post('/webauthn/register/options').then(res => res.data)
+                const publicKey = webauthnService.parseIncomingServerOptions(registerOptions)
+                
+                let options = { publicKey }
+                options.signal = webauthnAbortService.createNewAbortSignal()
+
+                let bufferedCredentials
+                try {
+                    bufferedCredentials = await navigator.credentials.create(options)
+                }
+                catch (error) {
+                    const webauthnError = identifyRegistrationError(error, options)
+                    this.$notify({ type: webauthnError.type, text: this.$t(webauthnError.phrase) })
+
+                    return false
+                }
+
+                const publicKeyCredential = webauthnService.parseOutgoingCredentials(bufferedCredentials);
+
+                this.axios.post('/webauthn/register', publicKeyCredential, {returnError: true})
+                .then(response => {
+                    this.deviceId = publicKeyCredential.id
+                    this.deviceRegistered = true
+                })
+                .catch(error => {
+                    if( error.response.status === 422 ) {
+                        this.$notify({ type: 'is-danger', text: error.response.data.message })
+                    }
+                    else {
+                        this.$router.push({ name: 'genericError', params: { err: error.response } });
+                    }
+                })
+            },
+
+
+            /**
+             * Rename the registered device
+             */
+            async handleDeviceSubmit(e) {
+
+                await this.deviceForm.patch('/webauthn/credentials/' + this.deviceId + '/name')
+
+                if( this.deviceForm.errors.any() === false ) {
+                    this.$router.push({name: 'accounts', params: { toRefresh: true }})
+                }
+            },
+
+        },
+    }
+</script> -->