Install font awesome icons

Author: perisicnikola37

app/Http/Controllers/UserController.php

@@ -5,6 +5,7 @@
 use App\Http\Requests\UserStoreRequest;
 use App\Models\User;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Storage;
 use Inertia\Inertia;
 
@@ -42,6 +43,7 @@ public function store(UserStoreRequest $request)
             $validatedData['avatar'] = Storage::url($avatarPath);
         }
 
+        $validatedData['password'] = Hash::make($validatedData['password']);
         User::create($validatedData);
 
         return redirect()->route('users.index')->with('success', 'User has been created!');

app/Http/Middleware/HandleInertiaRequests.php

@@ -5,6 +5,7 @@
 use App\Models\Role;
 use App\Models\User;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
 use Inertia\Middleware;
 
 class HandleInertiaRequests extends Middleware
@@ -47,7 +48,10 @@ public function share(Request $request): array
                 'userCount' => User::count(),
                 'roleCount' => Role::count(),
             ],
-            'avatar' => 'https://painrehabproducts.com/wp-content/uploads/2014/10/facebook-default-no-profile-pic.jpg'
+            'avatar' => 'https://painrehabproducts.com/wp-content/uploads/2014/10/facebook-default-no-profile-pic.jpg',
+            'auth' => [
+                'user' => Auth::user()
+            ]
         ]);
     }
-}
+}

package-lock.json

@@ -16,5 +16,8 @@
         "tailwindcss": "^3.1.0",
         "vite": "^4.0.0",
         "vue": "^3.2.31"
+    },
+    "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.3.0"
     }
 }

package.json

@@ -4,14 +4,14 @@ import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 
 <template>
     <div>
-        <div class="p-6 lg:p-8 bg-white border-b border-gray-200">
-            <ApplicationLogo class="block h-12 w-auto" />
+        <div class="p-6 bg-white border-b border-gray-200 lg:p-8">
+            <ApplicationLogo class="block w-auto h-12" />
 
             <h4 class="mt-8 text-2xl font-medium text-gray-900">
-                Welcome to SPA - single project application demo project!
+                Welcome to <b>SPA</b> - single project application demo project!
             </h4>
 
-            <p class="mt-6 text-gray-500 leading-relaxed">
+            <p class="mt-6 leading-relaxed text-gray-500">
                 This SPA offers an all-in-one solution for managing users and roles, featuring an easy-to-use dashboard
                 for
                 administrators.
@@ -29,7 +29,7 @@ import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 
         </div>
 
-        <div class="bg-gray-200 bg-opacity-25 grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8 p-6 lg:p-8">
+        <div class="grid grid-cols-1 gap-6 p-6 bg-gray-200 bg-opacity-25 md:grid-cols-2 lg:gap-8 lg:p-8">
             <div>
                 <div class="flex items-center">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
@@ -48,7 +48,7 @@ import ApplicationLogo from '@/Components/ApplicationLogo.vue';
                         class="inline-flex items-center font-semibold text-indigo-700">
                         Explore the repository documentation
 
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ml-1 w-5 h-5 fill-indigo-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-5 h-5 ml-1 fill-indigo-500">
                             <path fill-rule="evenodd"
                                 d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z"
                                 clip-rule="evenodd" />
@@ -75,7 +75,7 @@ import ApplicationLogo from '@/Components/ApplicationLogo.vue';
                         class="inline-flex items-center font-semibold text-indigo-700">
                         Explore the repository
 
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ml-1 w-5 h-5 fill-indigo-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-5 h-5 ml-1 fill-indigo-500">
                             <path fill-rule="evenodd"
                                 d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z"
                                 clip-rule="evenodd" />

resources/js/Components/Welcome.vue

@@ -37,13 +37,13 @@ const logout = () => {
         <div class="min-h-screen bg-gray-100">
             <nav class="bg-white border-b border-gray-100">
                 <!-- Primary Navigation Menu -->
-                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
                     <div class="flex justify-between h-16">
                         <div class="flex">
                             <!-- Logo -->
-                            <div class="shrink-0 flex items-center">
+                            <div class="flex items-center shrink-0">
                                 <Link :href="route('dashboard')">
-                                <ApplicationMark class="block h-9 w-auto" />
+                                <ApplicationMark class="block w-auto h-9" />
                                 </Link>
                             </div>
 
@@ -62,13 +62,13 @@ const logout = () => {
                         </div>
 
                         <div class="hidden sm:flex sm:items-center sm:ml-6">
-                            <div class="ml-3 relative">
+                            <div class="relative ml-3">
                                 <!-- Teams Dropdown -->
                                 <Dropdown v-if="$page.props.jetstream.hasTeamFeatures" align="right" width="60">
                                     <template #trigger>
                                         <span class="inline-flex rounded-md">
                                             <button type="button"
-                                                class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150">
+                                                class="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-500 transition duration-150 ease-in-out bg-white border border-transparent rounded-md hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50">
                                                 {{ $page.props.auth.user.current_team.name }}
 
                                                 <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg"
@@ -112,7 +112,7 @@ const logout = () => {
                                                         <DropdownLink as="button">
                                                             <div class="flex items-center">
                                                                 <svg v-if="team.id == $page.props.auth.user.current_team_id"
-                                                                    class="mr-2 h-5 w-5 text-green-400"
+                                                                    class="w-5 h-5 mr-2 text-green-400"
                                                                     xmlns="http://www.w3.org/2000/svg" fill="none"
                                                                     viewBox="0 0 24 24" stroke-width="1.5"
                                                                     stroke="currentColor">
@@ -131,20 +131,22 @@ const logout = () => {
                                 </Dropdown>
                             </div>
 
+                            <!-- Profile avatar -->
+                            <img class="object-cover w-8 h-8 rounded-full"
+                                :src="$page.props.auth.user.avatar != 'placeholder' ? $page.props.auth.user.avatar : $page.props.avatar"
+                                alt="User profile image">
+
                             <!-- Settings Dropdown -->
-                            <div class="ml-3 relative">
+                            <div class="relative ml-3">
                                 <Dropdown align="right" width="48">
                                     <template #trigger>
                                         <button v-if="$page.props.jetstream.managesProfilePhotos"
-                                            class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
-                                            <img class="h-8 w-8 rounded-full object-cover"
-                                                :src="$page.props.auth.user.profile_photo_url"
-                                                :alt="$page.props.auth.user.name">
+                                            class="flex text-sm transition border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300">
                                         </button>
 
                                         <span v-else class="inline-flex rounded-md">
                                             <button type="button"
-                                                class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150">
+                                                class="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-500 transition duration-150 ease-in-out bg-white border border-transparent rounded-md hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50">
                                                 {{ $page.props.auth.user.name }}
 
                                                 <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg"
@@ -155,6 +157,7 @@ const logout = () => {
                                                 </svg>
                                             </button>
                                         </span>
+
                                     </template>
 
                                     <template #content>
@@ -186,11 +189,11 @@ const logout = () => {
                         </div>
 
                         <!-- Hamburger -->
-                        <div class="-mr-2 flex items-center sm:hidden">
+                        <div class="flex items-center -mr-2 sm:hidden">
                             <button
-                                class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
+                                class="inline-flex items-center justify-center p-2 text-gray-400 transition duration-150 ease-in-out rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500"
                                 @click="showingNavigationDropdown = !showingNavigationDropdown">
-                                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                                <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                                     <path
                                         :class="{ 'hidden': showingNavigationDropdown, 'inline-flex': !showingNavigationDropdown }"
                                         stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -217,16 +220,16 @@ const logout = () => {
                     <!-- Responsive Settings Options -->
                     <div class="pt-4 pb-1 border-t border-gray-200">
                         <div class="flex items-center px-4">
-                            <div v-if="$page.props.jetstream.managesProfilePhotos" class="shrink-0 mr-3">
-                                <img class="h-10 w-10 rounded-full object-cover"
+                            <div v-if="$page.props.jetstream.managesProfilePhotos" class="mr-3 shrink-0">
+                                <img class="object-cover w-10 h-10 rounded-full"
                                     :src="$page.props.auth.user.profile_photo_url" :alt="$page.props.auth.user.name">
                             </div>
 
                             <div>
-                                <div class="font-medium text-base text-gray-800">
+                                <div class="text-base font-medium text-gray-800">
                                     {{ $page.props.auth.user.name }}
                                 </div>
-                                <div class="font-medium text-sm text-gray-500">
+                                <div class="text-sm font-medium text-gray-500">
                                     {{ $page.props.auth.user.email }}
                                 </div>
                             </div>
@@ -280,7 +283,7 @@ const logout = () => {
                                         <ResponsiveNavLink as="button">
                                             <div class="flex items-center">
                                                 <svg v-if="team.id == $page.props.auth.user.current_team_id"
-                                                    class="mr-2 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg"
+                                                    class="w-5 h-5 mr-2 text-green-400" xmlns="http://www.w3.org/2000/svg"
                                                     fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                                     stroke="currentColor">
                                                     <path stroke-linecap="round" stroke-linejoin="round"
@@ -299,27 +302,27 @@ const logout = () => {
 
             <!-- Page Heading -->
             <header v-if="$slots.header" class="bg-white shadow">
-                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                <div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
                     <slot name="header" />
                 </div>
 
-                <div v-if="$page.props.flash.success" class="bg-indigo-900 text-center py-4 lg:px-4">
+                <div v-if="$page.props.flash.success" class="py-4 text-center bg-indigo-900 lg:px-4">
                     <div style="background-color: #6875F5"
-                        class="p-2 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
+                        class="flex items-center p-2 leading-none text-indigo-100 lg:rounded-full lg:inline-flex"
                         role="alert">
                         <span
-                            class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">Success</span>
-                        <span class="font-semibold mr-2 text-left flex-auto">{{ $page.props.flash.success }}</span>
+                            class="flex px-2 py-1 mr-3 text-xs font-bold uppercase bg-indigo-500 rounded-full">Success</span>
+                        <span class="flex-auto mr-2 font-semibold text-left">{{ $page.props.flash.success }}</span>
                     </div>
                 </div>
 
-                <div v-if="$page.props.flash.delete" class="bg-indigo-900 text-center py-4 lg:px-4">
+                <div v-if="$page.props.flash.delete" class="py-4 text-center bg-indigo-900 lg:px-4">
                     <div style="background-color: #6875F5"
-                        class="p-2 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
+                        class="flex items-center p-2 leading-none text-indigo-100 lg:rounded-full lg:inline-flex"
                         role="alert">
                         <span
-                            class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">Success</span>
-                        <span class="font-semibold mr-2 text-left flex-auto">{{ $page.props.flash.delete }}</span>
+                            class="flex px-2 py-1 mr-3 text-xs font-bold uppercase bg-indigo-500 rounded-full">Success</span>
+                        <span class="flex-auto mr-2 font-semibold text-left">{{ $page.props.flash.delete }}</span>
                     </div>
                 </div>
 

resources/js/Layouts/AppLayout.vue

@@ -5,15 +5,10 @@ import Welcome from '@/Components/Welcome.vue';
 
 <template>
     <AppLayout title="Dashboard">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
-                Dashboard
-            </h2>
-        </template>
 
         <div class="py-12">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="overflow-hidden bg-white shadow-xl sm:rounded-lg">
                     <Welcome />
                 </div>
             </div>