upload request prototype UI

resources/js/views/User/Password.vue

@@ -5,8 +5,16 @@
             <FormLabel icon="smartphone">
                 {{ $t('2fa.settings.title') }}
             </FormLabel>
-            <AppInputSwitch :title="$t('popup_2fa.switch_title')" :description="$t('popup_2fa.switch_info')" :is-last="!user.data.attributes.two_factor_authentication">
-                <SwitchInput v-model="user.data.attributes.two_factor_authentication" class="switch" :state="user.data.attributes.two_factor_authentication" />
+            <AppInputSwitch
+                :title="$t('popup_2fa.switch_title')"
+                :description="$t('popup_2fa.switch_info')"
+                :is-last="!user.data.attributes.two_factor_authentication"
+            >
+                <SwitchInput
+                    v-model="user.data.attributes.two_factor_authentication"
+                    class="switch"
+                    :state="user.data.attributes.two_factor_authentication"
+                />
             </AppInputSwitch>
             <AppInputButton
                 v-if="user && user.data.attributes.two_factor_authentication"
@@ -56,13 +64,24 @@
                 </div>
             </div>
 
-            <ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="w-full sm:w-auto">
+            <ButtonBase
+                @click.native="openCreateTokenPopup"
+                type="submit"
+                button-style="theme"
+                class="w-full sm:w-auto"
+            >
                 {{ $t('personal_token.create_token') }}
             </ButtonBase>
         </div>
 
         <!--Change password-->
-        <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="card shadow-card">
+        <ValidationObserver
+            ref="password"
+            @submit.prevent="resetPassword"
+            v-slot="{ invalid }"
+            tag="form"
+            class="card shadow-card"
+        >
             <FormLabel>
                 {{ $t('user_password.title') }}
             </FormLabel>
@@ -91,7 +110,13 @@
                 </AppInputText>
             </ValidationProvider>
 
-            <ValidationProvider tag="div" mode="passive" name="Confirm Your Password" rules="required" v-slot="{ errors }">
+            <ValidationProvider
+                tag="div"
+                mode="passive"
+                name="Confirm Your Password"
+                rules="required"
+                v-slot="{ errors }"
+            >
                 <AppInputText :title="$t('page_create_password.label_confirm_pass')" :error="errors[0]">
                     <input
                         v-model="passwordForm.password_confirmation"

resources/js/views/User/Settings.vue

@@ -28,7 +28,13 @@
 
             <AppInputText :title="$t('GMT')" :is-last="true">
                 <SelectInput
-                    @input="$updateText('/user/settings', 'timezone', user.data.relationships.settings.data.attributes.timezone)"
+                    @input="
+                        $updateText(
+                            '/user/settings',
+                            'timezone',
+                            user.data.relationships.settings.data.attributes.timezone
+                        )
+                    "
                     v-model="user.data.relationships.settings.data.attributes.timezone"
                     :default="user.data.relationships.settings.data.attributes.timezone"
                     :options="timezones"
@@ -43,7 +49,13 @@
             </FormLabel>
             <AppInputText :title="$t('user_settings.address')">
                 <input
-                    @keyup="$updateText('/user/settings', 'address', user.data.relationships.settings.data.attributes.address)"
+                    @keyup="
+                        $updateText(
+                            '/user/settings',
+                            'address',
+                            user.data.relationships.settings.data.attributes.address
+                        )
+                    "
                     v-model="user.data.relationships.settings.data.attributes.address"
                     :placeholder="$t('user_settings.address_plac')"
                     type="text"
@@ -53,7 +65,9 @@
             <div class="flex space-x-4">
                 <AppInputText :title="$t('user_settings.city')" class="w-full">
                     <input
-                        @keyup="$updateText('/user/settings', 'city', user.data.relationships.settings.data.attributes.city)"
+                        @keyup="
+                            $updateText('/user/settings', 'city', user.data.relationships.settings.data.attributes.city)
+                        "
                         v-model="user.data.relationships.settings.data.attributes.city"
                         :placeholder="$t('user_settings.city_plac')"
                         type="text"
@@ -62,7 +76,13 @@
                 </AppInputText>
                 <AppInputText :title="$t('user_settings.postal_code')" class="w-full">
                     <input
-                        @keyup="$updateText('/user/settings', 'postal_code', user.data.relationships.settings.data.attributes.postal_code)"
+                        @keyup="
+                            $updateText(
+                                '/user/settings',
+                                'postal_code',
+                                user.data.relationships.settings.data.attributes.postal_code
+                            )
+                        "
                         v-model="user.data.relationships.settings.data.attributes.postal_code"
                         :placeholder="$t('user_settings.postal_code_plac')"
                         type="text"
@@ -72,7 +92,13 @@
             </div>
             <AppInputText :title="$t('user_settings.country')">
                 <SelectInput
-                    @input="$updateText('/user/settings', 'country', user.data.relationships.settings.data.attributes.country)"
+                    @input="
+                        $updateText(
+                            '/user/settings',
+                            'country',
+                            user.data.relationships.settings.data.attributes.country
+                        )
+                    "
                     v-model="user.data.relationships.settings.data.attributes.country"
                     :default="user.data.relationships.settings.data.attributes.country"
                     :options="countries"
@@ -81,7 +107,9 @@
             </AppInputText>
             <AppInputText :title="$t('user_settings.state')" :description="$t('State, county, province, or region.')">
                 <input
-                    @keyup="$updateText('/user/settings', 'state', user.data.relationships.settings.data.attributes.state)"
+                    @keyup="
+                        $updateText('/user/settings', 'state', user.data.relationships.settings.data.attributes.state)
+                    "
                     v-model="user.data.relationships.settings.data.attributes.state"
                     :placeholder="$t('user_settings.state_plac')"
                     type="text"
@@ -90,7 +118,13 @@
             </AppInputText>
             <AppInputText :title="$t('user_settings.phone_number')" :is-last="true">
                 <input
-                    @keyup="$updateText('/user/settings', 'phone_number', user.data.relationships.settings.data.attributes.phone_number)"
+                    @keyup="
+                        $updateText(
+                            '/user/settings',
+                            'phone_number',
+                            user.data.relationships.settings.data.attributes.phone_number
+                        )
+                    "
                     v-model="user.data.relationships.settings.data.attributes.phone_number"
                     :placeholder="$t('user_settings.phone_number_plac')"
                     type="text"
@@ -99,48 +133,60 @@
             </AppInputText>
         </div>
 
-		<div class="card shadow-card">
+        <div class="card shadow-card">
             <FormLabel>
                 {{ $t('Appearance') }}
             </FormLabel>
 
-            <AppInputText :title="$t('Theme Mode')" :description="$t('Set your theme mode on dark, light or based on your system settings.')" :is-last="!$isApple()">
+            <AppInputText
+                :title="$t('Theme Mode')"
+                :description="$t('Set your theme mode on dark, light or based on your system settings.')"
+                :is-last="!$isApple()"
+            >
                 <div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
                     <div
-						v-for="(theme, i) in themeSetup"
-						:key="i"
-						:title="theme.title"
-						@click="$store.dispatch('toggleThemeMode', theme.type)"
-						class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
-						:class="{
+                        v-for="(theme, i) in themeSetup"
+                        :key="i"
+                        :title="theme.title"
+                        @click="$store.dispatch('toggleThemeMode', theme.type)"
+                        class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
+                        :class="{
                             'border-theme': config.defaultThemeMode === theme.type,
                             'border-transparent': config.defaultThemeMode !== theme.type,
                         }"
-					>
-                        <img :src="theme.image" :alt="theme.type" class="w-full"/>
+                    >
+                        <img :src="theme.image" :alt="theme.type" class="w-full" />
                     </div>
                 </div>
             </AppInputText>
 
             <AppInputText
-				v-if="$isApple()"
-				:title="$t('Default Emojis')"
-				:description="$t('Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.')"
-				:is-last="true"
-			>
+                v-if="$isApple()"
+                :title="$t('Default Emojis')"
+                :description="
+                    $t(
+                        'Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.'
+                    )
+                "
+                :is-last="true"
+            >
                 <div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
                     <div
-						v-for="(emoji, i) in emojiSetup"
-						:key="i"
-						:title="emoji.title"
-						@click="$store.dispatch('toggleEmojiType', emoji.type)"
-						class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
-						:class="{
+                        v-for="(emoji, i) in emojiSetup"
+                        :key="i"
+                        :title="emoji.title"
+                        @click="$store.dispatch('toggleEmojiType', emoji.type)"
+                        class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
+                        :class="{
                             'border-theme': currentEmojis === emoji.type,
                             'border-transparent': currentEmojis !== emoji.type,
                         }"
-					>
-                        <img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type" class="w-full" />
+                    >
+                        <img
+                            :src="isDarkMode ? emoji.image.dark : emoji.image.light"
+                            :alt="emoji.type"
+                            class="w-full"
+                        />
                     </div>
                 </div>
             </AppInputText>
@@ -213,11 +259,19 @@ export default {
     methods: {
         updateFirstName() {
             this.$store.commit('UPDATE_FIRST_NAME', this.user.data.relationships.settings.data.attributes.first_name)
-            this.$updateText('/user/settings', 'first_name', this.user.data.relationships.settings.data.attributes.first_name)
+            this.$updateText(
+                '/user/settings',
+                'first_name',
+                this.user.data.relationships.settings.data.attributes.first_name
+            )
         },
         updateLastName() {
             this.$store.commit('UPDATE_LAST_NAME', this.user.data.relationships.settings.data.attributes.last_name)
-            this.$updateText('/user/settings', 'last_name', this.user.data.relationships.settings.data.attributes.last_name)
+            this.$updateText(
+                '/user/settings',
+                'last_name',
+                this.user.data.relationships.settings.data.attributes.last_name
+            )
         },
     },
 }

resources/js/views/User/Storage.vue

@@ -9,7 +9,12 @@
                 {{ storage.data.attributes.used }}
             </b>
 
-            <b v-if="config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)" class="mt-0.5 block text-sm text-gray-400">
+            <b
+                v-if="
+                    config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)
+                "
+                class="mt-0.5 block text-sm text-gray-400"
+            >
                 {{ $t('Total of') }} {{ storage.data.attributes.capacity }}
                 {{ $t('Used') }}
             </b>