feat: 登录界面

src/commons/auth/auth.provider.tsx

@@ -0,0 +1,45 @@
+import { createContext, useContext, useState } from "react";
+import { FC } from "react";
+import { Login } from "./login";
+
+export interface AuthContext {
+  accessToken: string | undefined;
+  setAccessToken: (token: string) => void;
+  setRefreshToken: (token: string) => void;
+  refreshToken: string | undefined;
+  login: (dto: any) => void;
+  account?: any;
+  setAccount: (dto: any) => void;
+}
+const Context = createContext({} as AuthContext);
+
+export const useAuth = () => useContext(Context);
+
+export const AuthProvider: FC = ({ children }) => {
+  const [accessToken, setAccessToken] = useState<string>();
+  const [refreshToken, setRefreshToken] = useState<string>();
+  const [account, setAccount] = useState<any>();
+
+  const login = (dto: any) => {
+    setAccessToken(dto.accessToken);
+    setRefreshToken(dto.refreshToken);
+    setAccount(dto.account);
+  };
+
+  return (
+    <Context.Provider
+      value={{
+        accessToken,
+        setAccessToken,
+        refreshToken,
+        setRefreshToken,
+        login,
+        account,
+        setAccount,
+      }}
+    >
+      {children}
+      {/* {accessToken ? null : <Login />} */}
+    </Context.Provider>
+  );
+};

src/commons/auth/login.tsx

@@ -0,0 +1,51 @@
+import { makeStyles } from "@material-ui/core";
+import { FC, useEffect, useRef } from "react";
+import { useAuth } from "./auth.provider";
+const useStyles = makeStyles({
+  iframe: {
+    height: "300px",
+    width: "500px",
+    position: "absolute",
+    top: "100px",
+    left: "50%",
+    transform: "translateX(-50%)",
+  },
+});
+
+export const Login: FC = () => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const { login } = useAuth();
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) {
+      return;
+    }
+    let messagePort: MessagePort;
+    const onLoad = (ev: MessageEvent) => {
+      if (ev.data !== "init-channel") {
+        return;
+      }
+      messagePort = ev.ports?.[0] as MessagePort;
+      messagePort.onmessage = (ev: MessageEvent) => {
+        if (ev.data?.type === "logged") {
+          login(ev.data.payload);
+        }
+      };
+    };
+    window.addEventListener("message", onLoad);
+
+    return () => {
+      window.removeEventListener("message", onLoad);
+    };
+  }, [login]);
+
+  const classes = useStyles();
+  return (
+    <iframe
+      ref={iframeRef}
+      className={classes.iframe}
+      title="Auth"
+      src="http://user.localhost/auth/login"
+    ></iframe>
+  );
+};

src/generated/graphql.schema.json

@@ -1949,22 +1949,6 @@
         "description": null,
         "fields": null,
         "inputFields": [
-          {
-            "name": "projectId",
-            "description": null,
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
-            },
-            "defaultValue": null,
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
           {
             "name": "branch",
             "description": null,

src/generated/graphql.tsx

@@ -255,7 +255,6 @@ export enum TaskStatuses {
 }
 
 export type UpdatePipelineInput = {
-  projectId: Scalars['String'];
   branch: Scalars['String'];
   name: Scalars['String'];
   workUnitMetadata: WorkUnitMetadataInput;

src/index.tsx

@@ -10,24 +10,27 @@ import DateFnsUtils from "@date-io/date-fns";
 import zhLocale from "date-fns/locale/zh-CN";
 import { ConfirmProvider } from "material-ui-confirm";
 import { SnackbarProvider } from "notistack";
-import Router from './commons/route/router';
+import Router from "./commons/route/router";
+import { AuthProvider } from "./commons/auth/auth.provider";
 
-  ReactDOM.render(
-    <React.StrictMode>
-      <ConfirmProvider>
-        <SnackbarProvider maxSnack={5}>
-          <FennecApolloClientProvider>
-            <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
+ReactDOM.render(
+  <React.StrictMode>
+    <ConfirmProvider>
+      <SnackbarProvider maxSnack={5}>
+        <FennecApolloClientProvider>
+          <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
+            <AuthProvider>
               <Router>
                 <App />
               </Router>
-            </MuiPickersUtilsProvider>
-          </FennecApolloClientProvider>
-        </SnackbarProvider>
-      </ConfirmProvider>
-    </React.StrictMode>,
-    document.getElementById("root")
-  );
+            </AuthProvider>
+          </MuiPickersUtilsProvider>
+        </FennecApolloClientProvider>
+      </SnackbarProvider>
+    </ConfirmProvider>
+  </React.StrictMode>,
+  document.getElementById("root")
+);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))