add dev login

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 (
     <Flex
       css={{ height: "100vh" }}
@@ -52,6 +55,33 @@ export const Login = () => {
                 </Flex>
               </Button>
             </Form>
+            {process.env.NODE_ENV === "development" && (
+              <>
+                {devLoginClicked ? (
+                  <Form action="/auth/dev" method="post">
+                    <TextField
+                      css={{ width: "100%", flexGrow: 1 }}
+                      name="secret"
+                      type="text"
+                      variant="ghost"
+                      minLength={2}
+                      required
+                      autoFocus
+                    />
+                  </Form>
+                ) : (
+                  <Button
+                    onClick={() => setDevLoginClicked(true)}
+                    css={{ width: "100%" }}
+                  >
+                    <Flex gap="1" align="center">
+                      <CommitIcon></CommitIcon>
+                      Dev Login
+                    </Flex>
+                  </Button>
+                )}
+              </>
+            )}
           </Flex>
         </Flex>
       </Card>

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) => {
             <DropdownMenuTrigger asChild>
               <Button variant="raw" aria-label="Menu Button">
                 <Flex gap="1" align="center">
-                  {user?.image ? (
-                    <Avatar src={user?.image} alt="Open menu" />
-                  ) : (
-                    <UserIcon color="white" />
-                  )}
+                  <Avatar.Root>
+                    {user?.image && <Avatar.Image src={user?.image} />}
+                    <StyledFallback delayMs={500}>
+                      {(user?.username || "X").charAt(0).toLocaleUpperCase()}
+                    </StyledFallback>
+                  </Avatar.Root>
+
                   <ChevronDownIcon width={15} height={15} color="white" />
                 </Flex>
               </Button>

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,
+  });
+};

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"
+  );
+}

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<User> => {
+  const userData = {
+    email: "hello@webstudio.is/",
+    username: "admin",
+    image: "",
+    provider: "dev",
+  };
+
+  const newUser = await genericCreateAccount(userData, userId);
+  return newUser;
+};

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, {

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"

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==