feat: add login page

app/pages/login.vue

@@ -6,6 +6,9 @@
       <div class="gradient-overlay"></div>
         </div>
 
+    <!-- Glass Layer -->
+    <div class="glass-layer"></div>
+
     <!-- Lock Screen Content -->
     <div class="lock-content">
       <!-- Time and Date -->
@@ -30,15 +33,14 @@
                 :class="{ 'error': errors.username }"
                 required
               />
-              <div v-if="errors.username" class="error-message">{{ errors.username }}</div>
             </div>
         </div>
 
           <!-- Login Form -->
           <div class="login-form show">
             <form @submit.prevent="handleLogin" class="form">
-            <!-- Password Field -->
+              <!-- Password Field with Integrated Button -->
-              <div class="password-field">
+              <div class="password-field" :class="{ 'has-button': form.password }">
                 <input
                   ref="passwordInput"
                   v-model="form.password"
@@ -48,22 +50,78 @@
                   :class="{ 'error': errors.password, 'shake': shakeAnimation }"
                   required
                 />
-                <div v-if="errors.password" class="error-message">{{ errors.password }}</div>
-            </div>
-
-              <!-- Login Button -->
                 <button 
+                  v-if="form.password"
                   type="submit" 
                   class="login-button"
-                :disabled="isLoading || !form.password"
+                  :disabled="isLoading"
                 >
                   <span v-if="isLoading" class="loading-spinner"></span>
                   <span v-else>→</span>
                 </button>
+              </div>
             </form>
 
+            <!-- Unified Error Messages -->
+            <div class="error-messages">
+              <div v-if="errors.username" class="error-message">{{ errors.username }}</div>
+              <div v-if="errors.password" class="error-message">{{ errors.password }}</div>
+              <div v-if="errors.username && errors.password" class="error-message combined-error">
+                {{ $t('auth.common.bothFieldsRequired') }}
+              </div>
+            </div>
+
+            <!-- Divider -->
+            <div class="divider">
+              <div class="divider-line"></div>
+              <span class="divider-text">{{ $t('auth.login.orContinueWith') }}</span>
+              <div class="divider-line"></div>
+            </div>
+
+            <!-- Third Party Login -->
+            <div class="third-party-login">
+              <button 
+                class="third-party-btn google-btn"
+                @click="handleGoogleLogin"
+                :disabled="isLoading"
+                title="Google 登入"
+              >
+                <svg class="third-party-icon" viewBox="0 0 24 24">
+                  <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                  <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                  <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                  <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                </svg>
+              </button>
+
+              <button 
+                class="third-party-btn line-btn"
+                @click="handleLineLogin"
+                :disabled="isLoading"
+                title="LINE 登入"
+              >
+                <svg class="third-party-icon" viewBox="0 0 24 24">
+                  <path fill="#00B900" d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .345-.279.629-.631.629-.346 0-.626-.284-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .345-.282.629-.631.629-.345 0-.627-.284-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .63.285.63.63v4.771zm-2.466.629H4.917c-.345 0-.63-.284-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.281.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
+                </svg>
+              </button>
+
+              <button 
+                class="third-party-btn apple-btn"
+                @click="handleAppleLogin"
+                :disabled="isLoading"
+                title="Apple 登入"
+              >
+                <svg class="third-party-icon" viewBox="0 0 24 24">
+                  <path fill="#000000" d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
+                </svg>
+              </button>
+            </div>
+
             <!-- Options -->
             <div class="login-options">
+              <button class="option-link" @click="goHome">
+                {{ $t('auth.login.backToHome') }}
+              </button>
               <button class="option-link" @click="handleForgotPassword">
                 {{ $t('auth.login.forgotPassword') }}
               </button>
@@ -255,6 +313,52 @@ const goHome = () => {
   router.push('/');
 };
 
+// Third party login handlers
+const handleGoogleLogin = async () => {
+  isLoading.value = true;
+  try {
+    // Simulate Google OAuth flow
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    console.log('Google login initiated');
+    // In real implementation, redirect to Google OAuth
+    router.push('/');
+  } catch (error) {
+    console.error('Google login error:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const handleLineLogin = async () => {
+  isLoading.value = true;
+  try {
+    // Simulate LINE OAuth flow
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    console.log('LINE login initiated');
+    // In real implementation, redirect to LINE OAuth
+    router.push('/');
+  } catch (error) {
+    console.error('LINE login error:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const handleAppleLogin = async () => {
+  isLoading.value = true;
+  try {
+    // Simulate Apple Sign-In flow
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    console.log('Apple login initiated');
+    // In real implementation, redirect to Apple Sign-In
+    router.push('/');
+  } catch (error) {
+    console.error('Apple login error:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
 
 function toggleLanguageMenu() {
   isLanguageMenuOpen.value = !isLanguageMenuOpen.value;
@@ -321,16 +425,28 @@ watch(locale, () => {
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, 
-    #667eea 0%, 
+    #f8fafc 0%, 
-    #764ba2 25%, 
+    #e2e8f0 25%, 
-    #f093fb 50%, 
+    #cbd5e1 50%, 
-    #f5576c 75%, 
+    #94a3b8 75%, 
-    #4facfe 100%);
+    #64748b 100%);
   background-size: 400% 400%;
   animation: gradient-shift 15s ease infinite;
   z-index: 0;
 }
 
+.glass-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  z-index: 1;
+}
+
 @keyframes gradient-shift {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
@@ -363,7 +479,7 @@ watch(locale, () => {
 
 .lock-content {
   position: relative;
-  z-index: 1;
+  z-index: 2;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -377,7 +493,7 @@ watch(locale, () => {
 
 .time-section {
   text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 60px;
   position: relative;
   width: 100%;
   display: flex;
@@ -390,7 +506,7 @@ watch(locale, () => {
   font-size: 6rem;
   font-weight: 200;
   letter-spacing: -0.02em;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
   text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
   animation: time-glow 2s ease-in-out infinite alternate;
   line-height: 1;
@@ -425,13 +541,12 @@ watch(locale, () => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 20px;
+  gap: 24px;
 }
 
-
 .avatar-circle {
-  width: 120px;
+  width: 80px;
-  height: 120px;
+  height: 80px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(20px);
@@ -450,7 +565,7 @@ watch(locale, () => {
 }
 
 .avatar-icon {
-  font-size: 3rem;
+  font-size: 2rem;
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
 }
 
@@ -462,8 +577,9 @@ watch(locale, () => {
 }
 
 .username-input {
-  width: 300px;
+  width: 280px;
-  padding: 16px 24px;
+  height: 50px;
+  padding: 14px 24px;
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(20px);
   border: 2px solid rgba(255, 255, 255, 0.3);
@@ -474,6 +590,8 @@ watch(locale, () => {
   text-align: center;
   outline: none;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
+  box-sizing: border-box;
 }
 
 .username-input::placeholder {
@@ -482,9 +600,9 @@ watch(locale, () => {
 }
 
 .username-input:focus {
-  background: rgba(255, 255, 255, 0.25);
+  background: rgba(255, 255, 255, 0.15);
-  border-color: rgba(255, 255, 255, 0.6);
+  border-color: rgba(255, 255, 255, 0.3);
-  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
+  outline: none;
 }
 
 .username-input.error {
@@ -513,30 +631,40 @@ watch(locale, () => {
 .form {
   display: flex;
   align-items: center;
-  gap: 16px;
   justify-content: center;
   position: relative;
 }
 
 .password-field {
   position: relative;
-}
+  display: flex;
-
+  align-items: center;
-.password-input {
-  width: 300px;
-  padding: 16px 24px;
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(20px);
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 50px;
+  width: 280px;
+  height: 50px;
+  transition: all 0.3s ease;
+}
+
+.password-field:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.password-input {
+  width: 100%;
+  height: 100%;
+  padding: 14px 24px;
+  background: transparent;
+  border: none;
   color: white;
   font-size: 1.1rem;
   font-weight: 300;
   text-align: center;
-  transition: all 0.3s ease;
   outline: none;
-  display: block;
+  transition: all 0.3s ease;
-  margin: 0 auto;
 }
 
 .password-input::placeholder {
@@ -544,14 +672,17 @@ watch(locale, () => {
 }
 
 .password-input:focus {
-  background: rgba(255, 255, 255, 0.25);
+  background: transparent;
-  border-color: rgba(255, 255, 255, 0.6);
+  border-color: rgba(255, 255, 255, 0.3);
-  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
+  outline: none;
 }
 
-.password-input.error {
+.password-field.error {
   border-color: #ff6b6b;
   background: rgba(255, 107, 107, 0.2);
+}
+
+.password-field.error .password-input {
   animation: shake 0.5s ease-in-out;
 }
 
@@ -565,26 +696,38 @@ watch(locale, () => {
   animation: shake 0.5s ease-in-out;
 }
 
-.error-message {
+.error-messages {
-  position: absolute;
+  display: flex;
-  top: 100%;
+  flex-direction: column;
-  left: 50%;
+  align-items: center;
-  transform: translateX(-50%);
+  gap: 8px;
   margin-top: 12px;
+  min-height: 20px;
+}
+
+.error-message {
   font-size: 0.9rem;
   color: #ff6b6b;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  text-align: center;
   white-space: nowrap;
-  z-index: 10;
+}
+
+.combined-error {
+  font-weight: 500;
+  color: #ff8a8a;
 }
 
 .login-button {
-  width: 50px;
+  position: absolute;
-  height: 50px;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 42px;
+  height: 42px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
-  border: 2px solid rgba(255, 255, 255, 0.3);
   color: white;
   font-size: 1.2rem;
   cursor: pointer;
@@ -592,10 +735,7 @@ watch(locale, () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  position: absolute;
+  outline: none;
-  right: -70px;
-  top: 50%;
-  transform: translateY(-50%);
 }
 
 .login-button:hover:not(:disabled) {
@@ -626,8 +766,10 @@ watch(locale, () => {
 
 .login-options {
   display: flex;
-  gap: 32px;
+  gap: 24px;
   margin-top: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
 .option-link {
@@ -645,6 +787,99 @@ watch(locale, () => {
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
+/* Divider */
+.divider {
+  display: flex;
+  align-items: center;
+  margin: 24px 0;
+  gap: 16px;
+}
+
+.divider-line {
+  flex: 1;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.divider-text {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.9rem;
+  font-weight: 300;
+  white-space: nowrap;
+  padding: 0 8px;
+}
+
+/* Third Party Login */
+.third-party-login {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.third-party-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.third-party-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.4);
+  transform: translateY(-3px) scale(1.05);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.third-party-btn:active:not(:disabled) {
+  transform: translateY(-1px) scale(1.02);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+}
+
+.third-party-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.third-party-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+/* Google Button */
+.google-btn:hover:not(:disabled) {
+  background: rgba(66, 133, 244, 0.25);
+  border-color: rgba(66, 133, 244, 0.5);
+  box-shadow: 0 10px 30px rgba(66, 133, 244, 0.3);
+}
+
+/* LINE Button */
+.line-btn:hover:not(:disabled) {
+  background: rgba(0, 185, 0, 0.25);
+  border-color: rgba(0, 185, 0, 0.5);
+  box-shadow: 0 10px 30px rgba(0, 185, 0, 0.3);
+}
+
+/* Apple Button */
+.apple-btn:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.25);
+  border-color: rgba(255, 255, 255, 0.5);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
 
 .bottom-actions {
   display: flex;
@@ -777,36 +1012,41 @@ watch(locale, () => {
 /* Responsive Design */
 @media (max-width: 768px) {
   .lock-content {
-    padding: 40px 20px 20px;
+    padding: 60px 20px 20px;
   }
   
   .current-time {
-    font-size: 4rem;
+    font-size: 5rem;
   }
   
   .current-date {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
   }
   
   .avatar-circle {
-    width: 100px;
+    width: 60px;
-    height: 100px;
+    height: 60px;
   }
   
   .avatar-icon {
-    font-size: 2.5rem;
+    font-size: 1.5rem;
+  }
+  
+  .password-field {
+    width: 220px;
+    height: 44px;
   }
   
   .password-input {
-    width: 250px;
+    padding: 10px 16px;
-    padding: 14px 20px;
+    font-size: 0.9rem;
-    font-size: 1rem;
   }
   
   .username-input {
-    width: 250px;
+    width: 220px;
-    padding: 14px 20px;
+    height: 44px;
-    font-size: 1rem;
+    padding: 10px 16px;
+    font-size: 0.9rem;
   }
   
   .form {
@@ -815,28 +1055,32 @@ watch(locale, () => {
     align-items: center;
   }
   
-  .password-field {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 12px;
-  }
-  
   .login-button {
-    position: static;
+    width: 36px;
-    transform: none;
+    height: 36px;
-    right: auto;
+    font-size: 1rem;
-    top: auto;
-    margin: 0;
   }
   
   .login-options {
     flex-direction: column;
-    gap: 16px;
+    gap: 12px;
     text-align: center;
   }
   
+  .third-party-login {
+    gap: 16px;
+  }
+  
+  .third-party-btn {
+    width: 50px;
+    height: 50px;
+  }
+  
+  .third-party-icon {
+    width: 20px;
+    height: 20px;
+  }
+  
   .bottom-actions {
     gap: 30px;
   }
@@ -850,48 +1094,51 @@ watch(locale, () => {
 /* Extra small screens */
 @media (max-width: 480px) {
   .lock-content {
-    padding: 20px 16px 16px;
+    padding: 40px 16px 16px;
   }
   
   .current-time {
-    font-size: 3rem;
+    font-size: 4rem;
   }
   
   .current-date {
-    font-size: 1rem;
+    font-size: 1.2rem;
   }
   
   .avatar-circle {
-    width: 80px;
+    width: 50px;
-    height: 80px;
+    height: 50px;
   }
   
   .avatar-icon {
-    font-size: 2rem;
+    font-size: 1.2rem;
+  }
+  
+  .password-field {
+    width: 180px;
+    height: 40px;
   }
   
-  .username-input,
   .password-input {
-    width: 200px;
+    padding: 10px 14px;
-    padding: 12px 16px;
+    font-size: 0.85rem;
-    font-size: 0.9rem;
+  }
+  
+  .username-input {
+    width: 180px;
+    height: 40px;
+    padding: 10px 14px;
+    font-size: 0.85rem;
   }
   
   .form {
     gap: 12px;
   }
   
-  .password-field {
-    flex-direction: row;
-    gap: 8px;
-    justify-content: center;
-  }
-  
   .login-button {
-    width: 40px;
+    width: 32px;
-    height: 40px;
+    height: 32px;
-    font-size: 1rem;
+    font-size: 0.9rem;
-    margin: 0;
   }
   
   .login-options {
@@ -901,17 +1148,35 @@ watch(locale, () => {
   .option-link {
     font-size: 0.8rem;
   }
+  
+  .third-party-login {
+    gap: 12px;
+  }
+  
+  .third-party-btn {
+    width: 45px;
+    height: 45px;
+  }
+  
+  .third-party-icon {
+    width: 18px;
+    height: 18px;
+  }
 }
 
 /* Dark mode adjustments */
 @media (prefers-color-scheme: dark) {
   .background-image {
     background: linear-gradient(135deg, 
-      #1a1a2e 0%, 
+      #1e293b 0%, 
-      #16213e 25%, 
+      #334155 25%, 
-      #0f3460 50%, 
+      #475569 50%, 
-      #533483 75%, 
+      #64748b 75%, 
-      #e94560 100%);
+      #94a3b8 100%);
+  }
+  
+  .glass-layer {
+    background: rgba(0, 0, 0, 0.1);
   }
 }
 </style>

i18n/lang/en.json

@@ -91,7 +91,9 @@
       "signUp": "Sign Up",
       "emailPlaceholder": "Enter your email",
       "passwordPlaceholder": "Enter your password",
-      "usernamePlaceholder": "Enter your username"
+      "usernamePlaceholder": "Enter your username",
+      "orContinueWith": "Or continue with",
+      "backToHome": "Back to Home"
     },
     "register": {
       "title": "Register",
@@ -119,7 +121,8 @@
       "invalidEmail": "Please enter a valid email address",
       "passwordTooShort": "Password must be at least 6 characters",
       "usernameTooShort": "Username must be at least 3 characters",
-      "passwordsDoNotMatch": "Passwords do not match"
+      "passwordsDoNotMatch": "Passwords do not match",
+      "bothFieldsRequired": "Please enter both username and password"
     }
   },
   "install": {

i18n/lang/zh-TW.json

@@ -91,7 +91,9 @@
       "signUp": "立即註冊",
       "emailPlaceholder": "請輸入您的電子郵件",
       "passwordPlaceholder": "請輸入您的密碼",
-      "usernamePlaceholder": "請輸入您的用戶名"
+      "usernamePlaceholder": "請輸入您的用戶名",
+      "orContinueWith": "或使用以下方式繼續",
+      "backToHome": "返回首頁"
     },
     "register": {
       "title": "註冊",
@@ -119,7 +121,8 @@
       "invalidEmail": "請輸入有效的電子郵件地址",
       "passwordTooShort": "密碼至少需要 6 個字符",
       "usernameTooShort": "用戶名至少需要 3 個字符",
-      "passwordsDoNotMatch": "密碼不匹配"
+      "passwordsDoNotMatch": "密碼不匹配",
+      "bothFieldsRequired": "請填寫用戶名和密碼"
     }
   },
   "install": {