Skip to content

Commit

Permalink
Improve TokenEditPage
Browse files Browse the repository at this point in the history
  • Loading branch information
@hsluoyz
hsluoyz committed Dec 21, 2023
1 parent 6308164 commit 79159dc
Showing 1 changed file with 43 additions and 18 deletions.
61 changes: 43 additions & 18 deletions web/src/TokenEditPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ import {Button, Card, Col, Input, Row} from "antd";
import * as TokenBackend from "./backend/TokenBackend";
import * as Setting from "./Setting";
import i18next from "i18next";
import copy from "copy-to-clipboard";

const {TextArea} = Input;

class TokenEditPage extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -70,6 +73,7 @@ class TokenEditPage extends React.Component {
}

renderToken() {
const editorWidth = Setting.isMobile() ? 22 : 9;
return (
<Card size="small" title={
<div>
Expand All @@ -81,7 +85,7 @@ class TokenEditPage extends React.Component {
} style={(Setting.isMobile()) ? {margin: "5px"} : {}} type="inner">
<Row style={{marginTop: "10px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("general:Name")}:
{Setting.getLabel(i18next.t("general:Name"), i18next.t("general:Name - Tooltip"))} :
</Col>
<Col span={22} >
<Input value={this.state.token.name} onChange={e => {
Expand All @@ -91,7 +95,7 @@ class TokenEditPage extends React.Component {
</Row>
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("general:Application")}:
{Setting.getLabel(i18next.t("general:Application"), i18next.t("general:Application - Tooltip"))} :
</Col>
<Col span={22} >
<Input value={this.state.token.application} onChange={e => {
Expand All @@ -101,7 +105,7 @@ class TokenEditPage extends React.Component {
</Row>
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("general:Organization")}:
{Setting.getLabel(i18next.t("general:Organization"), i18next.t("general:Organization - Tooltip"))} :
</Col>
<Col span={22} >
<Input disabled={!Setting.isAdminUser(this.props.account)} value={this.state.token.organization} onChange={e => {
Expand All @@ -111,7 +115,7 @@ class TokenEditPage extends React.Component {
</Row>
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("general:User")}:
{Setting.getLabel(i18next.t("general:User"), i18next.t("general:User - Tooltip"))} :
</Col>
<Col span={22} >
<Input value={this.state.token.user} onChange={e => {
Expand All @@ -121,7 +125,7 @@ class TokenEditPage extends React.Component {
</Row>
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("token:Authorization code")}:
{Setting.getLabel(i18next.t("token:Authorization code"), i18next.t("token:Authorization code - Tooltip"))} :
</Col>
<Col span={22} >
<Input value={this.state.token.code} onChange={e => {
Expand All @@ -131,17 +135,7 @@ class TokenEditPage extends React.Component {
</Row>
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("token:Access token")}:
</Col>
<Col span={22} >
<Input value={this.state.token.accessToken} onChange={e => {
this.updateTokenField("accessToken", e.target.value);
}} />
</Col>
</Row>
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("token:Expires in")}:
{Setting.getLabel(i18next.t("token:Expires in"), i18next.t("token:Expires in - Tooltip"))} :
</Col>
<Col span={22} >
<Input value={this.state.token.expiresIn} onChange={e => {
Expand All @@ -151,7 +145,7 @@ class TokenEditPage extends React.Component {
</Row>
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("provider:Scope")}:
{Setting.getLabel(i18next.t("provider:Scope"), i18next.t("provider:Scope - Tooltip"))}
</Col>
<Col span={22} >
<Input value={this.state.token.scope} onChange={e => {
Expand All @@ -161,14 +155,45 @@ class TokenEditPage extends React.Component {
</Row>
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("token:Token type")}:
{Setting.getLabel(i18next.t("token:Token type"), i18next.t("token:Token type - Tooltip"))} :
</Col>
<Col span={22} >
<Input value={this.state.token.tokenType} onChange={e => {
this.updateTokenField("tokenType", e.target.value);
}} />
</Col>
</Row>
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("token:Access token"), i18next.t("token:Access token - Tooltip"))} :
</Col>
<Col span={editorWidth} >
<Button type="primary" style={{marginRight: "10px", marginBottom: "10px"}} disabled={this.state.token.accessToken === ""} onClick={() => {
copy(this.state.token.accessToken);
Setting.showMessage("success", i18next.t("general:Copied to clipboard successfully"));
}}
>
{i18next.t("token:Copy access token")}
</Button>
<TextArea autoSize={{minRows: 30, maxRows: 30}} value={this.state.token.accessToken} onChange={e => {
this.updateTokenField("accessToken", e.target.value);
}} />
</Col>
<Col span={1} />
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("token:Parsing result"), i18next.t("token:Parsing result - Tooltip"))} :
</Col>
<Col span={editorWidth} >
<Button type="primary" style={{marginRight: "10px", marginBottom: "10px"}} disabled={this.state.token.accessToken === ""} onClick={() => {
copy(this.state.token.accessToken);
Setting.showMessage("success", i18next.t("general:Copied to clipboard successfully"));
}}
>
{i18next.t("token:Copy parsing result")}
</Button>
<TextArea autoSize={{minRows: 30, maxRows: 30}} value={this.state.token.accessToken} onChange={e => {}} />
</Col>
</Row>
</Card>
);
}
Expand Down

0 comments on commit 79159dc

Please sign in to comment.