WIP: create feature checkboxes layout

src/assets/icon-blue-checkbox.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="16" height="16" rx="2" fill="white" stroke="#0099FF" stroke-width="2"/>
+</svg>

src/assets/icon-checkbox-checked.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 10.4999L0 5.53988L1.59 3.99988L5 7.34988L12.41 -0.00012207L14 1.57988L5 10.4999Z" fill="#0099FF"/>
+</svg>

src/assets/icon-checkbox-empty.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="16" height="16" rx="2" fill="white" stroke="#CBD5E1" stroke-width="2"/>
+</svg>

src/components/icons/IconChecked.vue

@@ -0,0 +1,34 @@
+<template>
+    <div
+        class="relative two-imgs-container  w-[18px] h-[24px] cursor-pointer mt-1 mr-2"> <!--一個relative的div承接兩個absolute的imgs元素-->
+        <img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute"/>
+        <img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute"/>
+        <img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]"/>
+    </div>
+    
+</template>
+
+<script>
+import { defineComponent, computed, ref, } from 'vue';
+import ImgCheckboxBlueFrame from "@/assets/icon-blue-checkbox.svg";
+import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
+import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";
+
+export default defineComponent({
+    props: {
+        isChecked: {
+        type: Boolean,
+        required: true // 表示这个 props 是必需的
+        },
+    },
+    setup(props) {
+        const isChecked = computed(() => props.isChecked);
+        return {
+            ImgCheckboxBlueFrame,
+            ImgCheckboxCheckedMark,
+            ImgCheckboxGrayFrame,
+            isChecked,
+        };
+    },
+});
+</script>

src/i18n/en.json

@@ -24,7 +24,9 @@
         "AccountInformation": "Account Information",
         "Password": "Password",
         "ConfirmPassword": "Confirm Password",
-        "PwdNotMatch": "Confirm Password does not match."
+        "PwdNotMatch": "Confirm Password does not match.",
+        "SetAsAdmin": "Set as admin.",
+        "ActivateNow": "Activate now."
     },
     "Compare": {
         "timeUsage": "Time Usage",

src/views/AccountManagement/ModalAccountEdit.vue

@@ -6,8 +6,8 @@
         <main class="flex row min-h-[96px] my-[32px] flex-col px-6">
             <div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
                 justify-between">
-                <div class="field-label text-sm flex items-center font-medium mr-4 justify-end">
+                <div class="field-label text-sm flex items-center font-medium  justify-end">
-                    <span class="align-right-span flex w-[100px] justify-end">
+                    <span class="align-right-span flex w-[122px] justify-end">
                         {{ i18next.t("AcctMgmt.Account") }}
                     </span>
                 </div>
@@ -17,8 +17,8 @@
             </div>
             <div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
                 justify-between">
-                <div class="field-label text-sm flex items-center font-medium mr-4 justify-end">
+                <div class="field-label text-sm flex items-center font-medium  justify-end">
-                    <span class="align-right-span flex w-[100px] justify-end">
+                    <span class="align-right-span flex w-[122px] justify-end">
                         {{ i18next.t("AcctMgmt.FullName") }}
                     </span>
                 </div>
@@ -27,8 +27,8 @@
             </div>
             <div v-show="!isSSO" class="input-row w-full flex py-2 h-[40px] mb-4 items-center
                 justify-between">
-                <div class="field-label text-sm flex items-center font-medium mr-4 justify-end">
+                <div class="field-label text-sm flex items-center font-medium  justify-end">
-                    <span class="align-right-span flex w-[100px] justify-end">
+                    <span class="align-right-span flex w-[122px] justify-end">
                         {{ i18next.t("AcctMgmt.Password") }}
                     </span>
                 </div>
@@ -42,7 +42,7 @@
             </div>
             <div v-show="!isSSO" id="confirm_pwd_row" class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4
                 mb-4 flex items-center"> <!-- 2-by-2 的格子，其中左下角是一個dummy格子，其沒有內容 -->
-                <span class="field-label w-[100px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
+                <span class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
                     :class="{
                         'text-[#000000]': isPwdMatched,
                         'text-[#FF3366]': !isPwdMatched,
@@ -73,7 +73,24 @@
                         {{ i18next.t("AcctMgmt.PwdNotMatch") }}
                     </span>
                 </div>
-                
+            </div>
+            <div class="checkbox-row w-full grid-cols-[122px_1fr] gap-x-4 flex py-2 h-[40px] my-4 items-center">
+                <div class="dummy field-label flex items-center w-[122px]">
+                </div> <!--這裡也使用了dummy欄位去撐起空間-->
+                <section id="account_create_checkboxes_section" class="flex flex-col">
+                    <div class="checkbox-and-text flex">
+                        <IconChecked :isChecked="isSetAsAdminChecked" @click="toggleIsAdmin"/>
+                        <span class="flex checkbox-text">
+                            {{ i18next.t("AcctMgmt.SetAsAdmin") }}
+                        </span>                    
+                    </div>
+                    <div class="checkbox-and-text flex">
+                        <IconChecked  :isChecked="isSetActivedChecked" @click="toggleIsActivated"/>
+                        <span class="flex checkbox-text">
+                            {{ i18next.t("AcctMgmt.ActivateNow") }}
+                        </span>
+                    </div>
+                </section>
             </div>
         </main>
         <footer class="flex row footer justify-end pr-[32px] pb-8">            
@@ -104,6 +121,7 @@ import { mapActions, } from 'pinia';
 import { useModalStore } from '@/stores/modal.js';
 import useAcctMgmtStore from '@/stores/acctMgmt.js';
 import ModalHeader from "./ModalHeader.vue";
+import IconChecked from "@/components/icons/IconChecked.vue";
 
 export default defineComponent({
     setup() {
@@ -114,6 +132,8 @@ export default defineComponent({
         const isPwdMatched = ref(true);
         const inputPwd = ref("");
         const inputConfirmPwd = ref("");
+        const isSetAsAdminChecked = ref(false);
+        const isSetActivedChecked = ref(true);
 
         const {
             id,
@@ -143,6 +163,13 @@ export default defineComponent({
             validateConfirmPwd();
         }
 
+        const toggleIsAdmin = () => {
+            isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
+        }
+
+        const toggleIsActivated = () => {
+            isSetActivedChecked.value = !isSetActivedChecked.value;
+        }
         return {
             isConfirmDisabled,
             account,
@@ -157,6 +184,10 @@ export default defineComponent({
             inputPwd,
             inputConfirmPwd,
             onConfirmBtnClick,
+            isSetAsAdminChecked,
+            isSetActivedChecked,
+            toggleIsAdmin,
+            toggleIsActivated,
         };
     },
     data() {
@@ -166,6 +197,7 @@ export default defineComponent({
     },
     components: {
         ModalHeader,
+        IconChecked,
     },
     methods: {
         onCloseBtnClick(){