From 944e7733926ca5372bc76c6e9515092f37a04a13 Mon Sep 17 00:00:00 2001
From: haitaoo <haitao@sifou.com>
Date: Thu, 20 Apr 2023 17:51:43 +0800
Subject: [PATCH] fix(Login): Improve the prompt text for the Login process

---
 i18n/en_US.yaml                                      |  1 +
 ui/src/components/SchemaForm/components/Input.tsx    |  2 +-
 ui/src/components/SchemaForm/components/Select.tsx   |  3 +++
 ui/src/components/SchemaForm/components/Textarea.tsx |  3 +++
 ui/src/components/SchemaForm/index.tsx               |  2 ++
 ui/src/components/UploadImg/index.tsx                |  7 +++++--
 .../pages/UserCenter/Auth/components/WeCom/index.tsx |  6 ++++--
 .../pages/UserCenter/AuthFailed/components/WeCom.tsx | 12 +++++++++---
 ui/src/pages/Users/Settings/Profile/index.tsx        | 10 +++++-----
 ui/src/plugins/PluginUcLogin/index.tsx               |  5 +++--
 ui/src/services/user-center/index.ts                 |  1 +
 11 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml
index af3c5d9f..dc50a9b1 100644
--- a/i18n/en_US.yaml
+++ b/i18n/en_US.yaml
@@ -1123,6 +1123,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 }}
diff --git a/ui/src/components/SchemaForm/components/Input.tsx b/ui/src/components/SchemaForm/components/Input.tsx
index 02f20ce9..84fda2eb 100644
--- 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' } : {}}
     />
diff --git a/ui/src/components/SchemaForm/components/Select.tsx b/ui/src/components/SchemaForm/components/Select.tsx
index 77c0f87a..0680360d 100644
--- 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 (
diff --git a/ui/src/components/SchemaForm/components/Textarea.tsx b/ui/src/components/SchemaForm/components/Textarea.tsx
index ed504102..792465cc 100644
--- 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)}
     />
   );
diff --git a/ui/src/components/SchemaForm/index.tsx b/ui/src/components/SchemaForm/index.tsx
index bdf32087..7233fc71 100644
--- a/ui/src/components/SchemaForm/index.tsx
+++ b/ui/src/components/SchemaForm/index.tsx
@@ -369,6 +369,7 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
                 enumValues={enumValues}
                 enumNames={enumNames}
                 formData={formData}
+                readOnly={readOnly}
               />
             ) : null}
             {widget === 'radio' || widget === 'checkbox' ? (
@@ -420,6 +421,7 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
                 fieldName={key}
                 onChange={onChange}
                 formData={formData}
+                readOnly={readOnly}
               />
             ) : null}
             {widget === 'input' ? (
diff --git a/ui/src/components/UploadImg/index.tsx b/ui/src/components/UploadImg/index.tsx
index 07dde645..896c698e 100644
--- 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"
diff --git a/ui/src/pages/UserCenter/Auth/components/WeCom/index.tsx b/ui/src/pages/UserCenter/Auth/components/WeCom/index.tsx
index f6dac06a..0ba20ac6 100644
--- a/ui/src/pages/UserCenter/Auth/components/WeCom/index.tsx
+++ b/ui/src/pages/UserCenter/Auth/components/WeCom/index.tsx
@@ -68,7 +68,7 @@ const Index: FC = () => {
       <Card className="text-center">
         <Card.Body>
           <Card.Title as="h3" className="mb-3">
-            {agentName} {t('login')}
+            {ucAgent?.agent_info.display_name} {t('login')}
           </Card.Title>
           {qrcodeDataUrl ? (
             <>
@@ -79,7 +79,9 @@ const Index: FC = () => {
                 alt={agentName}
               />
               <div className="text-secondary mt-3">
-                {t('qrcode_login_tip', { agentName })}
+                {t('qrcode_login_tip', {
+                  agentName: ucAgent?.agent_info.display_name,
+                })}
               </div>
             </>
           ) : null}
diff --git a/ui/src/pages/UserCenter/AuthFailed/components/WeCom.tsx b/ui/src/pages/UserCenter/AuthFailed/components/WeCom.tsx
index d6bfd2eb..c277a558 100644
--- 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}>
diff --git a/ui/src/pages/Users/Settings/Profile/index.tsx b/ui/src/pages/Users/Settings/Profile/index.tsx
index 7a1a73ad..76c1650d 100644
--- a/ui/src/pages/Users/Settings/Profile/index.tsx
+++ b/ui/src/pages/Users/Settings/Profile/index.tsx
@@ -281,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) =>
@@ -304,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) =>
@@ -424,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) =>
@@ -450,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) =>
@@ -476,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) =>
diff --git a/ui/src/plugins/PluginUcLogin/index.tsx b/ui/src/plugins/PluginUcLogin/index.tsx
index 7abe2f08..b6dceb24 100644
--- 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>
     );
   }
diff --git a/ui/src/services/user-center/index.ts b/ui/src/services/user-center/index.ts
index 8ec92d23..5610be80 100644
--- 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[];