Merge remote-tracking branch 'github/feat/1.1.2/ui' into feat/1.1.2/user-center

2023-04-20 17:52:25 +08:00 · 2023-04-20 17:52:25 +08:00 · 045cd0b1e8
parent 1bbe005f66 944e773392
commit 045cd0b1e8
24 changed files with 197 additions and 142 deletions
--- a/i18n/en_US.yaml
+++ b/i18n/en_US.yaml
@ -1183,6 +1183,7 @@ ui:
  plugins:
    login: Login
    qrcode_login_tip: Please use {{ agentName }} to scan the QR code and log in.
+    login_failed_email_tip: Login failed, please allow this app to access your email information before try again.
    oauth:
      connect: Connect with {{ auth_name }}
      remove: Remove {{ auth_name }}
--- a/ui/src/components/Editor/Viewer.tsx
+++ b/ui/src/components/Editor/Viewer.tsx
@ -8,6 +8,7 @@ import {
 } from 'react';

 import { markdownToHtml } from '@/services';
+import ImgViewer from '@/components/ImgViewer';

 import { htmlRender } from './utils';

@ -48,11 +49,13 @@ const Index = ({ value }, ref) => {
  });

  return (
-    <div
-      ref={previewRef}
-      className="preview-wrap position-relative p-3 bg-light rounded text-break text-wrap mt-2 fmt"
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <ImgViewer>
+      <div
+        ref={previewRef}
+        className="preview-wrap position-relative p-3 bg-light rounded text-break text-wrap mt-2 fmt"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </ImgViewer>
  );
 };

--- a/ui/src/components/ImgViewer/index.css
+++ b/ui/src/components/ImgViewer/index.css
@ -0,0 +1,7 @@
+.img-viewer .cursor-zoom-out {
+  cursor: zoom-out !important;
+}
+
+.img-viewer img:not(a img, img.broken) {
+  cursor: zoom-in;
+}
--- a/ui/src/components/ImgViewer/index.tsx
+++ b/ui/src/components/ImgViewer/index.tsx
@ -1,14 +1,13 @@
-import { useLayoutEffect, useState, MouseEvent, useEffect } from 'react';
+import { FC, MouseEvent, ReactNode, useEffect, useState } from 'react';
 import { Modal } from 'react-bootstrap';
-import { useLocation } from 'react-router-dom';

-import ReactDOM from 'react-dom/client';
+import './index.css';
+import classnames from 'classnames';

-const div = document.createElement('div');
-const root = ReactDOM.createRoot(div);
-
-const useImgViewer = () => {
-  const location = useLocation();
+const Index: FC<{
+  children: ReactNode;
+  className?: classnames.Argument;
+}> = ({ children, className }) => {
  const [visible, setVisible] = useState(false);
  const [imgSrc, setImgSrc] = useState('');
  const onClose = () => {
@ -47,8 +46,18 @@ const useImgViewer = () => {
    }
  };

-  useLayoutEffect(() => {
-    root.render(
+  useEffect(() => {
+    return () => {
+      onClose();
+    };
+  }, []);
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    <div
+      className={classnames('img-viewer', className)}
+      onClick={checkClickForImgView}>
+      {children}
      <Modal
        show={visible}
        fullscreen
@ -56,23 +65,16 @@ const useImgViewer = () => {
        scrollable
        contentClassName="bg-transparent"
        onHide={onClose}>
-        <Modal.Body onClick={onClose} className="p-0 d-flex">
+        <Modal.Body onClick={onClose} className="img-viewer p-0 d-flex">
          <img
            className="cursor-zoom-out img-fluid m-auto"
            src={imgSrc}
            alt={imgSrc}
          />
        </Modal.Body>
-      </Modal>,
-    );
-  });
-  useEffect(() => {
-    onClose();
-  }, [location]);
-  return {
-    onClose,
-    checkClickForImgView,
-  };
+      </Modal>
+    </div>
+  );
 };

-export default useImgViewer;
+export default Index;
--- a/ui/src/components/SchemaForm/components/Button.tsx
+++ b/ui/src/components/SchemaForm/components/Button.tsx
@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { Button } from 'react-bootstrap';
+import { Button, ButtonProps } from 'react-bootstrap';

 import { request } from '@/utils';
 import type * as Type from '@/common/interface';
@ -11,14 +11,18 @@ interface Props {
  action: UIAction | undefined;
  formData: Type.FormDataType;
  readOnly: boolean;
+  variant?: ButtonProps['variant'];
+  size?: ButtonProps['size'];
 }
 const Index: FC<Props> = ({
  fieldName,
  action,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  formData,
-  readOnly = false,
  text = '',
+  readOnly = false,
+  variant = 'primary',
+  size,
 }) => {
  const [isLoading, setLoading] = useState(false);
  const handleAction = async () => {
@ -33,7 +37,12 @@ const Index: FC<Props> = ({
  const disabled = isLoading || readOnly;
  return (
    <div className="d-flex">
-      <Button name={fieldName} onClick={handleAction} disabled={disabled}>
+      <Button
+        name={fieldName}
+        onClick={handleAction}
+        disabled={disabled}
+        size={size}
+        variant={variant}>
        {text || fieldName}
        {isLoading ? '...' : ''}
      </Button>
--- a/ui/src/components/SchemaForm/components/Input.tsx
+++ b/ui/src/components/SchemaForm/components/Input.tsx
@ -42,7 +42,7 @@ const Index: FC<Props> = ({
      type={type}
      value={fieldObject?.value || ''}
      onChange={handleChange}
-      readOnly={readOnly}
+      disabled={readOnly}
      isInvalid={fieldObject?.isInvalid}
      style={type === 'color' ? { width: '6rem' } : {}}
    />
--- a/ui/src/components/SchemaForm/components/Select.tsx
+++ b/ui/src/components/SchemaForm/components/Select.tsx
@ -10,6 +10,7 @@ interface Props {
  enumValues: (string | boolean | number)[];
  enumNames: string[];
  formData: Type.FormDataType;
+  readOnly: boolean;
 }
 const Index: FC<Props> = ({
  desc,
@ -18,6 +19,7 @@ const Index: FC<Props> = ({
  enumValues,
  enumNames,
  formData,
+  readOnly = false,
 }) => {
  const fieldObject = formData[fieldName];
  const handleChange = (evt: React.ChangeEvent<HTMLSelectElement>) => {
@ -40,6 +42,7 @@ const Index: FC<Props> = ({
      name={fieldName}
      value={fieldObject?.value || ''}
      onChange={handleChange}
+      disabled={readOnly}
      isInvalid={fieldObject?.isInvalid}>
      {enumValues?.map((item, index) => {
        return (
--- a/ui/src/components/SchemaForm/components/Textarea.tsx
+++ b/ui/src/components/SchemaForm/components/Textarea.tsx
@ -12,6 +12,7 @@ interface Props {
  fieldName: string;
  onChange?: (fd: Type.FormDataType) => void;
  formData: Type.FormDataType;
+  readOnly: boolean;
 }
 const Index: FC<Props> = ({
  placeholder = '',
@ -20,6 +21,7 @@ const Index: FC<Props> = ({
  fieldName,
  onChange,
  formData,
+  readOnly = false,
 }) => {
  const fieldObject = formData[fieldName];
  const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
@ -46,6 +48,7 @@ const Index: FC<Props> = ({
      onChange={handleChange}
      isInvalid={fieldObject?.isInvalid}
      rows={rows}
+      disabled={readOnly}
      className={classnames(className)}
    />
  );
--- a/ui/src/components/SchemaForm/index.tsx
+++ b/ui/src/components/SchemaForm/index.tsx
@ -4,7 +4,7 @@ import React, {
  useImperativeHandle,
  useEffect,
 } from 'react';
-import { Form, Button } from 'react-bootstrap';
+import { Form, Button, ButtonProps } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';

 import classnames from 'classnames';
@ -100,6 +100,8 @@ export interface ButtonOptions extends BaseUIOptions {
  text: string;
  icon?: string;
  action?: UIAction;
+  variant?: ButtonProps['variant'];
+  size?: ButtonProps['size'];
 }

 export type UIOptions =
@ -367,6 +369,7 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
                enumValues={enumValues}
                enumNames={enumNames}
                formData={formData}
+                readOnly={readOnly}
              />
            ) : null}
            {widget === 'radio' || widget === 'checkbox' ? (
@ -418,6 +421,7 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
                fieldName={key}
                onChange={onChange}
                formData={formData}
+                readOnly={readOnly}
              />
            ) : null}
            {widget === 'input' ? (
@ -439,6 +443,10 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
                action={uiOpt && 'action' in uiOpt ? uiOpt.action : undefined}
                formData={formData}
                readOnly={readOnly}
+                variant={
+                  uiOpt && 'variant' in uiOpt ? uiOpt.variant : undefined
+                }
+                size={uiOpt && 'size' in uiOpt ? uiOpt.size : undefined}
              />
            ) : null}
            {/* Unified handling of `Feedback` and `Text` */}
--- a/ui/src/components/UploadImg/index.tsx
+++ b/ui/src/components/UploadImg/index.tsx
@ -1,12 +1,14 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';

+import classnames from 'classnames';
+
 import { uploadImage } from '@/services';
 import * as Type from '@/common/interface';

 interface IProps {
  type: Type.UploadType;
-  className?: string;
+  className?: classnames.Argument;
  children?: React.ReactNode;
  acceptType?: string;
  disabled?: boolean;
@ -49,7 +51,8 @@ const Index: React.FC<IProps> = ({
  };

  return (
-    <label className={`btn btn-outline-secondary uploadBtn ${className}`}>
+    <label
+      className={classnames('btn btn-outline-secondary uploadBtn', className)}>
      {children || (status ? t('upload_img.loading') : t('upload_img.name'))}
      <input
        type="file"
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@ -39,6 +39,7 @@ import QuestionList from './QuestionList';
 import HotQuestions from './HotQuestions';
 import HttpErrorContent from './HttpErrorContent';
 import CustomSidebar from './CustomSidebar';
+import ImgViewer from './ImgViewer';

 export {
  Avatar,
@ -84,5 +85,6 @@ export {
  HotQuestions,
  HttpErrorContent,
  CustomSidebar,
+  ImgViewer,
 };
 export type { EditorRef, JSONSchema, UISchema };
--- a/ui/src/hooks/index.ts
+++ b/ui/src/hooks/index.ts
@ -10,7 +10,6 @@ import useChangePasswordModal from './useChangePasswordModal';
 import usePageTags from './usePageTags';
 import useLoginRedirect from './useLoginRedirect';
 import usePromptWithUnload from './usePrompt';
-import useImgViewer from './useImgViewer';

 export {
  useTagModal,
@ -25,5 +24,4 @@ export {
  usePageTags,
  useLoginRedirect,
  usePromptWithUnload,
-  useImgViewer,
 };
--- a/ui/src/index.scss
+++ b/ui/src/index.scss
@ -122,14 +122,6 @@ a {
  cursor: pointer;
 }

-.cursor-zoom-out {
-  cursor: zoom-out !important;
-}
-
-img:not(a img, img.broken) {
-  cursor: zoom-in;
-}
-
 .resize-none {
  resize: none;
 }
--- a/ui/src/pages/Admin/Branding/index.tsx
+++ b/ui/src/pages/Admin/Branding/index.tsx
@ -1,7 +1,7 @@
 import { FC, memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

-import { JSONSchema, SchemaForm, UISchema } from '@/components';
+import { JSONSchema, SchemaForm, UISchema, ImgViewer } from '@/components';
 import { FormDataType } from '@/common/interface';
 import { brandSetting, getBrandSetting } from '@/services';
 import { brandingStore } from '@/stores';
@ -142,7 +142,7 @@ const Index: FC = () => {
  }, []);

  return (
-    <div>
+    <ImgViewer>
      <h3 className="mb-4">{t('page_title')}</h3>
      <SchemaForm
        schema={schema}
@ -151,7 +151,7 @@ const Index: FC = () => {
        onSubmit={onSubmit}
        onChange={handleOnChange}
      />
-    </div>
+    </ImgViewer>
  );
 };

--- a/ui/src/pages/Admin/SettingsUsers/index.tsx
+++ b/ui/src/pages/Admin/SettingsUsers/index.tsx
@ -146,6 +146,9 @@ const Index: FC = () => {

  useEffect(() => {
    getUsersSetting().then((resp) => {
+      if (!resp) {
+        return;
+      }
      const formMeta: Type.FormDataType = {};
      Object.keys(formData).forEach((k) => {
        let v = resp[k];
--- a/ui/src/pages/Layout/index.tsx
+++ b/ui/src/pages/Layout/index.tsx
@ -15,7 +15,6 @@ import {
  HttpErrorContent,
 } from '@/components';
 import { LoginToContinueModal } from '@/components/Modal';
-import { useImgViewer } from '@/hooks';

 const Layout: FC = () => {
  const location = useLocation();
@ -24,7 +23,6 @@ const Layout: FC = () => {
    toastClear();
  };
  const { code: httpStatusCode, reset: httpStatusReset } = errorCodeStore();
-  const imgViewer = useImgViewer();
  const { show: showLoginToContinueModal } = loginToContinueStore();

  useEffect(() => {
@ -40,9 +38,7 @@ const Layout: FC = () => {
        }}>
        <Header />
        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-        <div
-          className="position-relative page-wrap"
-          onClick={imgViewer.checkClickForImgView}>
+        <div className="position-relative page-wrap">
          {httpStatusCode ? (
            <HttpErrorContent httpCode={httpStatusCode} />
          ) : (
--- a/ui/src/pages/Questions/Detail/components/Question/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Question/index.tsx
@ -12,6 +12,7 @@ import {
  FormatTime,
  htmlRender,
  Icon,
+  ImgViewer,
 } from '@/components';
 import { formatCount, guard } from '@/utils';
 import { following } from '@/services';
@ -114,11 +115,13 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
          return <Tag className="m-1" key={item.slug_name} data={item} />;
        })}
      </div>
-      <article
-        ref={ref}
-        className="fmt text-break text-wrap mt-4"
-        dangerouslySetInnerHTML={{ __html: data?.html }}
-      />
+      <ImgViewer>
+        <article
+          ref={ref}
+          className="fmt text-break text-wrap mt-4"
+          dangerouslySetInnerHTML={{ __html: data?.html }}
+        />
+      </ImgViewer>

      <Actions
        className="mt-4"
--- a/ui/src/pages/UserCenter/Auth/components/WeCom/index.tsx
+++ b/ui/src/pages/UserCenter/Auth/components/WeCom/index.tsx
@ -35,7 +35,7 @@ const Index: FC = () => {
    if (!targetUrl) {
      return;
    }
-    QrCode.toDataURL(targetUrl, { width: 240 }, (err, url) => {
+    QrCode.toDataURL(targetUrl, { width: 240, margin: 0 }, (err, url) => {
      if (err) {
        return;
      }
@ -67,14 +67,21 @@ const Index: FC = () => {
    return (
      <Card className="text-center">
        <Card.Body>
-          <Card.Title as="h3">
-            {agentName} {t('login')}
+          <Card.Title as="h3" className="mb-3">
+            {ucAgent?.agent_info.display_name} {t('login')}
          </Card.Title>
          {qrcodeDataUrl ? (
            <>
-              <img width={240} height={240} src={qrcodeDataUrl} alt="" />
-              <div className="text-secondary">
-                {t('qrcode_login_tip', { agentName })}
+              <img
+                width={240}
+                height={240}
+                src={qrcodeDataUrl}
+                alt={agentName}
+              />
+              <div className="text-secondary mt-3">
+                {t('qrcode_login_tip', {
+                  agentName: ucAgent?.agent_info.display_name,
+                })}
              </div>
            </>
          ) : null}
--- a/ui/src/pages/UserCenter/AuthFailed/components/WeCom.tsx
+++ b/ui/src/pages/UserCenter/AuthFailed/components/WeCom.tsx
@ -1,5 +1,8 @@
 import React, { FC } from 'react';
 import { Card, Col, Carousel } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import { userCenterStore } from '@/stores';

 const data = [
  {
@ -25,14 +28,17 @@ const data = [
 ];

 const Index: FC = () => {
+  const { t } = useTranslation('translation', { keyPrefix: 'plugins' });
+  const ucAgent = userCenterStore().agent;
  return (
    <Col lg={4} className="mx-auto mt-3 py-5">
      <Card>
        <Card.Body>
-          <h3 className="text-center pt-3 mb-3">WeCom Login</h3>
+          <h3 className="text-center pt-3 mb-3">
+            {ucAgent?.agent_info.display_name} {t('login')}
+          </h3>
          <p className="text-danger text-center">
-            Login failed, please allow this app to access your email information
-            before try again.
+            {t('login_failed_email_tip')}
          </p>

          <Carousel controls={false}>
--- a/ui/src/pages/Users/Login/index.tsx
+++ b/ui/src/pages/Users/Login/index.tsx
@ -16,7 +16,7 @@ import {
  loginSettingStore,
  userCenterStore,
 } from '@/stores';
-import { guard, handleFormError } from '@/utils';
+import { floppyNavigation, guard, handleFormError, userCenter } from '@/utils';
 import { login, checkImgCode, UcAgent } from '@/services';
 import { PicAuthCodeModal } from '@/components/Modal';

@ -246,7 +246,10 @@ const Index: React.FC = () => {
            <div className="text-center mt-5">
              <Trans i18nKey="login.info_sign" ns="translation">
                Don’t have an account?
-                <Link to="/users/register" tabIndex={2}>
+                <Link
+                  to={userCenter.getSignUpUrl()}
+                  tabIndex={2}
+                  onClick={floppyNavigation.handleRouteLinkClick}>
                  Sign up
                </Link>
              </Trans>
--- a/ui/src/pages/Users/Settings/Profile/index.tsx
+++ b/ui/src/pages/Users/Settings/Profile/index.tsx
@ -5,7 +5,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import MD5 from 'md5';

 import type { FormDataType } from '@/common/interface';
-import { UploadImg, Avatar, Icon } from '@/components';
+import { UploadImg, Avatar, Icon, ImgViewer } from '@/components';
 import { loggedUserInfoStore, userCenterStore, siteInfoStore } from '@/stores';
 import { useToast } from '@/hooks';
 import {
@ -27,7 +27,6 @@ const Index: React.FC = () => {
  const [mailHash, setMailHash] = useState('');
  const [count] = useState(0);
  const [profileAgent, setProfileAgent] = useState<UcSettingAgent>();
-
  const [formData, setFormData] = useState<FormDataType>({
    display_name: {
      value: '',
@ -282,7 +281,7 @@ const Index: React.FC = () => {
            <Form.Control
              required
              type="text"
-              readOnly={!usersSetting.allow_update_display_name}
+              disabled={!usersSetting.allow_update_display_name}
              value={formData.display_name.value}
              isInvalid={formData.display_name.isInvalid}
              onChange={(e) =>
@ -305,7 +304,7 @@ const Index: React.FC = () => {
            <Form.Control
              required
              type="text"
-              readOnly={!usersSetting.allow_update_username}
+              disabled={!usersSetting.allow_update_username}
              value={formData.username.value}
              isInvalid={formData.username.isInvalid}
              onChange={(e) =>
@ -343,66 +342,68 @@ const Index: React.FC = () => {
                </option>
              </Form.Select>
            </div>
-            <div className="d-flex">
-              {formData.avatar.type === 'gravatar' && (
-                <Stack>
-                  <Avatar
-                    size="160px"
-                    avatar={formData.avatar.gravatar}
-                    searchStr={`s=256&d=identicon${
-                      count > 0 ? `&t=${new Date().valueOf()}` : ''
-                    }`}
-                    className="me-3 rounded"
-                  />
-                  <Form.Text className="text-muted mt-1">
-                    <Trans i18nKey="settings.profile.avatar.gravatar_text">
-                      You can change image on
-                      <a
-                        href="https://gravatar.com"
-                        target="_blank"
-                        rel="noreferrer">
-                        gravatar.com
-                      </a>
-                    </Trans>
-                  </Form.Text>
-                </Stack>
-              )}
-
-              {formData.avatar.type === 'custom' && (
-                <Stack>
-                  <Stack direction="horizontal" className="align-items-start">
+            <ImgViewer>
+              <div className="d-flex">
+                {formData.avatar.type === 'gravatar' && (
+                  <Stack>
                    <Avatar
                      size="160px"
-                      searchStr="s=256"
-                      avatar={formData.avatar.custom}
-                      className="me-2 bg-gray-300 "
+                      avatar={formData.avatar.gravatar}
+                      searchStr={`s=256&d=identicon${
+                        count > 0 ? `&t=${new Date().valueOf()}` : ''
+                      }`}
+                      className="me-3 rounded"
                    />
-                    <ButtonGroup vertical className="fit-content">
-                      <UploadImg
-                        type="avatar"
-                        disabled={!usersSetting.allow_update_avatar}
-                        uploadCallback={avatarUpload}>
-                        <Icon name="cloud-upload" />
-                      </UploadImg>
-                      <Button
-                        variant="outline-secondary"
-                        disabled={!usersSetting.allow_update_avatar}
-                        onClick={removeCustomAvatar}>
-                        <Icon name="trash" />
-                      </Button>
-                    </ButtonGroup>
+                    <Form.Text className="text-muted mt-1">
+                      <Trans i18nKey="settings.profile.avatar.gravatar_text">
+                        You can change image on
+                        <a
+                          href="https://gravatar.com"
+                          target="_blank"
+                          rel="noreferrer">
+                          gravatar.com
+                        </a>
+                      </Trans>
+                    </Form.Text>
                  </Stack>
-                  <Form.Text className="text-muted mt-1">
-                    <Trans i18nKey="settings.profile.avatar.text">
-                      You can upload your image.
-                    </Trans>
-                  </Form.Text>
-                </Stack>
-              )}
-              {formData.avatar.type === 'default' && (
-                <Avatar size="160px" avatar="" />
-              )}
-            </div>
+                )}
+
+                {formData.avatar.type === 'custom' && (
+                  <Stack>
+                    <Stack direction="horizontal" className="align-items-start">
+                      <Avatar
+                        size="160px"
+                        searchStr="s=256"
+                        avatar={formData.avatar.custom}
+                        className="me-2 bg-gray-300 "
+                      />
+                      <ButtonGroup vertical className="fit-content">
+                        <UploadImg
+                          type="avatar"
+                          disabled={!usersSetting.allow_update_avatar}
+                          uploadCallback={avatarUpload}>
+                          <Icon name="cloud-upload" />
+                        </UploadImg>
+                        <Button
+                          variant="outline-secondary"
+                          disabled={!usersSetting.allow_update_avatar}
+                          onClick={removeCustomAvatar}>
+                          <Icon name="trash" />
+                        </Button>
+                      </ButtonGroup>
+                    </Stack>
+                    <Form.Text className="text-muted mt-1">
+                      <Trans i18nKey="settings.profile.avatar.text">
+                        You can upload your image.
+                      </Trans>
+                    </Form.Text>
+                  </Stack>
+                )}
+                {formData.avatar.type === 'default' && (
+                  <Avatar size="160px" avatar="" />
+                )}
+              </div>
+            </ImgViewer>
            <Form.Control
              isInvalid={formData.avatar.isInvalid}
              className="d-none"
@ -423,7 +424,7 @@ const Index: React.FC = () => {
              required
              as="textarea"
              rows={5}
-              readOnly={!usersSetting.allow_update_bio}
+              disabled={!usersSetting.allow_update_bio}
              value={formData.bio.value}
              isInvalid={formData.bio.isInvalid}
              onChange={(e) =>
@ -449,7 +450,7 @@ const Index: React.FC = () => {
              required
              type="url"
              placeholder={t('website.placeholder')}
-              readOnly={!usersSetting.allow_update_website}
+              disabled={!usersSetting.allow_update_website}
              value={formData.website.value}
              isInvalid={formData.website.isInvalid}
              onChange={(e) =>
@ -475,7 +476,7 @@ const Index: React.FC = () => {
              required
              type="text"
              placeholder={t('location.placeholder')}
-              readOnly={!usersSetting.allow_update_location}
+              disabled={!usersSetting.allow_update_location}
              value={formData.location.value}
              isInvalid={formData.location.isInvalid}
              onChange={(e) =>
--- a/ui/src/plugins/PluginUcLogin/index.tsx
+++ b/ui/src/plugins/PluginUcLogin/index.tsx
@ -13,7 +13,6 @@ interface Props {
 const Index: FC<Props> = ({ className }) => {
  const { t } = useTranslation('translation', { keyPrefix: 'plugins.oauth' });
  const ucAgent = userCenterStore().agent;
-  const agentName = ucAgent?.agent_info?.name || '';
  const ucLoginRedirect =
    ucAgent?.enabled && ucAgent?.agent_info?.login_redirect_url;

@ -24,7 +23,9 @@ const Index: FC<Props> = ({ className }) => {
        variant="outline-secondary"
        href={ucAgent?.agent_info.login_redirect_url}>
        <SvgIcon base64={ucAgent?.agent_info.icon} />
-        <span>{t('connect', { auth_name: agentName })}</span>
+        <span>
+          {t('connect', { auth_name: ucAgent?.agent_info.display_name })}
+        </span>
      </Button>
    );
  }
--- a/ui/src/services/user-center/index.ts
+++ b/ui/src/services/user-center/index.ts
@ -11,6 +11,7 @@ export interface UcAgent {
    name: string;
    icon: string;
    url: string;
+    display_name: string;
    login_redirect_url: string;
    sign_up_redirect_url: string;
    control_center: UcAgentControl[];
--- a/ui/src/stores/siteInfo.ts
+++ b/ui/src/stores/siteInfo.ts
@ -13,6 +13,16 @@ interface SiteInfoType {
  updateUsers: (users: SiteInfoType['users']) => void;
 }

+const defaultUsersConf: AdminSettingsUsers = {
+  allow_update_avatar: false,
+  allow_update_bio: false,
+  allow_update_display_name: false,
+  allow_update_location: false,
+  allow_update_username: false,
+  allow_update_website: false,
+  default_avatar: 'system',
+};
+
 const siteInfo = create<SiteInfoType>((set) => ({
  siteInfo: {
    name: DEFAULT_SITE_NAME,
@ -22,15 +32,7 @@ const siteInfo = create<SiteInfoType>((set) => ({
    contact_email: '',
    permalink: 1,
  },
-  users: {
-    allow_update_avatar: false,
-    allow_update_bio: false,
-    allow_update_display_name: false,
-    allow_update_location: false,
-    allow_update_username: false,
-    allow_update_website: false,
-    default_avatar: 'system',
-  },
+  users: defaultUsersConf,
  version: '',
  revision: '',
  update: (params) =>
@ -50,6 +52,7 @@ const siteInfo = create<SiteInfoType>((set) => ({
  },
  updateUsers: (users) => {
    set(() => {
+      users ||= defaultUsersConf;
      return { users };
    });
  },