get auth token on profile page (#4703)

* get auth token on profile page

* [user settings] web api auth token: fixup & improvement

Co-authored-by: lian <lian@seafile.com>
Co-authored-by: llj <lingjun.li1@gmail.com>

frontend/src/components/user-settings/web-api-auth-token.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
+
+class WebAPIAuthToken extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      authToken: '******'
+    };
+  }
+
+  getAuthToken = () => {
+    seafileAPI.getAuthTokenBySession().then((res) => {
+      this.setState({
+        authToken: res.data.token
+      });
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  render() {
+    const { authToken } = this.state;
+    return (
+      <div id="get-auth-token" className="setting-item">
+        <h3 className="setting-item-heading">{gettext('Web API Auth Token')}</h3>
+        <div className="d-flex align-items-center">
+          <input type="text" readOnly={true} value={authToken} className="form-control mr-2 col-sm-5" />
+          <button className="btn btn-outline-primary" onClick={this.getAuthToken}>{gettext('Get')}</button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WebAPIAuthToken;

frontend/src/settings.js

@@ -9,6 +9,7 @@ import CommonToolbar from './components/toolbar/common-toolbar';
 import SideNav from './components/user-settings/side-nav';
 import UserAvatarForm from './components/user-settings/user-avatar-form';
 import UserBasicInfoForm from './components/user-settings/user-basic-info-form';
+import WebAPIAuthToken from './components/user-settings/web-api-auth-token';
 import WebdavPassword from './components/user-settings/webdav-password';
 import LanguageSetting from './components/user-settings/language-setting';
 import ListInAddressBook from './components/user-settings/list-in-address-book';
@@ -25,8 +26,9 @@ import './css/user-settings.css';
 
 const {
   canUpdatePassword, passwordOperationText,
-  enableAddressBook,
+  enableGetAuthToken,
   enableWebdavSecret,
+  enableAddressBook,
   twoFactorAuthEnabled,
   enableWechatWork,
   enableDingtalk,
@@ -40,6 +42,7 @@ class Settings extends React.Component {
     this.sideNavItems = [
       {show: true, href: '#user-basic-info', text: gettext('Profile')},
       {show: canUpdatePassword, href: '#update-user-passwd', text: gettext('Password')},
+      {show: enableGetAuthToken, href: '#get-auth-token', text: gettext('Web API Auth Token')},
       {show: enableWebdavSecret, href: '#update-webdav-passwd', text: gettext('WebDav Password')},
       {show: enableAddressBook, href: '#list-in-address-book', text: gettext('Global Address Book')},
       {show: true, href: '#lang-setting', text: gettext('Language')},
@@ -129,9 +132,11 @@ class Settings extends React.Component {
                   <a href={`${siteRoot}accounts/password/change/`} className="btn btn-outline-primary">{passwordOperationText}</a>
                 </div>
                 }
+
+                {enableGetAuthToken && <WebAPIAuthToken />}
                 {enableWebdavSecret && <WebdavPassword />}
                 {enableAddressBook && this.state.userInfo &&
-                <ListInAddressBook userInfo={this.state.userInfo} updateUserInfo={this.updateUserInfo} />}
+                  <ListInAddressBook userInfo={this.state.userInfo} updateUserInfo={this.updateUserInfo} />}
                 <LanguageSetting />
                 {isPro && <EmailNotice />}
                 {twoFactorAuthEnabled && <TwoFactorAuthentication />}