From 02f86c6d99fd8c15c8280cfde587cce2a9a3c79b Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Thu, 7 Oct 2021 16:15:06 +0800
Subject: [PATCH] feat(settings): add user profile

---
 .../web/src/components/pane_settings.tsx      | 44 +++++++++++++++++--
 src/client/web/src/i18n/en_US.ts              | 10 +++--
 src/client/web/src/i18n/zh_CN.ts              |  5 +++
 3 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/client/web/src/components/pane_settings.tsx b/src/client/web/src/components/pane_settings.tsx
index 14d72b1..6ea5e0f 100644
--- a/src/client/web/src/components/pane_settings.tsx
+++ b/src/client/web/src/components/pane_settings.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import FileSize from "filesize";
 
 import { ICoreState, MsgProps } from "./core_state";
 import { LoginProps } from "./pane_login";
@@ -78,6 +79,43 @@ export class PaneSettings extends React.Component<Props, State, {}> {
     return (
       <div className="container">
         <div className="padding-l">
+          <div className="grey3-font">
+            <h5 className="black-font">
+              {this.props.msg.pkg.get("user.profile")}
+            </h5>
+
+            <div className="font-size-s margin-t-s">
+              {`${this.props.msg.pkg.get("user.name")}: ${
+                this.props.login.userName
+              }`}
+            </div>
+            <div className="font-size-s margin-t-s">
+              {`${this.props.msg.pkg.get("user.role")}: ${
+                this.props.login.userRole
+              }`}
+            </div>
+            <div className="font-size-s margin-t-s">
+              {`${this.props.msg.pkg.get("user.spaceLimit")}: ${FileSize(
+                parseInt(this.props.login.quota.spaceLimit, 10),
+                { round: 0 }
+              )}`}
+            </div>
+            <div className="font-size-s margin-t-s">
+              {`${this.props.msg.pkg.get("user.upLimit")}: ${FileSize(
+                this.props.login.quota.uploadSpeedLimit,
+                { round: 0 }
+              )}`}
+            </div>
+            <div className="font-size-s margin-t-s">
+              {`${this.props.msg.pkg.get("user.downLimit")}: ${FileSize(
+                this.props.login.quota.downloadSpeedLimit,
+                { round: 0 }
+              )}`}
+            </div>
+          </div>
+
+          <div className="hr white0-bg margin-t-m margin-b-m"></div>
+
           <div>
             <Flexbox
               children={List([
@@ -100,7 +138,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
                 type="password"
                 onChange={this.changeOldPwd}
                 value={this.state.oldPwd}
-                className="black0-font margin-t-m"
+                className="black0-font"
                 placeholder={this.props.msg.pkg.get("settings.pwd.old")}
               />
             </span>
@@ -114,7 +152,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
                 type="password"
                 onChange={this.changeNewPwd1}
                 value={this.state.newPwd1}
-                className="black0-font margin-t-m"
+                className="black0-font"
                 placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
               />
             </span>
@@ -128,7 +166,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
                 type="password"
                 onChange={this.changeNewPwd2}
                 value={this.state.newPwd2}
-                className="black0-font margin-t-m"
+                className="black0-font"
                 placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
               />
             </span>
diff --git a/src/client/web/src/i18n/en_US.ts b/src/client/web/src/i18n/en_US.ts
index aa79da0..6f153f3 100644
--- a/src/client/web/src/i18n/en_US.ts
+++ b/src/client/web/src/i18n/en_US.ts
@@ -38,9 +38,9 @@ export const msgs: Map<string, string> = Map({
   "settings.pwd.empty": "Password can not be empty",
   "settings.pwd.notChanged": "New Password can be identical to old password",
   update: "Update",
-  "settings.pwd.old": "current password",
-  "settings.pwd.new1": "new password",
-  "settings.pwd.new2": "input again the new password",
+  "settings.pwd.old": "Old password",
+  "settings.pwd.new1": "New password",
+  "settings.pwd.new2": "Confirm new password",
   "settings.chooseLan": "Choose Language",
   "settings.pwd.update": "Update Password",
   settings: "Settings",
@@ -83,4 +83,8 @@ export const msgs: Map<string, string> = Map({
   "logout.confirm": "Are you going to logout?",
   unauthed: "Unauthorized action",
   "err.tooManyUploads": "Can not upload more than 1000 files at once",
+  "user.profile": "User Profile",
+  "user.downLimit": "Download Speed Limit",
+  "user.upLimit": "Upload Speed Limit",
+  "user.spaceLimit": "Space Limit",
 });
diff --git a/src/client/web/src/i18n/zh_CN.ts b/src/client/web/src/i18n/zh_CN.ts
index 38ac120..1cba08a 100644
--- a/src/client/web/src/i18n/zh_CN.ts
+++ b/src/client/web/src/i18n/zh_CN.ts
@@ -81,4 +81,9 @@ export const msgs: Map<string, string> = Map({
   "logout.confirm": "确定登出吗？",
   "unauthed": "未授权动作",
   "err.tooManyUploads": "不可同时上传超过1000个文件",
+  "login.role": "角色",
+  "user.profile": "用户信息",
+  "user.downLimit": "下载速度限制",
+  "user.upLimit": "上传速度限制",
+  "user.spaceLimit": "空间限制",
 });