[refactor] redesign User profile page & fix Activity create layout

.env

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_SITE_NAME = 开放黑客松
+NEXT_PUBLIC_SITE_NAME = 黑客松开放平台
 NEXT_PUBLIC_SITE_SUMMARY = 基于 Git 云开发环境的开放黑客马拉松平台
 NEXT_PUBLIC_API_HOST = https://openhackathon-service.onrender.com
 NEXT_PUBLIC_AUTHING_APP_ID = 60178760106d5f26cb267ac1

README.md

@@ -26,6 +26,32 @@ Open-source [Hackathon][1] Platform with **Git-based Cloud Development Environme
 - PWA framework: [Workbox v6][9]
 - CI / CD: GitHub [Actions][10] + [Vercel][11]
 
+## Environment Configuration
+
+Configure the following required variables in your local environment:
+
+```bash
+# GitHub OAuth (required for login)
+GITHUB_OAUTH_CLIENT_ID=your_client_id
+GITHUB_OAUTH_CLIENT_SECRET=your_client_secret
+
+# JWT Secret (required for session)
+JWT_SECRET=your_jwt_secret
+
+# API Host
+NEXT_PUBLIC_API_HOST=https://openhackathon-service.onrender.com
+```
+
+### Creating GitHub OAuth App
+
+1. Go to [GitHub Developer Settings](https://github.com/settings/developers)
+2. Click "New OAuth App"
+3. Fill in:
+   - **Application name**: HOP Local Dev
+   - **Homepage URL**: `http://localhost:3000`
+   - **Authorization callback URL**: `http://localhost:3000`
+4. Copy the Client ID and generate a Client Secret
+
 ## Getting Started
 
 First, run the development server:

components/User/UserBar.tsx

@@ -18,7 +18,7 @@ const UserBar = observer(() => {
         {t('create_hackathons')}
       </Button>
 
-      {user && (
+      {user ? (
         <Dropdown>
           <Dropdown.Toggle>{showName}</Dropdown.Toggle>
           <Dropdown.Menu>
@@ -27,15 +27,20 @@ const UserBar = observer(() => {
               title={t('edit_profile_tips')}
               target="_blank"
               href="https://github.com/settings/profile"
-              onClick={() => sessionStore.signOut(true)}
+              onClick={() => sessionStore.signOut()}
             >
               {t('edit_profile')}
             </Dropdown.Item>
+            <Dropdown.Divider />
             <Dropdown.Item onClick={() => sessionStore.signOut(true)}>
               {t('sign_out')}
             </Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
+      ) : (
+        <Button variant="outline-light" href="/user/me">
+          {t('sign_in')}
+        </Button>
       )}
       <LanguageMenu />
     </>

configuration/index.ts

@@ -5,8 +5,9 @@ export const isServer = () => typeof window === 'undefined';
 export const Name = process.env.NEXT_PUBLIC_SITE_NAME,
   Summary = process.env.NEXT_PUBLIC_SITE_SUMMARY;
 
-export const { JWT_SECRET, GITHUB_PAT, VERCEL } = process.env;
+export const { NODE_ENV, JWT_SECRET, GITHUB_PAT, VERCEL } = process.env;
 
+export const isProduction = NODE_ENV === 'production';
 export const API_HOST = process.env.NEXT_PUBLIC_API_HOST;
 
 export const { token, JWT } = (globalThis.document ? parseCookie() : {}) as Record<

models/Activity/Award.ts

@@ -1,7 +1,7 @@
 import { User, Base, Media, Team } from '@freecodecamp-chengdu/hop-service';
 import { ListModel, Stream, toggle } from 'mobx-restful';
 
-import { createListStream, InputData } from '../Base';
+import { createListStream, InputData, TableModel } from '../Base';
 import sessionStore from '../User/Session';
 
 export interface Award extends Record<'hackathonName' | 'name' | 'description', string>, Base {
@@ -11,19 +11,20 @@ export interface Award extends Record<'hackathonName' | 'name' | 'description',
 }
 
 export interface AwardAssignment
-  extends Omit<Base, 'id'>,
+  extends
+    Omit<Base, 'id'>,
     Omit<Award, 'name' | 'quantity' | 'target' | 'pictures'>,
     Record<'assignmentId' | 'assigneeId' | 'awardId', number> {
   user?: User;
   team?: Team;
   award: Award;
 }
 
-export class AwardModel extends Stream<Award>(ListModel) {
+export class AwardModel extends TableModel<Award> {
   client = sessionStore.client;
   currentAssignment?: AwardAssignmentModel;
 
-  constructor(baseURI: string) {
+  constructor(public baseURI: string) {
     super();
     this.baseURI = `${baseURI}/award`;
   }

models/User/Session.ts

@@ -1,8 +1,9 @@
 import { Base, User } from '@freecodecamp-chengdu/hop-service';
+import { clear } from 'idb-keyval';
 import { HTTPClient } from 'koajax';
 import { computed, observable } from 'mobx';
 import { BaseModel, persist, restore, toggle } from 'mobx-restful';
-import { buildURLData, setCookie } from 'web-utility';
+import { buildURLData, setCookie, sleep } from 'web-utility';
 
 import { API_HOST, isServer, JWT, token } from '../../configuration';
 
@@ -15,22 +16,20 @@ export const ownClient = new HTTPClient({ baseURI: API_HOST, responseType: 'json
 );
 
 export interface SessionUser
-  extends Base,
-    Record<'username' | 'email', string>,
-    Record<'confirmed' | 'blocked', boolean> {
+  extends Base, Record<'username' | 'email', string>, Record<'confirmed' | 'blocked', boolean> {
   provider: 'local' | 'github';
   gender?: 'Female' | 'Male' | 'Other';
 }
 
 export class SessionModel extends BaseModel {
   client = ownClient;
 
-  restored = !isServer() && restore(this, 'Session');
-
   @persist()
   @observable
   accessor user: User | undefined;
 
+  restored = !isServer() && restore(this, 'Session');
+
   @computed
   get metaOAuth() {
     return { github: { accessToken: token } };
@@ -59,11 +58,13 @@ export class SessionModel extends BaseModel {
     return body!;
   }
 
-  signOut(reload = false) {
+  async signOut(reload = false) {
     setCookie('token', '', { path: '/', expires: new Date() });
     setCookie('JWT', '', { path: '/', expires: new Date() });
 
     this.user = undefined;
+    await sleep();
+    await clear();
 
     if (reload) location.reload();
   }

package.json

@@ -17,6 +17,7 @@
     "array-unique-proposal": "^0.3.4",
     "classnames": "^2.5.1",
     "echarts-jsx": "^0.6.0",
+    "idb-keyval": "^6.2.2",
     "idea-react": "^2.2.2",
     "jsonwebtoken": "^9.0.3",
     "koa": "^3.2.0",

pages/_app.tsx

@@ -20,6 +20,7 @@ import {
   loadSSRLanguage,
 } from '../models/Base/Translation';
 import styles from './_app.module.less';
+import sessionStore from '../models/User/Session';
 
 configure({ enforceActions: 'never' });
 
@@ -45,6 +46,8 @@ export default class CustomApp extends App<I18nProps> {
 
       if (tips) alert(tips);
     });
+
+    sessionStore.getProfile().catch(console.debug);
   }
 
   render() {

pages/activity/create.module.less

@@ -4,12 +4,7 @@
 }
 
 .form-card {
-  position: relative;
-  z-index: 10;
-  margin-top: -3rem;
   box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
-  border-radius: 1.5rem;
-  background: white;
 }
 
 .icon-circle {

pages/activity/create.tsx

@@ -30,12 +30,18 @@ const ActivityCreatePage: FC<JWTProps> = observer(() => {
         </hgroup>
       </section>
 
-      <section className="pb-5 bg-body-tertiary">
-        <Card className={classNames(styles['form-card'], 'border-0 mx-auto')}>
-          <Card.Body className="p-4 p-md-5">
-            <ActivityEditor />
-          </Card.Body>
-        </Card>
+      <section className="py-5 bg-body-tertiary">
+        <Container>
+          <Row className="justify-content-center">
+            <Col lg={10} xl={8}>
+              <Card className={classNames(styles['form-card'], 'border-0 rounded-4')}>
+                <Card.Body className="p-4 p-md-5">
+                  <ActivityEditor />
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+        </Container>
       </section>
     </>
   );

pages/api/core.ts

@@ -13,8 +13,7 @@ import {
   withKoa,
 } from 'next-ssr-middleware';
 
-import { JWT_SECRET } from '../../configuration';
-import { VERCEL } from '../../configuration';
+import { isProduction, JWT_SECRET, VERCEL } from '../../configuration';
 import { SessionModel } from '../../models/User/Session';
 
 export type JWTContext = ParameterizedContext<
@@ -83,14 +82,27 @@ export const jwtSigner: SSRM<DataObject, JWTProps<User>> = async ({ req, res },
 
     const user = await SessionModel.signInWithGitHub(token!);
 
-    res.setHeader('Set-Cookie', `JWT=${user.token}; Path=/`);
+    res.setHeader(
+      'Set-Cookie',
+      [`JWT=${user.token}`, 'Path=/', isProduction ? 'Secure' : '', 'SameSite=Lax']
+        .filter(Boolean)
+        .join('; '),
+    );
 
     return { props: { jwtPayload: JSON.parse(JSON.stringify(user)) } };
   }
 };
 
-const client_id = process.env.GITHUB_OAUTH_CLIENT_ID!,
-  client_secret = process.env.GITHUB_OAUTH_CLIENT_SECRET!;
+const client_id = process.env.GITHUB_OAUTH_CLIENT_ID,
+  client_secret = process.env.GITHUB_OAUTH_CLIENT_SECRET;
+
+if (!client_id || !client_secret)
+  throw new ReferenceError(
+    `[OAuth Config Error] Missing required environment variables:
+  - GITHUB_OAUTH_CLIENT_ID
+  - GITHUB_OAUTH_CLIENT_SECRET
+Please configure them in .env.local or environment settings.`,
+  );
 
 export const ProxyBaseURL = 'https://test.hackathon.fcc-cd.dev/proxy';
 

pages/user/[id].module.less

@@ -0,0 +1,52 @@
+.hero-section {
+  background: radial-gradient(circle at top left, #312e81, #0f172a 55%, #020617);
+  padding: 3rem 0 6rem;
+}
+
+.avatar-placeholder {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  width: 7.5rem;
+  height: 7.5rem;
+}
+
+.social-btn {
+  transition: all 0.2s ease;
+  background: rgba(59, 130, 246, 0.08);
+  color: #64748b;
+
+  &:hover {
+    background: #2563eb;
+    color: white;
+  }
+
+  &.active {
+    background: #2563eb;
+    color: white;
+  }
+}
+
+.custom-tabs {
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  border: none;
+
+  :global(.nav-link) {
+    transition: all 0.2s ease;
+    border: none;
+    border-radius: 0.75rem;
+    background: rgba(59, 130, 246, 0.05);
+    padding: 0.75rem 1.5rem;
+    color: #64748b;
+    font-weight: 500;
+
+    &:hover {
+      background: rgba(59, 130, 246, 0.1);
+      color: #2563eb;
+    }
+
+    &:global(.active) {
+      background: #2563eb;
+      color: white;
+    }
+  }
+}