edit account and logout feature

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "frontend",
-  "version": "0.99.8",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "0.99.8",
+      "version": "1.0.0",
       "dependencies": {
         "autoprefixer": "^10.4.13",
         "axios": "^1.2.2",
@@ -19,8 +19,10 @@
         "cytoscape-popper": "^2.0.0",
         "date-fns": "^2.30.0",
         "decimal.js": "^10.4.3",
+        "i18next": "^23.11.5",
+        "i18next-browser-languagedetector": "^8.0.0",
         "javascript-color-gradient": "^2.4.4",
-        "mitt": "^3.0.0",
+        "mitt": "^3.0.1",
         "moment": "^2.29.4",
         "pinia": "^2.0.28",
         "postcss": "^8.4.20",
@@ -80,11 +82,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.3",
+      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
-      "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
+      "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -3761,6 +3763,36 @@
         "node": ">=8.12.0"
       }
     },
+    "node_modules/i18next": {
+      "version": "23.11.5",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.5.tgz",
+      "integrity": "sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz",
+      "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -4492,9 +4524,9 @@
       }
     },
     "node_modules/mitt": {
-      "version": "3.0.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
-      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
     "node_modules/moment": {
       "version": "2.29.4",
@@ -5238,9 +5270,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
+      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/regexpp": {
       "version": "3.2.0",
@@ -6735,11 +6767,11 @@
       "integrity": "sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg=="
     },
     "@babel/runtime": {
-      "version": "7.22.3",
+      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
-      "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
+      "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
       "requires": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       }
     },
     "@colors/colors": {
@@ -9467,6 +9499,22 @@
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
       "dev": true
     },
+    "i18next": {
+      "version": "23.11.5",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.5.tgz",
+      "integrity": "sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==",
+      "requires": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "i18next-browser-languagedetector": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz",
+      "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==",
+      "requires": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -10016,9 +10064,9 @@
       "dev": true
     },
     "mitt": {
-      "version": "3.0.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
-      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
     "moment": {
       "version": "2.29.4",
@@ -10513,9 +10561,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.11",
+      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "regexpp": {
       "version": "3.2.0",

package.json

@@ -29,7 +29,7 @@
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "javascript-color-gradient": "^2.4.4",
-    "mitt": "^3.0.0",
+    "mitt": "^3.0.1",
     "moment": "^2.29.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.20",

src/components/AccountMenu/AcctMenu.vue

@@ -21,7 +21,7 @@
         </li>
         <li id="btn_logout_in_menu"
           class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center">
+          items-center" @click="onLogoutBtnClick">
             <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-logout.svg"></span>
             <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.Logout")}}</span>
         </li>
@@ -30,20 +30,39 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'pinia';
+import { computed, } from 'vue';
+import { mapActions, mapState, storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
-import loginStore from '@/stores/login.js';
+import LoginStore from '@/stores/login.js';
 import AcctMgmtStore from '@/stores/acctMgmt';
+import AllMapDataStore from '@/stores/allMapData.js';
+import ConformanceStore from '@/stores/conformance.js';
+import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
 
 export default {
+  setup() {
+    const { logOut } = LoginStore();
+    const allMapDataStore = AllMapDataStore();
+    const conformanceStore = ConformanceStore();
+    const acctMgmtStore = AcctMgmtStore();
+    const { tempFilterId } = storeToRefs(allMapDataStore);
+    const { conformanceLogTempCheckId } = storeToRefs(conformanceStore);
+
+    const isAcctMenuOpen = computed(() => acctMgmtStore.isAcctMenuOpen);
+
+    return { logOut, tempFilterId,
+      conformanceLogTempCheckId,
+      allMapDataStore, conformanceStore,
+      isAcctMenuOpen,
+    };
+  },
   data() {
     return {
       i18next: i18next,
     }
   },
   computed: {
-    ...mapState(loginStore, ['userData']),
+    ...mapState(LoginStore, ['userData']),
-    ...mapState(AcctMgmtStore, ['isAcctMenuOpen']),
   },
   methods: {
     clickOtherPlacesThenCloseMenu(){
@@ -58,8 +77,21 @@ export default {
     },
     onBtnAcctMgmtClick(){
       this.$router.push({name: 'AcctAdmin'});
+      this.closeAcctMenu();
     },
-    ...mapActions(loginStore, ['getUserData']),
+    onLogoutBtnClick(){
+      if ((this.$route.name === 'Map' || this.$route.name === 'CheckMap') && this.tempFilterId) {
+        // 傳給 Map，通知 Sidebar 要關閉。
+        this.$emitter.emit('leaveFilter', false);
+        leaveFilter(false, this.allMapDataStore.addFilterId, false, this.logOut)
+      } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance')
+        && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
+        leaveConformance(false, this.conformanceStore.addConformanceCreateCheckId, false, this.logOut)
+      } else {
+        this.logOut();
+      }
+    },
+    ...mapActions(LoginStore, ['getUserData']),
     ...mapActions(AcctMgmtStore, ['closeAcctMenu']),
   },
   created() {

src/components/Header.vue

@@ -6,10 +6,6 @@
       </figure>
       <div class="flex justify-between items-center relative"
         v-show="showMember">
-        <!-- TODO: 換成人頭按鈕 帳號管理功能 -->
-        <button id="logout_btn" class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
-          Logout
-        </button>
         <img id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32" 
           class="cursor-pointer"  @click="onAcctHeadClick"
         />

src/i18n/en.json

@@ -36,6 +36,7 @@
         "DeleteFirstClause": "deletion is irreversible !",
         "DeleteSecondClause": "You will delete all data and content on this account.",
         "MsgAccountAdded": "Account added.",
+        "MsgAccountEdited": "Saved",
         "MsgAccountDeleteSuccess": "Account deleted.",
         "AccountNotUnique": "Account has already been registered."
     },

src/stores/acctMgmt.js

@@ -123,6 +123,30 @@ export default defineStore('acctMgmtStore', {
         return false;
       };
     },
+    /**
+     * Edit an account.
+     * @param {string} userToEdit this value is unique in database.
+     * @param {object} editDetail
+     */
+    async editAccount(userToEdit, editDetail) {
+      const apiEdit = `/api/users/${userToEdit}`;
+
+      try{
+        const response = await this.$axios.put(apiEdit, {
+          username: editDetail.newUsername,
+          password: editDetail.password,
+          name: editDetail.name,
+          is_active: editDetail.is_active,
+        });
+        if(response.status === 200) {
+          return true;
+        }
+      }
+      catch(error) {
+        apiError(error, 'Failed to edit the account.');
+        return false;
+      };
+    },
     /**
      * Get user detail by unique username.
      * @param {string} uniqueUsername

src/views/AccountManagement/ModalAccountEditCreate.vue

@@ -142,7 +142,7 @@ import { useToast } from 'vue-toast-notification';
 import useAcctMgmtStore from '@/stores/acctMgmt.js';
 import ModalHeader from "./ModalHeader.vue";
 import IconChecked from "@/components/icons/IconChecked.vue";
-import { MODAL_CREATE_NEW, } from '@/constants/constants.js';
+import { MODAL_CREATE_NEW, MODAL_ACCT_EDIT, } from '@/constants/constants.js';
 
 export default defineComponent({
     setup() {
@@ -226,13 +226,14 @@ export default defineComponent({
             if(!isPwdMatched.value){
                 return;
             }
+
+            await checkAccountIsUnique();
+                if(!isAccountUnique.value) {
+                    return;
+                }
             
             switch(whichCurrentModal.value) {
-                case MODAL_CREATE_NEW:
+                case MODAL_CREATE_NEW:                    
-                    await checkAccountIsUnique();
-                    if(!isAccountUnique.value) {
-                        return;
-                    }
                     await acctMgmtStore.createNewAccount({
                         username: inputUserAccount.value,
                         password: inputPwd.value,
@@ -245,6 +246,17 @@ export default defineComponent({
                     acctMgmtStore.setShouldUpdateList(true);
                     await router.push('/account/account-admin');
                 break;
+                case MODAL_ACCT_EDIT:
+                    // 要注意的是舊的username跟新的username可以是不同的
+                    await acctMgmtStore.editAccount(
+                        currentViewingUser.value.username, {
+                        newUsername: inputUserAccount.value,
+                        password: inputPwd.value,
+                        name: inputName.value,
+                        is_active: true,
+                        // is_active: isSetActivedChecked.value, //TODO: 待確認需求規格
+                    });
+                    await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
                 default:
                 break;
             }