diff --git a/.env b/.env
index 1e45dba..6fe081a 100644
--- a/.env
+++ b/.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
\ No newline at end of file
diff --git a/README.md b/README.md
index 95abfa6..0b4be42 100644
--- a/README.md
+++ b/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:
diff --git a/components/User/UserBar.tsx b/components/User/UserBar.tsx
index 57456f4..f6a8b2a 100644
--- a/components/User/UserBar.tsx
+++ b/components/User/UserBar.tsx
@@ -18,7 +18,7 @@ const UserBar = observer(() => {
{t('create_hackathons')}
- {user && (
+ {user ? (
{showName}
@@ -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')}
+
sessionStore.signOut(true)}>
{t('sign_out')}
+ ) : (
+
)}
diff --git a/configuration/index.ts b/configuration/index.ts
index 34553eb..cee2c86 100644
--- a/configuration/index.ts
+++ b/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<
diff --git a/models/Activity/Award.ts b/models/Activity/Award.ts
index 39231a0..0ae926b 100644
--- a/models/Activity/Award.ts
+++ b/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,7 +11,8 @@ export interface Award extends Record<'hackathonName' | 'name' | 'description',
}
export interface AwardAssignment
- extends Omit,
+ extends
+ Omit,
Omit,
Record<'assignmentId' | 'assigneeId' | 'awardId', number> {
user?: User;
@@ -19,11 +20,11 @@ export interface AwardAssignment
award: Award;
}
-export class AwardModel extends Stream(ListModel) {
+export class AwardModel extends TableModel {
client = sessionStore.client;
currentAssignment?: AwardAssignmentModel;
- constructor(baseURI: string) {
+ constructor(public baseURI: string) {
super();
this.baseURI = `${baseURI}/award`;
}
diff --git a/models/User/Session.ts b/models/User/Session.ts
index fa6f3df..8313009 100644
--- a/models/User/Session.ts
+++ b/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,9 +16,7 @@ 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';
}
@@ -25,12 +24,12 @@ export interface SessionUser
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();
}
diff --git a/package.json b/package.json
index 7078a1f..0b7904b 100644
--- a/package.json
+++ b/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",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index cefc28c..520f2f4 100644
--- a/pages/_app.tsx
+++ b/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 {
if (tips) alert(tips);
});
+
+ sessionStore.getProfile().catch(console.debug);
}
render() {
diff --git a/pages/activity/create.module.less b/pages/activity/create.module.less
index 54dc844..f954eb6 100644
--- a/pages/activity/create.module.less
+++ b/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 {
diff --git a/pages/activity/create.tsx b/pages/activity/create.tsx
index 7240130..e378630 100644
--- a/pages/activity/create.tsx
+++ b/pages/activity/create.tsx
@@ -30,12 +30,18 @@ const ActivityCreatePage: FC = observer(() => {
-
-
-
-
-
-
+
);
diff --git a/pages/api/core.ts b/pages/api/core.ts
index 0f6c809..60a3e20 100644
--- a/pages/api/core.ts
+++ b/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> = 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';
diff --git a/pages/user/[id].module.less b/pages/user/[id].module.less
new file mode 100644
index 0000000..674282e
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/pages/user/[id].tsx b/pages/user/[id].tsx
index f38a36b..417a554 100644
--- a/pages/user/[id].tsx
+++ b/pages/user/[id].tsx
@@ -1,74 +1,176 @@
-import { faGithub, faQq, faWeibo, faWeixin } from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { User } from '@freecodecamp-chengdu/hop-service';
+import classNames from 'classnames';
+import { Icon } from 'idea-react';
import { observer } from 'mobx-react';
import dynamic from 'next/dynamic';
import { cache, compose, errorLogger } from 'next-ssr-middleware';
-import { FC, useContext } from 'react';
-import { Card, Col, Container, Row, Tab, Tabs } from 'react-bootstrap';
+import { FC, useContext, useEffect, useState } from 'react';
+import { Badge, Button, Card, Col, Container, Image, Nav, Row, Tab } from 'react-bootstrap';
import { PageHead } from '../../components/layout/PageHead';
import { I18nContext } from '../../models/Base/Translation';
+import sessionStore from '../../models/User/Session';
import userStore from '../../models/User';
+import styles from './[id].module.less';
const ActivityList = dynamic(() => import('../../components/Activity/ActivityList'), {
ssr: false,
});
-export const getServerSideProps = compose<{ id?: string }, User>(
+type PublicUser = Omit;
+
+export const getServerSideProps = compose<{ id?: string }, PublicUser>(
cache(),
errorLogger,
- async ({ params: { id = '' } = {} }) =>
- JSON.parse(JSON.stringify({ props: await userStore.getOne(id) })),
+ async ({ params: { id = '' } = {} }) => {
+ const {
+ email: _email,
+ mobilePhone: _mobilePhone,
+ password: _password,
+ token: _token,
+ ...user
+ } = await userStore.getOne(id);
+
+ return JSON.parse(JSON.stringify({ props: user }));
+ },
);
-const UserDetailPage: FC = observer(({ id, name, avatar }) => {
+const UserDetailPage: FC = observer(({ id, name, avatar }) => {
const { t } = useContext(I18nContext);
+ const { user } = sessionStore;
+ const [isOwner, setIsOwner] = useState(false);
+
+ useEffect(() => {
+ setIsOwner(user?.id === id);
+ }, [id, user?.id]);
+
+ const visibleEmail = isOwner ? user?.email : undefined;
return (
-
-
-
-
+ <>
+
+
+
+
+
+ {t('hacker_pavilion')}
+
+ {name || t('mystery_hacker')}
+ {visibleEmail && (
+
+
+ {visibleEmail}
+
+
+ )}
+
+
+
+
-
-
-
- {name}
-
-
-
-
-
-
-
-
-
+
+
+ {avatar ? (
+
+ ) : (
+
+
+
+ )}
+
{name || t('mystery_hacker')}
+ {visibleEmail && (
+
+
+ {visibleEmail}
+
+
+ )}
+ {isOwner && user?.mobilePhone && (
+
+ {user.mobilePhone}
+
+ )}
+
+ {isOwner && (
+
+ )}
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-