fix(fe): re-org dependencies and fix small issues

public/static/css/white.css

@@ -179,6 +179,7 @@
   line-height: 2rem;
   display: block;
   margin: 2rem 0;
+  word-break: break-all;
 }
 
 .theme-default #item-rows .desc {

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

@@ -3,20 +3,21 @@ import { List, Set, Map } from "immutable";
 import { UploadEntry } from "../worker/interface";
 import { MsgPackage } from "../i18n/msger";
 import { User, MetadataResp } from "../client";
-import { settingsDialogCtrl } from "./layers";
-import { filesViewCtrl } from "./panel_files";
 import { FilesProps } from "./panel_files";
 import { UploadingsProps } from "./panel_uploadings";
 import { SharingsProps } from "./panel_sharings";
 import { controlName as panelTabs } from "./root_frame";
-import { settingsTabsCtrl } from "./dialog_settings";
+import {
+  filesViewCtrl,
+  settingsTabsCtrl,
+  settingsDialogCtrl,
+  sharingCtrl,
+  ctrlOn,
+  ctrlOff,
+} from "../common/controls";
 import { LoginProps } from "./pane_login";
 import { AdminProps } from "./pane_admin";
 
-export const ctrlHidden = "hidden";
-export const ctrlOn = "on";
-export const ctrlOff = "off";
-export const sharingCtrl = "sharingCtrl";
 export interface MsgProps {
   lan: string;
   pkg: Map<string, string>;
@@ -110,9 +111,9 @@ export function initState(): ICoreState {
       control: {
         controls: Map<string, string>({
           [panelTabs]: "filesPanel",
-          [settingsDialogCtrl]: "off",
+          [settingsDialogCtrl]: ctrlOff,
           [settingsTabsCtrl]: "preferencePane",
-          [sharingCtrl]: "off",
+          [sharingCtrl]: ctrlOff,
           [filesViewCtrl]: "rows",
         }),
         options: Map<string, Set<string>>({
@@ -121,9 +122,9 @@ export function initState(): ICoreState {
             "uploadingsPanel",
             "sharingsPanel",
           ]),
-          [settingsDialogCtrl]: Set<string>(["on", "off"]),
+          [settingsDialogCtrl]: Set<string>([ctrlOn, ctrlOff]),
           [settingsTabsCtrl]: Set<string>(["preferencePane", "managementPane"]),
-          [sharingCtrl]: Set<string>(["on", "off"]),
+          [sharingCtrl]: Set<string>([ctrlOn, ctrlOff]),
           [filesViewCtrl]: Set<string>(["rows", "table"]),
         }),
       },

src/client/web/src/components/dialog_settings.tsx

@@ -11,8 +11,7 @@ import { Tabs } from "./control/tabs";
 import { Container } from "./layout/container";
 import { LoginProps } from "./pane_login";
 import { roleAdmin } from "../client";
-
-export const settingsTabsCtrl = "settingsTabs";
+import { settingsTabsCtrl } from "../common/controls";
 
 export interface Props {
   admin: AdminProps;

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

@@ -2,13 +2,7 @@ import * as React from "react";
 import { List } from "immutable";
 
 import { updater } from "./state_updater";
-import {
-  ICoreState,
-  MsgProps,
-  UIProps,
-  sharingCtrl,
-  ctrlOn,
-} from "./core_state";
+import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { AdminProps } from "./pane_admin";
 import { SettingsDialog } from "./dialog_settings";
 
@@ -16,8 +10,7 @@ import { AuthPane, LoginProps } from "./pane_login";
 import { FilesProps } from "./panel_files";
 import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
-
-export const settingsDialogCtrl = "settingsDialog";
+import { sharingCtrl, ctrlOn } from "../common/controls";
 
 export interface Props {
   filesInfo: FilesProps;

src/client/web/src/components/pane_admin.tsx

@@ -141,6 +141,10 @@ export class UserForm extends React.Component<
   };
 
   delUser = async () => {
+    if (!confirmMsg(this.props.msg.pkg.get("op.confirm"))) {
+      return;
+    }
+
     return updater()
       .delUser(this.state.id)
       .then((status: string) => {

src/client/web/src/components/panel_files.tsx

@@ -28,8 +28,7 @@ import { Rows, Row } from "./layout/rows";
 import { Up } from "../worker/upload_mgr";
 import { UploadEntry, UploadState } from "../worker/interface";
 import { getIcon } from "./visual/icons";
-
-export const filesViewCtrl = "filesView";
+import { filesViewCtrl } from "../common/controls";
 
 export interface Item {
   name: string;

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

@@ -1,12 +1,6 @@
 import { List, Map, Set } from "immutable";
 
-import {
-  ICoreState,
-  sharingCtrl,
-  ctrlOn,
-  ctrlOff,
-  ctrlHidden,
-} from "./core_state";
+import { ICoreState } from "./core_state";
 import { getItemPath } from "../common/utils";
 import {
   User,
@@ -32,10 +26,16 @@ import { UploadEntry, UploadState } from "../worker/interface";
 import { Up } from "../worker/upload_mgr";
 import { alertMsg } from "../common/env";
 import { controlName as panelTabs } from "./root_frame";
-import { settingsTabsCtrl } from "./dialog_settings";
-import { settingsDialogCtrl } from "./layers";
 import { errUpdater, errServer } from "../common/errors";
 import { ErrorLogger } from "../common/log_error";
+import {
+  settingsTabsCtrl,
+  settingsDialogCtrl,
+  sharingCtrl,
+  ctrlOn,
+  ctrlOff,
+  ctrlHidden,
+} from "../common/controls";
 
 import { MsgPackage, isValidLanPack } from "../i18n/msger";
 

src/client/web/src/components/topbar.tsx

@@ -2,17 +2,11 @@ import * as React from "react";
 import { List } from "immutable";
 import { alertMsg, confirmMsg } from "../common/env";
 
-import {
-  ICoreState,
-  MsgProps,
-  UIProps,
-  ctrlOn,
-  ctrlHidden,
-} from "./core_state";
+import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { updater } from "./state_updater";
 import { Flexbox } from "./layout/flexbox";
-import { settingsDialogCtrl } from "./layers";
+import { ctrlOn, ctrlHidden, settingsDialogCtrl } from "../common/controls";
 import { QRCodeIcon } from "./visual/qrcode";
 
 export interface State {}
@@ -91,7 +85,12 @@ export class TopBar extends React.Component<Props, State, {}> {
             >
               Quickshare
             </a>,
-            <QRCodeIcon value={document.URL} size={128} pos={true} className="margin-l-m"/>,
+            <QRCodeIcon
+              value={document.URL}
+              size={128}
+              pos={true}
+              className="margin-l-m"
+            />,
 
             <Flexbox
               children={List([