upload request prototype UI

resources/js/views/Auth/CreateNewPassword.vue

@@ -4,10 +4,25 @@
         <AuthContent name="create-new-password" :visible="true">
             <Headline :title="$t('page_create_password.title')" :description="$t('page_create_password.subtitle')" />
 
-            <ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }" tag="form" class="mb-12 space-y-4 text-left">
+            <ValidationObserver
+                @submit.prevent="createNewPassword"
+                ref="create_new_password"
+                v-slot="{ invalid }"
+                tag="form"
+                class="mb-12 space-y-4 text-left"
+            >
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_create_password.label_email') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="E-Mail" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_create_password.label_email') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="E-Mail"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="recoverPassword.email"
                             :placeholder="$t('page_login.placeholder_email')"
@@ -20,8 +35,17 @@
                 </div>
 
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_create_password.label_new_pass') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="New Password" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_create_password.label_new_pass') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="New Password"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="recoverPassword.newPassword"
                             :placeholder="$t('page_create_password.label_new_pass')"
@@ -34,8 +58,17 @@
                 </div>
 
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_create_password.label_confirm_pass') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Confirm Password" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_create_password.label_confirm_pass') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="Confirm Password"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="recoverPassword.newPasswordConfirm"
                             :placeholder="$t('page_create_password.label_confirm_pass')"

resources/js/views/Auth/ForgottenPassword.vue

@@ -2,7 +2,10 @@
     <AuthContentWrapper ref="auth" class="h-screen">
         <!--Forgotten your password?-->
         <AuthContent name="forgotten-password" :visible="true">
-            <Headline :title="$t('page_forgotten_password.title')" :description="$t('page_forgotten_password.subtitle')" />
+            <Headline
+                :title="$t('page_forgotten_password.title')"
+                :description="$t('page_forgotten_password.subtitle')"
+            />
 
             <ValidationObserver
                 @submit.prevent="forgottenPassword"
@@ -11,7 +14,14 @@
                 tag="form"
                 class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0"
             >
-                <ValidationProvider tag="div" mode="passive" class="relative w-full text-left" name="E-Mail" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    class="relative w-full text-left"
+                    name="E-Mail"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <input
                         v-model="recoverEmail"
                         :placeholder="$t('page_login.placeholder_email')"
@@ -41,7 +51,10 @@
 
         <!--Password reset link send-->
         <AuthContent name="password-reset-link-sended" :visible="false">
-            <Headline :title="$t('page_forgotten_password.pass_sennded_title')" :description="$t('page_forgotten_password.pass_sennded_subtitle')" />
+            <Headline
+                :title="$t('page_forgotten_password.pass_sennded_title')"
+                :description="$t('page_forgotten_password.pass_sennded_subtitle')"
+            />
 
             <span class="block">
                 {{ $t('page_forgotten_password.password_remember_text') }}

resources/js/views/Auth/Headline.vue

@@ -6,7 +6,12 @@
         <!--Default application logo-->
         <div v-if="!$slots.default">
             <!--Image logo-->
-            <img v-if="config.app_logo" class="mx-auto mb-6 w-28 md:w-32" :src="$getImage(config.app_logo)" :alt="config.app_name" />
+            <img
+                v-if="config.app_logo"
+                class="mx-auto mb-6 w-28 md:w-32"
+                :src="$getImage(config.app_logo)"
+                :alt="config.app_name"
+            />
 
             <!--Text logo if image isn't available-->
             <b v-if="!config.app_logo" class="mb-10 block text-xl font-bold">

resources/js/views/Auth/SignIn.vue

@@ -4,8 +4,21 @@
         <AuthContent name="log-in" :visible="true">
             <Headline :title="$t('page_login.title')" :description="$t('page_login.subtitle')" />
 
-            <ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form" class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0">
-                <ValidationProvider class="w-full text-left" tag="div" mode="passive" name="E-Mail" rules="required" v-slot="{ errors }">
+            <ValidationObserver
+                @submit.prevent="logIn"
+                ref="log_in"
+                v-slot="{ invalid }"
+                tag="form"
+                class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0"
+            >
+                <ValidationProvider
+                    class="w-full text-left"
+                    tag="div"
+                    mode="passive"
+                    name="E-Mail"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <input
                         class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                         :class="{ 'border-red': errors[0] }"
@@ -16,7 +29,13 @@
                     <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <AuthButton class="w-full justify-center md:w-min" icon="chevron-right" :text="$t('page_login.button_next')" :loading="isLoading" :disabled="isLoading" />
+                <AuthButton
+                    class="w-full justify-center md:w-min"
+                    icon="chevron-right"
+                    :text="$t('page_login.button_next')"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                />
             </ValidationObserver>
 
             <SocialiteAuthenticationButtons />
@@ -31,12 +50,33 @@
 
         <!--Log in By Password-->
         <AuthContent name="sign-in" :visible="false">
-            <Headline v-if="checkedAccount" :title="$t('page_sign_in.title', { name: checkedAccount.name })" :description="$t('page_sign_in.subtitle')">
-                <img class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl" :src="checkedAccount.avatar.md" :alt="checkedAccount.name" />
+            <Headline
+                v-if="checkedAccount"
+                :title="$t('page_sign_in.title', { name: checkedAccount.name })"
+                :description="$t('page_sign_in.subtitle')"
+            >
+                <img
+                    class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl"
+                    :src="checkedAccount.avatar.md"
+                    :alt="checkedAccount.name"
+                />
             </Headline>
 
-            <ValidationObserver @submit.prevent="singIn" ref="sign_in" v-slot="{ invalid }" tag="form" class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0">
-                <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="User Password" rules="required" v-slot="{ errors }">
+            <ValidationObserver
+                @submit.prevent="singIn"
+                ref="sign_in"
+                v-slot="{ invalid }"
+                tag="form"
+                class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0"
+            >
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    class="w-full text-left"
+                    name="User Password"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <input
                         v-model="loginPassword"
                         :placeholder="$t('page_sign_in.placeholder_password')"
@@ -47,7 +87,13 @@
                     <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <AuthButton class="w-full justify-center md:w-min" icon="chevron-right" :text="$t('page_sign_in.button_log_in')" :loading="isLoading" :disabled="isLoading" />
+                <AuthButton
+                    class="w-full justify-center md:w-min"
+                    icon="chevron-right"
+                    :text="$t('page_sign_in.button_log_in')"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                />
             </ValidationObserver>
 
             <span class="block">
@@ -60,8 +106,16 @@
 
         <!--Resend verification email-->
         <AuthContent name="not-verified" :visible="false">
-            <Headline v-if="checkedAccount" :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })" :description="$t('page_not_verified.subtitle')">
-                <img class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl" :src="checkedAccount.avatar.md" :alt="checkedAccount.name" />
+            <Headline
+                v-if="checkedAccount"
+                :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })"
+                :description="$t('page_not_verified.subtitle')"
+            >
+                <img
+                    class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl"
+                    :src="checkedAccount.avatar.md"
+                    :alt="checkedAccount.name"
+                />
             </Headline>
 
             <span class="block">
@@ -74,12 +128,27 @@
 
         <!-- Log in by 2fa -->
         <AuthContent name="two-factor-authentication" :visible="false">
-            <Headline v-if="checkedAccount" :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })" :description="$t('page_sign_in_2fa_subtitle')">
-                <img class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl" :src="checkedAccount.avatar.md" :alt="checkedAccount.name" />
+            <Headline
+                v-if="checkedAccount"
+                :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })"
+                :description="$t('page_sign_in_2fa_subtitle')"
+            >
+                <img
+                    class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl"
+                    :src="checkedAccount.avatar.md"
+                    :alt="checkedAccount.name"
+                />
             </Headline>
 
             <ValidationObserver ref="two_factor_authentication" v-slot="{ invalid }" tag="form" class="mb-12">
-                <ValidationProvider tag="div" mode="passive" class="mx-auto" name="Two Factor Authentication" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    class="mx-auto"
+                    name="Two Factor Authentication"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <input
                         v-model="twoFactorCode"
                         ref="twoFactorCodeInput"
@@ -108,12 +177,27 @@
 
         <!-- Log in by 2fa with recovery code -->
         <AuthContent name="two-factor-recovery" :visible="false">
-            <Headline v-if="checkedAccount" :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })" :description="$t('page_sign_in.2fa_recovery_subtitle')">
-                <img class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl" :src="checkedAccount.avatar.md" :alt="checkedAccount.name" />
+            <Headline
+                v-if="checkedAccount"
+                :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })"
+                :description="$t('page_sign_in.2fa_recovery_subtitle')"
+            >
+                <img
+                    class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl"
+                    :src="checkedAccount.avatar.md"
+                    :alt="checkedAccount.name"
+                />
             </Headline>
 
             <ValidationObserver ref="two_factor_recovery" v-slot="{ invalid }" tag="form" class="mb-12">
-                <ValidationProvider tag="div" mode="passive" class="mx-auto" name="Two Factor Recovery" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    class="mx-auto"
+                    name="Two Factor Recovery"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <input
                         v-model="twoFactorRecoveryCode"
                         :placeholder="$t('page_sign_in.placeholder_2fa_recovery')"
@@ -299,7 +383,10 @@ export default {
         },
         async twoFactorChallenge(recovery) {
             // Check if is normal authentication or recovery
-            if ((!recovery && this.twoFactorCode.length === 6) || (recovery && this.twoFactorRecoveryCode.length === 21)) {
+            if (
+                (!recovery && this.twoFactorCode.length === 6) ||
+                (recovery && this.twoFactorRecoveryCode.length === 21)
+            ) {
                 this.isLoading = true
 
                 let payload = recovery ? { recovery_code: this.twoFactorRecoveryCode } : { code: this.twoFactorCode }

resources/js/views/Auth/SignUp.vue

@@ -4,10 +4,25 @@
         <AuthContent name="sign-up" :visible="true" class="mt-4 mb-12">
             <Headline :title="$t('page_registration.title')" :description="$t('page_registration.subtitle')" />
 
-            <ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form" class="mb-12 space-y-4 text-left">
+            <ValidationObserver
+                @submit.prevent="signUp"
+                ref="sign_up"
+                v-slot="{ invalid }"
+                tag="form"
+                class="mb-12 space-y-4 text-left"
+            >
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_registration.label_email') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="E-Mail" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_registration.label_email') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="E-Mail"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="register.email"
                             :placeholder="$t('page_registration.placeholder_email')"
@@ -20,8 +35,17 @@
                 </div>
 
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_registration.label_name') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Full Name" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_registration.label_name') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="Full Name"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="register.name"
                             :placeholder="$t('page_registration.placeholder_name')"
@@ -34,8 +58,17 @@
                 </div>
 
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_registration.label_pass') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Your New Password" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_registration.label_pass') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="Your New Password"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="register.password"
                             :placeholder="$t('page_registration.placeholder_pass')"
@@ -48,8 +81,17 @@
                 </div>
 
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_registration.label_confirm_pass') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Confirm Your Password" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_registration.label_confirm_pass') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="Confirm Your Password"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="register.password_confirmation"
                             :placeholder="$t('page_registration.placeholder_confirm_pass')"

resources/js/views/Auth/SuccessfullyEmailVerified.vue

@@ -1,7 +1,10 @@
 <template>
     <AuthContentWrapper class="h-screen">
         <AuthContent :visible="true">
-            <Headline :title="$t('page_email_successfully_verified.title')" :description="$t('page_email_successfully_verified.subtitle')" />
+            <Headline
+                :title="$t('page_email_successfully_verified.title')"
+                :description="$t('page_email_successfully_verified.subtitle')"
+            />
 
             <router-link :to="{ name: 'SignIn' }">
                 <AuthButton icon="chevron-right" :text="$t('page_sign_in.button_log_in')" />

resources/js/views/Auth/SuccessfullySendEmail.vue

@@ -1,7 +1,10 @@
 <template>
     <AuthContentWrapper class="h-screen">
         <AuthContent :visible="true">
-            <Headline :title="$t('page_email_successfully_send.title')" :description="$t('page_email_successfully_send.subtitle')" />
+            <Headline
+                :title="$t('page_email_successfully_send.title')"
+                :description="$t('page_email_successfully_send.subtitle')"
+            />
 
             <span class="block">
                 <router-link :to="{ name: 'Homepage' }" class="text-theme font-bold">