edit account and logout feature

2024-06-26 15:35:51 +08:00
parent 14783654a5
commit b2c084657d
8 changed files with 1617 additions and 1527 deletions
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
-      "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
-      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
-      "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
-      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
    },
    "moment": {
      "version": "2.29.4",
@@ -10513,9 +10561,9 @@
      }
    },
    "regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
    },
    "regexpp": {
      "version": "3.2.0",
--- a/package.json
+++ b/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",
--- a/src/components/AccountMenu/AcctMenu.vue
+++ b/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(AcctMgmtStore, ['isAcctMenuOpen']),
+    ...mapState(LoginStore, ['userData']),
  },
  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() {
--- a/src/components/Header.vue
+++ b/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"
        />
--- a/src/i18n/en.json
+++ b/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."
    },
--- a/src/stores/acctMgmt.js
+++ b/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
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/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:
-                    await checkAccountIsUnique();
-                    if(!isAccountUnique.value) {
-                        return;
-                    }
+                case MODAL_CREATE_NEW:                    
                    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;
            }
--- a/yarn.lock
+++ b/yarn.lock