From 55f45b6c57560b88a4e85353192f7dd82bfde7ed Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Sun, 23 Jan 2022 17:56:33 +0800
Subject: [PATCH] fix(fe/login): login dialog small fixes

---
 public/static/css/white.css                   |  7 ++-
 .../web/src/components/control/tabs.tsx       |  2 +-
 src/client/web/src/components/pane_login.tsx  |  8 +++-
 .../web/src/components/state_updater.ts       | 44 +------------------
 4 files changed, 15 insertions(+), 46 deletions(-)

diff --git a/public/static/css/white.css b/public/static/css/white.css
index d0e4b4e..830789e 100644
--- a/public/static/css/white.css
+++ b/public/static/css/white.css
@@ -119,12 +119,17 @@
   height: 3.8rem;
 }
 
-.theme-default #pane-login input {
+.theme-default #pane-login input,
+.theme-default #pane-login input:hover,
+.theme-default #pane-login input:focus,
+.theme-default #pane-login input:active {
   width: 100%;
   padding: 0;
   border: none;
   margin: 0 1rem;
   background-color: transparent;
+  outline: none;
+  box-shadow: none;
 }
 
 .theme-default #btn-login {
diff --git a/src/client/web/src/components/control/tabs.tsx b/src/client/web/src/components/control/tabs.tsx
index 83e4a47..4d48906 100644
--- a/src/client/web/src/components/control/tabs.tsx
+++ b/src/client/web/src/components/control/tabs.tsx
@@ -14,7 +14,7 @@ import { colorClass } from "../visual/colors";
 const defaultIconProps: IconProps = {
   name: "RiFolder2Fill",
   size: "1.6rem",
-  color: `${colorClass("cyan1")}-font`,
+  color: `${colorClass("cyan1")}`,
 };
 
 export interface Props {
diff --git a/src/client/web/src/components/pane_login.tsx b/src/client/web/src/components/pane_login.tsx
index 9033543..0a3714c 100644
--- a/src/client/web/src/components/pane_login.tsx
+++ b/src/client/web/src/components/pane_login.tsx
@@ -33,6 +33,7 @@ export interface State {
   user: string;
   pwd: string;
   captchaInput: string;
+  captchaLoaded: boolean;
 }
 
 export class AuthPane extends React.Component<Props, State, {}> {
@@ -44,6 +45,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
       user: "",
       pwd: "",
       captchaInput: "",
+      captchaLoaded: false,
     };
   }
 
@@ -153,11 +155,15 @@ export class AuthPane extends React.Component<Props, State, {}> {
                   placeholder={this.props.msg.pkg.get("login.captcha")}
                 />
               </div>,
+
               <img
                 id="captcha"
                 src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
-                className="captcha"
+                className={`captcha ${
+                  this.state.captchaLoaded ? "" : "hidden"
+                }`}
                 onClick={this.refreshCaptcha}
+                onLoad={() => this.setState({ captchaLoaded: true })}
               />,
             ])}
             childrenStyles={List([
diff --git a/src/client/web/src/components/state_updater.ts b/src/client/web/src/components/state_updater.ts
index eddc0f7..efd4a90 100644
--- a/src/client/web/src/components/state_updater.ts
+++ b/src/client/web/src/components/state_updater.ts
@@ -471,48 +471,6 @@ export class Updater {
     return "";
   };
 
-  initStateForVisitor = async (): Promise<any> => {
-    const status = await this.getClientCfg();
-    if (status !== "") {
-      return status;
-    }
-
-    const syncLanStatus = await this.syncLan();
-    if (syncLanStatus !== "") {
-      return syncLanStatus;
-    }
-    return "";
-  };
-
-  initStateForAuthedUser = async (): Promise<string> => {
-    const statuses = await Promise.all([
-      this.refreshUploadings(),
-      this.listSharings(),
-    ]);
-    if (statuses.join("") !== "") {
-      return statuses.join(";");
-    }
-
-    this.initUploads();
-    return "";
-  };
-
-  initStateForAdmin = async (): Promise<string> => {
-    const initVisitorStatus = await this.initStateForVisitor();
-    if (initVisitorStatus !== "") {
-      return initVisitorStatus;
-    }
-    const initAuthedUserStatus = await this.initStateForAuthedUser();
-    if (initAuthedUserStatus !== "") {
-      return initAuthedUserStatus;
-    }
-    const statuses = await Promise.all([this.listRoles(), this.listUsers()]);
-    if (statuses.join("") !== "") {
-      return statuses.join(";");
-    }
-    return "";
-  };
-
   syncCwd = async (): Promise<string> => {
     if (this.props.filesInfo.dirPath.size !== 0) {
       return this.setItems(this.props.filesInfo.dirPath);
@@ -584,7 +542,7 @@ export class Updater {
     const isInSharingMode = this.props.ui.control.controls.get(sharingCtrl);
     if (
       (this.props.login.userRole === roleVisitor &&
-        isInSharingMode !== ctrlOn) ||
+        isInSharingMode === ctrlOn) ||
       this.props.login.userRole === roleUser ||
       this.props.login.userRole === roleAdmin
     ) {