feat: add new theme berry (#860)

* feat: add theme berry

* docs: add development notes

* fix: fix blank page

* chore: update implementation

* fix: fix package.json

* chore: update ui copy

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

web/berry/src/views/Profile/component/EmailModal.js

@@ -0,0 +1,201 @@
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import React from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  OutlinedInput,
+  Button,
+  InputLabel,
+  Grid,
+  InputAdornment,
+  FormControl,
+  FormHelperText,
+} from "@mui/material";
+import { Formik } from "formik";
+import { showError, showSuccess } from "utils/common";
+import { useTheme } from "@mui/material/styles";
+import * as Yup from "yup";
+import useRegister from "hooks/useRegister";
+import { API } from "utils/api";
+
+const validationSchema = Yup.object().shape({
+  email: Yup.string().email("请输入正确的邮箱地址").required("邮箱不能为空"),
+  email_verification_code: Yup.string().required("验证码不能为空"),
+});
+
+const EmailModal = ({ open, handleClose, turnstileToken }) => {
+  const theme = useTheme();
+  const [countdown, setCountdown] = useState(30);
+  const [disableButton, setDisableButton] = useState(false);
+  const { sendVerificationCode } = useRegister();
+  const [loading, setLoading] = useState(false);
+
+  const submit = async (values, { setErrors, setStatus, setSubmitting }) => {
+    setLoading(true);
+    setSubmitting(true);
+    const res = await API.get(
+      `/api/oauth/email/bind?email=${values.email}&code=${values.email_verification_code}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess("邮箱账户绑定成功！");
+      setSubmitting(false);
+      setStatus({ success: true });
+      handleClose();
+    } else {
+      showError(message);
+      setErrors({ submit: message });
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    let countdownInterval = null;
+    if (disableButton && countdown > 0) {
+      countdownInterval = setInterval(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+    } else if (countdown === 0) {
+      setDisableButton(false);
+      setCountdown(30);
+    }
+    return () => clearInterval(countdownInterval); // Clean up on unmount
+  }, [disableButton, countdown]);
+
+  const handleSendCode = async (email) => {
+    setDisableButton(true);
+    if (email === "") {
+      showError("请输入邮箱");
+      return;
+    }
+    if (turnstileToken === "") {
+      showError("请稍后几秒重试，Turnstile 正在检查用户环境！");
+      return;
+    }
+    setLoading(true);
+    const { success, message } = await sendVerificationCode(
+      email,
+      turnstileToken
+    );
+    setLoading(false);
+    if (!success) {
+      showError(message);
+      return;
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose}>
+      <DialogTitle>绑定邮箱</DialogTitle>
+      <DialogContent>
+        <Grid container direction="column" alignItems="center">
+          <Formik
+            initialValues={{
+              email: "",
+              email_verification_code: "",
+            }}
+            enableReinitialize
+            validationSchema={validationSchema}
+            onSubmit={submit}
+          >
+            {({
+              errors,
+              touched,
+              handleBlur,
+              handleChange,
+              handleSubmit,
+              values,
+            }) => (
+              <form noValidate onSubmit={handleSubmit}>
+                <FormControl
+                  fullWidth
+                  error={Boolean(touched.email && errors.email)}
+                  sx={{ ...theme.typography.customInput }}
+                >
+                  <InputLabel htmlFor="email">Email</InputLabel>
+                  <OutlinedInput
+                    id="email"
+                    type="text"
+                    value={values.email}
+                    name="email"
+                    onBlur={handleBlur}
+                    onChange={handleChange}
+                    endAdornment={
+                      <InputAdornment position="end">
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => handleSendCode(values.email)}
+                          disabled={disableButton || loading}
+                        >
+                          {disableButton
+                            ? `重新发送(${countdown})`
+                            : "获取验证码"}
+                        </Button>
+                      </InputAdornment>
+                    }
+                    inputProps={{}}
+                  />
+                  {touched.email && errors.email && (
+                    <FormHelperText error id="helper-email">
+                      {errors.email}
+                    </FormHelperText>
+                  )}
+                </FormControl>
+                <FormControl
+                  fullWidth
+                  error={Boolean(
+                    touched.email_verification_code &&
+                      errors.email_verification_code
+                  )}
+                  sx={{ ...theme.typography.customInput }}
+                >
+                  <InputLabel htmlFor="email_verification_code">
+                    验证码
+                  </InputLabel>
+                  <OutlinedInput
+                    id="email_verification_code"
+                    type="text"
+                    value={values.email_verification_code}
+                    name="email_verification_code"
+                    onBlur={handleBlur}
+                    onChange={handleChange}
+                    inputProps={{}}
+                  />
+                  {touched.email_verification_code &&
+                    errors.email_verification_code && (
+                      <FormHelperText error id="helper-email_verification_code">
+                        {errors.email_verification_code}
+                      </FormHelperText>
+                    )}
+                </FormControl>
+                <DialogActions>
+                  <Button onClick={handleClose}>取消</Button>
+                  <Button
+                    disableElevation
+                    disabled={loading}
+                    type="submit"
+                    variant="contained"
+                    color="primary"
+                  >
+                    提交
+                  </Button>
+                </DialogActions>
+              </form>
+            )}
+          </Formik>
+        </Grid>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EmailModal;
+
+EmailModal.propTypes = {
+  open: PropTypes.bool,
+  handleClose: PropTypes.func,
+};

web/berry/src/views/Profile/index.js

@@ -0,0 +1,293 @@
+import { useState, useEffect } from 'react';
+import UserCard from 'ui-component/cards/UserCard';
+import {
+  Card,
+  Button,
+  InputLabel,
+  FormControl,
+  OutlinedInput,
+  Stack,
+  Alert,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Divider
+} from '@mui/material';
+import Grid from '@mui/material/Unstable_Grid2';
+import SubCard from 'ui-component/cards/SubCard';
+import { IconBrandWechat, IconBrandGithub, IconMail } from '@tabler/icons-react';
+import Label from 'ui-component/Label';
+import { API } from 'utils/api';
+import { showError, showSuccess } from 'utils/common';
+import { onGitHubOAuthClicked } from 'utils/common';
+import * as Yup from 'yup';
+import WechatModal from 'views/Authentication/AuthForms/WechatModal';
+import { useSelector } from 'react-redux';
+import EmailModal from './component/EmailModal';
+import Turnstile from 'react-turnstile';
+
+const validationSchema = Yup.object().shape({
+  username: Yup.string().required('用户名 不能为空').min(3, '用户名 不能小于 3 个字符'),
+  display_name: Yup.string(),
+  password: Yup.string().test('password', '密码不能小于 8 个字符', (val) => {
+    return !val || val.length >= 8;
+  })
+});
+
+export default function Profile() {
+  const [inputs, setInputs] = useState([]);
+  const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false);
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const [openWechat, setOpenWechat] = useState(false);
+  const [openEmail, setOpenEmail] = useState(false);
+  const status = useSelector((state) => state.siteInfo);
+
+  const handleWechatOpen = () => {
+    setOpenWechat(true);
+  };
+
+  const handleWechatClose = () => {
+    setOpenWechat(false);
+  };
+
+  const handleInputChange = (event) => {
+    let { name, value } = event.target;
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const loadUser = async () => {
+    let res = await API.get(`/api/user/self`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setInputs(data);
+    } else {
+      showError(message);
+    }
+  };
+
+  const bindWeChat = async (code) => {
+    if (code === '') return;
+    try {
+      const res = await API.get(`/api/oauth/wechat/bind?code=${code}`);
+      const { success, message } = res.data;
+      if (success) {
+        showSuccess('微信账户绑定成功！');
+      }
+      return { success, message };
+    } catch (err) {
+      // 请求失败，设置错误信息
+      return { success: false, message: '' };
+    }
+  };
+
+  const generateAccessToken = async () => {
+    const res = await API.get('/api/user/token');
+    const { success, message, data } = res.data;
+    if (success) {
+      setInputs((inputs) => ({ ...inputs, access_token: data }));
+      navigator.clipboard.writeText(data);
+      showSuccess(`令牌已重置并已复制到剪贴板`);
+    } else {
+      showError(message);
+    }
+
+    console.log(turnstileEnabled, turnstileSiteKey, status);
+  };
+
+  const submit = async () => {
+    try {
+      await validationSchema.validate(inputs);
+      const res = await API.put(`/api/user/self`, inputs);
+      const { success, message } = res.data;
+      if (success) {
+        showSuccess('用户信息更新成功！');
+      } else {
+        showError(message);
+      }
+    } catch (err) {
+      showError(err.message);
+    }
+  };
+
+  useEffect(() => {
+    if (status) {
+      if (status.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(status.turnstile_site_key);
+      }
+    }
+    loadUser().then();
+  }, [status]);
+
+  return (
+    <>
+      <UserCard>
+        <Card sx={{ paddingTop: '20px' }}>
+          <Stack spacing={2}>
+            <Stack direction="row" alignItems="center" justifyContent="center" spacing={2} sx={{ paddingBottom: '20px' }}>
+              <Label variant="ghost" color={inputs.wechat_id ? 'primary' : 'default'}>
+                <IconBrandWechat /> {inputs.wechat_id || '未绑定'}
+              </Label>
+              <Label variant="ghost" color={inputs.github_id ? 'primary' : 'default'}>
+                <IconBrandGithub /> {inputs.github_id || '未绑定'}
+              </Label>
+              <Label variant="ghost" color={inputs.email ? 'primary' : 'default'}>
+                <IconMail /> {inputs.email || '未绑定'}
+              </Label>
+            </Stack>
+            <SubCard title="个人信息">
+              <Grid container spacing={2}>
+                <Grid xs={12}>
+                  <FormControl fullWidth variant="outlined">
+                    <InputLabel htmlFor="username">用户名</InputLabel>
+                    <OutlinedInput
+                      id="username"
+                      label="用户名"
+                      type="text"
+                      value={inputs.username || ''}
+                      onChange={handleInputChange}
+                      name="username"
+                      placeholder="请输入用户名"
+                    />
+                  </FormControl>
+                </Grid>
+                <Grid xs={12}>
+                  <FormControl fullWidth variant="outlined">
+                    <InputLabel htmlFor="password">密码</InputLabel>
+                    <OutlinedInput
+                      id="password"
+                      label="密码"
+                      type="password"
+                      value={inputs.password || ''}
+                      onChange={handleInputChange}
+                      name="password"
+                      placeholder="请输入密码"
+                    />
+                  </FormControl>
+                </Grid>
+                <Grid xs={12}>
+                  <FormControl fullWidth variant="outlined">
+                    <InputLabel htmlFor="display_name">显示名称</InputLabel>
+                    <OutlinedInput
+                      id="display_name"
+                      label="显示名称"
+                      type="text"
+                      value={inputs.display_name || ''}
+                      onChange={handleInputChange}
+                      name="display_name"
+                      placeholder="请输入显示名称"
+                    />
+                  </FormControl>
+                </Grid>
+                <Grid xs={12}>
+                  <Button variant="contained" color="primary" onClick={submit}>
+                    提交
+                  </Button>
+                </Grid>
+              </Grid>
+            </SubCard>
+            <SubCard title="账号绑定">
+              <Grid container spacing={2}>
+                {status.wechat_login && !inputs.wechat_id && (
+                  <Grid xs={12} md={4}>
+                    <Button variant="contained" onClick={handleWechatOpen}>
+                      绑定微信账号
+                    </Button>
+                  </Grid>
+                )}
+                {status.github_oauth && !inputs.github_id && (
+                  <Grid xs={12} md={4}>
+                    <Button variant="contained" onClick={() => onGitHubOAuthClicked(status.github_client_id, true)}>
+                      绑定 GitHub 账号
+                    </Button>
+                  </Grid>
+                )}
+                <Grid xs={12} md={4}>
+                  <Button
+                    variant="contained"
+                    onClick={() => {
+                      setOpenEmail(true);
+                    }}
+                  >
+                    {inputs.email ? '更换邮箱' : '绑定邮箱'}
+                  </Button>
+                  {turnstileEnabled ? (
+                    <Turnstile
+                      sitekey={turnstileSiteKey}
+                      onVerify={(token) => {
+                        setTurnstileToken(token);
+                      }}
+                    />
+                  ) : (
+                    <></>
+                  )}
+                </Grid>
+              </Grid>
+            </SubCard>
+            <SubCard title="其他">
+              <Grid container spacing={2}>
+                <Grid xs={12}>
+                  <Alert severity="info">注意，此处生成的令牌用于系统管理，而非用于请求 OpenAI 相关的服务，请知悉。</Alert>
+                </Grid>
+                {inputs.access_token && (
+                  <Grid xs={12}>
+                    <Alert severity="error">
+                      你的访问令牌是: <b>{inputs.access_token}</b> <br />
+                      请妥善保管。如有泄漏，请立即重置。
+                    </Alert>
+                  </Grid>
+                )}
+                <Grid xs={12}>
+                  <Button variant="contained" onClick={generateAccessToken}>
+                    {inputs.access_token ? '重置访问令牌' : '生成访问令牌'}
+                  </Button>
+                </Grid>
+
+                <Grid xs={12}>
+                  <Button
+                    variant="contained"
+                    color="error"
+                    onClick={() => {
+                      setShowAccountDeleteModal(true);
+                    }}
+                  >
+                    删除帐号
+                  </Button>
+                </Grid>
+              </Grid>
+            </SubCard>
+          </Stack>
+        </Card>
+      </UserCard>
+      <Dialog open={showAccountDeleteModal} onClose={() => setShowAccountDeleteModal(false)} maxWidth={'md'}>
+        <DialogTitle sx={{ margin: '0px', fontWeight: 500, lineHeight: '1.55556', padding: '24px', fontSize: '1.125rem' }}>
+          危险操作
+        </DialogTitle>
+        <Divider />
+        <DialogContent>您正在删除自己的帐户，将清空所有数据且不可恢复</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setShowAccountDeleteModal(false)}>取消</Button>
+          <Button
+            sx={{ color: 'error.main' }}
+            onClick={async () => {
+              setShowAccountDeleteModal(false);
+            }}
+          >
+            确定
+          </Button>
+        </DialogActions>
+      </Dialog>
+      <WechatModal open={openWechat} handleClose={handleWechatClose} wechatLogin={bindWeChat} qrCode={status.wechat_qrcode} />
+      <EmailModal
+        open={openEmail}
+        turnstileToken={turnstileToken}
+        handleClose={() => {
+          setOpenEmail(false);
+        }}
+      />
+    </>
+  );
+}