From 79159dc8096cfd3c48228402d62b501f5bdf7cd5 Mon Sep 17 00:00:00 2001
From: Yang Luo <hsluoyz@qq.com>
Date: Fri, 22 Dec 2023 00:44:34 +0800
Subject: [PATCH] Improve TokenEditPage

---
 web/src/TokenEditPage.js | 61 ++++++++++++++++++++++++++++------------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/web/src/TokenEditPage.js b/web/src/TokenEditPage.js
index fe03bbc3..2b42a324 100644
--- a/web/src/TokenEditPage.js
+++ b/web/src/TokenEditPage.js
@@ -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) {
@@ -70,6 +73,7 @@ class TokenEditPage extends React.Component {
   }
 
   renderToken() {
+    const editorWidth = Setting.isMobile() ? 22 : 9;
     return (
       <Card size="small" title={
         <div>
@@ -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 => {
@@ -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 => {
@@ -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 => {
@@ -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 => {
@@ -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 => {
@@ -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 => {
@@ -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 => {
@@ -161,7 +155,7 @@ 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 => {
@@ -169,6 +163,37 @@ class TokenEditPage extends React.Component {
             }} />
           </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>
     );
   }