From 45d10aa3df959c49e4715eafa93f0b069ecd91af Mon Sep 17 00:00:00 2001
From: JustSong <quanpengsong@gmail.com>
Date: Fri, 31 Jan 2025 23:24:11 +0800
Subject: [PATCH] chore: update default theme style

---
 web/default/src/components/LoginForm.js    | 268 +++++++++++----------
 web/default/src/components/RegisterForm.js | 223 ++++++++++-------
 2 files changed, 281 insertions(+), 210 deletions(-)

diff --git a/web/default/src/components/LoginForm.js b/web/default/src/components/LoginForm.js
index 71566ef8..4b85faad 100644
--- a/web/default/src/components/LoginForm.js
+++ b/web/default/src/components/LoginForm.js
@@ -1,5 +1,16 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Button, Divider, Form, Grid, Header, Image, Message, Modal, Segment } from 'semantic-ui-react';
+import {
+  Button,
+  Divider,
+  Form,
+  Grid,
+  Header,
+  Image,
+  Message,
+  Modal,
+  Segment,
+  Card,
+} from 'semantic-ui-react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { UserContext } from '../context/User';
 import { API, getLogo, showError, showSuccess, showWarning } from '../helpers';
@@ -10,7 +21,7 @@ const LoginForm = () => {
   const [inputs, setInputs] = useState({
     username: '',
     password: '',
-    wechat_verification_code: ''
+    wechat_verification_code: '',
   });
   const [searchParams, setSearchParams] = useSearchParams();
   const [submitted, setSubmitted] = useState(false);
@@ -63,7 +74,7 @@ const LoginForm = () => {
     if (username && password) {
       const res = await API.post(`/api/user/login`, {
         username,
-        password
+        password,
       });
       const { success, message, data } = res.data;
       if (success) {
@@ -86,129 +97,140 @@ const LoginForm = () => {
   return (
     <Grid textAlign='center' style={{ marginTop: '48px' }}>
       <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='' textAlign='center'>
-          <Image src={logo} /> 用户登录
-        </Header>
-        <Form size='large'>
-          <Segment>
-            <Form.Input
-              fluid
-              icon='user'
-              iconPosition='left'
-              placeholder='用户名 / 邮箱地址'
-              name='username'
-              value={username}
-              onChange={handleChange}
-            />
-            <Form.Input
-              fluid
-              icon='lock'
-              iconPosition='left'
-              placeholder='密码'
-              name='password'
-              type='password'
-              value={password}
-              onChange={handleChange}
-            />
-            <Button color='green' fluid size='large' onClick={handleSubmit}>
-              登录
-            </Button>
-          </Segment>
-        </Form>
-        <Message>
-          忘记密码？
-          <Link to='/reset' className='btn btn-link'>
-            点击重置
-          </Link>
-          ； 没有账户？
-          <Link to='/register' className='btn btn-link'>
-            点击注册
-          </Link>
-        </Message>
-        {status.github_oauth || status.wechat_login || status.lark_client_id ? (
-          <>
-            <Divider horizontal>Or</Divider>
-            <div style={{ display: "flex", justifyContent: "center" }}>
-              {status.github_oauth ? (
-                <Button
-                  circular
-                  color='black'
-                  icon='github'
-                  onClick={() => onGitHubOAuthClicked(status.github_client_id)}
-                />
-              ) : (
-                <></>
-              )}
-              {status.wechat_login ? (
-                <Button
-                  circular
-                  color='green'
-                  icon='wechat'
-                  onClick={onWeChatLoginClicked}
-                />
-              ) : (
-                <></>
-              )}
-              {status.lark_client_id ? (
-                <div style={{
-                  background: "radial-gradient(circle, #FFFFFF, #FFFFFF, #00D6B9, #2F73FF, #0a3A9C)",
-                  width: "36px",
-                  height: "36px",
-                  borderRadius: "10em",
-                  display: "flex",
-                  cursor: "pointer"
-                }}
-                  onClick={() => onLarkOAuthClicked(status.lark_client_id)}
-                >
-                  <Image
-                    src={larkIcon}
-                    avatar
-                    style={{ width: "16px", height: "16px", cursor: "pointer", margin: "auto" }}
-                    onClick={() => onLarkOAuthClicked(status.lark_client_id)}
-                  />
-                </div>
-              ) : (
-                <></>
-              )}
-            </div>
-          </>
-        ) : (
-          <></>
-        )}
-        <Modal
-          onClose={() => setShowWeChatLoginModal(false)}
-          onOpen={() => setShowWeChatLoginModal(true)}
-          open={showWeChatLoginModal}
-          size={'mini'}
+        <Card
+          fluid
+          className='chart-card'
+          style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
         >
-          <Modal.Content>
-            <Modal.Description>
-              <Image src={status.wechat_qrcode} fluid />
-              <div style={{ textAlign: 'center' }}>
-                <p>
-                  微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
-                </p>
+          <Card.Content>
+            <Card.Header>
+              <Header
+                as='h2'
+                textAlign='center'
+                style={{ marginBottom: '1.5em' }}
+              >
+                <Image src={logo} style={{ marginBottom: '10px' }} />
+                <Header.Content>用户登录</Header.Content>
+              </Header>
+            </Card.Header>
+            <Form size='large'>
+              <Form.Input
+                fluid
+                icon='user'
+                iconPosition='left'
+                placeholder='用户名 / 邮箱地址'
+                name='username'
+                value={username}
+                onChange={handleChange}
+                style={{ marginBottom: '1em' }}
+              />
+              <Form.Input
+                fluid
+                icon='lock'
+                iconPosition='left'
+                placeholder='密码'
+                name='password'
+                type='password'
+                value={password}
+                onChange={handleChange}
+                style={{ marginBottom: '1.5em' }}
+              />
+              <Button color='blue' fluid size='large' onClick={handleSubmit}>
+                登录
+              </Button>
+            </Form>
+
+            <Divider />
+            <Message style={{ background: 'transparent', boxShadow: 'none' }}>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  fontSize: '0.9em',
+                  color: '#666',
+                }}
+              >
+                <div>
+                  忘记密码？
+                  <Link to='/reset' style={{ color: '#2185d0' }}>
+                    点击重置
+                  </Link>
+                </div>
+                <div>
+                  没有账户？
+                  <Link to='/register' style={{ color: '#2185d0' }}>
+                    点击注册
+                  </Link>
+                </div>
               </div>
-              <Form size='large'>
-                <Form.Input
-                  fluid
-                  placeholder='验证码'
-                  name='wechat_verification_code'
-                  value={inputs.wechat_verification_code}
-                  onChange={handleChange}
-                />
-                <Button
-                  color=''
-                  fluid
-                  size='large'
-                  onClick={onSubmitWeChatVerificationCode}
+            </Message>
+
+            {(status.github_oauth ||
+              status.wechat_login ||
+              status.lark_client_id) && (
+              <>
+                <Divider
+                  horizontal
+                  style={{ color: '#666', fontSize: '0.9em' }}
                 >
-                  登录
-                </Button>
-              </Form>
-            </Modal.Description>
-          </Modal.Content>
-        </Modal>
+                  使用其他方式登录
+                </Divider>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    gap: '1em',
+                    marginTop: '1em',
+                  }}
+                >
+                  {status.github_oauth && (
+                    <Button
+                      circular
+                      color='black'
+                      icon='github'
+                      onClick={() =>
+                        onGitHubOAuthClicked(status.github_client_id)
+                      }
+                    />
+                  )}
+                  {status.wechat_login && (
+                    <Button
+                      circular
+                      color='green'
+                      icon='wechat'
+                      onClick={onWeChatLoginClicked}
+                    />
+                  )}
+                  {status.lark_client_id && (
+                    <div
+                      style={{
+                        background:
+                          'radial-gradient(circle, #FFFFFF, #FFFFFF, #00D6B9, #2F73FF, #0a3A9C)',
+                        width: '36px',
+                        height: '36px',
+                        borderRadius: '10em',
+                        display: 'flex',
+                        cursor: 'pointer',
+                      }}
+                      onClick={() => onLarkOAuthClicked(status.lark_client_id)}
+                    >
+                      <Image
+                        src={larkIcon}
+                        avatar
+                        style={{
+                          width: '16px',
+                          height: '16px',
+                          cursor: 'pointer',
+                          margin: 'auto',
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </Card.Content>
+        </Card>
       </Grid.Column>
     </Grid>
   );
diff --git a/web/default/src/components/RegisterForm.js b/web/default/src/components/RegisterForm.js
index f91d6da0..09dc1512 100644
--- a/web/default/src/components/RegisterForm.js
+++ b/web/default/src/components/RegisterForm.js
@@ -1,5 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Grid,
+  Header,
+  Image,
+  Message,
+  Segment,
+  Card,
+  Divider,
+} from 'semantic-ui-react';
 import { Link, useNavigate } from 'react-router-dom';
 import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
 import Turnstile from 'react-turnstile';
@@ -10,7 +20,7 @@ const RegisterForm = () => {
     password: '',
     password2: '',
     email: '',
-    verification_code: ''
+    verification_code: '',
   });
   const { username, password, password2 } = inputs;
   const [showEmailVerification, setShowEmailVerification] = useState(false);
@@ -100,92 +110,131 @@ const RegisterForm = () => {
   return (
     <Grid textAlign='center' style={{ marginTop: '48px' }}>
       <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='' textAlign='center'>
-          <Image src={logo} /> 新用户注册
-        </Header>
-        <Form size='large'>
-          <Segment>
-            <Form.Input
-              fluid
-              icon='user'
-              iconPosition='left'
-              placeholder='输入用户名，最长 12 位'
-              onChange={handleChange}
-              name='username'
-            />
-            <Form.Input
-              fluid
-              icon='lock'
-              iconPosition='left'
-              placeholder='输入密码，最短 8 位，最长 20 位'
-              onChange={handleChange}
-              name='password'
-              type='password'
-            />
-            <Form.Input
-              fluid
-              icon='lock'
-              iconPosition='left'
-              placeholder='输入密码，最短 8 位，最长 20 位'
-              onChange={handleChange}
-              name='password2'
-              type='password'
-            />
-            {showEmailVerification ? (
-              <>
-                <Form.Input
-                  fluid
-                  icon='mail'
-                  iconPosition='left'
-                  placeholder='输入邮箱地址'
-                  onChange={handleChange}
-                  name='email'
-                  type='email'
-                  action={
-                    <Button onClick={sendVerificationCode} disabled={loading}>
-                      获取验证码
-                    </Button>
-                  }
-                />
-                <Form.Input
-                  fluid
-                  icon='lock'
-                  iconPosition='left'
-                  placeholder='输入验证码'
-                  onChange={handleChange}
-                  name='verification_code'
-                />
-              </>
-            ) : (
-              <></>
-            )}
-            {turnstileEnabled ? (
-              <Turnstile
-                sitekey={turnstileSiteKey}
-                onVerify={(token) => {
-                  setTurnstileToken(token);
-                }}
+        <Card
+          fluid
+          className='chart-card'
+          style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
+        >
+          <Card.Content>
+            <Card.Header>
+              <Header
+                as='h2'
+                textAlign='center'
+                style={{ marginBottom: '1.5em' }}
+              >
+                <Image src={logo} style={{ marginBottom: '10px' }} />
+                <Header.Content>新用户注册</Header.Content>
+              </Header>
+            </Card.Header>
+            <Form size='large'>
+              <Form.Input
+                fluid
+                icon='user'
+                iconPosition='left'
+                placeholder='输入用户名，最长 12 位'
+                onChange={handleChange}
+                name='username'
+                style={{ marginBottom: '1em' }}
               />
-            ) : (
-              <></>
-            )}
-            <Button
-              color='green'
-              fluid
-              size='large'
-              onClick={handleSubmit}
-              loading={loading}
-            >
-              注册
-            </Button>
-          </Segment>
-        </Form>
-        <Message>
-          已有账户？
-          <Link to='/login' className='btn btn-link'>
-            点击登录
-          </Link>
-        </Message>
+              <Form.Input
+                fluid
+                icon='lock'
+                iconPosition='left'
+                placeholder='输入密码，最短 8 位，最长 20 位'
+                onChange={handleChange}
+                name='password'
+                type='password'
+                style={{ marginBottom: '1em' }}
+              />
+              <Form.Input
+                fluid
+                icon='lock'
+                iconPosition='left'
+                placeholder='再次输入密码'
+                onChange={handleChange}
+                name='password2'
+                type='password'
+                style={{ marginBottom: '1em' }}
+              />
+
+              {showEmailVerification && (
+                <>
+                  <Form.Input
+                    fluid
+                    icon='mail'
+                    iconPosition='left'
+                    placeholder='输入邮箱地址'
+                    onChange={handleChange}
+                    name='email'
+                    type='email'
+                    action={
+                      <Button
+                        onClick={sendVerificationCode}
+                        disabled={loading}
+                        style={{ backgroundColor: '#2185d0', color: 'white' }}
+                      >
+                        获取验证码
+                      </Button>
+                    }
+                    style={{ marginBottom: '1em' }}
+                  />
+                  <Form.Input
+                    fluid
+                    icon='lock'
+                    iconPosition='left'
+                    placeholder='输入验证码'
+                    onChange={handleChange}
+                    name='verification_code'
+                    style={{ marginBottom: '1em' }}
+                  />
+                </>
+              )}
+
+              {turnstileEnabled && (
+                <div
+                  style={{
+                    marginBottom: '1em',
+                    display: 'flex',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Turnstile
+                    sitekey={turnstileSiteKey}
+                    onVerify={(token) => {
+                      setTurnstileToken(token);
+                    }}
+                  />
+                </div>
+              )}
+
+              <Button
+                color='blue'
+                fluid
+                size='large'
+                onClick={handleSubmit}
+                loading={loading}
+              >
+                注册
+              </Button>
+            </Form>
+
+            <Divider />
+            <Message style={{ background: 'transparent', boxShadow: 'none' }}>
+              <div
+                style={{
+                  textAlign: 'center',
+                  fontSize: '0.9em',
+                  color: '#666',
+                }}
+              >
+                已有账户？
+                <Link to='/login' style={{ color: '#2185d0' }}>
+                  点击登录
+                </Link>
+              </div>
+            </Message>
+          </Card.Content>
+        </Card>
       </Grid.Column>
     </Grid>
   );