enhance(console): support getting token for swcli login

console/src/assets/fonts/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3410006 */
-  src: url('iconfont.woff2?t=1662710521991') format('woff2'),
-       url('iconfont.woff?t=1662710521991') format('woff'),
-       url('iconfont.ttf?t=1662710521991') format('truetype');
+  src: url('iconfont.woff2?t=1663575449431') format('woff2'),
+       url('iconfont.woff?t=1663575449431') format('woff'),
+       url('iconfont.ttf?t=1663575449431') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-token:before {
+  content: "\e64d";
+}
+
 .icon-pause:before {
   content: "\e61e";
 }

console/src/assets/fonts/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "31904242",
+      "name": "token",
+      "font_class": "token",
+      "unicode": "e64d",
+      "unicode_decimal": 58957
+    },
     {
       "icon_id": "31315261",
       "name": "pause",

console/src/components/Header/index.tsx

@@ -4,6 +4,7 @@ import { Modal, ModalHeader, ModalBody } from 'baseui/modal'
 import { useStyletron } from 'baseui'
 import { headerHeight } from '@/consts'
 import useTranslation from '@/hooks/useTranslation'
+import { useSearchParam } from 'react-use'
 import { createUseStyles } from 'react-jss'
 import { IThemedStyleProps } from '@/theme'
 import { useCurrentThemeType } from '@/hooks/useCurrentThemeType'
@@ -17,6 +18,9 @@ import { useCurrentUserRoles } from '@/hooks/useCurrentUserRoles'
 import { TextLink } from '@/components/Link'
 import classNames from 'classnames'
 import { useAuth } from '@/api/Auth'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
 import IconFont from '../IconFont'
 import Logo from './Logo'
 import Avatar from '../Avatar'
@@ -247,7 +251,7 @@ const useStyles = createUseStyles({
 })
 
 export default function Header() {
-    const [, theme] = useStyletron()
+    const [css, theme] = useStyletron()
     const themeType = useCurrentThemeType()
     const styles = useStyles({ theme, themeType })
     const headerStyles = useHeaderStyles({ theme })
@@ -257,12 +261,14 @@ export default function Header() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const [currentUserRole] = useCurrentUserRoles()
     const [sysRole, setSysRole] = useState('GUEST')
+    const title = !!useSearchParam('token')
 
     const [t] = useTranslation()
     const history = useHistory()
-    const { onLogout } = useAuth()
+    const { token, onLogout } = useAuth()
 
     const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false)
+    const [isShowTokenOpen, setIsShowTokenOpen] = useState(title)
     const handleChangePassword = useCallback(
         async (data: IChangePasswordSchema) => {
             await changePassword(data)
@@ -340,6 +346,17 @@ export default function Header() {
                                 <IconFont type='a-passwordresets' />
                                 <span>{t('Change Password')}</span>
                             </div>
+                            <div
+                                role='button'
+                                tabIndex={0}
+                                className={styles.userMenuItem}
+                                onClick={() => {
+                                    setIsShowTokenOpen(true)
+                                }}
+                            >
+                                <IconFont type='token' />
+                                <span>{t('Get Token')}</span>
+                            </div>
                         </div>
                         <div className={styles.divider} />
                         <div className={styles.userMenuItems}>
@@ -364,6 +381,22 @@ export default function Header() {
                     <PasswordForm currentUser={currentUser} onSubmit={handleChangePassword} />
                 </ModalBody>
             </Modal>
+            <Modal animate closeable onClose={() => setIsShowTokenOpen(false)} isOpen={isShowTokenOpen}>
+                <ModalHeader>{t('Get Token')}</ModalHeader>
+                <ModalBody>
+                    <div className={css({ display: 'flex', marginTop: '10px' })}>
+                        <Input value={token ?? ''} />
+                        <CopyToClipboard
+                            text={token ?? ''}
+                            onCopy={() => {
+                                toaster.positive(t('Copied'), { autoHideDuration: 1000 })
+                            }}
+                        >
+                            <Button>copy</Button>
+                        </CopyToClipboard>
+                    </div>
+                </ModalBody>
+            </Modal>
         </header>
     )
 }

console/src/components/IconFont/index.tsx

@@ -63,6 +63,7 @@ const iconTypes = [
     'view',
     'grid',
     'fullscreen',
+    'token',
 ]
 
 interface IIconFontProps {

console/src/i18n/locales.ts

@@ -345,6 +345,9 @@ const locales0 = {
     'Change Password': {
         en: 'Change Password',
     },
+    'Get Token': {
+        en: 'Get Token',
+    },
     'Password Not Equal': {
         en: 'The passwords you entered do not match',
     },