From a6a4ceaac4c8fce03862029f7ca2a4674f3cedca Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Sun, 19 Jun 2022 21:14:19 +0200 Subject: [PATCH] add dev login --- app/auth/login.tsx | 34 ++++++++++++++++++-- app/dashboard/dashboard.tsx | 24 ++++++++++---- app/routes/auth/dev.tsx | 10 ++++++ app/services/auth.server.ts | 19 +++++++++++ app/shared/db/user.server.ts | 12 +++++++ app/shared/design-system/components/menu.tsx | 1 - package.json | 1 + yarn.lock | 9 +++++- 8 files changed, 100 insertions(+), 10 deletions(-) create mode 100644 app/routes/auth/dev.tsx diff --git a/app/auth/login.tsx b/app/auth/login.tsx index 54bf211702..83fcfcddeb 100644 --- a/app/auth/login.tsx +++ b/app/auth/login.tsx @@ -1,9 +1,10 @@ import { LinksFunction, MetaFunction } from "@remix-run/node"; import { Form } from "@remix-run/react"; -import { Button, Card, Flex, Heading } from "~/shared/design-system"; +import { useState } from "react"; +import { Button, Card, Flex, Heading, TextField } from "~/shared/design-system"; import interStyles from "~/shared/font-faces/inter.css"; -import { GoogleIcon, GithubIcon } from "~/shared/icons"; +import { GoogleIcon, GithubIcon, CommitIcon } from "~/shared/icons"; import loginStyles from "./login.css"; export const links: LinksFunction = () => { @@ -24,6 +25,8 @@ export const meta: MetaFunction = () => { }; export const Login = () => { + const [devLoginClicked, setDevLoginClicked] = useState(false); + return ( { + {process.env.NODE_ENV === "development" && ( + <> + {devLoginClicked ? ( +
+ + + ) : ( + + )} + + )} diff --git a/app/dashboard/dashboard.tsx b/app/dashboard/dashboard.tsx index 1f970e8fc7..8f277c8700 100644 --- a/app/dashboard/dashboard.tsx +++ b/app/dashboard/dashboard.tsx @@ -1,6 +1,8 @@ import { useState } from "react"; import { Form, useActionData, useTransition } from "@remix-run/react"; import { useNavigate } from "react-router-dom"; +import * as Avatar from "@radix-ui/react-avatar"; + import { Flex, Card, @@ -34,8 +36,16 @@ export const links = () => { ]; }; -export const Avatar = styled("img", { +const StyledFallback = styled(Avatar.Fallback, { + display: "flex", + alignItems: "center", + justifyContent: "center", + background: "white", + fontSize: 15, + lineHeight: 1, + fontWeight: 500, width: "$5", + height: "$5", borderRadius: "50%", }); @@ -73,11 +83,13 @@ export const Dashboard = ({ projects = [], config, user }: DashboardProps) => { diff --git a/app/routes/auth/dev.tsx b/app/routes/auth/dev.tsx new file mode 100644 index 0000000000..ea6fa30c4c --- /dev/null +++ b/app/routes/auth/dev.tsx @@ -0,0 +1,10 @@ +import { ActionFunction } from "@remix-run/node"; +import config from "~/config"; +import { authenticator } from "~/services/auth.server"; + +export const action: ActionFunction = ({ request }) => { + return authenticator.authenticate("dev", request, { + successRedirect: config.dashboardPath, + failureRedirect: config.loginPath, + }); +}; diff --git a/app/services/auth.server.ts b/app/services/auth.server.ts index 522a1b592c..9c156f0aa8 100644 --- a/app/services/auth.server.ts +++ b/app/services/auth.server.ts @@ -1,10 +1,12 @@ import { User } from "@prisma/client"; import { Authenticator } from "remix-auth"; +import { FormStrategy } from "remix-auth-form"; import { GitHubStrategy } from "remix-auth-github"; import { GoogleStrategy } from "remix-auth-google"; import config from "~/config"; import { sessionStorage } from "~/services/session.server"; import { + createOrLoginWithDev, createOrLoginWithGithub, createOrLoginWithGoogle, } from "~/shared/db/user.server"; @@ -48,3 +50,20 @@ if (process.env.GH_CLIENT_ID && process.env.GH_CLIENT_SECRET) { authenticator.use(github, "github"); authenticator.use(google, "google"); } + +if (process.env.NODE_ENV === "development") { + authenticator.use( + new FormStrategy(async ({ form }) => { + const secret = form.get("secret"); + console.log(secret === process.env.AUTH_SECRET); + if (secret === process.env.AUTH_SECRET) { + const user = await createOrLoginWithDev(secret); + console.log(user); + return user; + } + + throw new Error("Wrong code"); + }), + "dev" + ); +} diff --git a/app/shared/db/user.server.ts b/app/shared/db/user.server.ts index 7cebeab564..b87f24b75c 100644 --- a/app/shared/db/user.server.ts +++ b/app/shared/db/user.server.ts @@ -63,3 +63,15 @@ export const createOrLoginWithGoogle = async ( const newUser = await genericCreateAccount(userData, userId); return newUser; }; + +export const createOrLoginWithDev = async (userId: string): Promise => { + const userData = { + email: "hello@webstudio.is/", + username: "admin", + image: "", + provider: "dev", + }; + + const newUser = await genericCreateAccount(userData, userId); + return newUser; +}; diff --git a/app/shared/design-system/components/menu.tsx b/app/shared/design-system/components/menu.tsx index a2768e88c0..5629a26777 100644 --- a/app/shared/design-system/components/menu.tsx +++ b/app/shared/design-system/components/menu.tsx @@ -19,7 +19,6 @@ export const baseItemCss = css({ whiteSpace: "nowrap", height: "$5", px: "$5", - cursor: "pointer", }); export const itemCss = css(baseItemCss, { diff --git a/package.json b/package.json index dd4b4ae77c..0869e8d6e9 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "react-router-dom": "^6.2.2", "react-use": "^17.3.2", "remix-auth": "^3.2.2", + "remix-auth-form": "^1.1.2", "remix-auth-github": "^1.1.1", "remix-auth-google": "^1.1.0", "slugify": "^1.6.5" diff --git a/yarn.lock b/yarn.lock index 78f990bb9c..69e01592e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12141,6 +12141,13 @@ remark-squeeze-paragraphs@4.0.0: dependencies: mdast-squeeze-paragraphs "^4.0.0" +remix-auth-form@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/remix-auth-form/-/remix-auth-form-1.1.2.tgz#6127f0d064498e366c2d09f4c08a633f92eda1af" + integrity sha512-sQXvmQH6aBoCAy12PcG0r6Sfg+JlMbVEeR3SlWK9R8SXp8TAGks20TO5ofL7dgw38o228eSvwSa3y0z0PDCEDw== + dependencies: + remix-auth "^3.1.0" + remix-auth-github@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/remix-auth-github/-/remix-auth-github-1.1.1.tgz#8b5a58bd28678becaf85d2187b74b5b7ad805aa4" @@ -12166,7 +12173,7 @@ remix-auth-oauth2@^1.0.0, remix-auth-oauth2@^1.1.0: remix-auth "^3.2.2" uuid "^8.3.2" -remix-auth@^3.0.0, remix-auth@^3.2.2: +remix-auth@^3.0.0, remix-auth@^3.1.0, remix-auth@^3.2.2: version "3.2.2" resolved "https://registry.yarnpkg.com/remix-auth/-/remix-auth-3.2.2.tgz#8941a6b57cd523872b7aacf200976d77c055a9f7" integrity sha512-VtzkfxeXbnXilupRTZkP40aik4vFSdwwRT96mbq0UBDMqHVRfQ7h9Y51HFrTufHJZEfAdkCopedMVvm0vQYKag==