feat: add support for user register

fisirc · Nov 22, 2024 · 28aa35b · 28aa35b
1 parent 8419ff4
commit 28aa35b
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 26 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -25,6 +25,7 @@
     "@react-three/fiber": "^8.17.10",
     "@tabler/icons-react": "^3.11.0",
     "konva": "^9.3.16",
+    "lucide-react": "^0.460.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-konva": "^18.2.10",

diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -6,13 +6,15 @@ const App = () => {
     <div style={{ height: '100vh' }}>
       <Switch>
         {
-          routes.map((route, i) => (
-            <Route
-              key={i}
-              path={route.href}
-              component={route.component as any}
-            />
-          ))
+          routes.map((route, i) => {
+            return (
+              <Route
+                key={i}
+                path={route.href}
+                component={route.component as any}
+              />
+            )
+          })
         }
       </Switch>
     </div>

diff --git a/app/src/components/UserButton/index.tsx b/app/src/components/UserButton/index.tsx
@@ -30,7 +30,7 @@ export const UserButton = () => {
     {
       icon: IconLogout,
       label: 'Cerrar sesión',
-      onClick: () => { },
+      onClick: () => localStorage.removeItem('metagallery-token'),
     },
   ];
 

diff --git a/app/src/pages/Dashboard/Dashboard.tsx b/app/src/pages/Dashboard/Dashboard.tsx
@@ -1,5 +1,6 @@
 import { Menu, Search, Share2 } from "lucide-react";
 import styles from "./GalleryDashboard.module.css";
+import { UserButton } from "@/components/UserButton";
 
 const galleries = [
   {
@@ -43,10 +44,7 @@ export const GalleryDashboard = () => {
             <Menu className={styles.menuIcon} />
             <span className={styles.srOnly}>Dashboard</span>
           </button>
-          <div className={styles.headerRight}>
-            <span className={styles.userName}>Van Gogh</span>
-            <button className={styles.upgradeButton}>Mejora tu plan</button>
-          </div>
+          <UserButton />
         </div>
       </header>
 

diff --git a/app/src/pages/Editor/index.tsx b/app/src/pages/Editor/index.tsx
@@ -11,7 +11,6 @@ import { Gallery3D } from '../Gallery3D';
 export const Editor = ({ gallery }: { gallery: string }) => {
   const [projectName, setProjectName] = useState('Nueva galería');
   const [previewOpened, setPreviewOpened] = useState(false);
-
   return (
     <>
       <section style={{ minWidth: '420px', position: 'relative', overflow: 'hidden' }}>

diff --git a/app/src/pages/Home/components/Header.tsx b/app/src/pages/Home/components/Header.tsx
@@ -3,6 +3,7 @@ import Button from './Button';
 import styles from './Header.module.css';
 import Popup from './PopUp/Popup';
 import popupStyles from './PopUp/Popup.module.css';
+import { useLocation } from 'wouter';
 
 export const Header = () => {
   const [loginPopup, setLoginPopup] = useState(false);
@@ -20,13 +21,15 @@ export const Header = () => {
 
   const [isLoading, setIsLoading] = useState(false);
   const [loginError, setLoginError] = useState('');
+  const [, setLocation] = useLocation();
+
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
     setLoginError('');
 
     try {
-      const response = await fetch('/services/stiller/auth/login', {
+      const response = await fetch('https://pandadiestro.xyz/services/stiller/auth/login', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -41,8 +44,8 @@ export const Header = () => {
 
       const token = await response.text();
       console.log('Login successful. Token:', token);
-
-      localStorage.setItem('authToken', token);
+      localStorage.setItem('metagallery-token', token);
+      setLocation('/dashboard');
     } catch (error: any) {
       console.error('Login error details:', error);
     }
@@ -69,6 +72,37 @@ export const Header = () => {
     setCvv('');
   };
 
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const response = await fetch('https://pandadiestro.xyz/services/stiller/auth/newuser', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          tier_id: 0,
+          username,
+          mail: email,
+          pwd: password,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorDetails = await response.text();
+        console.error('Failed to register:', errorDetails);
+        return;
+      }
+
+      const token = await response.text();
+      console.log('Registration successful. Token:', token);
+      localStorage.setItem('metagallery-token', token);
+      setLocation('/dashboard');
+    } catch (e) {
+      console.error('Failed to register:', e);
+    }
+  }
+
   return (
     <header className={styles.header}>
       <h1 className={styles.title}>Metagallery</h1>
@@ -198,10 +232,7 @@ export const Header = () => {
             <>
               <h3 className={popupStyles.title}>Registro de usuario</h3>
               <p className={popupStyles.description}>Completa tus datos adicionales</p>
-              <form onSubmit={(e) => {
-                e.preventDefault();
-                setRegisterStep(3);
-              }}>
+              <form onSubmit={handleRegister}>
                 <div className={popupStyles.formgroup}>
                   <label className={popupStyles.label} htmlFor="address">
                     Dirección

diff --git a/app/src/pages/Home/index.tsx b/app/src/pages/Home/index.tsx
@@ -1,9 +1,11 @@
 import { Header } from "./components/Header";
 import PricingSection from "./components/PricingCardSection";
 
-export const Home = () => (
-  <>
-    <Header />
-    <PricingSection />
-  </>
-);
+export const Home = () => {
+  return (
+    <>
+      <Header />
+      <PricingSection />
+    </>
+  );
+};