UI/UX improvements

resources/css/tailwind.css

@@ -11,7 +11,7 @@
 }
 
 .input-dark {
-    @apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
+    @apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 sm:px-5 px-4 rounded-lg appearance-none border-transparent sm:text-base text-sm font-bold border
 }
 
 .text-limit {

resources/js/components/Admin/AppInputButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="{ 'mb-7': !isLast }" class="w-full justify-between space-y-4 sm:flex sm:space-x-8 sm:space-x-2 sm:space-y-0">
+    <div :class="{ 'sm:mb-7 mb-6': !isLast }" class="w-full justify-between space-y-4 sm:flex sm:space-x-8 sm:space-x-2 sm:space-y-0">
         <!--Label for input-->
         <div class="leading-5">
             <label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
@@ -15,7 +15,7 @@
 
         <!--Form element-->
         <div>
-            <slot></slot>
+            <slot />
         </div>
     </div>
 </template>

resources/js/components/Admin/AppInputSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="{ 'mb-7': !isLast }" class="flex w-full items-center justify-between space-x-2 sm:space-x-8">
+    <div :class="{ 'sm:mb-7 mb-6': !isLast }" class="flex w-full items-center justify-between space-x-2 sm:space-x-8">
         <!--Label for input-->
         <div class="leading-5">
             <label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
@@ -15,7 +15,7 @@
 
         <!--Form element-->
         <div>
-            <slot></slot>
+            <slot />
         </div>
     </div>
 </template>

resources/js/components/Admin/AppInputText.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="{ 'mb-7': !isLast }">
+    <div :class="{ 'sm:mb-7 mb-6': !isLast }">
         <!--Label for input-->
         <label v-if="title" class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
 
         <!--Form element-->
-        <slot></slot>
+        <slot />
 
         <!--Input Description-->
         <span v-if="error" class="pt-2 text-xs text-red-800">

resources/js/components/FilesView/InfoSidebar.vue

@@ -43,7 +43,7 @@
 
             <!--Team-->
             <ListInfoItem v-if="singleFile.data.attributes.isTeamFolder" :title="$t('Shared with the Team')">
-                <div class="flex cursor-pointer items-center" @click="$updateTeamFolder(singleFile)">
+                <div class="flex cursor-pointer items-center z-0 relative" @click="$updateTeamFolder(singleFile)">
                     <TeamMembersPreview :folder="singleFile" :avatar-size="32" />
                     <Edit2Icon size="10" class="ml-2" />
                 </div>

resources/js/components/Others/Forms/ImageInput.vue

@@ -1,198 +1,86 @@
 <template>
-    <div class="dropzone" :class="{ 'is-error': error }">
+    <div class="flex items-center justify-center rounded-lg relative h-[175px] bg-light-background" :class="{ 'is-error': error }">
-        <div v-if="imagePreview" @click="resetImage" class="reset-image">
-            <x-icon size="14" class="close-icon text-theme" />
-        </div>
 
-        <input ref="file" type="file" @change="showImagePreview($event)" class="dummy" />
+		<!--Reset Image-->
-        <img ref="image" :src="imagePreview" class="image-preview" v-if="imagePreview" />
+		<div
+			v-if="imagePreview"
+			@click="resetImage"
+			class="absolute z-10 right-0 top-0 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md bg-white shadow-lg rounded-full -translate-y-3 translate-x-3"
+		>
+            <x-icon size="14" class="vue-feather" />
+		</div>
 
-        <div class="dropzone-message" v-show="!isData">
+        <input
-            <image-icon size="28" class="icon-upload text-theme mx-auto mb-1" />
+			@change="showImagePreview($event)"
-            <span class="dropzone-title">
+			ref="file"
+			type="file"
+			class="opacity-0 absolute top-0 left-0 right-0 bottom-0 z-10 w-full cursor-pointer"
+		/>
+
+		<!--Default image preview-->
+		<img v-if="imagePreview" :src="imagePreview" ref="image" class="absolute w-full h-full object-contain py-4 px-12" />
+
+		<!--Drop image zone-->
+        <div v-if="!isData" class="text-center">
+            <image-icon size="34" class="vue-feather text-theme inline-block mb-4" />
+
+			<b class="font-bold text-base block leading-3">
                 {{ $t('input_image.title') }}
-            </span>
+            </b>
-            <span class="dropzone-description">
+            <small class="text-xs text-gray-500">
                 {{ $t('input_image.supported') }}
-            </span>
+            </small>
         </div>
     </div>
 </template>
 
 <script>
-import { XIcon, ImageIcon } from 'vue-feather-icons'
+import {XIcon, ImageIcon} from 'vue-feather-icons'
 
 export default {
-    name: 'ImageInput',
+	name: 'ImageInput',
-    props: ['image', 'error'],
+	props: ['image', 'error'],
-    components: {
+	components: {
-        ImageIcon,
+		ImageIcon,
-        XIcon,
+		XIcon,
-    },
+	},
-    data() {
+	data() {
-        return {
+		return {
-            imagePreview: undefined,
+			imagePreview: undefined,
-        }
+		}
-    },
+	},
-    computed: {
+	computed: {
-        isData() {
+		isData() {
-            return typeof this.imagePreview === 'undefined' || this.imagePreview === '' ? false : true
+			return !(typeof this.imagePreview === 'undefined' || this.imagePreview === '')
-        },
+		},
-    },
+	},
-    methods: {
+	methods: {
-        resetImage() {
+		resetImage() {
-            this.imagePreview = undefined
+			this.imagePreview = undefined
-            this.$emit('input', undefined)
+			this.$emit('input', undefined)
-        },
+		},
-        showImagePreview(event) {
+		showImagePreview(event) {
-            const imgPath = event.target.files[0].name,
+			const imgPath = event.target.files[0].name,
-                extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase()
+				extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase()
 
-            if (['png', 'jpg', 'jpeg', 'svg'].includes(extn)) {
+			if (['png', 'jpg', 'jpeg', 'svg'].includes(extn)) {
-                const file = event.target.files[0],
+				const file = event.target.files[0],
-                    reader = new FileReader()
+					reader = new FileReader()
 
-                reader.onload = () => (this.imagePreview = reader.result)
+				reader.onload = () => (this.imagePreview = reader.result)
 
-                reader.readAsDataURL(file)
+				reader.readAsDataURL(file)
 
-                // Update user avatar
+				// Update user avatar
-                this.$emit('input', event.target.files[0])
+				this.$emit('input', event.target.files[0])
-            } else {
+			} else {
-                alert(this.$t('validation_errors.wrong_image'))
+				alert(this.$t('validation_errors.wrong_image'))
-            }
+			}
-        },
+		},
-    },
+	},
-    created() {
+	created() {
-        // If has default image then load
+		// If has default image then load
-        if (this.image) this.imagePreview = this.image
+		if (this.image) this.imagePreview = this.image
-    },
+	},
 }
 </script>
-
-<style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
-
-.dropzone {
-    border: 1px dashed #a1abc2;
-    border-radius: 8px;
-    position: relative;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    min-height: 175px;
-
-    &.is-error {
-        border: 2px dashed rgba(253, 57, 122, 0.3);
-
-        .dropzone-title {
-            color: $danger;
-        }
-
-        .icon-upload {
-            rect,
-            circle,
-            polyline {
-                stroke: $danger;
-            }
-        }
-    }
-
-    input[type='file'] {
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-        width: 100%;
-        cursor: pointer;
-    }
-
-    .image-preview {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-        left: 0;
-        padding: 25px;
-        display: block;
-
-        &.fit-image {
-            object-fit: cover;
-            border-radius: 12px;
-            overflow: hidden;
-        }
-    }
-
-    .dropzone-message {
-        padding: 50px 0;
-        width: 100%;
-
-        .icon-upload {
-            rect,
-            circle,
-            polyline {
-                color: inherit;
-            }
-        }
-
-        .dropzone-title {
-            @include font-size(16);
-            font-weight: 700;
-            display: block;
-        }
-
-        .dropzone-description {
-            color: $text_muted;
-            @include font-size(12);
-        }
-    }
-
-    .reset-image {
-        z-index: 2;
-        background: white;
-        border-radius: 50px;
-        display: block;
-        position: absolute;
-        right: 0;
-        top: 0;
-        cursor: pointer;
-        @include transform(translateY(-50%) translateX(50%));
-        padding: 0px 4px;
-        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-
-        .close-icon {
-            vertical-align: middle;
-
-            line {
-                path {
-                    fill: $text;
-                }
-            }
-        }
-    }
-}
-
-.dark {
-    .dropzone {
-        border-color: rgba(white, 0.2);
-
-        .dropzone-message {
-            .icon-upload {
-                path,
-                polyline,
-                line {
-                    color: inherit;
-                }
-            }
-
-            .dropzone-description {
-                color: $dark_mode_text_secondary;
-            }
-        }
-    }
-}
-</style>

resources/js/views/Admin/Users/UserCreate.vue

@@ -10,6 +10,13 @@
                 </AppInputText>
             </ValidationProvider>
 
+			<!--User Role-->
+            <ValidationProvider tag="div" mode="passive" name="permission" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('admin_page_user.select_role')" :error="errors[0]">
+                    <SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
+                </AppInputText>
+            </ValidationProvider>
+
             <!--Email-->
             <ValidationProvider tag="div" mode="passive" name="email" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('page_registration.label_email')" :error="errors[0]">
@@ -39,7 +46,7 @@
             <!--Password-->
             <div class="flex space-x-4">
                 <ValidationProvider tag="div" mode="passive" name="password" rules="required" v-slot="{ errors }" class="w-full">
-                    <AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]">
+                    <AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]" :is-last="true">
                         <input
                             v-model="user.password"
                             :placeholder="$t('page_registration.placeholder_pass')"
@@ -50,7 +57,7 @@
                     </AppInputText>
                 </ValidationProvider>
                 <ValidationProvider tag="div" mode="passive" name="password confirm" rules="required" v-slot="{ errors }" class="w-full">
-                    <AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]">
+                    <AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]" :is-last="true">
                         <input
                             v-model="user.password_confirmation"
                             :placeholder="$t('admin_page_user.create_user.label_conf_pass')"
@@ -62,33 +69,8 @@
                 </ValidationProvider>
             </div>
         </div>
-        <div class="card shadow-card">
-            <FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
-
-            <!--User Role-->
-            <ValidationProvider tag="div" mode="passive" name="permission" rules="required" v-slot="{ errors }">
-                <AppInputText :title="$t('admin_page_user.select_role')" :error="errors[0]">
-                    <SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
-                </AppInputText>
-            </ValidationProvider>
-
-            <!--Storage Capacity-->
-            <ValidationProvider tag="div" mode="passive" name="storage capacity" rules="required" v-slot="{ errors }">
-                <AppInputText :title="$t('admin_page_user.label_change_capacity')" :error="errors[0]">
-                    <input
-                        v-model="user.max_storage_amount"
-                        min="1"
-                        max="999999999"
-                        :placeholder="$t('admin_page_user.label_change_capacity')"
-                        type="number"
-                        class="focus-border-theme input-dark"
-                        :class="{ 'border-red': errors[0] }"
-                    />
-                </AppInputText>
-            </ValidationProvider>
-        </div>
         <div class="form-group">
-            <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
+            <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full sm:w-auto">
                 {{ $t('admin_page_user.create_user.submit') }}
             </ButtonBase>
         </div>
@@ -160,7 +142,6 @@ export default {
             formData.append('role', this.user.role)
             formData.append('email', this.user.email)
             formData.append('password', this.user.password)
-            formData.append('max_storage_amount', this.user.max_storage_amount)
             formData.append('password_confirmation', this.user.password_confirmation)
 
             // Append avatar if exist

resources/js/views/User/Settings.vue

@@ -37,53 +37,6 @@
             </AppInputText>
         </div>
 
-        <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()">
-                <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="{
-                            'border-theme': config.defaultThemeMode === theme.type,
-                            'border-transparent': config.defaultThemeMode !== theme.type,
-                        }"
-                    >
-                        <img :src="theme.image" :alt="theme.type" />
-                    </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"
-            >
-                <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="{
-                            'border-theme': currentEmojis === emoji.type,
-                            'border-transparent': currentEmojis !== emoji.type,
-                        }"
-                    >
-                        <img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type" />
-                    </div>
-                </div>
-            </AppInputText>
-        </div>
-
         <div class="card shadow-card">
             <FormLabel>
                 {{ $t('user_settings.title_billing') }}
@@ -144,6 +97,53 @@
                     class="focus-border-theme input-dark"
                 />
             </AppInputText>
+        </div>
+
+		<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()">
+                <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="{
+                            'border-theme': config.defaultThemeMode === theme.type,
+                            'border-transparent': config.defaultThemeMode !== theme.type,
+                        }"
+					>
+                        <img :src="theme.image" :alt="theme.type" />
+                    </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"
+			>
+                <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="{
+                            'border-theme': currentEmojis === emoji.type,
+                            'border-transparent': currentEmojis !== emoji.type,
+                        }"
+					>
+                        <img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type" />
+                    </div>
+                </div>
+            </AppInputText>
         </div>
     </div>
 </template>

src/App/Users/Actions/CreateNewUserAction.php

@@ -5,20 +5,17 @@ use App\Users\Models\User;
 use App\Users\DTO\CreateUserData;
 use App\Http\Controllers\Controller;
 use Illuminate\Auth\Events\Registered;
-use Illuminate\Contracts\Auth\StatefulGuard;
 
 class CreateNewUserAction extends Controller
 {
     public function __construct(
-        protected StatefulGuard $guard,
         protected AutoSubscribeForMeteredBillingAction $autoSubscribeForMeteredBilling,
-    ) {
+    ) {}
-    }
 
     /**
      * Validate and create a new user.
      */
-    public function __invoke(CreateUserData $data)
+    public function __invoke(CreateUserData $data): User
     {
         $settings = get_settings([
             'user_verification', 'subscription_type',
@@ -53,9 +50,6 @@ class CreateNewUserAction extends Controller
 
         event(new Registered($user));
 
-        // Log in if verification is disabled
+        return $user;
-        if (! $data->password || ! intval($settings['user_verification'])) {
-            $this->guard->login($user);
-        }
     }
 }

src/App/Users/Controllers/Authentication/RegisterUserController.php

@@ -5,11 +5,13 @@ use App\Users\DTO\CreateUserData;
 use App\Http\Controllers\Controller;
 use App\Users\Actions\CreateNewUserAction;
 use App\Users\Requests\RegisterUserRequest;
+use Illuminate\Contracts\Auth\StatefulGuard;
 
 class RegisterUserController extends Controller
 {
     public function __construct(
-        public CreateNewUserAction $createNewUser,
+        protected CreateNewUserAction $createNewUser,
+        protected StatefulGuard $guard,
     ) {
     }
     
@@ -27,7 +29,12 @@ class RegisterUserController extends Controller
         $data = CreateUserData::fromRequest($request);
 
         // Register user
-        ($this->createNewUser)($data);
+        $user = ($this->createNewUser)($data);
+
+        // Log in if verification is disabled
+        if (! $user->password || ! intval(get_settings('user_verification'))) {
+            $this->guard->login($user);
+        }
 
         return response('User successfully registered.', 201);
     }

src/App/Users/DTO/CreateUserData.php

@@ -29,7 +29,7 @@ class CreateUserData extends DataTransferObject
             'email'           => $array['email'],
             'avatar'          => $array['avatar'],
             'password'        => $array['password'] ?? null,
-            'oauth_provider'  => $array['oauth_provider'],
+            'oauth_provider'  => $array['oauth_provider'] ?? null,
         ]);
     }
 }

src/App/Users/Models/User.php

@@ -30,6 +30,7 @@ use VueFileManager\Subscription\App\User\Traits\Billable;
  * @property string email
  * @property mixed favouriteFolders
  * @property string role
+ * @property string email_verified_at
  * @method static count()
  * @method static sortable(string[] $array)
  * @method static forceCreate(array $array)

src/Domain/Admin/Controllers/Users/UserController.php

@@ -1,6 +1,9 @@
 <?php
+
 namespace Domain\Admin\Controllers\Users;
 
+use App\Users\Actions\CreateNewUserAction;
+use App\Users\DTO\CreateUserData;
 use App\Users\Models\User;
 use Illuminate\Http\Response;
 use App\Http\Controllers\Controller;
@@ -10,6 +13,10 @@ use Domain\Admin\Requests\CreateUserByAdmin;
 
 class UserController extends Controller
 {
+    public function __construct(
+        protected CreateNewUserAction $createNewUser,
+    ) {}
+
     /**
      * Get all users
      */
@@ -34,24 +41,22 @@ class UserController extends Controller
      */
     public function store(CreateUserByAdmin $request): Response
     {
-        // Create user
+        // Map user data
-        $user = User::forceCreate([
+        $data = CreateUserData::fromArray([
-            'password'          => bcrypt($request->input('password')),
+            'name'     => $request->input('name'),
-            'role'              => $request->input('role'),
+            'email'    => $request->input('email'),
-            'email'             => $request->input('email'),
+            'password' => $request->input('password'),
-            'email_verified_at' => now(),
+            'avatar'   => store_avatar($request, 'avatar'),
         ]);
 
-        // Split username
+        // Register user
-        $name = split_name($request->input('name'));
+        $user = ($this->createNewUser)($data);
 
-        $user
+        // Update user data
-            ->settings()
+        $user->email_verified_at = now();
-            ->create([
+        $user->role = $request->input('role');
-                'avatar'     => store_avatar($request, 'avatar'),
+
-                'first_name' => $name['first_name'],
+        $user->save();
-                'last_name'  => $name['last_name'],
-            ]);
 
         return response(new UserResource($user), 201);
     }

src/Domain/Admin/Requests/CreateUserByAdmin.php

@@ -26,7 +26,6 @@ class CreateUserByAdmin extends FormRequest
             'email'              => 'required|string|email|max:255|unique:users',
             'password'           => 'required|string|min:6|confirmed',
             'name'               => 'required|string|max:255',
-            'max_storage_amount' => 'required|digits_between:1,9',
             'role'               => 'required|string',
             'avatar'             => 'sometimes|file',
         ];

src/Support/helpers.php

@@ -312,10 +312,11 @@ if (! function_exists('split_name')) {
     function split_name(string $name): array
     {
         $firstName = explode(' ', $name)[0];
+        $lastName = str_replace("$firstName ", '', $name);
 
         return [
             'first_name' => $firstName,
-            'last_name'  => str_replace("$firstName ", '', $name),
+            'last_name'  => $lastName !== $firstName ? $lastName : null,
         ];
     }
 }

tests/Support/Helpers/HelperTest.php

@@ -19,5 +19,10 @@ class HelperTest extends TestCase
 
         $this->assertEquals('Jane', $secondTest['first_name']);
         $this->assertEquals('Doe Hobs', $secondTest['last_name']);
+
+        $thirdTest = split_name('Jane');
+
+        $this->assertEquals('Jane', $thirdTest['first_name']);
+        $this->assertEquals('', $thirdTest['last_name']);
     }
 }