fix(Login): Improve the prompt text for the Login process

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 }}

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' } : {}}
     />

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 (

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)}
     />
   );

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' ? (

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"

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}

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
+            {t('login_failed_email_tip')}
-            before try again.
           </p>
 
           <Carousel controls={false}>

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) =>

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>
     );
   }

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[];