feat: 記住帳號, 忘記密碼開關

src/components/PageLogin.vue

@@ -110,6 +110,8 @@
             :remember-me-label="props.form.rememberMeLabel"
             :remember-storage-key="props.form.rememberStorageKey"
             :submit-text="props.form.submitText"
+            :with-forgot-password="props.form.withForgotPassword"
+            :with-remember-account="props.form.withRememberAccount"
             @forgot-password="handleForgotPassword"
             @submit="handleLogin"
           >
@@ -172,6 +174,8 @@
           :remember-me-label="props.form.rememberMeLabel"
           :remember-storage-key="props.form.rememberStorageKey"
           :submit-text="props.form.submitText"
+          :with-forgot-password="props.form.withForgotPassword"
+          :with-remember-account="props.form.withRememberAccount"
           @forgot-password="handleForgotPassword"
           @submit="handleLogin"
         >
@@ -311,6 +315,8 @@ interface FormConfig {
   rememberMeLabel?: string
   submitText?: string
   rememberStorageKey?: string
+  withForgotPassword?: boolean
+  withRememberAccount?: boolean
   withCaptcha?: boolean
   captcha?: {
     imgUrl?: string
@@ -400,6 +406,8 @@ const props = withDefaults(defineProps<Props>(), {
     rememberMeLabel: '記住帳號',
     submitText: '登入',
     rememberStorageKey: 'sklogin.remember.username',
+    withForgotPassword: true,
+    withRememberAccount: true,
     withCaptcha: true,
     captcha: undefined,
     captchaValue: '',

src/components/login/LoginForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-form @submit.prevent="$emit('submit', { username, password, rememberMe })">
+  <v-form @submit.prevent="handleSubmit">
     <v-text-field
       v-model="username"
       bg-color="surface"
@@ -27,8 +27,12 @@
 
     <slot name="verify"></slot>
 
-    <div class="d-flex align-center justify-space-between mb-6 mb-md-4">
+    <div
+      v-if="props.withRememberAccount || props.withForgotPassword"
+      class="d-flex align-center justify-space-between mb-6 mb-md-4"
+    >
       <v-checkbox
+        v-if="props.withRememberAccount"
         v-model="rememberMe"
         color="primary"
         density="compact"
@@ -36,6 +40,7 @@
         :label="props.rememberMeLabel"
       ></v-checkbox>
       <a
+        v-if="props.withForgotPassword"
         class="text-body-2 text-primary text-decoration-none"
         :href="props.forgotPasswordHref || '#'"
         :target="props.forgotPasswordTarget"
@@ -100,11 +105,21 @@ const props = defineProps({
     type: String,
     default: 'sklogin.remember.username',
   },
+  withRememberAccount: {
+    type: Boolean,
+    default: true,
+  },
+  withForgotPassword: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits(['submit', 'forgot-password'])
 
 onMounted(() => {
+  if (!props.withRememberAccount) return
+
   const saved = localStorage.getItem(props.rememberStorageKey)
   if (saved) {
     username.value = saved
@@ -113,6 +128,8 @@ onMounted(() => {
 })
 
 watch([rememberMe, username], ([nextRemember, nextUsername]) => {
+  if (!props.withRememberAccount) return
+
   if (!nextRemember) {
     localStorage.removeItem(props.rememberStorageKey)
     return
@@ -126,7 +143,17 @@ watch([rememberMe, username], ([nextRemember, nextUsername]) => {
   localStorage.setItem(props.rememberStorageKey, nextUsername)
 })
 
+function handleSubmit() {
+  emit('submit', {
+    username: username.value,
+    password: password.value,
+    rememberMe: props.withRememberAccount ? rememberMe.value : false,
+  })
+}
+
 function handleForgotPasswordClick(e: MouseEvent) {
+  if (!props.withForgotPassword) return
+
   emit('forgot-password', e)
   if (!props.forgotPasswordHref) {
     e.preventDefault()

src/views/Login.vue

@@ -87,6 +87,8 @@ const illustrationImage = ref(HyakkaouAcademyImage)
 const formPositionLayout = ref<LayoutType>('side-left')
 // 是否啟用公告
 const withAnnouncement = ref(true)
+const withForgotPassword = ref(true)
+const withRememberAccount = ref(true)
 
 // 功能開關：是否啟用驗證碼
 const withCaptcha = ref(true)
@@ -154,6 +156,8 @@ const form = computed(() => ({
   captchaPlaceholder: captchaPlaceholder.value,
   refreshTitle: refreshTitle.value,
   rememberStorageKey: rememberStorageKey.value,
+  withForgotPassword: withForgotPassword.value,
+  withRememberAccount: withRememberAccount.value,
   // 功能開關：是否顯示驗證碼
   withCaptcha: withCaptcha.value,
   captcha: loginCaptcha.formCaptcha.value,
@@ -178,6 +182,8 @@ const toolbar = computed(() => ({
 
 // 事件處理
 function handleForgotPassword(e: MouseEvent) {
+  if (!withForgotPassword.value) return
+
   console.log('Forgot Password Click:', e)
 }