Client:OAuth2: update translation keys

packages/client/public/locales/en/OAuth.json

@@ -3,13 +3,15 @@
   "AccessGranted": "Access granted",
   "AppIcon": "App icon",
   "AllowedOrigins": "Allowed origins",
-  "AllowedOriginsHelpButton": "Allowed origin help",
+  "AllowedOriginsHelpButton": "URLs added here are used to improve the OAuth redirect security.",
   "AppName": "App name",
   "Apps": "Applications",
   "AuthButton": "Auth button",
+  "AuthorizeLink": "Authorize link",
   "Client": "Client",
   "Creator": "Creator",
-  "ClientHelpButton": "Credentials for using OAth 2.0 as your Authentication type. Note: Any enterprise admin who knows the app's client ID will be able to retrieve information about the app including app name, authentication type, app scopes and redirect URI.",
+  "ClientHelpButton": "Credentials for using OAth 2.0 as your Authentication type.<br/> <strong>Note</strong>: Any enterprise admin who knows the app's client ID will be able to retrieve information about the app including app name, authentication type, app scopes and redirect URI.",
+  "CodeVerifier": "Code verifier",
   "EditApp": "Edit application",
   "EnterDescription": "Enter description",
   "ErrorName": "Minimal name length:",
@@ -21,7 +23,7 @@
   "NewApp": "New application",
   "NoOAuthAppHeader": "No OAuth applications",
   "OAuth": "OAuth",
-  "OAuthAppDescription": "OAuth applications are used to access the ONLYOFFICE DocSpace API",
+  "OAuthAppDescription": "OAuth applications are used to access the ONLYOFFICE DocSpace API for authorization and further actions such as accessing files, etc.",
   "OAuthHeaderBlock": "OAuth urls",
   "ProfileDescription": "Here you can check the apps info to which you have granted the auth access, and revoke consent if needed.",
   "PrivacyPolicy": "Privacy policy",
@@ -41,6 +43,8 @@
   "Secret": "Secret",
   "SelectNewImage": "Select new image",
   "Scopes": "Scopes",
+  "ScopesHeader": "Access scopes",
+  "ScopesHelp": "Scopes are used to limit your app's access to all user-related data, and they'll let you specify exactly what kind of access you need.",
   "SignIn": "Sign in with DocSpace",
   "SupportAndLegalInfo": "Support & Legal info",
   "TermsOfService": "Terms of Service",

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/BlockHeader.tsx

@@ -6,7 +6,7 @@ import { StyledHeaderRow } from "../ClientForm.styled";
 
 interface BlockHeaderProps {
   header: string;
-  helpButtonText?: string;
+  helpButtonText?: string | React.ReactNode;
   className?: string;
 }
 

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ClientBlock.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { Trans } from "react-i18next";
+
 import { StyledBlock, StyledInputBlock } from "../ClientForm.styled";
 
 import BlockHeader from "./BlockHeader";
@@ -30,12 +32,11 @@ const ClientBlock = ({
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {};
 
+  const helpButtonText = <Trans t={t} i18nKey="ClientHelpButton" ns="OAuth" />;
+
   return (
     <StyledBlock>
-      <BlockHeader
-        header={t("Client")}
-        helpButtonText={t("ClientHelpButton")}
-      />
+      <BlockHeader header={t("Client")} helpButtonText={helpButtonText} />
       <StyledInputBlock>
         <InputGroup
           label={t("ID")}

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ScopesBlock.tsx

@@ -157,7 +157,6 @@ const ScopesBlock = ({
             </Text>
           </StyledScopesName>
           <StyledScopesCheckbox>
-            {scope.read?.name ? (
             <Checkbox
               className="checkbox-read"
               isChecked={isReadChecked}
@@ -170,14 +169,11 @@ const ScopesBlock = ({
                 )
               }
             />
-            ) : (
-              <></>
-            )}
           </StyledScopesCheckbox>
           <StyledScopesCheckbox>
             <Checkbox
               isChecked={isReadDisabled}
-              isDisabled={isEdit}
+              isDisabled={isEdit || !scope.read?.name}
               onChange={() =>
                 onAddCheckedScope(
                   key as ScopeGroup,
@@ -201,8 +197,8 @@ const ScopesBlock = ({
     <StyledScopesContainer>
       <BlockHeader
         className="header"
-        header={"Access scopes"}
-        helpButtonText="Access scopes help"
+        header={t("ScopesHeader")}
+        helpButtonText={t("ScopesHelp")}
       />
       {/* @ts-ignore */}
       <Text

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx

@@ -236,7 +236,7 @@ const ClientForm = ({
               return;
             }
 
-            isValid = !errorFields.includes(key);
+            isValid = isValid && !errorFields.includes(key);
 
             break;
         }
@@ -283,7 +283,7 @@ const ClientForm = ({
             nameTimer.current = null;
           }
 
-          isValid = errorFields.includes(key);
+          isValid = isValid && !errorFields.includes(key);
 
           break;
         case "logo":

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/index.tsx

@@ -10,12 +10,13 @@ import { Consumer } from "@docspace/components/utils/context";
 
 //@ts-ignore
 import { ViewAsType } from "SRC_DIR/store/OAuthStore";
+//@ts-ignore
+import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
 
 import TableView from "./TableView";
 import RowView from "./RowView";
 
 import RegisterNewButton from "../RegisterNewButton";
-import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
 
 export const StyledContainer = styled.div`
   width: 100%;

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx

@@ -163,7 +163,7 @@ const PreviewDialog = ({
   client,
   theme,
 }: PreviewDialogProps) => {
-  const { t } = useTranslation(["OAuth", "Common"]);
+  const { t } = useTranslation(["OAuth", "Common", "Webhooks"]);
 
   const [codeVerifier, setCodeVerifier] = React.useState("");
   const [codeChallenge, setCodeChallenge] = React.useState("");
@@ -229,7 +229,7 @@ const PreviewDialog = ({
       onClose={onClose}
       withFooterBorder
     >
-      <ModalDialog.Header>Auth button</ModalDialog.Header>
+      <ModalDialog.Header>{t("AuthButton")}</ModalDialog.Header>
       <ModalDialog.Body>
         <StyledContainer>
           <StyledPreviewContainer>
@@ -305,7 +305,7 @@ const PreviewDialog = ({
                 fontSize={"13px"}
                 noSelect
               >
-                Authorize link
+                {t("AuthorizeLink")}
               </Text>
               <Textarea
                 heightTextArea={64}
@@ -324,7 +324,7 @@ const PreviewDialog = ({
                 fontSize={"13px"}
                 noSelect
               >
-                State
+                {t("Webhooks:State")}
               </Text>
               <Textarea
                 heightTextArea={64}
@@ -344,7 +344,7 @@ const PreviewDialog = ({
                   fontSize={"13px"}
                   noSelect
                 >
-                  Code verifier
+                  {t("CodeVerifier")}
                 </Text>
                 <Textarea
                   heightTextArea={64}

public/locales/en/Common.json

@@ -213,7 +213,7 @@
   "OAuthFilesReadDescription": "View all files and folders",
   "OAuthFilesWriteDescription": "View and manage all files and folders",
   "OAuthOpenidName": "Open ID",
-  "OAuthOpenidOpenidDescription": "View and manage your personal data",
+  "OAuthOpenidOpenidDescription": "View your personal data",
   "OAuthProfilesName": "Profile",
   "OAuthProfilesReadDescription": "View basic information about your profile",
   "OAuthProfilesWriteDescription": "View and manage basic information about your profile",