sync: update from private repo (c8b6d29)

src/bridge/auth-login.html

@@ -199,6 +199,34 @@
       line-height: 1.5;
     }
 
+    .auth-error {
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      color: #b91c1c;
+      border-radius: 8px;
+      padding: 10px 14px;
+      font-size: 0.8125rem;
+      line-height: 1.5;
+      margin-bottom: 16px;
+    }
+
+    .view-toggle {
+      margin-top: 16px;
+      font-size: 0.8125rem;
+      color: #64748b;
+      text-align: center;
+    }
+
+    .view-toggle a {
+      color: #4f46e5;
+      font-weight: 600;
+      text-decoration: none;
+    }
+
+    .view-toggle a:hover {
+      text-decoration: underline;
+    }
+
     /* RESPONSIVE */
     @media (max-width: 768px) {
       .container {
@@ -261,6 +289,20 @@
       .footer-note {
         color: #475569;
       }
+
+      .auth-error {
+        background: rgba(239, 68, 68, 0.12);
+        border-color: rgba(239, 68, 68, 0.35);
+        color: #fca5a5;
+      }
+
+      .view-toggle {
+        color: #94a3b8;
+      }
+
+      .view-toggle a {
+        color: #818cf8;
+      }
     }
   </style>
 </head>
@@ -291,9 +333,12 @@
     <!-- Right Panel -->
     <div class="right-panel">
       <div class="login-box">
-        <h2>ログイン</h2>
-        <p class="subtitle">アカウントでサインインしてください</p>
+        <h2 id="view-title">ログイン</h2>
+        <p class="subtitle" id="view-subtitle">アカウントでサインインしてください</p>
 
+        <div id="auth-error" class="auth-error" style="display:none;"></div>
+
+        <div id="view-login">
         <!-- GOOGLE_BUTTON_START -->
         <!-- Google OAuth Button -->
         <a href="/auth/google" class="oauth-button oauth-button-google">
@@ -339,16 +384,29 @@
           </button>
         </form>
         <!-- LOCAL_SIGNUP_START -->
-        <div class="divider">アカウントが無い場合</div>
-        <form method="post" action="/auth/local/signup" style="display:flex;flex-direction:column;gap:10px;">
-          <input type="text" name="email" placeholder="ログインID" required autocomplete="username"
-                 style="padding:11px 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;width:100%;box-sizing:border-box;">
-          <input type="password" name="password" placeholder="パスワード（8文字以上）" minlength="8" required autocomplete="new-password"
-                 style="padding:11px 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;width:100%;box-sizing:border-box;">
-          <button type="submit" class="oauth-button" style="justify-content:center;background:#fff;color:#111827;border:1px solid #d0d5dd;cursor:pointer;">
-            新規登録（管理者の承認後に利用可）
-          </button>
-        </form>
+        <p class="view-toggle">
+          アカウントが無い場合は <a href="#signup" data-show-view="signup">新規登録</a>
+        </p>
+        <!-- LOCAL_SIGNUP_END -->
+        <!-- LOCAL_FORM_END -->
+        </div><!-- /view-login -->
+
+        <!-- LOCAL_FORM_START -->
+        <!-- LOCAL_SIGNUP_START -->
+        <div id="view-signup" style="display:none;">
+          <form method="post" action="/auth/local/signup" style="display:flex;flex-direction:column;gap:10px;">
+            <input type="text" name="email" placeholder="ログインID" required autocomplete="username"
+                   style="padding:11px 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;width:100%;box-sizing:border-box;">
+            <input type="password" name="password" placeholder="パスワード（8文字以上）" minlength="8" required autocomplete="new-password"
+                   style="padding:11px 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:14px;width:100%;box-sizing:border-box;">
+            <button type="submit" class="oauth-button" style="justify-content:center;background:#111827;color:#fff;border:none;cursor:pointer;">
+              新規登録する
+            </button>
+          </form>
+          <p class="view-toggle">
+            <a href="#" data-show-view="login">← ログインに戻る</a>
+          </p>
+        </div><!-- /view-signup -->
         <!-- LOCAL_SIGNUP_END -->
         <!-- LOCAL_FORM_END -->
 
@@ -358,5 +416,58 @@
       </div>
     </div>
   </div>
+  <script>
+    (function () {
+      var loginView = document.getElementById('view-login');
+      var signupView = document.getElementById('view-signup');
+      var title = document.getElementById('view-title');
+      var subtitle = document.getElementById('view-subtitle');
+
+      var ERRORS = {
+        invalid: '入力内容が正しくありません。',
+        credentials: 'ログインID またはパスワードが違います。',
+        disabled: 'このアカウントは無効化されています。管理者にお問い合わせください。',
+        signup: '登録に失敗しました。このログインID は既に使われている可能性があります。',
+        weak: 'パスワードは8文字以上で設定してください。'
+      };
+
+      function show(view) {
+        var isSignup = view === 'signup' && !!signupView;
+        if (loginView) loginView.style.display = isSignup ? 'none' : '';
+        if (signupView) signupView.style.display = isSignup ? '' : 'none';
+        if (title) title.textContent = isSignup ? '新規登録' : 'ログイン';
+        if (subtitle) {
+          subtitle.textContent = isSignup
+            ? '登録後、管理者の承認を経て利用できます'
+            : 'アカウントでサインインしてください';
+        }
+        if (history.replaceState) {
+          history.replaceState(null, '',
+            location.pathname + location.search + (isSignup ? '#signup' : ''));
+        }
+      }
+
+      var toggles = document.querySelectorAll('[data-show-view]');
+      for (var i = 0; i < toggles.length; i++) {
+        (function (el) {
+          el.addEventListener('click', function (e) {
+            e.preventDefault();
+            show(el.getAttribute('data-show-view'));
+          });
+        })(toggles[i]);
+      }
+
+      var err = new URLSearchParams(location.search).get('error');
+      if (err && ERRORS[err]) {
+        var box = document.getElementById('auth-error');
+        if (box) {
+          box.textContent = ERRORS[err];
+          box.style.display = '';
+        }
+      }
+      // signup 由来のエラー、または #signup 直リンクは登録ビューを開く
+      if (location.hash === '#signup' || err === 'signup' || err === 'weak') show('signup');
+    })();
+  </script>
 </body>
 </html>