Merge pull request #106 from webstudio-is/google-login

app/auth/login.tsx

@@ -33,7 +33,7 @@ export const meta: MetaFunction = () => {
 
 export const Login = ({ errorMessage }: { errorMessage: string }) => {
   const [isDevLogin, setIsDevLogin] = useState(false);
-  const loaderData = useLoaderData();
+  const data = useLoaderData();
 
   return (
     <Flex
@@ -42,9 +42,9 @@ export const Login = ({ errorMessage }: { errorMessage: string }) => {
       align="center"
       justify="center"
     >
-      <Card>
-        <Flex direction="column" gap="2" align="center">
-          <Heading>Login</Heading>
+      <Card size={2}>
+        <Flex direction="column" gap="4" align="center">
+          <Heading size="2">Login</Heading>
           {errorMessage.length ? (
             <Text css={{ textAlign: "center" }} variant="red">
               {errorMessage}
@@ -52,26 +52,35 @@ export const Login = ({ errorMessage }: { errorMessage: string }) => {
           ) : null}
           <Flex gap="2" direction="column" align="center">
             <Form action="/auth/github" method="post">
-              <Button type="submit">
+              <Button
+                size={3}
+                type="submit"
+                disabled={data.isGithubEnabled === false}
+              >
                 <Flex gap="1">
-                  <GithubIcon width="16" />
+                  <GithubIcon width="20" />
                   Login with GitHub
                 </Flex>
               </Button>
             </Form>
             <Form action="/auth/google" method="post">
-              <Button type="submit" disabled>
+              <Button
+                size={3}
+                type="submit"
+                disabled={data.isGoogleEnabled === false}
+              >
                 <Flex gap="1">
-                  <GoogleIcon width="16" />
+                  <GoogleIcon width="20" />
                   Login with Google
                 </Flex>
               </Button>
             </Form>
-            {loaderData.devLogin && (
+            {data.isDevLogin && (
               <>
                 {isDevLogin ? (
                   <Form action="/auth/dev" method="post">
                     <TextField
+                      size={2}
                       css={{ width: "100%", flexGrow: 1 }}
                       name="secret"
                       type="text"
@@ -84,10 +93,11 @@ export const Login = ({ errorMessage }: { errorMessage: string }) => {
                 ) : (
                   <Button
                     onClick={() => setIsDevLogin(true)}
+                    size={3}
                     css={{ width: "100%" }}
                   >
                     <Flex gap="1" align="center">
-                      <CommitIcon></CommitIcon>
+                      <CommitIcon width="20" />
                       Dev Login
                     </Flex>
                   </Button>

app/dashboard/components/card.tsx

@@ -35,10 +35,13 @@ export const SelectProjectCard = ({
   const options = ["", ...projects.map((project) => project.id)];
 
   return (
-    <Card>
-      <Flex direction="column" gap="2">
-        <Heading>Select a project</Heading>
+    <Card size={2}>
+      <Flex direction="column" gap="4">
+        <Heading size="2" css={{ textAlign: "center" }}>
+          Select a project
+        </Heading>
         <Select
+          size={2}
           name="project"
           options={options}
           onChange={setSelectedProject}
@@ -53,6 +56,7 @@ export const SelectProjectCard = ({
           <Form method="post">
             <Flex gap="1">
               <TextField
+                size={2}
                 state={errors ? "invalid" : undefined}
                 name="project"
                 defaultValue={newProject}
@@ -64,6 +68,7 @@ export const SelectProjectCard = ({
                 }}
               />
               <Button
+                size={2}
                 disabled={
                   newProject.length === 0 || transition.state === "submitting"
                 }
@@ -79,7 +84,9 @@ export const SelectProjectCard = ({
             ) : null}
           </Form>
         ) : (
-          <Button onClick={handleOpen}>Open</Button>
+          <Button onClick={handleOpen} size={2}>
+            Open
+          </Button>
         )}
       </Flex>
     </Card>

app/routes/login/index.tsx

@@ -15,7 +15,13 @@ export const loader: LoaderFunction = async ({ request }) => {
     return redirect(config.dashboardPath);
   }
 
-  return { devLogin: process.env.DEV_LOGIN === "true", env };
+  return {
+    isDevLogin: process.env.DEV_LOGIN === "true",
+    env,
+    isGithubEnabled: process.env.GH_CLIENT_ID && process.env.GH_CLIENT_SECRET,
+    isGoogleEnabled:
+      process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET,
+  };
 };
 
 const LoginRoute = () => {

app/services/auth.server.ts

@@ -34,8 +34,8 @@ const github = new GitHubStrategy(
 
 const google = new GoogleStrategy(
   {
-    clientID: "YOUR_CLIENT_ID",
-    clientSecret: "YOUR_CLIENT_SECRET",
+    clientID: process.env.GOOGLE_CLIENT_ID as string,
+    clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
     callbackURL: `${url}${config.googleCallbackPath}`,
   },
   async ({ profile, context }) => {
@@ -51,8 +51,9 @@ export const authenticator = new Authenticator<User>(sessionStorage);
 if (process.env.GH_CLIENT_ID && process.env.GH_CLIENT_SECRET) {
   authenticator.use(github, "github");
 }
-authenticator.use(google, "google");
-
+if (process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET) {
+  authenticator.use(google, "google");
+}
 if (process.env.DEV_LOGIN === "true") {
   authenticator.use(
     new FormStrategy(async ({ form }) => {

app/services/session.server.ts

@@ -3,6 +3,7 @@ import { createCookieSessionStorage } from "@remix-run/node";
 // export the whole sessionStorage object
 export const sessionStorage = createCookieSessionStorage({
   cookie: {
+    maxAge: 60 * 60 * 24 * 30,
     name: "_session", // use any name you want here
     sameSite: "lax", // this helps with CSRF
     path: "/", // remember to add this so the cookie will work in all routes

app/shared/design-system/components/card.tsx

@@ -7,12 +7,9 @@ export const Card = styled("div", {
   font: "inherit",
   lineHeight: "1",
   outline: "none",
-  width: "$10",
-  padding: "$5",
   textAlign: "inherit",
   verticalAlign: "middle",
   WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
-
   backgroundColor: "$panel",
   display: "block",
   textDecoration: "none",
@@ -35,6 +32,16 @@ export const Card = styled("div", {
   },
 
   variants: {
+    size: {
+      1: {
+        width: "$10",
+        padding: "$5",
+      },
+      2: {
+        width: "$12",
+        padding: "$7",
+      },
+    },
     variant: {
       interactive: {
         "@hover": {
@@ -97,4 +104,7 @@ export const Card = styled("div", {
       },
     },
   },
+  defaultVariants: {
+    size: "1",
+  },
 });

app/shared/design-system/components/select.tsx

@@ -14,10 +14,7 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "0 $1 0 $2",
-  fontSize: "$1",
   fontVariantNumeric: "tabular-nums",
-  height: "$5",
   gap: "$2",
   flexShrink: 0,
   borderRadius: "$1",
@@ -33,6 +30,10 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
   },
 
   variants: {
+    size: {
+      1: { padding: "0 $1 0 $2", fontSize: "$1", height: "$5" },
+      2: { padding: "0 $2 0 $3", height: "$6", fontSize: "$3" },
+    },
     ghost: {
       true: {
         backgroundColor: "transparent",
@@ -45,6 +46,9 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
       },
     },
   },
+  defaultVariants: {
+    size: 1,
+  },
 });
 
 const StyledIcon = styled(SelectPrimitive.Icon, {

vercel.json

@@ -1,7 +0,0 @@
-{
-  "build": {
-    "env": {
-      "ENABLE_FILE_SYSTEM_API": "1"
-    }
-  }
-}