Fix signIn page: auth chain only on code param, flatten JSX, function-style translation, revert UserBar

Agent-Logs-Url: https://github.com/FreeCodeCamp-Chengdu/HOP/sessions/8c9b2f6e-88e2-42e9-b04e-34847c85dda8

Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>

Author: Copilot

components/User/UserBar.tsx

@@ -38,7 +38,7 @@ const UserBar = observer(() => {
           </Dropdown.Menu>
         </Dropdown>
       ) : (
-        <Button variant="outline-light" href="/user/signIn">
+        <Button variant="outline-light" href="/user/me">
           {t('sign_in')}
         </Button>
       )}

pages/user/signIn.tsx

@@ -1,11 +1,13 @@
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { verify } from 'jsonwebtoken';
 import { observer } from 'mobx-react';
 import { compose } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
 import { Button, Container } from 'react-bootstrap';
 
 import { PageHead } from '../../components/layout/PageHead';
+import { JWT_SECRET } from '../../configuration';
 import { I18nContext } from '../../models/Base/Translation';
 import { GITHUB_OAUTH_SCOPES, githubSigner, jwtSigner } from '../api/core';
 
@@ -19,12 +21,30 @@ export const getServerSideProps = compose<SignInPageProps>(
     const { query, req } = context;
     const callback = (query.callback as string) || '/';
 
-    const result = await next();
+    // If there is a `code` param, this is the OAuth callback — run the auth
+    // middleware chain (githubSigner exchanges the code for a token cookie,
+    // jwtSigner then signs a JWT and returns jwtPayload in props).
+    if (query.code) {
+      const result = await next();
 
-    if ('props' in result && (result.props as any).jwtPayload) {
+      if ('props' in result && (result.props as any).jwtPayload)
+        return { redirect: { destination: callback, permanent: false } };
+
+      return result;
+    }
+
+    // If the user is already logged in, skip the sign-in page.
+    const { JWT: jwtCookie = '' } = req.cookies;
+
+    try {
+      verify(jwtCookie, JWT_SECRET!);
       return { redirect: { destination: callback, permanent: false } };
+    } catch {
+      // Not logged in — fall through to render the sign-in page.
     }
 
+    // Build the GitHub OAuth URL pointing back to this page so the callback
+    // lands here and is processed by the middleware chain above.
     const proto =
       (req.headers['x-forwarded-proto'] as string) ||
       ((req as any).socket?.encrypted ? 'https' : 'http');
@@ -42,21 +62,19 @@ const SignInPage: FC<SignInPageProps> = observer(({ githubOAuthURL }) => {
   const { t } = useContext(I18nContext);
 
   return (
-    <>
+    <Container className="d-flex flex-column align-items-center justify-content-center min-vh-100 gap-3">
       <PageHead title={t('sign_in')} />
-      <Container className="d-flex flex-column align-items-center justify-content-center min-vh-100 gap-3">
-        <h1>{t('sign_in')}</h1>
-        <Button
-          as="a"
-          href={githubOAuthURL}
-          size="lg"
-          className="d-flex align-items-center gap-2"
-        >
-          <FontAwesomeIcon icon={faGithub} />
-          {t('sign_in_with_github')}
-        </Button>
-      </Container>
-    </>
+      <h1>{t('sign_in')}</h1>
+      <Button
+        as="a"
+        href={githubOAuthURL}
+        size="lg"
+        className="d-flex align-items-center gap-2"
+      >
+        <FontAwesomeIcon icon={faGithub} />
+        {t('sign_in_with')('GitHub')}
+      </Button>
+    </Container>
   );
 });
 

translation/en-US.ts

@@ -359,6 +359,6 @@ export default {
   preview_questionnaire: 'Preview the questionnaire',
   confirm_to_delete_questionnaire: 'Confirm to delete the questionnaire?',
   fill_default_questions: 'Fill with default questions',
-  sign_in_with_github: 'Sign in with GitHub',
+  sign_in_with: (platform: string) => `Sign in with ${platform}`,
   for_example: (example: string) => 'E.g., ' + example,
 } as const;

translation/zh-CN.ts

@@ -354,6 +354,6 @@ export default {
   preview_questionnaire: '问卷预览',
   confirm_to_delete_questionnaire: '确认删除该问卷？',
   fill_default_questions: '填入默认问题',
-  sign_in_with_github: '用 GitHub 账号登录',
+  sign_in_with: (platform: string) => `用 ${platform} 账号登录`,
   for_example: (example: string) => '例如：' + example,
 } as const;

translation/zh-TW.ts

@@ -354,6 +354,6 @@ export default {
   preview_questionnaire: '預覽問卷',
   confirm_to_delete_questionnaire: '確定刪除該問卷？',
   fill_default_questions: '填入預設問題',
-  sign_in_with_github: '用 GitHub 帳號登錄',
+  sign_in_with: (platform: string) => `用 ${platform} 帳號登錄`,
   for_example: (example: string) => '例如：' + example,
 } as const;