fix(fe): enable captcha at user level

src/client/web/src/client/index.ts

@@ -89,12 +89,10 @@ export interface GetSharingDirResp {
 }
 
 export interface ClientConfigMsg {
-  clientCfg: ClientConfig;
-}
-export interface ClientConfig {
   siteName: string;
   siteDesc: string;
   bg: BgConfig;
+  captchaEnabled?: boolean;
 }
 
 export interface ClientErrorReport {
@@ -154,7 +152,7 @@ export interface IFilesClient {
 export interface ISettingsClient {
   health: () => Promise<Response>;
   getClientCfg: () => Promise<Response>;
-  setClientCfg: (cfg: ClientConfig) => Promise<Response>;
+  setClientCfg: (cfg: ClientConfigMsg) => Promise<Response>;
   reportErrors: (reports: List<ClientErrorReport>) => Promise<Response>;
 }
 

src/client/web/src/client/settings.ts

@@ -1,7 +1,7 @@
 import { List } from "immutable";
 
 import { BaseClient, Response, userIDParam, Quota } from ".";
-import { ClientConfig, ClientErrorReport } from "./";
+import { ClientConfigMsg, ClientErrorReport } from "./";
 
 export class SettingsClient extends BaseClient {
   constructor(url: string) {
@@ -22,13 +22,11 @@ export class SettingsClient extends BaseClient {
     });
   };
 
-  setClientCfg = (cfg: ClientConfig): Promise<Response> => {
+  setClientCfg = (cfg: ClientConfigMsg): Promise<Response> => {
     return this.do({
       method: "patch",
       url: `${this.url}/v1/settings/client`,
-      data: {
+      data: cfg,
-        clientCfg: cfg,
-      },
     });
   };
 

src/client/web/src/client/settings_mock.ts

@@ -15,7 +15,6 @@ export const resps = {
     status: 200,
     statusText: "",
     data: {
-      clientCfg: {
       siteName: "",
       siteDesc: "",
       bg: {
@@ -26,48 +25,12 @@ export const resps = {
       },
     },
   },
-  },
   reportErrorsMockResp: {
     status: 200,
     statusText: "",
     data: {},
   },
 };
-export class MockSettingsClient {
-  private url: string;
-  private resps: SettingsClientResps;
-
-  constructor(url: string) {
-    this.url = url;
-    this.resps = resps;
-  }
-
-  setMock = (resps: SettingsClientResps) => {
-    this.resps = resps;
-  };
-
-  wrapPromise = (resp: any): Promise<any> => {
-    return new Promise<any>((resolve) => {
-      resolve(resp);
-    });
-  };
-
-  health = (): Promise<Response> => {
-    return this.wrapPromise(this.resps.healthMockResp);
-  };
-
-  setClientCfg = (): Promise<Response> => {
-    return this.wrapPromise(this.resps.setClientCfgMockResp);
-  };
-
-  getClientCfg = (): Promise<Response> => {
-    return this.wrapPromise(this.resps.getClientCfgMockResp);
-  };
-
-  reportErrors = (): Promise<Response> => {
-    return this.wrapPromise(this.resps.reportErrorsMockResp);
-  };
-}
 
 export class JestSettingsClient {
   url: string = "";

src/client/web/src/components/__test__/pane_login.test.tsx

@@ -34,6 +34,7 @@ describe("Login", () => {
     const pane = new AuthPane({
       login: coreState.login,
       msg: coreState.msg,
+      ui: coreState.ui,
       update: (updater: (prevState: ICoreState) => ICoreState) => {},
     });
 

src/client/web/src/components/__test__/state_mgr.test.tsx

@@ -124,7 +124,7 @@ describe("State Manager", () => {
 
     // ui
     expect(coreState.ui.bg).toEqual(
-      settingsResps.getClientCfgMockResp.data.clientCfg.bg
+      settingsResps.getClientCfgMockResp.data.bg
     );
   });
 
@@ -226,7 +226,7 @@ describe("State Manager", () => {
 
     // ui
     expect(coreState.ui.bg).toEqual(
-      settingsResps.getClientCfgMockResp.data.clientCfg.bg
+      settingsResps.getClientCfgMockResp.data.bg
     );
   });
 

src/client/web/src/components/core_state.ts

@@ -28,6 +28,7 @@ export interface UIProps {
   isVertical: boolean;
   siteName: string;
   siteDesc: string;
+  captchaEnabled: boolean;
   bg: {
     url: string;
     repeat: string;
@@ -111,6 +112,7 @@ export function initState(): ICoreState {
         position: "",
         align: "",
       },
+      captchaEnabled: true,
       control: {
         controls: Map<string, string>({
           [panelTabs]: "filesPanel",

src/client/web/src/components/layers.tsx

@@ -57,6 +57,7 @@ export class Layers extends React.Component<Props, State, {}> {
           <div id="root-container">
             <AuthPane
               login={this.props.login}
+              ui={this.props.ui}
               update={this.props.update}
               msg={this.props.msg}
             />

src/client/web/src/components/pane_login.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { List } from "immutable";
 
-import { ICoreState, MsgProps } from "./core_state";
+import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { Flexbox } from "./layout/flexbox";
 import { updater } from "./state_updater";
 import { alertMsg } from "../common/env";
@@ -26,6 +26,7 @@ export interface LoginProps {
 export interface Props {
   login: LoginProps;
   msg: MsgProps;
+  ui: UIProps;
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
@@ -106,6 +107,34 @@ export class AuthPane extends React.Component<Props, State, {}> {
   };
 
   render() {
+    const row3 = this.props.ui.captchaEnabled ? (
+      <Flexbox
+        children={List([
+          <div className="input-wrap">
+            <input
+              id="captcha-input"
+              type="text"
+              onChange={this.changeCaptcha}
+              value={this.state.captchaInput}
+              placeholder={this.props.msg.pkg.get("login.captcha")}
+            />
+          </div>,
+
+          <img
+            id="captcha"
+            src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
+            className={`captcha ${this.state.captchaLoaded ? "" : "hidden"}`}
+            onClick={this.refreshCaptcha}
+            onLoad={() => this.setState({ captchaLoaded: true })}
+          />,
+        ])}
+        childrenStyles={List([
+          { justifyContent: "flex-start" },
+          { justifyContent: "flex-end" },
+        ])}
+      />
+    ) : null;
+
     return (
       <div
         id="pane-login"
@@ -144,33 +173,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
             />
           </div>
 
-          <Flexbox
+          {row3}
-            children={List([
-              <div className="input-wrap">
-                <input
-                  id="captcha-input"
-                  type="text"
-                  onChange={this.changeCaptcha}
-                  value={this.state.captchaInput}
-                  placeholder={this.props.msg.pkg.get("login.captcha")}
-                />
-              </div>,
-
-              <img
-                id="captcha"
-                src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
-                className={`captcha ${
-                  this.state.captchaLoaded ? "" : "hidden"
-                }`}
-                onClick={this.refreshCaptcha}
-                onLoad={() => this.setState({ captchaLoaded: true })}
-              />,
-            ])}
-            childrenStyles={List([
-              { justifyContent: "flex-start" },
-              { justifyContent: "flex-end" },
-            ])}
-          />
 
           <button id="btn-login" onClick={this.login}>
             {this.props.msg.pkg.get("login.login")}

src/client/web/src/components/state_updater.ts

@@ -17,7 +17,7 @@ import {
   roleUser,
   roleAdmin,
   visitorID,
-  ClientConfig,
+  ClientConfigMsg,
   Preferences,
 } from "../client";
 import { FilesClient, shareIDQuery, shareDirQuery } from "../client/files";
@@ -780,12 +780,12 @@ export class Updater {
     return resp.status === 200 ? "" : errServer;
   };
 
-  setClientCfgRemote = async (cfg: ClientConfig): Promise<string> => {
+  setClientCfgRemote = async (cfg: ClientConfigMsg): Promise<string> => {
     const resp = await this.settingsClient.setClientCfg(cfg);
     return resp.status === 200 ? "" : errServer;
   };
 
-  setClientCfg = (cfg: ClientConfig) => {
+  setClientCfg = (cfg: ClientConfigMsg) => {
     this.props.ui = {
       ...this.props.ui,
       siteName: cfg.siteName,
@@ -810,10 +810,11 @@ export class Updater {
     if (resp.status !== 200) {
       return errServer;
     }
-    const clientCfg = resp.data.clientCfg as ClientConfig;
+    const clientCfg = resp.data as ClientConfigMsg;
     this.props.ui.siteName = clientCfg.siteName;
     this.props.ui.siteDesc = clientCfg.siteDesc;
     this.props.ui.bg = clientCfg.bg;
+    this.props.ui.captchaEnabled = clientCfg.captchaEnabled;
     return "";
   };