New: Sign-up with supabase #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

adrianrrruiz merged 3 commits into develop from feature/supa-sign-up

Aug 7, 2025

.env.example

-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    NEXT_PUBLIC_BACKEND_URL=
+    SUPABASE_URL=
+    SUPABASE_ANON_KEY=

bun.lockb

Binary file not shown.

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,9 @@ @@
         "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-hover-card": "^1.1.14",
         "@radix-ui/react-slot": "^1.2.3",
-        "@tabler/icons-react": "^3.30.0",
+        "@supabase/ssr": "^0.6.1",
+        "@supabase/supabase-js": "^2.53.0",
+        "@tabler/icons-react": "^3.34.1",
         "@tanstack/react-query": "^5.84.1",
         "@tsparticles/engine": "^3.8.1",
         "@tsparticles/react": "^3.0.0",
@@ Expand Down Expand Up / @@ -42,4 +44,4 @@ @@
         "tailwindcss": "^3.4.17",
         "typescript": "^5"
       }
-    }
+    }

src/app/(auth)/log-in/page.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,7 +1,7 @@
  
    "use client";

    import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/home/ui/card";

    import { Button } from "@/components/home/ui/button";

    import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/shared/ui/card";

    import { Button } from "@/components/shared/ui/button";

    import { useState } from "react";

    import Link from "next/link";

    @@ -31,7 +31,7 @@ export default function LoginPage() {
  
      };

      return (

        <div className="min-h-screen flex flex-col items-center justify-center bg-azul-niebla dark:bg-[#121212] p-4">

        <div className="min-h-screen flex flex-col items-center justify-center dark:bg-[#121212] p-4">

          {/* Logo ACM */}

          <Link href="/" className="mb-6 flex flex-col items-center group select-none">

            <img

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

-Original file line number
+Diff line change
@@ -1,39 +1,12 @@
     "use client";
-    import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/home/ui/card";
-    import { Button } from "@/components/home/ui/button";
-    import { useState } from "react";
+    import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/shared/ui/card";
+    import { SignUpForm } from "@/components/sign-up/sign-up-form";
     import Link from "next/link";
     export default function SignUpPage() {
-      const [nombre, setNombre] = useState("");
-      const [apellido, setApellido] = useState("");
-      const [email, setEmail] = useState("");
-      const [password, setPassword] = useState("");
-      const [loading, setLoading] = useState(false);
-      const [error, setError] = useState("");
-      const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setLoading(true);
-        setError("");
-        // Lógica real de autenticación aquí
-        // Simulación de una llamada a la API
-        setTimeout(() => {
-          setLoading(false);
-          if (!nombre || !apellido || !email || !password) {
-            setError("Por favor, completa todos los campos.");
-          } else {
-            // Simulación de éxito
-            alert("¡Registro exitoso! Ahora puedes iniciar sesión.");
-            window.location.href = "/"
-          }
-        }, 1200);
-      };
       return (
-        <div className="min-h-screen flex flex-col items-center justify-center bg-azul-niebla dark:bg-[#121212] p-4">
+        <div className="min-h-screen flex flex-col items-center justify-center dark:bg-[#121212] p-4">
           {/* Logo ACM */}
           <Link href="/" className="mb-6 flex flex-col items-center group select-none">
             <img
@@ Expand All / @@ -54,60 +27,7 @@ export default function SignUpPage() { @@
               <CardTitle className="dark:text-white">Crear cuenta</CardTitle>
             </CardHeader>
             <CardContent>
-              <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-                <div className="flex flex-col gap-1">
-                  <label htmlFor="nombre" className="text-sm font-medium text-azul-ultramar dark:text-white">Nombre</label>
-                  <input
-                    id="nombre"
-                    type="text"
-                    autoComplete="given-name"
-                    className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
-                    value={nombre}
-                    onChange={e => setNombre(e.target.value)}
-                    required
-                  />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <label htmlFor="apellido" className="text-sm font-medium text-azul-ultramar dark:text-white">Apellido</label>
-                  <input
-                    id="apellido"
-                    type="text"
-                    autoComplete="family-name"
-                    className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
-                    value={apellido}
-                    onChange={e => setApellido(e.target.value)}
-                    required
-                  />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <label htmlFor="email" className="text-sm font-medium text-azul-ultramar dark:text-white">Correo electrónico</label>
-                  <input
-                    id="email"
-                    type="email"
-                    autoComplete="email"
-                    className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
-                    value={email}
-                    onChange={e => setEmail(e.target.value)}
-                    required
-                  />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <label htmlFor="password" className="text-sm font-medium text-azul-ultramar dark:text-white">Contraseña</label>
-                  <input
-                    id="password"
-                    type="password"
-                    autoComplete="new-password"
-                    className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
-                    value={password}
-                    onChange={e => setPassword(e.target.value)}
-                    required
-                  />
-                </div>
-                {error && <span className="text-red-600 text-sm">{error}</span>}
-                <Button type="submit" className="w-full mt-2" disabled={loading}>
-                  {loading ? "Registrando..." : "Registrarse"}
-                </Button>
-              </form>
+              <SignUpForm />
             </CardContent>
             <CardFooter className="flex flex-col items-center gap-2">
               <Link href="/log-in" className="text-xs text-azul-crayon dark:text-white hover:underline mt-2">¿Ya tienes cuenta? Inicia sesión</Link>
@@ Expand Down @@

src/app/api/auth/signup/route.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,34 @@
+    import { supabase } from '@/lib/supabase';
+    import { NextRequest, NextResponse } from 'next/server';
+    export async function POST(req: NextRequest) {
+      const { name, surname, email, password, avatar_url } = await req.json();
+      try {
+        const { data, error } = await supabase.auth.signUp({
+          email,
+          password,
+        });
+        if (error) {
+          return NextResponse.json({ data: null, error: error.message }, { status: 400 });
+        }
+        const dbResponse = await supabase.from('student').insert([
+          {
+            name,
+            surname,
+            avatar: avatar_url || null,
+            supabase_user_id: data.user?.id
+          },
+        ]);
+        if (dbResponse.error) {
+          return NextResponse.json({ data: null, error: dbResponse.error.message }, { status: 400 });
+        }
+        return NextResponse.json({ data, error: null }, { status: 200 });
+      } catch (error) {
+        return NextResponse.json({ data: null, error: `Error inesperado: ${error}` }, { status: 500 });
+      }
+    }

src/app/api/hello/route.ts

This file was deleted.

src/app/league/page.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
           name: "Acha1",
           surname: "Dev",
           victory_count: 90,
+          supabase_user_id: "1",
         },
         order: 0,
       },
@@ Expand All @@
           name: "Acha2",
           surname: "Dev",
           victory_count: 90,
+          supabase_user_id: "1",
         },
         order: 1,
       },
@@ Expand All @@
           name: "Acha3",
           surname: "Dev",
           victory_count: 90,
+          supabase_user_id: "1",
         },
         order: 2,
       },
     ];
     export default function LeagueHomePage() {
-      const [contests, setContests] = useState < (Contest & {
+      const [contests, setContests] = useState<(Contest & {
         picture: {
           link: string;
         };
@@ Expand Down @@

src/components/home/member-card.tsx

-Original file line number
+Diff line change
@@ -1,5 +1,5 @@
     import { useState } from "react";
-    import { Card, CardContent } from "@/components/home/ui/card";
+    import { Card, CardContent } from "@/components/shared/ui/card";
     import { Badge } from "@/components/home/ui/badge";
     import { User } from "lucide-react";
     import Image from "next/image";
@@ Expand Down @@

src/components/home/member-modal.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -5,7 +5,7 @@ import {
  
        DialogTitle,

    } from "@/components/home/ui/dialog";

    import { Badge } from "@/components/home/ui/badge";

    import { Button } from "@/components/home/ui/button";

    import { Button } from "@/components/shared/ui/button";

    import { Mail, User, Building } from "lucide-react";

    import { useState } from "react";

    import { motion } from "framer-motion";

    @@ -38,7 +38,7 @@ const ActiveMemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {
  
                                <div className="w-32 h-32 rounded-2xl overflow-hidden bg-gradient-to-br from-[var(--azul-electrico)] to-[var(--azul-ultramar)] flex items-center justify-center shadow-lg border-2 border-[var(--azul-niebla)]/20 dark:border-[#505050] mx-auto md:mx-0 select-none">

                                    {member.image && !imageError ? (

                                        <Image

                                           src={member.image}

                                            src={member.image}

                                            alt={member.name}

                                            width={1000}

                                            height={1000}

src/components/home/sections/members.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ import MemberModal from "../member-modal"; @@
     import { Member } from "@/models/member.model";
     import { getMembersService } from "@/services/member.service";
     import Link from "next/link";
-    import { Card, CardContent } from "../ui/card";
+    import { Card, CardContent } from "../../shared/ui/card";
     import { Users } from "lucide-react";
     export function Members() {
@@ Expand Down @@

src/components/members/sections/header.tsx

-Original file line number
+Diff line change
@@ -1,4 +1,4 @@
-    import { Button } from "@/components/home/ui/button";
+    import { Button } from "@/components/shared/ui/button";
     import { ArrowLeft } from "lucide-react";
     import Link from "next/link";
@@ Expand Down @@

src/components/members/ui/inactive-member-body.tsx

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     import React from "react";
     import { InactiveMemberCardProps } from "./inactive-member-card";
-    import { Button } from "@/components/home/ui/button";
+    import { Button } from "@/components/shared/ui/button";
     import { Github, Linkedin, Mail } from "lucide-react";
     export const InactiveMemberBody: React.FC<
@@ Expand Down @@

0 src/components/home/ui/button.tsx → src/components/shared/ui/button.tsx

File renamed without changes.

0 src/components/home/ui/card.tsx → src/components/shared/ui/card.tsx

File renamed without changes.

src/components/shared/ui/input.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,54 @@
+    // Input component extends from shadcnui - https://ui.shadcn.com/docs/components/input
+    "use client";
+    import * as React from "react";
+    import { useMotionTemplate, useMotionValue, motion } from "motion/react";
+    import { cn } from "@/utils/cn";
+    export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+    const Input = React.forwardRef<HTMLInputElement, InputProps>(
+      ({ className, type, ...props }, ref) => {
+        const radius = 100; // change this to increase the rdaius of the hover effect
+        const [visible, setVisible] = React.useState(false);
+        const mouseX = useMotionValue(0);
+        const mouseY = useMotionValue(0);
+        function handleMouseMove({ currentTarget, clientX, clientY }) {
+          const { left, top } = currentTarget.getBoundingClientRect();
+          mouseX.set(clientX - left);
+          mouseY.set(clientY - top);
+        }
+        return (
+          <motion.div
+            style={{
+              background: useMotionTemplate`
+            radial-gradient(
+              ${visible ? radius + "px" : "0px"} circle at ${mouseX}px ${mouseY}px,
+              #3b82f6,
+              transparent 80%
+            )
+          `,
+            }}
+            onMouseMove={handleMouseMove}
+            onMouseEnter={() => setVisible(true)}
+            onMouseLeave={() => setVisible(false)}
+            className="group/input rounded-lg p-[2px] transition duration-300"
+          >
+            <input
+              type={type}
+              className={cn(
+                `shadow-input dark:placeholder-text-neutral-600 flex h-10 w-full rounded-md border-none bg-gray-50 px-3 py-2 text-sm text-black transition duration-400 group-hover/input:shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-400 focus-visible:ring-[2px] focus-visible:ring-neutral-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-zinc-800 dark:text-white dark:shadow-[0px_0px_1px_1px_#404040] dark:focus-visible:ring-neutral-600`,
+                className,
+              )}
+              ref={ref}
+              {...props}
+            />
+          </motion.div>
+        );
+      },
+    );
+    Input.displayName = "Input";
+    export { Input };

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New: Sign-up with supabase #70

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!