Improve WebAuthnCredentialTable and border radius

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;
 }

web/src/WebauthnCredentialTable.js

@@ -19,40 +19,6 @@ import * as UserWebauthnBackend from "./backend/UserWebauthnBackend";
 import * as Setting from "./Setting";
 
 class WebAuthnCredentialTable extends React.Component {
-  render() {
-    const columns = [
-      {
-        title: i18next.t("user:WebAuthn credentials"),
-        dataIndex: "ID",
-        key: "ID",
-      },
-      {
-        title: i18next.t("general:Action"),
-        key: "action",
-        render: (text, record, index) => {
-          return (
-            <Button style={{marginTop: "5px", marginBottom: "5px", marginRight: "5px"}} type="danger" onClick={() => {this.deleteRow(this.props.table, index);}}>
-              {i18next.t("general:Delete")}
-            </Button>
-          );
-        },
-      },
-    ];
-
-    return (
-      <Table scroll={{x: "max-content"}} rowKey={"ID"} columns={columns} dataSource={this.props.table} size="middle" bordered pagination={false}
-        title={() => (
-          <div>
-            {i18next.t("user:WebAuthn credentials")}&nbsp;&nbsp;&nbsp;&nbsp;
-            <Button disabled={!this.props.isSelf} style={{marginRight: "5px"}} type="primary" size="small" onClick={() => {this.registerWebAuthn();}}>
-              {i18next.t("general:Add")}
-            </Button>
-          </div>
-        )}
-      />
-    );
-  }
-
   deleteRow(table, i) {
     table = Setting.deleteRow(table, i);
     this.props.updateTable(table);
@@ -71,6 +37,41 @@ class WebAuthnCredentialTable extends React.Component {
       Setting.showMessage("error", `Failed to connect to server: ${error}`);
     });
   }
+
+  render() {
+    const columns = [
+      {
+        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);}}>
+              {i18next.t("general:Delete")}
+            </Button>
+          );
+        },
+      },
+    ];
+
+    return (
+      <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;
+            <Button disabled={!this.props.isSelf} style={{marginRight: "5px"}} type="primary" size="small" onClick={() => {this.registerWebAuthn();}}>
+              {i18next.t("general:Add")}
+            </Button>
+          </div>
+        )}
+      />
+    );
+  }
 }
 
 export default WebAuthnCredentialTable;

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>

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,
           }}

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,
           }}

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": {