chore: update default theme style

web/default/src/components/PasswordResetConfirm.js

@@ -1,6 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react';
+import {
-import { API, copy, showError, showInfo, showNotice, showSuccess } from '../helpers';
+  Button,
+  Form,
+  Grid,
+  Header,
+  Image,
+  Card,
+  Message,
+} from 'semantic-ui-react';
+import {
+  API,
+  copy,
+  showError,
+  showInfo,
+  showNotice,
+  showSuccess,
+} from '../helpers';
 import { useSearchParams } from 'react-router-dom';
 
 const PasswordResetConfirm = () => {
@@ -63,11 +78,23 @@ const PasswordResetConfirm = () => {
   return (
     <Grid textAlign='center' style={{ marginTop: '48px' }}>
       <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='' textAlign='center'>
+        <Card
-          <Image src='/logo.png' /> 密码重置确认
+          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.png' style={{ marginBottom: '10px' }} />
+                <Header.Content>密码重置确认</Header.Content>
               </Header>
+            </Card.Header>
             <Form size='large'>
-          <Segment>
               <Form.Input
                 fluid
                 icon='mail'
@@ -76,6 +103,7 @@ const PasswordResetConfirm = () => {
                 name='email'
                 value={email}
                 readOnly
+                style={{ marginBottom: '1em' }}
               />
               {newPassword && (
                 <Form.Input
@@ -86,6 +114,11 @@ const PasswordResetConfirm = () => {
                   name='newPassword'
                   value={newPassword}
                   readOnly
+                  style={{
+                    marginBottom: '1em',
+                    cursor: 'pointer',
+                    backgroundColor: '#f8f9fa',
+                  }}
                   onClick={(e) => {
                     e.target.select();
                     navigator.clipboard.writeText(newPassword);
@@ -94,17 +127,26 @@ const PasswordResetConfirm = () => {
                 />
               )}
               <Button
-              color='green'
+                color='blue'
                 fluid
                 size='large'
                 onClick={handleSubmit}
                 loading={loading}
                 disabled={disableButton}
+                style={{ marginBottom: '1em' }}
               >
-              {disableButton ? `密码重置完成` : '提交'}
+                {disableButton ? '密码重置完成' : '提交'}
               </Button>
-          </Segment>
             </Form>
+            {newPassword && (
+              <Message style={{ background: 'transparent', boxShadow: 'none' }}>
+                <p style={{ fontSize: '0.9em', color: '#666' }}>
+                  新密码已生成，请点击密码框或上方按钮复制。请及时登录并修改密码！
+                </p>
+              </Message>
+            )}
+          </Card.Content>
+        </Card>
       </Grid.Column>
     </Grid>
   );

web/default/src/components/PasswordResetForm.js

@@ -1,11 +1,19 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Grid,
+  Header,
+  Image,
+  Card,
+  Message,
+} from 'semantic-ui-react';
 import { API, showError, showInfo, showSuccess } from '../helpers';
 import Turnstile from 'react-turnstile';
 
 const PasswordResetForm = () => {
   const [inputs, setInputs] = useState({
-    email: ''
+    email: '',
   });
   const { email } = inputs;
 
@@ -42,7 +50,7 @@ const PasswordResetForm = () => {
 
   function handleChange(e) {
     const { name, value } = e.target;
-    setInputs(inputs => ({ ...inputs, [name]: value }));
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
   }
 
   async function handleSubmit(e) {
@@ -69,11 +77,23 @@ const PasswordResetForm = () => {
   return (
     <Grid textAlign='center' style={{ marginTop: '48px' }}>
       <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='' textAlign='center'>
+        <Card
-          <Image src='/logo.png' /> 密码重置
+          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.png' style={{ marginBottom: '10px' }} />
+                <Header.Content>密码重置</Header.Content>
               </Header>
+            </Card.Header>
             <Form size='large'>
-          <Segment>
               <Form.Input
                 fluid
                 icon='mail'
@@ -82,29 +102,43 @@ const PasswordResetForm = () => {
                 name='email'
                 value={email}
                 onChange={handleChange}
+                style={{ marginBottom: '1em' }}
               />
-            {turnstileEnabled ? (
+              {turnstileEnabled && (
+                <div
+                  style={{
+                    marginBottom: '1em',
+                    display: 'flex',
+                    justifyContent: 'center',
+                  }}
+                >
                   <Turnstile
                     sitekey={turnstileSiteKey}
                     onVerify={(token) => {
                       setTurnstileToken(token);
                     }}
                   />
-            ) : (
+                </div>
-              <></>
               )}
               <Button
-              color='green'
+                color='blue'
                 fluid
                 size='large'
                 onClick={handleSubmit}
                 loading={loading}
                 disabled={disableButton}
+                style={{ marginBottom: '1em' }}
               >
                 {disableButton ? `重试 (${countdown})` : '提交'}
               </Button>
-          </Segment>
             </Form>
+            <Message style={{ background: 'transparent', boxShadow: 'none' }}>
+              <p style={{ fontSize: '0.9em', color: '#666' }}>
+                系统将向您的邮箱发送一封包含重置链接的邮件，请注意查收。
+              </p>
+            </Message>
+          </Card.Content>
+        </Card>
       </Grid.Column>
     </Grid>
   );