feat: new auth system and automated kite sessions (#23)

* wip: adding new login and signup routes * fix: adding session based auth apis * feat: changing redirection logic * fix: adding client login flow * feat: adding ui for adding kite integration * fix: adding ui and backend for integrations * fix: adding autosession login * fix: refactoring session code * feat: adding logic to load integration * fix: cleaning up env and adding header based auth * fix: fixing tick-workers logic * fix: minor deployment friendly changes * fix: adding pulumi deplyment * fix: fixing package lock issue * fix: fixing dockerfile for server
brayn003 · Mar 31, 2024 · 61cb734 · 61cb734
1 parent 5ee9441
commit 61cb734
Show file tree

Hide file tree

Showing 74 changed files with 2,200 additions and 568 deletions.
diff --git a/client/.env.example b/client/.env.example
@@ -1 +1,2 @@
 SERVER_PRIVATE_URL=http://127.0.0.1:8000
+CLIENT_URL=https://stonkninja.localhost
diff --git a/client/app/_components/KiteLogin.tsx b/client/app/_components/KiteLogin.tsx
diff --git a/client/app/_components/UserLogin.tsx b/client/app/_components/UserLogin.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const loginFormSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8).max(32),
+});
+
+interface UserLoginProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export default function UserLogin({ className, ...props }: UserLoginProps) {
+  const form = useForm<z.infer<typeof loginFormSchema>>({
+    resolver: zodResolver(loginFormSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const router = useRouter();
+
+  async function onSubmit(values: z.infer<typeof loginFormSchema>) {
+    setIsLoading(true);
+    const res = await fetch("/api/auth/login", {
+      method: "POST",
+      body: JSON.stringify(values),
+      headers: { "Content-Type": "application/json" },
+    });
+    setIsLoading(false);
+    if (res.ok) {
+      router.push("/private/dashboard");
+    }
+  }
+
+  return (
+    <div className="mb-8 mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+        <div className="flex flex-col space-y-2 text-center">
+          <h1 className="text-2xl font-semibold tracking-tight">Welcome back!</h1>
+          <p className="text-sm text-muted-foreground">
+            Enter your email below to log into <strong>stonk.ninja</strong>
+          </p>
+        </div>
+      </div>
+
+      <div className={cn("grid gap-6", className)} {...props}>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="grid gap-2">
+              <div className="grid gap-1">
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          id="email"
+                          placeholder="[email protected]"
+                          type="email"
+                          autoCapitalize="none"
+                          autoComplete="email"
+                          autoCorrect="off"
+                          disabled={isLoading}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+              <div className="grid gap-1">
+                <FormField
+                  control={form.control}
+                  name="password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          id="password"
+                          placeholder="password"
+                          type="password"
+                          autoCapitalize="none"
+                          autoComplete="password"
+                          autoCorrect="off"
+                          disabled={isLoading}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+              <Button type="submit" disabled={isLoading}>
+                {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Log In with Email
+              </Button>
+            </div>
+          </form>
+        </Form>
+        {/* <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+        <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+        <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
+        </div>
+        </div>
+        <Button variant="outline" type="button" disabled={isLoading}>
+        {isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <GitHubLogoIcon className="mr-2 h-4 w-4" />}{" "}
+        GitHub
+      </Button> */}
+      </div>
+      <p className="px-4 text-center text-sm text-muted-foreground">
+        By clicking continue, you agree to our{" "}
+        <Link href="/terms" className="underline underline-offset-4 hover:text-primary">
+          Terms of Service
+        </Link>{" "}
+        and{" "}
+        <Link href="/privacy" className="underline underline-offset-4 hover:text-primary">
+          Privacy Policy
+        </Link>
+        .
+      </p>
+    </div>
+  );
+}
diff --git a/client/app/globals.css b/client/app/globals.css
@@ -2,69 +2,54 @@
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
+    --foreground: 224 71.4% 4.1%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
+    --card-foreground: 224 71.4% 4.1%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
+    --popover-foreground: 224 71.4% 4.1%;
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-
+    --destructive-foreground: 210 20% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 262.1 83.3% 57.8%;
     --radius: 0.5rem;
   }
- 
+
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 263.4 70% 50.4%;
   }
 }
+
 
 @layer base {
   * {

diff --git a/client/app/layout.tsx b/client/app/layout.tsx
@@ -3,13 +3,17 @@ import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
+import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: {
+    template: "%s | stonk.ninja",
+    default: "Page",
+  },
+  description: "Stochastic Oscillator for the masses.",
 };
 
 export default function RootLayout({
@@ -20,8 +24,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        {children}
-        <Toaster />
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
+          {children}
+          <Toaster />
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/client/app/page.tsx b/client/app/page.tsx
@@ -2,11 +2,11 @@ import type { Metadata } from "next";
 import { Suspense } from "react";
 
 import ErrorAlert from "./_components/ErrorAlert";
-import KiteLogin from "./_components/KiteLogin";
+import UserLogin from "./_components/UserLogin";
 
 export const metadata: Metadata = {
-  title: "Authentication",
-  description: "Authentication forms built using the components.",
+  // template is not supported in siblings
+  title: "Login | stonk.ninja",
 };
 
 export default function PageLogin() {
@@ -28,11 +28,10 @@ export default function PageLogin() {
             <ErrorAlert />
           </Suspense>
         </div>
-        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-          <Suspense>
-            <KiteLogin />
-          </Suspense>
-          {/* <p className="px-8 text-center text-sm text-muted-foreground">
+        <Suspense>
+          <UserLogin />
+        </Suspense>
+        {/* <p className="px-8 text-center text-sm text-muted-foreground">
               By clicking continue, you agree to our{" "}
               <Link
                 href="/terms"
@@ -49,7 +48,6 @@ export default function PageLogin() {
               </Link>
               .
             </p> */}
-        </div>
       </div>
     </div>
   );