Client:PortalSettings:OAuth2: fix translation

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

@@ -4,11 +4,14 @@
   "AppIcon": "App icon",
   "AllowedOrigins": "Allowed origins",
   "AllowedOriginsHelpButton": "URLs added here are used to improve the OAuth redirect security.",
+  "AllowPKCE": "Allow public client (PKCE)",
+  "AllowPKCEHelpButton": "PKCE is not a form of client authentication, and PKCE is not a replacement for a client secret or another client authentication type. PKCE is recommended even if a client is using a client secret or another form of client authentication like private_key_jwt.<br/> <strong>Note</strong>: Since PKCE is not a replacement for client authentication, it does not allow treating a public client as confidential one.",
   "AppName": "App name",
   "Apps": "Applications",
   "AuthButton": "Auth button",
   "AuthorizedApps": "Authorized apps",
   "AuthorizeLink": "Authorize link",
+  "AuthenticationMethod": "Authentication method",
   "Client": "Client",
   "Creator": "Creator",
   "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.",
@@ -24,7 +27,7 @@
   "NewApp": "New application",
   "NoAuthorizedApps": "No authorized apps",
   "NoOAuthAppHeader": "No OAuth applications",
-  "OAuth": "OAuth",
+  "OAuth": "OAuth 2.0",
   "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.",
@@ -33,7 +36,7 @@
   "PrivacyPolicyURLHelpButton": "Provide a URL link to your Privacy Policy that must comply with applicable laws and regulations and that make clear how you collect, use, share, retain and otherwise process personal information.",
   "Read": "Read",
   "RedirectsURLS": "Redirects URLS",
-  "RedirectsURLSHelpButton": "Redirect uris help button",
+  "RedirectsURLSHelpButton": "After a user successfully authorizes an application, the authorization server will redirect the user back to the application with sensitive information.",
   "RegisterNewApp": "Register a new application",
   "Reset": "Reset",
   "Revoke": "Revoke",
@@ -51,7 +54,7 @@
   "SupportAndLegalInfo": "Support & Legal info",
   "TermsOfService": "Terms of Service",
   "TermsOfServiceURL": "Terms of Service URL",
-  "TermsOfServiceURLHelpButton": "Terms of service help",
+  "TermsOfServiceURLHelpButton": "Terms and conditions that users must comply with when using this application.",
   "WebsiteUrl": "Website URL",
   "Write": "Write"
 }

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts

@@ -77,6 +77,14 @@ const StyledInputGroup = styled.div`
     cursor: pointer;
   }
 
+  .pkce {
+    margin-top: 4px;
+
+    display: flex;
+    align-items: center;
+    gap: 0px;
+  }
+
   .select {
     display: flex;
     flex-direction: row;

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

@@ -1,7 +1,8 @@
 import React from "react";
+import { Trans } from "react-i18next";
 
-import ComboBox from "@docspace/components/combobox";
-import { AuthenticationMethod } from "@docspace/common/utils/oauth/enums";
+//@ts-ignore
+import HelpButton from "@docspace/components/help-button";
 
 import { StyledBlock, StyledInputBlock } from "../ClientForm.styled";
 
@@ -9,6 +10,7 @@ import BlockHeader from "./BlockHeader";
 import InputGroup from "./InputGroup";
 import TextAreaGroup from "./TextAreaGroup";
 import SelectGroup from "./SelectGroup";
+
 import Checkbox from "@docspace/components/checkbox";
 
 interface BasicBlockProps {
@@ -125,6 +127,10 @@ const BasicBlock = ({
     }
   };
 
+  const pkceHelpButtonText = (
+    <Trans t={t} i18nKey="AllowPKCEHelpButton" ns="OAuth" />
+  );
+
   return (
     <StyledBlock>
       <BlockHeader header={"Basic info"} />
@@ -164,13 +170,25 @@ const BasicBlock = ({
           value={descriptionValue}
           onChange={onChange}
         />
-        <Checkbox
-          label={"Allow pkce"}
-          isChecked={allowPkce}
-          onChange={() => {
-            changeValue("allow_pkce", !allowPkce);
-          }}
-        />
+        <InputGroup
+          label={t("AuthenticationMethod")}
+          name={"website_url"}
+          placeholder={t("EnterURL")}
+          value={websiteUrlValue}
+          error=""
+          onChange={() => {}}
+        >
+          <div className={"pkce"}>
+            <Checkbox
+              label={t("AllowPKCE")}
+              isChecked={allowPkce}
+              onChange={() => {
+                changeValue("allow_pkce", !allowPkce);
+              }}
+            />
+            <HelpButton tooltipContent={pkceHelpButtonText} />
+          </div>
+        </InputGroup>
       </StyledInputBlock>
     </StyledBlock>
   );

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

@@ -151,9 +151,9 @@ const ScopesBlock = ({
                 fontWeight={600}
                 lineHeight={"16px"}
               >
-                {scope.write.name}
+                {scope.write?.name}
               </Text>{" "}
-              — {t(`Common:${scope.write.tKey}`)}
+              — {t(`Common:${scope.write?.tKey}`)}
             </Text>
           </StyledScopesName>
           <StyledScopesCheckbox>
@@ -171,15 +171,15 @@ const ScopesBlock = ({
             />
           </StyledScopesCheckbox>
           <StyledScopesCheckbox>
-            {scope.read?.name && (
+            {scope.write?.name && (
               <Checkbox
                 isChecked={isReadDisabled}
-                isDisabled={isEdit || !scope.read?.name}
+                isDisabled={isEdit || !scope.write?.name}
                 onChange={() =>
                   onAddCheckedScope(
                     key as ScopeGroup,
                     ScopeType.write,
-                    scope.write.name
+                    scope.write?.name
                   )
                 }
               />

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

@@ -56,7 +56,7 @@ const SelectGroup = ({
           color={""}
           textAlign={""}
         >
-          {label}
+          {label} *
         </Text>
       </div>
       <div className="select">

packages/common/utils/oauth/index.ts

@@ -134,8 +134,8 @@ export const filterScopeByGroup = (
       filteredScopes[scope.group] = {
         isChecked,
         checkedType: isChecked ? scope.type : undefined,
-        read: undefined,
-        write,
+        read: write,
+        write: undefined,
       };
 
       return;

packages/common/utils/oauth/interfaces.ts

@@ -11,8 +11,8 @@ export interface IFilteredScopes {
   [key: string]: {
     isChecked: boolean;
     checkedType?: ScopeType;
-    read?: IScope;
-    write: IScope;
+    read: IScope;
+    write?: IScope;
   };
 }