Features/profil

frontend/src/App.module.css

@@ -1,8 +1,8 @@
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'Inter', sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
 }
 
 #test-login {
@@ -12,3 +12,49 @@
   height: 100vh;
   background-color: #898989;
 }
+
+.homepage {
+    display: flex;
+    flex-direction: column;
+    background-color: #131518;  
+    height: 100vh;  
+}
+
+.btnProfil {
+    width: 5em;
+    padding: 1.5em;
+    background-color: white;
+    border-radius: 10px;
+    border: none;
+    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.25);
+    position: fixed;
+    margin-top: 1em;
+    margin-right: 1em;
+    right: 0;
+}
+
+.btnProfil img {
+    width: 100%;
+}
+
+.btnLogin {
+    padding: 1.5em;
+    background-color: white;
+    border-radius: 10px;
+    border: none;
+    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.25);
+    font-size: 0.9em;
+    margin-bottom: 1em;
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+
+
+@media screen and (max-width: 768px){
+    .btnLogin {
+        padding: 1.4em;
+    }
+}

frontend/src/App.tsx

@@ -1,48 +1,71 @@
-// import { useState } from 'react'
-import { useEffect, useState } from 'react';
-import './App.css'
-import LoginComponent from './pages/login'
-import { socket } from './socket';
-import classementItem from '../../common/interfaces/classementItem.interface'
-
-function App() {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [classement, setClassement] = useState<classementItem[]>([])
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [isConnected, setIsConnected] = useState(socket.connected);
-
-  useEffect(() => {
-    function onConnect() {
-      setIsConnected(true);
-    }
-
-    function onDisconnect() {
-      setIsConnected(false);
-    }
-
-    function onclassementUpdate(data: classementItem[]) {
-      setClassement(data)
-    }
-
-    socket.on('connect', onConnect);
-    socket.on('disconnect', onDisconnect);
-    socket.on('classementUpdate', onclassementUpdate);
-
-    return () => {
-      socket.off('connect', onConnect);
-      socket.off('disconnect', onDisconnect);
-      socket.off('classementUpdate', onclassementUpdate);
-    };
-  }, []);
-
-  // affichage (render)
-  return (
-    <div>
-      <div id="test-login">
-        <LoginComponent />
-      </div>
-    </div>
-  );
-}
-
-export default App
+import { useEffect, useState } from 'react';
+import styles from './App.module.css'
+import LoginComponent from './components/login'
+import ProfilComponent from './components/profil'
+import { socket } from './socket';
+import classementItem from '../../common/interfaces/classementItem.interface'
+
+function App() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [classement, setClassement] = useState<classementItem[]>([])
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [isConnected, setIsConnected] = useState(socket.connected);
+
+  const [displayProfile, setDisplayProfile] = useState(false);
+  const [userEmail, setUserEmail] = useState("");
+  const [displayLogin, setDisplayLogin] = useState(false);
+
+  useEffect(() => {
+    function onConnect() {
+      setIsConnected(true);
+    }
+
+    function onDisconnect() {
+      setIsConnected(false);
+    }
+
+    function onclassementUpdate(data: classementItem[]) {
+      setClassement(data)
+    }
+
+    socket.on('connect', onConnect);
+    socket.on('disconnect', onDisconnect);
+    socket.on('classementUpdate', onclassementUpdate);
+
+    return () => {
+      socket.off('connect', onConnect);
+      socket.off('disconnect', onDisconnect);
+      socket.off('classementUpdate', onclassementUpdate);
+    };
+  }, []);
+
+  const handledisplayLogin = () => {
+    setDisplayLogin(!displayLogin);
+  }
+
+  const handleLogin = (email: string) => {
+    setUserEmail(email);
+  }
+
+  const handledisplayProfile = () => {
+    setDisplayProfile(!displayProfile);
+  }
+
+  // affichage (render)
+  return (
+    <div className={styles.homepage}>
+      <div>
+        <button onClick={handledisplayLogin} className={styles.btnLogin}>Login to draw !</button>
+        <div>
+          {displayLogin && <LoginComponent onLogin={handleLogin} />}
+        </div>
+      </div>
+
+      {!displayProfile && <button onClick={handledisplayProfile} className={styles.btnProfil}><img src="/src/assets/user-large.svg" alt="icone-user-profil" /></button>}      
+      {displayProfile && <ProfilComponent userEmail={userEmail} onHideProfil={handledisplayProfile} />}
+
+    </div>
+  );
+}
+
+export default App

frontend/src/components/login.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import styles from '../styles/login.module.css';
+
+interface LoginComponentProps {
+  onLogin: (email: string) => void;
+}
+
+const LoginComponent: React.FC<LoginComponentProps> = ({ onLogin }) => {
+
+    const [email, setEmail] = useState("");
+    const [message, setMessage] = useState("");
+	const [isEmailValid, setIsEmailValid] = useState(false);
+
+    const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const newEmail = event.target.value;
+		setEmail(newEmail);
+		setMessage(""); 
+    };
+
+    const handleLoginClick = () => {
+
+		if (email.endsWith("@edu.devinci.fr")) {
+			onLogin(email);
+			setMessage("Email valide, envoi du lien...");
+			setIsEmailValid(true);
+		} else {
+			setMessage("Email non valide");
+			setIsEmailValid(false);
+		}
+    };
+
+    return (
+	<div className={styles.login}>
+		<div className={styles.loginTitle}>
+			<p>Login</p>
+		</div>
+		<label>Enter your devinci email</label>
+		<input type="email" placeholder="email@edu.devinci.fr" value={email} onChange={handleEmailChange} />
+		<button onClick={handleLoginClick} disabled={!!message}>
+			Send magic link		
+		</button>
+		{message && <p className={isEmailValid ? styles.validMessage : styles.invalidMessage}>{message}</p>}
+	</div>
+    );
+  };
+
+  export default LoginComponent;

frontend/src/components/profil.tsx

@@ -0,0 +1,50 @@
+// import { useState } from "react";
+import styles from '../styles/profil.module.css';
+
+interface ProfilComponentProps {
+    userEmail: string;
+    onHideProfil: () => void;
+}
+
+const ProfilComponent: React.FC<ProfilComponentProps> = ({userEmail, onHideProfil}) => {
+
+    // A UTILISER POUR LE BACKEND
+    // const [posedPixel, setposedPixel] = useState(0);
+    // const [messageSent, setmessageSent] = useState(0);
+    // const [sinceLastMessage, setsinceLastMessage] = useState(0);
+    // const [pixelByHour, setPixelByHour] = useState(0);
+
+    const handleClose = () => {
+        onHideProfil();
+    }
+
+    return (
+        <div className={styles.containerProfil}>
+            <div className={styles.profilTitle}>
+                <p>{userEmail}</p>
+                <button className={styles.btnClose} onClick={handleClose}><img src="/src/assets/x.svg" alt="cross-icon" /></button>
+            </div>
+            <div className={styles.containerStats}>
+                <div className={styles.blockStats}>
+                    {/* <p>{posedPixel}</p> */}
+                    <p>Pixel posés</p>
+                </div>
+                <div className={styles.blockStats}>
+                    {/* <p>{messageSent}</p> */}
+                    <p>Messages envoyés</p>
+                </div>
+                <div className={styles.blockStats}>
+                    {/* <p>{sinceLastMessage}</p> */}
+                    <p>Depuis le dernier pixel posé</p>
+                </div>
+                <div className={styles.blockStats}>
+                    {/* <p>{pixelByHour}</p> */}
+                    <p>Pixes par heure (en moyenne)</p>
+                </div>
+            </div>
+            <button className={styles.btnLogOut}>Log out</button>
+        </div>
+    )
+}
+
+export default ProfilComponent;