feat: github token for popup page

src/_locales/en/messages.json

@@ -20,6 +20,9 @@
   "global_btn_goBack": {
     "message": "Go back"
   },
+  "global_btn_setToken": {
+    "message": "set token"
+  },
   "global_developer": {
     "message": "Develpoer"
   },

src/_locales/zh_CN/messages.json

@@ -20,6 +20,9 @@
   "global_btn_goBack": {
     "message": "返回"
   },
+  "global_btn_setToken": {
+    "message": "设置token"
+  },
   "global_developer": {
     "message": "开发者"
   },

src/api/github.ts

@@ -1,7 +1,15 @@
 import { Octokit } from "@octokit/core";
+import { loadMetaData } from '../utils/metadata';
 
 export const getConfigFromGithub = async (owner: string, repo: string) => {
-  const octokit = new Octokit();
+  const metaData=await loadMetaData();
+  let octokit;
+  if(metaData.token!==""){
+    octokit = new Octokit({ auth:metaData.token });
+  }
+  else{
+    octokit = new Octokit();
+  }
   try {
     const response = await octokit.request('GET /repos/{owner}/{repo}/contents/.github/hypertrons.json', { owner, repo });
     const res = response.data as any;

src/components/OptionsPage/index.tsx

@@ -47,7 +47,6 @@ const OptionsPage: React.FC = () => {
       if(temp.token!==""){
         setToken(temp.token);
       }
-      console.log("init meta")
     }
     initMetaData();
   }, []);
@@ -301,7 +300,7 @@ const OptionsPage: React.FC = () => {
                     width:120
                   }}
                 >
-                  设置token
+                  {getMessageI18n("global_btn_setToken")}
                 </DefaultButton>
               </Stack>
             </PivotItem>

src/components/PopupPage/index.tsx

@@ -1,27 +1,39 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Stack
+  DefaultButton,
+  Image, ImageFit, PivotItem,
+  Stack, Text,
 } from 'office-ui-fabric-react';
 import { initializeIcons } from '@uifabric/icons';
 import './index.css';
 import Settings,{ loadSettings } from '../../utils/settings';
+import MetaData, { loadMetaData } from '../../utils/metadata';
+import { getMessageI18n } from '../../utils/utils';
 
 initializeIcons();
 
 const PopupPage: React.FC = () => {
 
   const [settings,setSettings]= useState(new Settings());
+  const [metaData, setMetaData] = useState(new MetaData());
   const [inited, setInited] = useState(false);
 
   useEffect(() => {
     const initSettings=async ()=> {
       const temp=await loadSettings();
       setSettings(temp);
-      setInited(true);
     }
     initSettings();
   },[settings]);
 
+  useEffect(() => {
+    const initMetaData = async () => {
+      const temp=await loadMetaData();
+      setMetaData(temp);
+      setInited(true);
+    }
+    initMetaData();
+  }, []);
 
   if(!inited){
     return (<div/>);
@@ -30,6 +42,54 @@ const PopupPage: React.FC = () => {
   return(
       <Stack horizontalAlign="center">
         <h1>Hypertrons</h1>
+        <Stack
+          horizontalAlign="space-around"
+          verticalAlign='center'
+          style={{ margin: "5px", padding: "3px" }}
+          tokens={{
+            childrenGap: 10
+          }}
+        >
+          {
+            metaData.token!==""&&
+            <Stack
+              horizontal
+              verticalAlign="center"
+              style={{
+                margin: "5px", padding: "3px", width: "300px"
+              }}
+              tokens={{
+                childrenGap: 5
+              }}
+            >
+              <Image
+                width={75}
+                height={75}
+                src={metaData.avatar}
+                imageFit={ImageFit.centerCover}
+              />
+              <Text
+                variant="large"
+                style={{marginLeft:25,maxWidth:200,wordWrap:"break-word"}}
+              >
+                {metaData.name}
+              </Text>
+            </Stack>
+          }
+          {
+            metaData.token === "" &&
+            <DefaultButton
+              onClick={()=>{
+                chrome.runtime.openOptionsPage();
+              }}
+              style={{
+                width:120
+              }}
+            >
+              {getMessageI18n("global_btn_setToken")}
+            </DefaultButton>
+          }
+        </Stack>
       </Stack>
   )
 }