feat: 個資條款

app/citizen-frontend/src/pages/profile.vue

@@ -2,14 +2,7 @@
   <Layout>
     <template #main>
       <div class="profile-page">
-        <v-card class="mb-6" variant="flat">
-          <v-card-title class="text-primary font-weight-bold"
-            >個人資料修改</v-card-title
-          >
-          <v-card-subtitle class="text-grey-darken-3">
-            更新您的基本資料與緊急聯絡資訊。</v-card-subtitle
-          >
-        </v-card>
+        <PageHeading title="個人資料修改" />
 
         <v-card class="rounded-xl" color="surface" variant="flat">
           <v-card-title class="mb-4">基本資料</v-card-title>
@@ -168,8 +161,20 @@
                 class="mb-3"
                 color="primary"
                 :disabled="initialLoading"
-                label="我已閱讀並同意個資授權條款"
-              />
+              >
+                <template #label>
+                  <span>
+                    我已閱讀並同意
+                    <button
+                      class="text-primary text-decoration-underline"
+                      type="button"
+                      @click.stop="showPrivacyConsent = true"
+                    >
+                      個資授權條款
+                    </button>
+                  </span>
+                </template>
+              </v-checkbox>
 
               <div class="d-flex flex-column flex-sm-row ga-3">
                 <v-btn
@@ -195,13 +200,17 @@
           </v-card-text>
         </v-card>
       </div>
+
+      <PrivacyConsentDialog v-model="showPrivacyConsent" />
     </template>
   </Layout>
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, ref } from "vue";
+import PrivacyConsentDialog from "@/components/PrivacyConsentDialog.vue";
 import Layout from "@/components/layout/DefaultLayout.vue";
+import PageHeading from "@/components/layout/PageHeading.vue";
 import type { UserProfile } from "@/stores/app";
 import { useAppStore } from "@/stores/app";
 import { getApiErrorMessage } from "@/utils/api-error";
@@ -221,6 +230,7 @@ interface ProfileForm {
 }
 
 const store = useAppStore();
+const showPrivacyConsent = ref(false);
 const form = reactive<ProfileForm>(createEmptyForm());
 const initialLoading = ref(true);
 const saving = ref(false);