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

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()