ADD: db + better register

.dockerignore

@@ -0,0 +1 @@
+node_modules

Dockerfile

@@ -7,6 +7,6 @@ RUN bun run build
 
 
 EXPOSE 5173
-CMD ["bun start", "host", "0"]
+CMD ["bun", "start", "host", "0"]
 
 ##-p pour acceder au port

app.py

@@ -1,23 +0,0 @@
-import time
-
-import redis
-from flask import Flask
-
-app = Flask(__name__)
-cache = redis.Redis(host='redis', port=6379)
-
-def get_hit_count():
-    retries = 5
-    while True:
-        try:
-            return cache.incr('hits')
-        except redis.exceptions.ConnectionError as exc:
-            if retries == 0:
-                raise exc
-            retries -= 1
-            time.sleep(0.5)
-
-@app.route('/')
-def hello():
-    count = get_hit_count()
-    return 'Hello World! I have been seen {} times.\n'.format(count)

compose.yaml

@@ -2,6 +2,6 @@ services:
   web:
     build: .
     ports:
-      - "0:5173"
+      - "8000:5173"
   redis:
-    image: "redis:gmoker"
+    image: "valkey/valkey:7"

package.json

@@ -14,7 +14,9 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
+    "axios": "^1.7.5",
     "framer-motion": "^11.3.21",
+    "mysql2": "^3.11.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.0"

requirements.txt

@@ -1,2 +0,0 @@
-flask
-redis

src/files/Register.jsx

@@ -1,14 +1,29 @@
 import { Button, Input, Stack } from "@chakra-ui/react";
-import React, { useState } from "react";
+import axios from "axios";
+import { useState } from "react";
 
 export function Register() {
   const [isLoading, setIsLoading] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const handleSubmit = async () => {
+    if (password !== confirmPassword) {
+      alert("Les mots de passe ne correspondent pas");
+      return;
+    }
 
-  const handleSubmit = () => {
     setIsLoading(true);
-    setTimeout(() => {
+    try {
+      await axios.post("/api/register", { email, password });
+      alert("Inscription réussie");
+    } catch (error) {
+      console.error(error);
+      alert("Erreur lors de l'inscription");
+    } finally {
       setIsLoading(false);
-    }, 2000);
+    }
   };
 
   return (
@@ -17,9 +32,26 @@ export function Register() {
         Veuillez remplir ce formulaire d'Inscription
       </h1>
       <Stack spacing={4} align="center">
-        <Input placeholder="Email" size="md" />
+        <Input
-        <Input placeholder="Password" size="md" type="password" />
+          placeholder="Email"
-        <Input placeholder="Confirm Password" size="md" type="password" />
+          size="md"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <Input
+          placeholder="Password"
+          size="md"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <Input
+          placeholder="Confirm Password"
+          size="md"
+          type="password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+        />
         <Button
           isLoading={isLoading}
           loadingText="Chargement"

src/files/Sign_in.jsx

@@ -1,30 +1,47 @@
 import { Button, Input, Stack } from "@chakra-ui/react";
-import React, { useState } from "react";
+import axios from "axios";
+import { useState } from "react";
 
 export function SignIn() {
   const [isLoading, setIsLoading] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     setIsLoading(true);
-    setTimeout(() => {
+    try {
+      await axios.post("/api/register", { email, password });
+      console.log("gg");
+    } catch (error) {
+      console.log("error");
+    } finally {
       setIsLoading(false);
-    }, 2000);
+    }
   };
 
   return (
-    <>
+    <Stack spacing={4} align="center">
-      <Stack spacing={4} align="center">
+      <Input
-        <Input placeholder="Email" size="md" />
+        placeholder="Email"
-        <Input placeholder="Password" size="md" type="password" />
+        size="md"
-        <Button
+        value={email}
-          isLoading={isLoading}
+        onChange={(e) => setEmail(e.target.value)}
-          loadingText="Chargement"
+      />
-          variant="outline"
+      <Input
-          onClick={handleSubmit}
+        placeholder="Password"
-        >
+        size="md"
-          Connection
+        type="password"
-        </Button>
+        value={password}
-      </Stack>
+        onChange={(e) => setPassword(e.target.value)}
-    </>
+      />
+      <Button
+        isLoading={isLoading}
+        loadingText="Chargement"
+        variant="outline"
+        onClick={handleSubmit}
+      >
+        Connection
+      </Button>
+    </Stack>
   );
 }

src/services/dataBase.jsx

@@ -0,0 +1,10 @@
+const mysql = require("mysql2");
+
+const pool = mysql.createPool({
+  host: "localhost",
+  user: "lazlor",
+  password: "amidorian04",
+  database: "firstdb",
+});
+
+module.exports = pool.promise();

src/services/schema.sql

@@ -0,0 +1,5 @@
+CREATE TABLE users (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  email VARCHAR(255) NOT NULL,
+  password VARCHAR(255) NOT NULL
+);

src/services/userController.jsx

@@ -0,0 +1,24 @@
+const express = require("express");
+const bodyParser = require("body-parser");
+const pool = require("./dataBase");
+
+const app = express();
+app.use(bodyParser.json());
+
+app.post("/api/register", async (req, res) => {
+  const { email, password } = req.body;
+  try {
+    const [result] = await pool.query(
+      "INSERT INTO users (email, password) VALUES (?, ?)",
+      [email, password]
+    );
+    res.status(201).json({ id: result.insertId, email });
+  } catch (error) {
+    console.error(error);
+    res.status(500).json({ error: "Erreur lors de l'inscription" });
+  }
+});
+
+app.listen(3000, () => {
+  console.log("Server is running on port 3000");
+});