Setup Frontend (#3)

* set up ui app and start working on login page

* generate swagger api client automatically

* use automated swagger client

* add react query

* fix package.json

* add react query

Dockerfile

@@ -1,4 +1,4 @@
-FROM golang:1.22.4 as build-env
+FROM golang:1.23 as build-env
 WORKDIR /go/malak
 
 COPY ./go.mod /go/malak

cmd/main.go

@@ -138,7 +138,7 @@ func setDefaults() {
 	viper.SetDefault("otel.service_name", "makal")
 	viper.SetDefault("otel.endpoint", "localhost:3318")
 
-	viper.SetDefault("http.port", 3200)
+	viper.SetDefault("http.port", 5300)
 
 	viper.SetDefault("biling.stripe.is_enabled", false)
 	viper.SetDefault("billing.default_plan", uuid.Nil)

docs/docs.go

@@ -18,7 +18,7 @@ const docTemplate = `{
     "host": "{{.Host}}",
     "basePath": "{{.BasePath}}",
     "paths": {
-        "/auth/login": {
+        "/auth/connect/{provider}": {
             "post": {
                 "consumes": [
                     "application/json"
@@ -39,6 +39,13 @@ const docTemplate = `{
                         "schema": {
                             "$ref": "#/definitions/server.authenticateUserRequest"
                         }
+                    },
+                    {
+                        "type": "string",
+                        "description": "oauth2 provider",
+                        "name": "provider",
+                        "in": "path",
+                        "required": true
                     }
                 ],
                 "responses": {
@@ -193,9 +200,9 @@ const docTemplate = `{
 // SwaggerInfo holds exported Swagger Info so clients can modify it
 var SwaggerInfo = &swag.Spec{
 	Version:          "0.1.0",
-	Host:             "malak.ayinke.ventures",
+	Host:             "9015-102-89-34-27.ngrok-free.app",
 	BasePath:         "/v1",
-	Schemes:          []string{},
+	Schemes:          []string{"https"},
 	Title:            "Malak's API documentation",
 	Description:      "",
 	InfoInstanceName: "swagger",

docs/swagger.json

@@ -1,4 +1,7 @@
 {
+    "schemes": [
+        "https"
+    ],
     "swagger": "2.0",
     "info": {
         "title": "Malak's API documentation",
@@ -8,10 +11,10 @@
         },
         "version": "0.1.0"
     },
-    "host": "malak.ayinke.ventures",
+    "host": "9015-102-89-34-27.ngrok-free.app",
     "basePath": "/v1",
     "paths": {
-        "/auth/login": {
+        "/auth/connect/{provider}": {
             "post": {
                 "consumes": [
                     "application/json"
@@ -32,6 +35,13 @@
                         "schema": {
                             "$ref": "#/definitions/server.authenticateUserRequest"
                         }
+                    },
+                    {
+                        "type": "string",
+                        "description": "oauth2 provider",
+                        "name": "provider",
+                        "in": "path",
+                        "required": true
                     }
                 ],
                 "responses": {

docs/swagger.yaml

@@ -74,15 +74,15 @@ definitions:
       user:
         $ref: '#/definitions/malak.User'
     type: object
-host: malak.ayinke.ventures
+host: 9015-102-89-34-27.ngrok-free.app
 info:
   contact:
     email: [email protected]
     name: Ayinke Ventures
   title: Malak's API documentation
   version: 0.1.0
 paths:
-  /auth/login:
+  /auth/connect/{provider}:
     post:
       consumes:
       - application/json
@@ -93,6 +93,11 @@ paths:
         required: true
         schema:
           $ref: '#/definitions/server.authenticateUserRequest'
+      - description: oauth2 provider
+        in: path
+        name: provider
+        required: true
+        type: string
       produces:
       - application/json
       responses:
@@ -119,6 +124,8 @@ paths:
       summary: Sign in with a social login provider
       tags:
       - auth
+schemes:
+- https
 securityDefinitions:
   ApiKeyAuth:
     in: header

go.mod

@@ -1,6 +1,6 @@
 module github.com/ayinke-llc/malak
 
-go 1.22.4
+go 1.23
 
 require (
 	github.com/go-chi/chi/v5 v5.1.0

server/auth.go

@@ -45,7 +45,8 @@ func (a *authenticateUserRequest) Validate() error {
 // @Failure 401 {object} APIStatus
 // @Failure 404 {object} APIStatus
 // @Failure 500 {object} APIStatus
-// @Router /auth/login [post]
+// @Router /auth/connect/{provider} [post]
+// @Param provider  path string true "oauth2 provider"
 func (a *authHandler) Login(w http.ResponseWriter, r *http.Request) {
 
 	ctx, span, rid := getTracer(r.Context(), r, "Login", a.cfg.Otel.IsEnabled)

server/http.go

@@ -42,11 +42,11 @@ func buildRoutes(logger *logrus.Entry,
 
 	router := chi.NewRouter()
 
-	router.Use(middleware.AllowContentType("application/json"))
 	router.Use(middleware.RequestID)
 	router.Use(writeRequestIDHeader)
-	router.Use(jsonResponse)
+	router.Use(middleware.AllowContentType("application/json"))
 	router.Use(otelchi.Middleware("malak.server", otelchi.WithChiRoutes(router)))
+	router.Use(jsonResponse)
 
 	auth := &authHandler{
 		logger: logger,

swagger.go

@@ -4,8 +4,9 @@
 // @contact.name Ayinke Ventures
 // @contact.email [email protected]
 
-// @host malak.ayinke.ventures
+// @host 9015-102-89-34-27.ngrok-free.app
 // @BasePath /v1
+// @schemes https
 
 // @securityDefinitions.apikey ApiKeyAuth
 // @in header

web/ui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

web/ui/.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/client
 /.pnp
 .pnp.js
 .yarn/install-state.gz

web/ui/app/globals.css

@@ -1,3 +1,69 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

web/ui/app/layout.tsx

@@ -1,12 +1,16 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { ThemeProvider } from "@/components/providers/theme";
+import { GoogleOAuthProvider } from '@react-oauth/google';
+import { GOOGLE_CLIENT_ID } from "@/lib/config";
+import { Toaster } from "@/components/ui/sonner";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Malak",
+  description: "OSS Investors' hub for founders",
 };
 
 export default function RootLayout({
@@ -16,7 +20,19 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+          </ThemeProvider>
+        </GoogleOAuthProvider>
+        <Toaster position="top-center" />
+      </body>
     </html>
   );
 }

web/ui/app/login/page.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import Image from "next/image"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { useGoogleLogin } from "@react-oauth/google"
+import { MALAK_PRIVACY_POLICY_LINK, MALAK_TERMS_CONDITION_LINK } from "@/lib/config"
+import client from "@/lib/client"
+
+export default function Login() {
+
+  const googleLogin = useGoogleLogin({
+    flow: 'auth-code',
+    onSuccess: async (codeResponse) => {
+      console.log(codeResponse);
+
+      const response = await client.auth.connectCreate("google", {
+        code: codeResponse.code,
+      })
+
+      console.log(response);
+    },
+    onError: errorResponse => console.log(errorResponse),
+  });
+
+  const loginWithGoogle = () => {
+    googleLogin()
+  }
+
+  return (
+    <div className="w-screen h-screen lg:grid lg:grid-cols-2">
+      <div className="flex items-center justify-center py-12">
+        <div className="mx-auto grid w-[350px] gap-6">
+          <div className="grid gap-2 text-center">
+            <h1 className="text-3xl font-bold">Login</h1>
+            <p className="text-balance text-muted-foreground">
+              Use either your Google or Github account to authenticate into your dashboard
+            </p>
+          </div>
+          <div className="grid gap-4">
+            <Button type="button" className="w-full" onClick={loginWithGoogle}>
+              <svg className="w-4 h-4 me-2" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" /><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" /><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" /><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" /><path d="M1 1h22v22H1z" fill="none" /></svg>
+              Login with Google
+            </Button>
+            <Button variant="secondary" className="w-full" disabled={true}>
+              <svg className="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clipRule="evenodd" />
+              </svg>
+              Login with Github ( coming soon )
+            </Button>
+          </div>
+          <div className="mt-4 text-center text-sm">
+            By clicking continue, you agree to our
+            {" "}<Link className="underline" href={MALAK_TERMS_CONDITION_LINK} target="_blank">Terms of service</Link> and
+            <Link className="underline" href={MALAK_PRIVACY_POLICY_LINK} target="_blank"> Privacy Policy</Link>
+          </div>
+        </div>
+      </div>
+      <div className="hidden bg-muted lg:block">
+        <Image
+          src="/placeholder.svg"
+          alt="Image"
+          width="1920"
+          height="1080"
+          className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+        />
+      </div>
+    </div>
+  )
+}

web/ui/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

web/ui/components/providers/theme.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}