Merge remote-tracking branch 'origin' into zacharyb/eng-186

apps/webservice/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "SKIP_ENV_VALIDATION=true next build",
     "clean": "git clean -xdf .next .turbo node_modules",
-    "dev": "pnpm with-env next dev --turbo",
+    "dev": "pnpm with-env next dev",
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "lint": "eslint",
     "start": "pnpm with-env next start",

apps/webservice/src/app/(auth)/login/LoginCard.tsx

@@ -1,11 +1,15 @@
 "use client";
 
-import { IconBrandGoogle } from "@tabler/icons-react";
+import { IconBrandGoogle, IconLock } from "@tabler/icons-react";
 import { signIn } from "next-auth/react";
 
 import { Button } from "@ctrlplane/ui/button";
+import { Separator } from "@ctrlplane/ui/separator";
 
-export const LoginCard: React.FC = () => {
+export const LoginCard: React.FC<{
+  isGoogleEnabled: boolean;
+  isOidcEnabled: boolean;
+}> = ({ isGoogleEnabled, isOidcEnabled }) => {
   return (
     <div className="container mx-auto mt-[150px] max-w-[375px]">
       <h1 className="mb-10 text-center text-3xl font-bold">
@@ -34,31 +38,38 @@ export const LoginCard: React.FC = () => {
           >
             <IconBrandBitbucket /> Continue with Bitbucket
           </Button> */}
-          <Button
-            onClick={() => signIn("google")}
-            size="lg"
-            className="w-full gap-2 rounded-lg bg-red-700 p-6 text-lg tracking-normal text-white hover:bg-red-600"
-          >
-            <IconBrandGoogle className="h-4 w-4" /> Continue with Google
-          </Button>
+
+          {isGoogleEnabled && (
+            <Button
+              onClick={() => signIn("google")}
+              size="lg"
+              className="w-full gap-2 rounded-lg bg-red-700 p-6 text-lg tracking-normal text-white hover:bg-red-600"
+            >
+              <IconBrandGoogle className="h-4 w-4" /> Continue with Google
+            </Button>
+          )}
         </div>
-        {/* <Separator />
-        <div className="space-y-2">
-          <Button
-            size="lg"
-            variant="outline"
-            className="w-full gap-2 rounded-lg p-6 text-lg tracking-normal"
-          >
-            <IconLock /> Continue with SSO
-          </Button>
-          <Button
+
+        {isOidcEnabled && isGoogleEnabled && <Separator />}
+
+        {isOidcEnabled && (
+          <div className="space-y-2">
+            <Button
+              size="lg"
+              variant="outline"
+              className="w-full gap-2 rounded-lg p-6 text-lg tracking-normal"
+            >
+              <IconLock /> Continue with SSO
+            </Button>
+            {/* <Button
             size="lg"
             variant="outline"
             className="w-full gap-2 rounded-lg p-6 text-lg font-semibold tracking-normal"
           >
             <IconKey /> Login with Passkey
-          </Button>
-        </div> */}
+          </Button> */}
+          </div>
+        )}
       </div>
     </div>
   );

apps/webservice/src/app/(auth)/login/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 import { IconPlane } from "@tabler/icons-react";
 
-import { auth } from "@ctrlplane/auth";
+import { auth, isGoogleAuthEnabled, isOIDCAuthEnabled } from "@ctrlplane/auth";
 import { Button } from "@ctrlplane/ui/button";
 
 import { LoginCard } from "./LoginCard";
@@ -22,7 +22,10 @@ export default async function LoginPage() {
         </Button>
         <Button variant="outline">Sign up</Button>
       </div>
-      <LoginCard />
+      <LoginCard
+        isGoogleEnabled={isGoogleAuthEnabled}
+        isOidcEnabled={isOIDCAuthEnabled}
+      />
     </div>
   );
 }

apps/webservice/src/app/(auth)/login/workspace-invite/[workspaceInviteToken]/page.tsx

@@ -1,14 +1,15 @@
 import { redirect } from "next/navigation";
 import { IconPlane } from "@tabler/icons-react";
 
-import { auth } from "@ctrlplane/auth";
+import { auth, isGoogleAuthEnabled, isOIDCAuthEnabled } from "@ctrlplane/auth";
 import { Button } from "@ctrlplane/ui/button";
 
 import { LoginCard } from "../../LoginCard";
 
 export default async function LoginInvitePage() {
   const session = await auth();
   if (session != null) redirect("/");
+
   return (
     <div className="h-full">
       <div className="flex items-center gap-2 p-4">
@@ -19,7 +20,10 @@ export default async function LoginInvitePage() {
         </Button>
         <Button variant="outline">Sign up</Button>
       </div>
-      <LoginCard />
+      <LoginCard
+        isGoogleEnabled={isGoogleAuthEnabled}
+        isOidcEnabled={isOIDCAuthEnabled}
+      />
     </div>
   );
 }

apps/webservice/src/app/(auth)/sign-up/SignUpCard.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { z } from "zod";
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useForm,
+} from "@ctrlplane/ui/form";
+import { Input } from "@ctrlplane/ui/input";
+
+import { api } from "~/trpc/react";
+
+const schema = z.object({
+  name: z.string().min(1),
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+export const SignUpCard: React.FC = () => {
+  const router = useRouter();
+  const signUp = api.user.auth.signUp.useMutation();
+  const form = useForm({
+    schema,
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    signUp.mutate(data);
+    router.replace("/login");
+  });
+
+  return (
+    <div className="container mx-auto mt-[150px] max-w-[375px]">
+      <h1 className="mb-10 text-center text-3xl font-bold">
+        Sign up for Ctrlplane
+      </h1>
+      <div className="space-y-6">
+        <div className="space-y-2">
+          <Form {...form}>
+            <form onSubmit={onSubmit}>
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                      <Input {...field} type="password" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/webservice/src/app/(auth)/sign-up/page.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { IconPlane } from "@tabler/icons-react";
+
+import { auth, isCredentialsAuthEnabled } from "@ctrlplane/auth";
+import { Button } from "@ctrlplane/ui/button";
+
+import { SignUpCard } from "./SignUpCard";
+
+export const metadata: Metadata = { title: "Ctrlplane Login" };
+
+export default async function LoginPage() {
+  if (!isCredentialsAuthEnabled) redirect("/login");
+
+  const session = await auth();
+  if (session != null) redirect("/");
+
+  return (
+    <div className="h-full">
+      <div className="flex items-center gap-2 p-4">
+        <IconPlane className="h-10 w-10" />
+        <div className="flex-grow" />
+        <Button variant="ghost" className="text-muted-foreground">
+          Contact
+        </Button>
+        <Button variant="outline">Sign up</Button>
+      </div>
+      <SignUpCard />
+    </div>
+  );
+}

docker-compose.dev.yaml

@@ -0,0 +1,39 @@
+version: "3.8"
+
+services:
+  database:
+    container_name: ctrlplane-database
+    image: postgres:16
+    restart: always
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_DB: ctrlplane
+      POSTGRES_USER: ctrlplane
+      POSTGRES_PASSWORD: ctrlplane
+    volumes:
+      - db-data:/var/lib/postgresql/data
+
+  redis:
+    image: redis:latest
+    container_name: ctrlplane-redis
+    restart: always
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis-data:/data
+
+  redisinsight:
+    image: redis/redisinsight:latest
+    container_name: ctrlplane-redisinsight
+    links:
+      - redis
+    ports:
+      - "5540:5540"
+    volumes:
+      - redisinsight-data:/data
+
+volumes:
+  db-data:
+  redis-data:
+  redisinsight-data: