From 5350966785cde870891b743c249377cd14bb1430 Mon Sep 17 00:00:00 2001 From: Ivan Li Date: Sat, 10 Jul 2021 18:52:45 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 ++ .vscode/launch.json | 3 +- package-lock.json | 15 +++++---- package.json | 2 +- src/commons/auth/auth.provider.tsx | 45 ++++++++++++++++++++++++++ src/commons/auth/login.tsx | 51 ++++++++++++++++++++++++++++++ src/generated/graphql.schema.json | 16 ---------- src/generated/graphql.tsx | 1 - src/index.tsx | 31 ++++++++++-------- 9 files changed, 125 insertions(+), 41 deletions(-) create mode 100644 src/commons/auth/auth.provider.tsx create mode 100644 src/commons/auth/login.tsx diff --git a/.gitignore b/.gitignore index 4d29575..39ac285 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.vscode/chrome \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json index 5603df5..c114f8c 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -8,10 +8,9 @@ "name": "chrome", "type": "chrome", "request": "launch", - "reAttach": true, "url": "http://fennec.localhost/", "webRoot": "${workspaceFolder}", - "userDataDir": "/Users/ivan/Projects/.chrome" + "userDataDir": ".vscode/chrome" } ] } diff --git a/package-lock.json b/package-lock.json index f83615d..f5bbee5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,7 +34,7 @@ "formik-material-ui": "^3.0.1", "formik-material-ui-pickers": "^0.0.12", "graphql": "^15.5.0", - "graphql-scalars": "^1.9.3", + "graphql-scalars": "^1.10.0", "material-ui-confirm": "^2.1.2", "notistack": "^1.0.6", "ramda": "^0.27.1", @@ -11326,9 +11326,9 @@ } }, "node_modules/graphql-scalars": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.9.3.tgz", - "integrity": "sha512-vP71Og4ALfe3PCk6T+B7LcJHH55gL0tYidmAE/kWT3ScE2FUCFS7iiMXFQXjCaYLi8nZcRLn9HuejGcjZ8kRug==", + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.10.0.tgz", + "integrity": "sha512-LONlj8FfhA2iGpkZJWf5e4PVAHXxnZEHSOEvowLYvNXl/TNnhIck8VmE+lren/aa6GKrG+lZufo5lgnyjxcF6g==", "dependencies": { "tslib": "~2.2.0" }, @@ -28129,6 +28129,7 @@ "integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==", "requires": { "@babel/runtime": "^7.6.0", + "@date-io/core": "1.x", "@types/styled-jsx": "^2.2.8", "clsx": "^1.0.2", "react-transition-group": "^4.0.0", @@ -34355,9 +34356,9 @@ } }, "graphql-scalars": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.9.3.tgz", - "integrity": "sha512-vP71Og4ALfe3PCk6T+B7LcJHH55gL0tYidmAE/kWT3ScE2FUCFS7iiMXFQXjCaYLi8nZcRLn9HuejGcjZ8kRug==", + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.10.0.tgz", + "integrity": "sha512-LONlj8FfhA2iGpkZJWf5e4PVAHXxnZEHSOEvowLYvNXl/TNnhIck8VmE+lren/aa6GKrG+lZufo5lgnyjxcF6g==", "requires": { "tslib": "~2.2.0" }, diff --git a/package.json b/package.json index 026cd00..d635dc0 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "formik-material-ui": "^3.0.1", "formik-material-ui-pickers": "^0.0.12", "graphql": "^15.5.0", - "graphql-scalars": "^1.9.3", + "graphql-scalars": "^1.10.0", "material-ui-confirm": "^2.1.2", "notistack": "^1.0.6", "ramda": "^0.27.1", diff --git a/src/commons/auth/auth.provider.tsx b/src/commons/auth/auth.provider.tsx new file mode 100644 index 0000000..945159a --- /dev/null +++ b/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(); + const [refreshToken, setRefreshToken] = useState(); + const [account, setAccount] = useState(); + + const login = (dto: any) => { + setAccessToken(dto.accessToken); + setRefreshToken(dto.refreshToken); + setAccount(dto.account); + }; + + return ( + + {children} + {/* {accessToken ? null : } */} + + ); +}; diff --git a/src/commons/auth/login.tsx b/src/commons/auth/login.tsx new file mode 100644 index 0000000..ddbea9d --- /dev/null +++ b/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(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 ( + + ); +}; diff --git a/src/generated/graphql.schema.json b/src/generated/graphql.schema.json index 3db904b..13deebf 100644 --- a/src/generated/graphql.schema.json +++ b/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, diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx index ce2e159..736d229 100644 --- a/src/generated/graphql.tsx +++ b/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; diff --git a/src/index.tsx b/src/index.tsx index 29e530b..742e799 100644 --- a/src/index.tsx +++ b/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( - - - - - +ReactDOM.render( + + + + + + - - - - - , - document.getElementById("root") - ); + + + + + + , + document.getElementById("root") +); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log))