[refactor] add Sign In pages for multiple OAuth platforms

.npmrc

@@ -1 +1,3 @@
+public-hoist-pattern[] = *import-in-the-middle*
+public-hoist-pattern[] = *require-in-the-middle*
 auto-install-peers = false

biome.json

@@ -29,7 +29,7 @@
         "useShorthandAssign": "error",
         "useSingleVarDeclarator": "off",
         "useImportType": "off",
-        "useTemplate": "error",
+        "useTemplate": "warn",
         "noImplicitBoolean": "off",
         "noInferrableTypes": "error",
         "noNegationElse": "error",
@@ -72,7 +72,8 @@
         "noAccumulatingSpread": "warn"
       },
       "security": {
-        "noGlobalEval": "error"
+        "noGlobalEval": "error",
+        "noDangerouslySetInnerHtml": "warn"
       },
       "complexity": {
         "noCommaOperator": "error"

components/Activity/ActivityList.tsx

@@ -13,6 +13,7 @@ import { ActivityCard, ActivityCardProps } from './ActivityCard';
 export interface ActivityListLayoutProps
   extends XScrollListProps<Hackathon>,
     Pick<ActivityCardProps, 'onPublish' | 'onDelete'> {
+  store?: ActivityModel;
   type?: ActivityListType;
   size?: 'sm' | 'lg';
   userId?: number;
@@ -29,7 +30,7 @@ export const ActivityListLayout: FC<ActivityListLayoutProps> = ({
     className="g-4"
     xs={1}
     sm={2}
-    {...(size === 'sm' ? {} : !size ? { lg: 3, xxl: 4 } : { lg: 4, xxl: 6 })}
+    {...(size === 'sm' ? {} : size ? { lg: 4, xxl: 6 } : { lg: 3, xxl: 4 })}
   >
     {defaultData.map(item => (
       <Col key={item.name + item.id}>
@@ -49,7 +50,7 @@ export const ActivityListLayout: FC<ActivityListLayoutProps> = ({
 export type ActivityListProps = ActivityListLayoutProps;
 
 export default class ActivityList extends PureComponent<ActivityListProps> {
-  store = new ActivityModel();
+  store = this.props.store || new ActivityModel();
 
   componentDidMount() {
     if (this.props.type === 'admin' && !platformAdmin.isPlatformAdmin)

components/Activity/AwardList.tsx

@@ -1,11 +1,12 @@
+import type { Award } from '@freecodecamp-chengdu/hop-service';
 import { Loading } from 'idea-react';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
 import { ObservedComponent } from 'mobx-react-helper';
 import { Column, RestTable } from 'mobx-restful-table';
 import { Image } from 'react-bootstrap';
 
-import { Award, AwardModel } from '../../models/Activity/Award';
+import { AwardModel } from '../../models/Activity/Award';
 import { i18n, I18nContext } from '../../models/Base/Translation';
 
 export const AwardTargetName = ({ t }: typeof i18n) => ({
@@ -27,7 +28,7 @@ export class AwardList extends ObservedComponent<{ store: AwardModel }, typeof i
       {
         key: 'target',
         renderHead: t('type'),
-        renderBody: ({ target }) => AwardTargetName(i18n)[target],
+        renderBody: ({ target }) => target ? (AwardTargetName(i18n)[target] ?? '') : '',
       },
       {
         key: 'pictures',

components/Activity/QuestionnaireCreate.tsx

@@ -1,7 +1,7 @@
-import { Question } from '@freecodecamp-chengdu/hop-service';
+import type { Question } from '@freecodecamp-chengdu/hop-service';
 import { observer } from 'mobx-react';
 import { BadgeInput } from 'mobx-restful-table';
-import { FC, FormEvent, useContext } from 'react';
+import { FC, SubmitEvent, useContext } from 'react';
 import { Button, Col, Form, Row } from 'react-bootstrap';
 import { formToJSON } from 'web-utility';
 
@@ -18,7 +18,7 @@ export interface QuestionnaireCreateProps {
 export const QuestionnaireCreate: FC<QuestionnaireCreateProps> = observer(({ onAdd }) => {
   const { t } = useContext(I18nContext);
 
-  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (event: SubmitEvent<HTMLFormElement>) => {
     event.preventDefault();
     event.stopPropagation();
 

components/Activity/QuestionnairePreview.tsx

@@ -1,8 +1,7 @@
+import type { Question } from '@freecodecamp-chengdu/hop-service';
 import { observer } from 'mobx-react';
 import { ObservedComponent } from 'mobx-react-helper';
 import { Container, Form, Row } from 'react-bootstrap';
-
-import { Question } from '../../models/Activity/Question';
 import { i18n, I18nContext } from '../../models/Base/Translation';
 
 export interface QuestionnaireFormProps {

components/Activity/QuestionnaireTable.tsx

@@ -1,8 +1,7 @@
+import type { Question, QuestionType } from '@freecodecamp-chengdu/hop-service';
 import { observer } from 'mobx-react';
 import { FC, useContext } from 'react';
 import { Button, Container, Table } from 'react-bootstrap';
-
-import { Question } from '../../models/Activity/Question';
 import { i18n, I18nContext } from '../../models/Base/Translation';
 
 export interface QuestionnaireTableProps {
@@ -35,7 +34,7 @@ export const QuestionnaireTable: FC<QuestionnaireTableProps> = observer(
           </thead>
           <tbody>
             {questionnaire.map(
-              ({ id, title, options, multiple, type = 'text', required }, index, { length }) => (
+              ({ id, title, options, multiple, type = 'text' as QuestionType, required }, index, { length }) => (
                 <tr key={id}>
                   <td>{index + 1}</td>
                   <td>{id}</td>

components/Git/Modal.tsx

@@ -5,7 +5,7 @@ import { FormEvent } from 'react';
 import { Button, Col, Form, FormGroup, Modal, ModalProps, Row } from 'react-bootstrap';
 import { formToJSON } from 'web-utility';
 
-import { i18n, I18nContext } from '../../models/Base/Translation';
+import { I18nContext, i18n } from '../../models/Base/Translation';
 import { GitModel } from '../../models/Git';
 
 export interface GitModalProps extends Pick<ModalProps, 'show' | 'onHide'> {
@@ -71,10 +71,9 @@ export class GitModal extends ObservedComponent<GitModalProps, typeof i18n> {
                   name="html_url"
                   value={value}
                   required
-                  placeholder={t(
-                    'for_example',
-                    'https://github.com/idea2app/React-MobX-Bootstrap-ts',
-                  )}
+                  placeholder={t('for_example', {
+                    example: 'https://github.com/idea2app/React-MobX-Bootstrap-ts',
+                  })}
                   onChange={({ currentTarget: { value } }) => (this.value = value)}
                 />
               </Col>

components/Team/TeamAwardAssignment.tsx

@@ -1,6 +1,5 @@
+import type { AwardAssignment } from '@freecodecamp-chengdu/hop-service';
 import { FC } from 'react';
-
-import { AwardAssignment } from '../../models/Activity/Award';
 import { XScrollListProps } from '../layout/ScrollList';
 
 export interface TeamAwardAssignmentLayoutProps extends XScrollListProps<AwardAssignment> {
@@ -11,13 +10,11 @@ export interface TeamAwardAssignmentLayoutProps extends XScrollListProps<AwardAs
 export const TeamAwardAssignmentLayout: FC<TeamAwardAssignmentLayoutProps> = ({
   defaultData = [],
 }) => (
-  <>
-    <ol>
-      {defaultData.map(({ updatedAt, id, description, award: { name } }) => (
-        <li key={id} className="list-unstyled">
-          {name}
-        </li>
-      ))}
-    </ol>
-  </>
+  <ol>
+    {defaultData.map(({ id, award: { name } }) => (
+      <li key={id} className="list-unstyled">
+        {name}
+      </li>
+    ))}
+  </ol>
 );

components/User/UserBar.tsx

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

models/Activity/Award.ts

@@ -1,25 +1,9 @@
-import { User, Base, Media, Team } from '@freecodecamp-chengdu/hop-service';
+import type { Award, AwardAssignment } from '@freecodecamp-chengdu/hop-service';
 import { ListModel, Stream, toggle } from 'mobx-restful';
 
 import { createListStream, InputData, TableModel } from '../Base';
 import sessionStore from '../User/Session';
 
-export interface Award extends Record<'hackathonName' | 'name' | 'description', string>, Base {
-  quantity: number;
-  target: 'team' | 'individual';
-  pictures: Media[];
-}
-
-export interface AwardAssignment
-  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 TableModel<Award> {
   client = sessionStore.client;
   currentAssignment?: AwardAssignmentModel;

models/Activity/Question.ts

@@ -1,13 +1,6 @@
-import { i18n } from '../Base/Translation';
+import type { Question, QuestionType } from '@freecodecamp-chengdu/hop-service';
 
-export interface Question {
-  id?: string;
-  title: string;
-  options?: string[];
-  multiple?: boolean;
-  type?: 'text' | 'url';
-  required?: boolean;
-}
+import { i18n } from '../Base/Translation';
 
 export const questions = ({ t }: typeof i18n): Question[] => [
   {
@@ -48,19 +41,19 @@ export const questions = ({ t }: typeof i18n): Question[] => [
   },
   {
     title: t('linkein_or_cv'),
-    type: 'url',
+    type: 'url' as QuestionType,
   },
   {
     title: t('social_media_account_or_twitter_or_weibo'),
-    type: 'url',
+    type: 'url' as QuestionType,
   },
   {
     title: t('which_of_these_particular_areas_are_you_interested_in_going_into_this_event'),
-    type: 'text',
+    type: 'text' as QuestionType,
   },
   {
     title: t('what_do_you_hope_to_learn_from_the_workshops'),
-    type: 'text',
+    type: 'text' as QuestionType,
   },
   {
     title: t('do_you_plan__on_hacking_solo_or_with_a_team'),
@@ -72,6 +65,6 @@ export const questions = ({ t }: typeof i18n): Question[] => [
   },
   {
     title: t('anything_else_we_should_know_about_what_youre_looking_for_in_a_team_or_teammate'),
-    type: 'text',
+    type: 'text' as QuestionType,
   },
 ];

models/Activity/Team.ts

@@ -1,4 +1,5 @@
-import {
+import type {
+  AwardAssignment,
   BaseFilter,
   Team as _Team,
   TeamMember,
@@ -15,7 +16,6 @@ import { isServer } from '../../configuration';
 import { createListStream, Filter, InputData, TableModel } from '../Base';
 import { WorkspaceModel } from '../Git';
 import sessionStore from '../User/Session';
-import { AwardAssignment } from './Award';
 import { EvaluationModel } from './Evaluation';
 
 export interface Team extends _Team {

models/Activity/index.ts

@@ -1,12 +1,15 @@
-import {
+import type {
   Enrollment,
   Hackathon,
+  HackathonFilter,
   HackathonStatus,
+  ListChunk,
   Question,
   Questionnaire,
 } from '@freecodecamp-chengdu/hop-service';
 import { action, observable } from 'mobx';
 import { persist, restore, toggle } from 'mobx-restful';
+import { buildURLData } from 'web-utility';
 
 import { isServer } from '../../configuration';
 import { Filter, InputData, TableModel } from '../Base';
@@ -158,10 +161,26 @@ export class ActivityModel extends TableModel<Hackathon, ActivityFilter> {
 
   @toggle('uploading')
   async signOne(name: string, form: Enrollment['form'] = []) {
-    await this.client.put(`${this.baseURI}/${name}/enrollment`, { form });
+    await this.client.post(`${this.baseURI}/${name}/enrollment`, { form });
 
     return this.currentEnrollment?.getSessionOne();
   }
 }
 
+export class UserActivityModel extends ActivityModel {
+  constructor(
+    public userId: number,
+    public role: 'creator' | 'staff' | 'enrollee',
+  ) {
+    super();
+  }
+
+  async loadPage(pageIndex: number, pageSize: number, filter: HackathonFilter) {
+    const { body } = await this.client.get<ListChunk<Hackathon>>(
+      `user/${this.userId}/hackathon/${this.role}?${buildURLData({ ...filter, pageIndex, pageSize })}`,
+    );
+    return { pageData: body!.list, totalCount: body!.count };
+  }
+}
+
 export default new ActivityModel();

models/Git.ts

@@ -27,10 +27,50 @@ export class GitModel extends TableModel<GitTemplate> {
   }
 
   @toggle('uploading')
-  async createOneFrom(templateURI: string, name: string) {
+  async createOneFrom(templateURI: string, name: string, cnbToken?: string) {
     const { body } = await githubClient.post<Repository>(`repos/${templateURI}/generate`, { name });
+    const repo = body!;
 
-    return body!;
+    if (cnbToken) await this.createCNBWorkspace(repo.html_url, repo.name, cnbToken);
+
+    return repo;
+  }
+
+  async createCNBWorkspace(githubRepoURL: string, name: string, cnbToken: string) {
+    const cnbHeaders = {
+      Authorization: `Bearer ${cnbToken}`,
+      'Content-Type': 'application/json',
+      Accept: 'application/vnd.cnb.api+json',
+    };
+
+    const userResp = await fetch('https://api.cnb.cool/user', { headers: cnbHeaders });
+    if (!userResp.ok) throw new Error(`CNB authentication failed: ${userResp.status}`);
+    const { username } = (await userResp.json()) as { username: string };
+
+    const repoResp = await fetch(`https://api.cnb.cool/${username}/-/repos`, {
+      method: 'POST',
+      headers: cnbHeaders,
+      body: JSON.stringify({ name, visibility: 'private' }),
+    });
+    if (!repoResp.ok) throw new Error(`CNB repo creation failed: ${repoResp.status}`);
+    const repoPath = `${username}/${name}`;
+
+    const pushResp = await fetch('/api/git/cnb-push', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ repoPath, githubRepoURL, cnbToken }),
+    });
+    if (!pushResp.ok) throw new Error(`CNB git push failed: ${pushResp.status}`);
+
+    const workspaceResp = await fetch(`https://api.cnb.cool/${repoPath}/-/workspace/start`, {
+      method: 'POST',
+      headers: cnbHeaders,
+      body: JSON.stringify({ branch: 'main' }),
+    });
+    if (!workspaceResp.ok) throw new Error(`CNB workspace start failed: ${workspaceResp.status}`);
+    const { url } = (await workspaceResp.json()) as { url: string };
+
+    return { repoPath, workspaceURL: url };
   }
 
   @toggle('uploading')

models/User/Session.ts

@@ -58,6 +58,13 @@ export class SessionModel extends BaseModel {
     return body!;
   }
 
+  static async signInWithCNB(accessToken: string) {
+    const { body } = await ownClient.post<User>('user/OAuth/CNB', {
+      accessToken,
+    });
+    return body!;
+  }
+
   async signOut(reload = false) {
     setCookie('token', '', { path: '/', expires: new Date() });
     setCookie('JWT', '', { path: '/', expires: new Date() });

models/User/index.ts

@@ -10,7 +10,7 @@ export class UserModel extends TableModel<User, UserFilter> {
   baseURI = 'user';
 
   async getUserTopList() {
-    const { body } = await this.client.get<UserRankListChunk>(`activity-log/user-rank`);
+    const { body } = await this.client.get<UserRankListChunk>('activity-log/user-rank');
     return body!.list;
   }
 }