Added change password button to user settings

simjanos-dev · Sep 22, 2024 · c01aa13 · c01aa13
1 parent ed6a18c
commit c01aa13
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 1 deletion.
diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
@@ -26,13 +26,15 @@ public function index() {
         $selectedLanguage = Auth::user()->selected_language;
         $userCount = User::count();
         $userName = Auth::user()->name;
+        $userEmail = Auth::user()->email;
         $isAdmin = Auth::user()->is_admin === 1;
         $theme = $_COOKIE['theme'] ?? 'dark';
 
         return view('home', [
             'language' => $selectedLanguage,
             'userCount' => $userCount,
             'userName' => $userName,
+            'userEmail' => $userEmail,
             'isAdmin' => $isAdmin,
             'theme' => $theme,
             'userUuid' => Auth::user()->uuid,

diff --git a/resources/js/components/Layout.vue b/resources/js/components/Layout.vue
@@ -168,6 +168,10 @@
                 type: String,
                 default: '',
             },
+            _userEmail: {
+                type: String,
+                default: '',
+            },
             _userUuid: {
                 type: String,
                 default: '',
@@ -178,6 +182,8 @@
         beforeMount() {
             // set store data
             this.$store.commit('shared/setUuid', this.$props._userUuid);
+            this.$store.commit('shared/setUserName', this.$props._userName);
+            this.$store.commit('shared/setUserEmail', this.$props._userEmail);
             this.$store.commit('shared/setUserAdmin', this.$props._isAdmin);
 
             if (this.$props._selectedLanguage == 'japanese') {

diff --git a/resources/js/components/UserSettings/UserSettingsAccount.vue b/resources/js/components/UserSettings/UserSettingsAccount.vue
@@ -1,6 +1,52 @@
 <template>
     <div id="user-settings-account">
-        <div class="subheader mt-4 mb-4 d-flex">
+        <!-- Password change dialog -->
+        <change-password-dialog
+            v-model="passwordChangeDialog"
+            @password-changed="passwordChanged"
+        ></change-password-dialog>
+
+        <!-- Delete language data -->
+        <div class="subheader mt-4 mb-2 d-flex">
+            Account
+        </div>
+        <v-card outlined class="rounded-lg pb-0 mb-32">
+            <v-card-text>
+                <v-row>
+                    <v-col>
+                        <b>Username:</b> <br>
+                        {{ this.$store.state.shared.userName }}
+                    </v-col>
+                    <v-col>
+                        <b>E-mail address:</b> <br>
+                        {{ this.$store.state.shared.userEmail }}
+                    </v-col>
+                </v-row>
+                <div class="d-flex mt-4">
+                    <v-spacer />
+
+                    <!-- Change password button -->
+                    <v-btn
+                        v-if="!passwordChangeSuccess"
+                        rounded
+                        depressed
+                        color="primary"
+                        @click="passwordChangeDialog = true;"
+                    >
+                        <v-icon class="mr-2">mdi-lock-reset</v-icon>
+                        Change password
+                    </v-btn>
+
+                    <!-- Password changed success message -->
+                    <v-alert class="mb-0" border="left" color="success" dense v-else>
+                        Your password has been changed successfully.
+                    </v-alert>
+                </div>
+            </v-card-text>
+        </v-card>
+
+        <!-- Delete language data -->
+        <div class="subheader mt-6 mb-2 d-flex">
             <v-icon large color="red" class="mr-2">
                 mdi-alert
             </v-icon>
@@ -90,6 +136,8 @@
     export default {
         data: function() {
             return {
+                passwordChangeDialog: false,
+                passwordChangeSuccess: false,
                 confirmText: '',
                 formattedLanguageText: this.$props.language.charAt(0).toUpperCase() + this.$props.language.slice(1),
                 deleting: false,
@@ -104,6 +152,10 @@
            
         },
         methods: {
+            passwordChanged() {
+                this.passwordChangeDialog = false
+                this.passwordChangeSuccess = true
+            },
             deleteLanguageData() {
                 this.deleting = true;
                 this.deletionSuccess = false;

diff --git a/resources/js/vuex/Shared.js b/resources/js/vuex/Shared.js
@@ -5,6 +5,8 @@ export default {
     namespaced: true,
     state: () => ({
         userUuid: '',
+        userName: false,
+        userEmail: false,
         userAdmin: false,
         echo: new Echo({
             broadcaster: 'pusher',
@@ -20,6 +22,12 @@ export default {
         setUuid (state, userUuid) {
             state.userUuid = userUuid;
         },
+        setUserName (state, userName) {
+            state.userName = userName;
+        },
+        setUserEmail (state, userEmail) {
+            state.userEmail = userEmail;
+        },
         setUserAdmin (state, userAdmin) {
             state.userAdmin = userAdmin;
         }

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -1,6 +1,7 @@
 @extends('layouts.user')
 @section('content')<layout 
     _user-name="{{ $userName }}" 
+    _user-email="{{ $userEmail }}" 
     _user-uuid="{{ $userUuid }}" 
     :_user-count="{{ $userCount }}" 
     :_is-admin="{{ json_encode($isAdmin) }}"