Improve WebAuthnCredentialTable and border radius

yuanahui · Oct 3, 2022 · 58455e6 · 58455e6
1 parent 4d6f68e
commit 58455e6
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 28 deletions.
diff --git a/web/src/App.less b/web/src/App.less
@@ -28,7 +28,7 @@
   color: #61dafb;
 }
 
-#root{
+#root {
   height: 100%;
 }
 
@@ -64,6 +64,7 @@
   background-size: 25px, 25px;
   background-position: center;
   background-repeat: no-repeat;
+  border-radius: 5px;
   width: 45px;
   height: 65px;
   float: right;
@@ -89,7 +90,7 @@
 
 .loginBackground {
   height: 100%;
-  background: #ffffff no-repeat;
+  background: #fff no-repeat;
   background-size: 100% 100%;
   background-attachment: fixed;
 }
diff --git a/web/src/WebauthnCredentialTable.js b/web/src/WebauthnCredentialTable.js
@@ -19,16 +19,36 @@ import * as UserWebauthnBackend from "./backend/UserWebauthnBackend";
 import * as Setting from "./Setting";
 
 class WebAuthnCredentialTable extends React.Component {
+  deleteRow(table, i) {
+    table = Setting.deleteRow(table, i);
+    this.props.updateTable(table);
+  }
+
+  registerWebAuthn() {
+    UserWebauthnBackend.registerWebauthnCredential().then((res) => {
+      if (res.msg === "") {
+        Setting.showMessage("success", "Successfully added webauthn credentials");
+      } else {
+        Setting.showMessage("error", res.msg);
+      }
+
+      this.props.refresh();
+    }).catch(error => {
+      Setting.showMessage("error", `Failed to connect to server: ${error}`);
+    });
+  }
+
   render() {
     const columns = [
       {
-        title: i18next.t("user:WebAuthn credentials"),
+        title: i18next.t("general:Name"),
         dataIndex: "ID",
         key: "ID",
       },
       {
         title: i18next.t("general:Action"),
         key: "action",
+        width: "170px",
         render: (text, record, index) => {
           return (
             <Button style={{marginTop: "5px", marginBottom: "5px", marginRight: "5px"}} type="danger" onClick={() => {this.deleteRow(this.props.table, index);}}>
@@ -40,7 +60,7 @@ class WebAuthnCredentialTable extends React.Component {
     ];
 
     return (
-      <Table scroll={{x: "max-content"}} rowKey={"ID"} columns={columns} dataSource={this.props.table} size="middle" bordered pagination={false}
+      <Table rowKey={"ID"} columns={columns} dataSource={this.props.table} size="middle" bordered pagination={false}
         title={() => (
           <div>
             {i18next.t("user:WebAuthn credentials")}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -52,25 +72,6 @@ class WebAuthnCredentialTable extends React.Component {
       />
     );
   }
-
-  deleteRow(table, i) {
-    table = Setting.deleteRow(table, i);
-    this.props.updateTable(table);
-  }
-
-  registerWebAuthn() {
-    UserWebauthnBackend.registerWebauthnCredential().then((res) => {
-      if (res.msg === "") {
-        Setting.showMessage("success", "Successfully added webauthn credentials");
-      } else {
-        Setting.showMessage("error", res.msg);
-      }
-
-      this.props.refresh();
-    }).catch(error => {
-      Setting.showMessage("error", `Failed to connect to server: ${error}`);
-    });
-  }
 }
 
 export default WebAuthnCredentialTable;
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
@@ -698,7 +698,7 @@ class LoginPage extends React.Component {
     return (
       <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
         <CustomGithubCorner />
-        <Row >
+        <Row>
           <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() || Setting.isMobile() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}}>
             <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}>
               <div>
@@ -718,7 +718,6 @@ class LoginPage extends React.Component {
                   this.renderForm(application)
                 }
               </div>
-
             </div>
           </Col>
         </Row>

diff --git a/web/src/common/CaptchaPreview.js b/web/src/common/CaptchaPreview.js
@@ -87,7 +87,7 @@ export const CaptchaPreview = ({
             backgroundRepeat: "no-repeat",
             height: "80px",
             width: "200px",
-            borderRadius: "3px",
+            borderRadius: "5px",
             border: "1px solid #ccc",
             marginBottom: 10,
           }}

diff --git a/web/src/common/CountDownInput.js b/web/src/common/CountDownInput.js
@@ -101,7 +101,7 @@ export const CountDownInput = (props) => {
             backgroundRepeat: "no-repeat",
             height: "80px",
             width: "200px",
-            borderRadius: "3px",
+            borderRadius: "5px",
             border: "1px solid #ccc",
             marginBottom: 10,
           }}

diff --git a/web/src/locales/zh/data.json b/web/src/locales/zh/data.json
@@ -702,7 +702,7 @@
     "Unlink": "解绑",
     "Upload (.xlsx)": "上传（.xlsx）",
     "Upload a photo": "上传头像",
-    "WebAuthn credentials": "WebAuthn credentials",
+    "WebAuthn credentials": "WebAuthn凭据",
     "input password": "输入密码"
   },
   "webhook": {