Implement simplified Material UI login system with server-side JWT validation and configure @idea2app/data-server package integration

components/Git/Issue/Card.tsx

@@ -1,7 +1,7 @@
 import { Avatar, Card, CardContent, CardProps, Chip } from '@mui/material';
 import { marked } from 'marked';
 import { Issue } from 'mobx-github';
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 
 import { SymbolIcon } from '../../Icon';
 
@@ -19,7 +19,20 @@ export const IssueCard: FC<IssueCardProps> = ({
   comments,
   created_at,
   ...props
-}) => (
+}) => {
+  const [parsedBody, setParsedBody] = useState<string>('');
+
+  useEffect(() => {
+    if (body) {
+      const parseMarkdown = async () => {
+        const html = await marked.parse(body);
+        setParsedBody(html);
+      };
+      parseMarkdown();
+    }
+  }, [body]);
+
+  return (
   <Card {...props}>
     <CardContent className="flex h-full flex-col justify-between gap-2">
       <h2 className="text-2xl font-semibold">
@@ -48,7 +61,7 @@ export const IssueCard: FC<IssueCardProps> = ({
         )}
       </div>
 
-      <article dangerouslySetInnerHTML={{ __html: marked(body || '') }} />
+      <article dangerouslySetInnerHTML={{ __html: parsedBody }} />
 
       <footer className="flex items-center justify-between">
         {user && (
@@ -66,3 +79,4 @@ export const IssueCard: FC<IssueCardProps> = ({
     </CardContent>
   </Card>
 );
+};

components/Member/Card.tsx

@@ -2,15 +2,28 @@ import { Button, CardProps, Chip, IconButton } from '@mui/material';
 import { marked } from 'marked';
 import { observer } from 'mobx-react';
 import Link from 'next/link';
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 
 import { Member } from '../../models/Member';
 import { GithubIcon } from '../Layout/Svg';
 
 export type MemberCardProps = Member & Omit<CardProps, 'id'>;
 
 export const MemberCard: FC<MemberCardProps> = observer(
-  ({ className = '', nickname, skill, position, summary, github }) => (
+  ({ className = '', nickname, skill, position, summary, github }) => {
+    const [parsedSummary, setParsedSummary] = useState<string>('');
+
+    useEffect(() => {
+      if (summary) {
+        const parseMarkdown = async () => {
+          const html = await marked.parse((summary as string) || '');
+          setParsedSummary(html);
+        };
+        parseMarkdown();
+      }
+    }, [summary]);
+
+    return (
     <li
       className={`elevation-1 hover:elevation-4 relative rounded-2xl border border-gray-200 p-4 dark:border-0 ${className} mb-4 flex break-inside-avoid flex-col gap-3`}
     >
@@ -59,9 +72,10 @@ export const MemberCard: FC<MemberCardProps> = observer(
       </ul>
 
       <p
-        dangerouslySetInnerHTML={{ __html: marked((summary as string) || '') }}
+        dangerouslySetInnerHTML={{ __html: parsedSummary }}
         className="text-neutral-500"
       />
     </li>
-  ),
+    );
+  },
 );

components/User/SessionBox.tsx

@@ -0,0 +1,74 @@
+import { Drawer, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import Link from 'next/link';
+import { Component, HTMLAttributes, JSX } from 'react';
+
+import { PageHead } from '../PageHead';
+import { SessionForm } from './SessionForm';
+
+export type MenuItem = Pick<JSX.IntrinsicElements['a'], 'href' | 'title'>;
+
+export interface SessionBoxProps extends HTMLAttributes<HTMLDivElement> {
+  path?: string;
+  menu?: MenuItem[];
+  jwtPayload?: any; // TODO: Define proper JWT payload type
+}
+
+@observer
+export class SessionBox extends Component<SessionBoxProps> {
+  @observable
+  accessor modalShown = false;
+
+  componentDidMount() {
+    this.modalShown = !this.props.jwtPayload;
+  }
+
+  render() {
+    const { className = '', title, children, path, menu = [], jwtPayload, ...props } = this.props;
+
+    return (
+      <div className={`flex ${className}`} {...props}>
+        <div>
+          <List
+            component="nav"
+            className="flex-col px-3 sticky-top"
+            style={{ top: '5rem', minWidth: '200px' }}
+          >
+            {menu.map(({ href, title }) => (
+              <ListItem key={href} disablePadding>
+                <ListItemButton
+                  component={Link}
+                  href={href || '#'}
+                  selected={path?.split('?')[0].startsWith(href || '')}
+                  className="rounded"
+                >
+                  <ListItemText primary={title} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </div>
+        <main className="flex-1 pb-3">
+          <PageHead title={title} />
+
+          <h1 className="text-3xl font-bold mb-4">{title}</h1>
+
+          {children}
+
+          <Drawer
+            anchor="right"
+            open={this.modalShown}
+            onClose={() => (this.modalShown = false)}
+            PaperProps={{
+              className: 'p-4',
+              style: { width: '400px' },
+            }}
+          >
+            <SessionForm onSignIn={() => window.location.reload()} />
+          </Drawer>
+        </main>
+      </div>
+    );
+  }
+}

components/User/SessionForm.tsx

@@ -0,0 +1,146 @@
+import { Button, Tab, Tabs, TextField, InputAdornment, IconButton } from '@mui/material';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Component, FormEvent, MouseEvent, ChangeEvent, ReactNode } from 'react';
+import { formToJSON } from 'web-utility';
+
+import { SymbolIcon } from '../Icon';
+import userStore from '../../models/User';
+import { I18nContext } from '../../models/Translation';
+
+export interface SessionFormProps {
+  onSignIn?: (data?: SignInData) => any;
+}
+
+export interface SignInData {
+  phone: string;
+  password: string;
+}
+
+@observer
+export class SessionForm extends Component<SessionFormProps> {
+  @observable
+  accessor signType: 'up' | 'in' = 'in';
+
+  static contextType = I18nContext;
+  declare context: React.ContextType<typeof I18nContext>;
+
+  handleWebAuthn = async (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    try {
+      if (this.signType === 'up') {
+        const { phone } = formToJSON<SignInData>(event.currentTarget.form!);
+        if (!phone) throw new Error('手机号是WebAuthn注册的必填项');
+        await userStore.signUpWebAuthn(phone);
+      } else {
+        await userStore.signInWebAuthn();
+      }
+      this.props.onSignIn?.();
+    } catch (error) {
+      console.error('WebAuthn failed:', error);
+      alert('WebAuthn验证失败');
+    }
+  };
+
+  handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const { phone, password } = formToJSON<SignInData>(event.currentTarget);
+
+    try {
+      if (this.signType === 'up') {
+        await userStore.signUp(phone, password);
+        this.signType = 'in';
+        alert('注册成功，请登录');
+      } else {
+        await userStore.signIn(phone, password);
+        this.props.onSignIn?.({ phone, password });
+      }
+    } catch (error) {
+      console.error('Authentication failed:', error);
+      alert((error as Error).message || '操作失败，请稍后重试');
+    }
+  };
+
+  handleTabChange = (_: ChangeEvent<{}>, newValue: 'up' | 'in') => {
+    this.signType = newValue;
+  };
+
+  render() {
+    const { signType } = this,
+      loading = userStore.uploading > 0;
+
+    const { t } = this.context;
+
+    return (
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={this.handleSubmit}
+      >
+        <Tabs
+          value={signType}
+          onChange={this.handleTabChange}
+          variant="fullWidth"
+          className="mb-4"
+        >
+          <Tab label={t('register')} value="up" />
+          <Tab label={t('login')} value="in" />
+        </Tabs>
+
+        <TextField
+          type="tel"
+          name="phone"
+          required
+          fullWidth
+          label={t('phone_number')}
+          placeholder={t('please_enter_phone')}
+          variant="outlined"
+          inputProps={{
+            pattern: "1[3-9]\\d{9}",
+            title: "请输入正确的手机号码"
+          }}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">+86</InputAdornment>
+            ),
+          }}
+        />
+
+        <div className="flex items-center gap-2">
+          <TextField
+            type="password"
+            name="password"
+            required
+            fullWidth
+            label={t('password')}
+            placeholder={t('please_enter_password')}
+            variant="outlined"
+          />
+
+          <IconButton
+            onClick={this.handleWebAuthn}
+            disabled={loading}
+            size="large"
+            className="self-end mb-2"
+          >
+            <SymbolIcon name="fingerprint" />
+          </IconButton>
+        </div>
+
+        <Button
+          type="submit"
+          variant="contained"
+          fullWidth
+          size="large"
+          disabled={loading}
+          className="mt-4"
+        >
+          {signType === 'up' ? t('register') : t('login')}
+        </Button>
+      </form>
+    );
+  }
+}