Fix some JS warnings.

This commit is contained in:
Gucheng Wang
2022-07-12 20:45:22 +08:00
parent 7f3b2500b3
commit f7243f879b
5 changed files with 41 additions and 36 deletions

View File

@ -287,10 +287,12 @@ class App extends Component {
<Menu onClick={this.handleRightDropdownClick.bind(this)}> <Menu onClick={this.handleRightDropdownClick.bind(this)}>
<Menu.Item key="/account"> <Menu.Item key="/account">
<SettingOutlined /> <SettingOutlined />
&nbsp;
{i18next.t("account:My Account")} {i18next.t("account:My Account")}
</Menu.Item> </Menu.Item>
<Menu.Item key="/logout"> <Menu.Item key="/logout">
<LogoutOutlined /> <LogoutOutlined />
&nbsp;
{i18next.t("account:Logout")} {i18next.t("account:Logout")}
</Menu.Item> </Menu.Item>
</Menu> </Menu>

View File

@ -517,15 +517,15 @@ class UserEditPage extends React.Component {
}} /> }} />
</Col> </Col>
</Row> </Row>
) );
} else if(accountItem.name === "WebAuthn credentials") { } else if(accountItem.name === "WebAuthn credentials") {
return ( return (
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: "20px"}} >
<Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}> <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("user:WebAuthn credentials"), i18next.t("user:WebAuthn credentials"))} : {Setting.getLabel(i18next.t("user:WebAuthn credentials"), i18next.t("user:WebAuthn credentials"))} :
</Col> </Col>
<Col span={22} > <Col span={22} >
<WebAuthnCredentialTable table={this.state.user.webauthnCredentials} updateTable={(table)=>{this.updateUserField('webauthnCredentials',table)}} refresh={this.getUser.bind(this)}/> <WebAuthnCredentialTable table={this.state.user.webauthnCredentials} updateTable={(table) => {this.updateUserField("webauthnCredentials", table);}} refresh={this.getUser.bind(this)} />
</Col> </Col>
</Row> </Row>
); );

View File

@ -13,7 +13,7 @@
// limitations under the License. // limitations under the License.
import React from "react"; import React from "react";
import {Button, Table} from 'antd'; import {Button, Table} from "antd";
import i18next from "i18next"; import i18next from "i18next";
import * as UserWebauthnBackend from "./backend/UserWebauthnBackend"; import * as UserWebauthnBackend from "./backend/UserWebauthnBackend";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
@ -23,30 +23,34 @@ class WebAuthnCredentialTable extends React.Component {
const columns = [ const columns = [
{ {
title: i18next.t("user:WebAuthn credentials"), title: i18next.t("user:WebAuthn credentials"),
dataIndex: 'ID', dataIndex: "ID",
key: 'ID', key: "ID",
}, },
{ {
title: i18next.t("general:Action"), title: i18next.t("general:Action"),
key: 'action', key: "action",
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<Button style={{marginTop: '5px', marginBottom: '5px', marginRight: '5px'}} type="danger" onClick={() => {this.deleteRow(this.props.table, index)}}> <Button style={{marginTop: "5px", marginBottom: "5px", marginRight: "5px"}} type="danger" onClick={() => {this.deleteRow(this.props.table, index);}}>
{i18next.t("general:Delete")} {i18next.t("general:Delete")}
</Button> </Button>
) );
} }
} }
] ];
return ( return (
<Table scroll={{x: 'max-content'}} rowKey={"ID"} columns={columns} dataSource={this.props.table} size="middle" bordered pagination={false} <Table scroll={{x: "max-content"}} rowKey={"ID"} columns={columns} dataSource={this.props.table} size="middle" bordered pagination={false}
title={() => ( title={() => (
<div> <div>
{i18next.t("user:WebAuthn credentials")}&nbsp;&nbsp;&nbsp;&nbsp; {i18next.t("user:WebAuthn credentials")}&nbsp;&nbsp;&nbsp;&nbsp;
<Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => {this.registerWebAuthn()}}>{i18next.t("general:Add")}</Button> <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => {this.registerWebAuthn();}}>
{i18next.t("general:Add")}
</Button>
</div> </div>
)} )}
/>) />
);
} }
deleteRow(table, i) { deleteRow(table, i) {
@ -57,7 +61,7 @@ class WebAuthnCredentialTable extends React.Component {
registerWebAuthn() { registerWebAuthn() {
UserWebauthnBackend.registerWebauthnCredential().then((res) => { UserWebauthnBackend.registerWebauthnCredential().then((res) => {
if (res.msg === "") { if (res.msg === "") {
Setting.showMessage("success", `Successfully added webauthn credentials`); Setting.showMessage("success", "Successfully added webauthn credentials");
} else { } else {
Setting.showMessage("error", res.msg); Setting.showMessage("error", res.msg);
} }

View File

@ -50,7 +50,7 @@ import CustomGithubCorner from "../CustomGithubCorner";
import {CountDownInput} from "../common/CountDownInput"; import {CountDownInput} from "../common/CountDownInput";
import BilibiliLoginButton from "./BilibiliLoginButton"; import BilibiliLoginButton from "./BilibiliLoginButton";
const { TabPane } = Tabs; const {TabPane} = Tabs;
class LoginPage extends React.Component { class LoginPage extends React.Component {
constructor(props) { constructor(props) {
@ -475,14 +475,14 @@ class LoginPage extends React.Component {
<Button <Button
type="primary" type="primary"
htmlType="submit" htmlType="submit"
style={{width: "100%", marginBottom: '5px'}} style={{width: "100%", marginBottom: "5px"}}
disabled={!application.enablePassword} disabled={!application.enablePassword}
> >
{i18next.t("login:Sign In")} {i18next.t("login:Sign In")}
</Button> </Button>
) : ) :
( (
<Button type="primary" style={{width: "100%", marginBottom: '5px'}} onClick={() => this.signInWithWebAuthn()}> <Button type="primary" style={{width: "100%", marginBottom: "5px"}} onClick={() => this.signInWithWebAuthn()}>
{i18next.t("login:Sign in with WebAuthn")} {i18next.t("login:Sign in with WebAuthn")}
</Button> </Button>
) )
@ -639,13 +639,13 @@ class LoginPage extends React.Component {
} }
credentialRequestOptions.publicKey.challenge = UserWebauthnBackend.webAuthnBufferDecode(credentialRequestOptions.publicKey.challenge); credentialRequestOptions.publicKey.challenge = UserWebauthnBackend.webAuthnBufferDecode(credentialRequestOptions.publicKey.challenge);
credentialRequestOptions.publicKey.allowCredentials.forEach(function (listItem) { credentialRequestOptions.publicKey.allowCredentials.forEach(function(listItem) {
listItem.id = UserWebauthnBackend.webAuthnBufferDecode(listItem.id); listItem.id = UserWebauthnBackend.webAuthnBufferDecode(listItem.id);
}); });
return navigator.credentials.get({ return navigator.credentials.get({
publicKey: credentialRequestOptions.publicKey publicKey: credentialRequestOptions.publicKey
}) });
}) })
.then((assertion) => { .then((assertion) => {
let authData = assertion.response.authenticatorData; let authData = assertion.response.authenticatorData;
@ -670,7 +670,7 @@ class LoginPage extends React.Component {
}) })
.then(res => res.json()).then((res) => { .then(res => res.json()).then((res) => {
if (res.msg === "") { if (res.msg === "") {
Setting.showMessage("success", `Successfully logged in with webauthn credentials`); Setting.showMessage("success", "Successfully logged in with webauthn credentials");
Setting.goToLink("/"); Setting.goToLink("/");
} else { } else {
Setting.showMessage("error", res.msg); Setting.showMessage("error", res.msg);
@ -679,7 +679,7 @@ class LoginPage extends React.Component {
.catch(error => { .catch(error => {
Setting.showMessage("error", `Failed to connect to server: ${error}`); Setting.showMessage("error", `Failed to connect to server: ${error}`);
}); });
}) });
} }
renderPasswordOrCodeInput() { renderPasswordOrCodeInput() {
@ -707,23 +707,21 @@ class LoginPage extends React.Component {
disabled={!application.enablePassword} disabled={!application.enablePassword}
/> />
</Form.Item> </Form.Item>
) );
} }
} }
renderMethodChoiceBox(){ renderMethodChoiceBox() {
let application = this.getApplicationObj(); let application = this.getApplicationObj();
if (application.enableWebAuthn) { if (application.enableWebAuthn) {
return ( return (
<div> <div>
<Tabs defaultActiveKey="password" onChange={(key)=>{this.setState({loginMethod: key})}} centered> <Tabs defaultActiveKey="password" onChange={(key) => {this.setState({loginMethod: key});}} centered>
<TabPane tab={i18next.t("login:Password")} key="password"> <TabPane tab={i18next.t("login:Password")} key="password" />
</TabPane> <TabPane tab={"WebAuthn"} key="webAuthn" />
<TabPane tab={"WebAuthn"} key="webAuthn">
</TabPane>
</Tabs> </Tabs>
</div> </div>
) );
} }
} }

View File

@ -30,7 +30,7 @@ export function registerWebauthnCredential() {
} }
return navigator.credentials.create({ return navigator.credentials.create({
publicKey: credentialCreationOptions.publicKey publicKey: credentialCreationOptions.publicKey
}) });
}) })
.then((credential) => { .then((credential) => {
let attestationObject = credential.response.attestationObject; let attestationObject = credential.response.attestationObject;
@ -50,18 +50,19 @@ export function registerWebauthnCredential() {
}) })
}) })
.then(res => res.json()); .then(res => res.json());
}) });
} }
export function deleteUserWebAuthnCredential(credentialID) { export function deleteUserWebAuthnCredential(credentialID) {
let form = new FormData() let form = new FormData();
form.append("credentialID", credentialID) form.append("credentialID", credentialID);
return fetch(`${Setting.ServerUrl}/api/webauthn/delete-credential`, { return fetch(`${Setting.ServerUrl}/api/webauthn/delete-credential`, {
method: "POST", method: "POST",
credentials: "include", credentials: "include",
body: form, body: form,
dataType: "text" dataType: "text"
}).then(res => res.json()) }).then(res => res.json());
} }
// Base64 to ArrayBuffer // Base64 to ArrayBuffer
@ -74,5 +75,5 @@ export function webAuthnBufferEncode(value) {
return btoa(String.fromCharCode.apply(null, new Uint8Array(value))) return btoa(String.fromCharCode.apply(null, new Uint8Array(value)))
.replace(/\+/g, "-") .replace(/\+/g, "-")
.replace(/\//g, "_") .replace(/\//g, "_")
.replace(/=/g, "");; .replace(/=/g, "");
} }