From e11996cc4e4b96b30053c4819737bb56c0d9b748 Mon Sep 17 00:00:00 2001
From: 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 <andrescabla@gmail.com>
Date: Mon, 22 Apr 2024 12:10:00 +0200
Subject: [PATCH] login hotfix

---
 webapp/src/components/AddUser.jsx | 89 ++++++++++++++++---------------
 webapp/src/components/Login.jsx   | 77 +++++++++++++++-----------
 2 files changed, 93 insertions(+), 73 deletions(-)

diff --git a/webapp/src/components/AddUser.jsx b/webapp/src/components/AddUser.jsx
index e8b2a28..b3bda9f 100644
--- a/webapp/src/components/AddUser.jsx
+++ b/webapp/src/components/AddUser.jsx
@@ -41,47 +41,52 @@ const AddUser = () => {
 
   return (
     
-    <div class="bg-[#453873] w-full h-screen justify-center content-center">
-      <div class="flex flex-col w-full md:w-1/2 xl:w-2/5 2xl:w-2/5 3xl:w-1/3 mx-auto p-8 md:p-10 2xl:p-12 3xl:p-14 bg-[#ffffff] rounded-2xl shadow-xl pt-3">
-        <div class="flex flex-row gap-3 pb-4">
-          <div>
-            <img src="/favicon.ico" width="50" alt="Logo"></img>
-          </div>
-          <h1 class="text-3xl font-bold text-[#4B5563] text-[#4B5563] my-auto">WIQ</h1>
+    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+      <Typography component="h1" variant="h5">
+        Register
+      </Typography>
+      <TextField
+        name="username"
+        margin="normal"
+        fullWidth
+        label="Username"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
+      <TextField
+        name="email"
+        type='email'
+        margin="normal"
+        fullWidth
+        label="Email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <TextField
+        name="password"
+        margin="normal"
+        fullWidth
+        label="Password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <TextField
+        name="cpassword"
 
-        </div>
-        <div class="text-sm font-light text-[#6B7280] pb-8 ">Sign up for an account on WIQ.</div>
-        <form class="flex flex-col">
-          <div class="pb-2">
-            <label for="username" class="block mb-2 text-sm font-medium text-[#111827]">Username</label>
-            <div class="relative text-gray-400"><span class="absolute inset-y-0 left-0 flex items-center p-1 pl-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"    stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span>
-              <input type="text" name="username" id="username" label="Username" value={username} onChange={(e) => setUsername(e.target.value)} class="pl-12 mb-2 bg-gray-50 text-gray-600 border focus:border-transparent border-gray-300 sm:text-sm rounded-lg ring ring-transparent focus:ring-1 focus:outline-none focus:ring-gray-400 block w-full p-2.5 rounded-l-lg py-3 px-4" placeholder="Username"   />
-            </div>
-          </div>
-          <div class="pb-2">
-            <label for="email" class="block mb-2 text-sm font-medium text-[#111827]">Email</label>
-            <div class="relative text-gray-400"><span class="absolute inset-y-0 left-0 flex items-center p-1 pl-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"    stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span>
-              <input name="email" type='email' margin="normal" label="Email" value={email} onChange={(e) => setEmail(e.target.value)} class="pl-12 mb-2 bg-gray-50 text-gray-600 border focus:border-transparent border-gray-300 sm:text-sm rounded-lg ring ring-transparent focus:ring-1 focus:outline-none focus:ring-gray-400 block w-full p-2.5 rounded-l-lg py-3 px-4" placeholder="name@example.com"   />
-            </div>
-          </div>
-          <div class="pb-6">
-            <label for="password" class="block mb-2 text-sm font-medium text-[#111827]">Password</label>
-            <div class="relative text-gray-400"><span class="absolute inset-y-0 left-0 flex items-center p-1 pl-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"    stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-asterisk"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M12 8v8"></path><path d="m8.5 14 7-4"></path><path d="m8.5 10 7 4"></path></svg></span>
-              <input name="password" label="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••••" class="pl-12 mb-2 bg-gray-50 text-gray-600 border focus:border-transparent border-gray-300 sm:text-sm rounded-lg ring ring-transparent focus:ring-1 focus:outline-none focus:ring-gray-400 block w-full p-2.5 rounded-l-lg py-3 px-4" autocomplete="new-password" />
-            </div>
-          </div>
-          <div class="pb-6">
-            <label for="cpassword" class="block mb-2 text-sm font-medium text-[#111827]">Confirm Password</label>
-            <div class="relative text-gray-400"><span class="absolute inset-y-0 left-0 flex items-center p-1 pl-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"    stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-asterisk"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M12 8v8"></path><path d="m8.5 14 7-4"></path><path d="m8.5 10 7 4"></path></svg></span>
-              <input name="cpassword" margin="normal" label="Confirm Password" type="password" value={cpassword} onChange={(e) => setcPassword(e.target.value)} placeholder="••••••••••" class="pl-12 mb-2 bg-gray-50 text-gray-600 border focus:border-transparent border-gray-300 sm:text-sm rounded-lg ring ring-transparent focus:ring-1 focus:outline-none focus:ring-gray-400 block w-full p-2.5 rounded-l-lg py-3 px-4" autocomplete="new-password" />
-            </div>
-          </div>
-          <button type="submit" class="w-full text-[#FFFFFF] bg-[#453873] focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mb-6"onClick={addUser}>Sign Up</button>
-          <div class="text-sm font-light text-[#6B7280] ">Already have an account? <Link to="/login" class="font-medium text-[#453873] hover:underline">Login</Link>
-
-          </div>
-        </form>
-      </div >
+        margin="normal"
+        fullWidth
+        label="Confirm Password"
+        type="password"
+        value={cpassword}
+        onChange={(e) => setcPassword(e.target.value)}
+      />
+      <Button variant="contained" color="primary" onClick={addUser}>
+        Register
+      </Button>
+      <Typography component="div" align="center" sx={{ marginTop: 2 }}>
+          <Link to="/login">Already have an account? Log in here.</Link>
+        </Typography>
 
       <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
       {
@@ -89,8 +94,8 @@ const AddUser = () => {
           <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
         )
       }
-    </div>
-    //</Container >
+    </Container>
+
     
   );
 };
diff --git a/webapp/src/components/Login.jsx b/webapp/src/components/Login.jsx
index da04949..94d0db5 100644
--- a/webapp/src/components/Login.jsx
+++ b/webapp/src/components/Login.jsx
@@ -61,45 +61,60 @@ const Login = () => {
   };
 
   return (
-  
-    <div class="bg-[#453873] w-full h-screen justify-center content-center">
-      <div class="flex flex-col w-full md:w-1/2 xl:w-2/5 2xl:w-2/5 3xl:w-1/3 mx-auto p-8 md:p-10 2xl:p-12 3xl:p-14 bg-[#ffffff] rounded-2xl shadow-xl pt-3">
-        <div class="flex flex-row gap-3 pb-4">
-          <div>
-            <img src="/favicon.ico" width="50" alt="Logo"></img>
-          </div>
-          <h1 class="text-3xl font-bold text-[#4B5563] text-[#4B5563] my-auto">WIQ</h1>
 
-        </div>
-        <div class="text-sm font-light text-[#6B7280] pb-8 ">Acces to WIQ with your account.</div>
-        <form class="flex flex-col">
-          <div class="pb-2">
-            <label for="username" class="block mb-2 text-sm font-medium text-[#111827]">Username</label>
-            <div class="relative text-gray-400"><span class="absolute inset-y-0 left-0 flex items-center p-1 pl-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span>
-              <input type="text" name="username" id="username" label="Username" value={username} onChange={(e) => setUsername(e.target.value)} class="pl-12 mb-2 bg-gray-50 text-gray-600 border focus:border-transparent border-gray-300 sm:text-sm rounded-lg ring ring-transparent focus:ring-1 focus:outline-none focus:ring-gray-400 block w-full p-2.5 rounded-l-lg py-3 px-4" placeholder="Username" />
-            </div>
-          </div>
-    
-          <div class="pb-6">
-            <label for="password" class="block mb-2 text-sm font-medium text-[#111827]">Password</label>
-            <div class="relative text-gray-400"><span class="absolute inset-y-0 left-0 flex items-center p-1 pl-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-asterisk"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M12 8v8"></path><path d="m8.5 14 7-4"></path><path d="m8.5 10 7 4"></path></svg></span>
-              <input name="password" label="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••••" class="pl-12 mb-2 bg-gray-50 text-gray-600 border focus:border-transparent border-gray-300 sm:text-sm rounded-lg ring ring-transparent focus:ring-1 focus:outline-none focus:ring-gray-400 block w-full p-2.5 rounded-l-lg py-3 px-4" autocomplete="new-password" />
-            </div>
-          </div>
-          
-          <button type="submit" class="w-full text-[#FFFFFF] bg-[#453873] focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mb-6" onClick={loginUser}>Log In</button>
-          <div class="text-sm font-light text-[#6B7280] ">Are you new around here? <Link to="/register" class="font-medium text-[#453873] hover:underline">Sign Up</Link>
+    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+      <Typography component="h1" variant="h5">
+        Register
+      </Typography>
+      <TextField
+        name="username"
+        margin="normal"
+        fullWidth
+        label="Username"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
+      <TextField
+        name="email"
+        type='email'
+        margin="normal"
+        fullWidth
+        label="Email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <TextField
+        name="password"
+        margin="normal"
+        fullWidth
+        label="Password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <TextField
+        name="cpassword"
 
-          </div>
-        </form>
-      </div >
+        margin="normal"
+        fullWidth
+        label="Confirm Password"
+        type="password"
+        value={cpassword}
+        onChange={(e) => setcPassword(e.target.value)}
+      />
+      <Button variant="contained" color="primary" onClick={addUser}>
+        Register
+      </Button>
+      <Typography component="div" align="center" sx={{ marginTop: 2 }}>
+        <Link to="/login">Already have an account? Log in here.</Link>
+      </Typography>
 
 
       <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
       {error && (
         <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
       )}
-    </div>
+    </Container>
 
   );
 };