From 80ff5f6c9ff253ea8b505a0c148add199a965ddb Mon Sep 17 00:00:00 2001
From: Elisee ADJIGUIDI <sadjigui@bess-f2r5s15.clusters.42paris.fr>
Date: Mon, 26 Jun 2023 01:47:41 +0200
Subject: [PATCH] new alert bad input qrcode resize button chat modif alert
 name already taken

---
 .../react/src/components/Messages/Chats.tsx   |  6 +++--
 .../src/components/Messages/ModalSetting.tsx  |  4 +--
 .../react/src/components/Profile/EditName.tsx | 27 ++++++++++---------
 containers/react/src/pages/QrCode.tsx         | 14 +++++++++-
 containers/react/src/styles/Messages.css      | 13 ++++++---
 5 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/containers/react/src/components/Messages/Chats.tsx b/containers/react/src/components/Messages/Chats.tsx
index 6301b683..c5b00057 100644
--- a/containers/react/src/components/Messages/Chats.tsx
+++ b/containers/react/src/components/Messages/Chats.tsx
@@ -17,6 +17,7 @@ import { ImBlocked } from 'react-icons/im';
 import { MdOutlineGroupAdd } from 'react-icons/md';
 import { GrAdd } from 'react-icons/gr';
 import { RiListSettingsLine } from 'react-icons/ri'
+import { HiChatBubbleLeft } from 'react-icons/hi2'
 
 // import { Rank } from "../../DataBase/DataRank";
 import GreenAlert from "../Alert/GreenAlert.tsx";
@@ -475,7 +476,7 @@ function Chats(){
 		<motion.div
 		onClick={() => (setting ? setSetting(false) : setSetting(true))}
 		>
-		<RiListSettingsLine/>
+		<RiListSettingsLine className="block"/>
 		<AnimatePresence
 			initial={false}
 			onExitComplete={() => null}
@@ -526,7 +527,8 @@ function Chats(){
 						<div key={index}
 							onClick={() => setCurrentChat(c)}>
 							<UserChat>
-							<img className="pic-user" src={DefaultPic} alt="User" />
+							{/* <img className="pic-user" src={DefaultPic} alt="User" /> */}
+							<HiChatBubbleLeft className="catchat"/>
 							<div className="infoSideBar">
 								<span>{c.name}</span>
 								{/* <SideP>Desc?</SideP> */}
diff --git a/containers/react/src/components/Messages/ModalSetting.tsx b/containers/react/src/components/Messages/ModalSetting.tsx
index ec8a2500..7491c192 100644
--- a/containers/react/src/components/Messages/ModalSetting.tsx
+++ b/containers/react/src/components/Messages/ModalSetting.tsx
@@ -243,7 +243,7 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 							<Link to="#" onClick={dark} className={ privateConv ?  "darkSubmit" : "submit"}>Private</Link>
 						</div>
                         {/* <p className="checkbox">Private<input className="check"type="checkbox" value="private" onChange={handleCheckPriv}/></p> */}
-                        <p className="checkbox">Password<input type="checkbox" value="password" checked={password} onChange={handleCheckPass}/> </p>
+                        <p className="checkbox">Password<input className="inside_ckeckbox" type="checkbox" value="password" checked={password} onChange={handleCheckPass}/> </p>
                         
 						
 						{password ? (
@@ -305,7 +305,7 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 							onKeyDown={handleMute} 
 							type="number" 
 							className="in_howLong" 
-							placeholder="How long ?"
+							placeholder="Time"
 							value={time}
             				onChange={(e) => setTime(e.target.value)}
 						/>
diff --git a/containers/react/src/components/Profile/EditName.tsx b/containers/react/src/components/Profile/EditName.tsx
index da364971..96dae772 100644
--- a/containers/react/src/components/Profile/EditName.tsx
+++ b/containers/react/src/components/Profile/EditName.tsx
@@ -54,22 +54,25 @@ const ModalEdit = (handleClose) => {
 	const handlePostNickname = async () => {
 		console.log("nickname=", nickname)
 		try {
-			const ret = await api.post("/nickname", { nickname: nickname });
 			// console.log("cest ici = ",ret);
 			// if (!ret)
-			console.log("test ret =", ret.data);
-			if (nickname.length < 3) {
+			// console.log("test ret =", ret.data);
+			if (nickname.length > 3) {
+				const ret = await api.post("/nickname", { nickname: nickname });
+				if (ret.data) {
+					console.log("ici error = ", ret.data);
+					window.location.reload();
+				}
+				else {
+					console.log("nickname already set = ", ret.data);
+	
+					setErrTaken(true);
+				}
+			}
+			else if (nickname.length < 3)
+			{
 				setErrTooShort(true);
 			}
-			else if (ret.data) {
-				console.log("ici error = ", ret.data);
-				window.location.reload();
-			}
-			else {
-				console.log("nickname already set = ", ret.data);
-
-				setErrTaken(true);
-			}
 
 
 			// setUser(tmpUser.data);
diff --git a/containers/react/src/pages/QrCode.tsx b/containers/react/src/pages/QrCode.tsx
index c7db0410..7c90960e 100644
--- a/containers/react/src/pages/QrCode.tsx
+++ b/containers/react/src/pages/QrCode.tsx
@@ -6,7 +6,8 @@ import "../styles/App.css";
 import api from '../script/axiosApi.tsx';
 
 import QRCodeStyling from "qr-code-styling";
-import { motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
+import RedAlert from "../components/Alert/RedAlert.tsx";
 
 
 
@@ -36,6 +37,8 @@ function QrCode () {
 	const [secret, setSecret] = useState(false);
 	const [code, setCode] = useState('');
 	const [activated, setActivated] = useState(false);
+	const [err, setErr] = useState(false);
+	const closeErr = () => setErr(false);
 
 	// const history = useHistory();
 
@@ -80,6 +83,10 @@ function QrCode () {
 			const res = await api.post("/verifyOtp", {token: code})
 			console.log("res= ", res.data)
 			console.log("res= ", res)
+			if (!res.data)
+			{
+				setErr(true);
+			}
 			if (res.data === 1)
 			{
 				console.log("registered")
@@ -158,6 +165,11 @@ function QrCode () {
       ) : (
         <button className="desactivate" onClick={handleDesactivate}>Desactivate 2FA</button>
       )}
+	  <AnimatePresence
+			initial={false}
+			onExitComplete={() => null}>
+				{err ? (<RedAlert handleClose={closeErr} text="Error: Bad intput. Try again"/>):("")}
+			</AnimatePresence>
     </>
 
 		{/* {!localStorage.getItem('token') && (
diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css
index 4285e235..8d4ebf1a 100644
--- a/containers/react/src/styles/Messages.css
+++ b/containers/react/src/styles/Messages.css
@@ -233,9 +233,9 @@ p {
 	backdrop-filter: sepia(90%);
 	background-color: rgba(0, 0, 0, 0.3);
 	border-radius: 4px;
-	width: 11rem;
-	height: 1.5rem;
-	margin-top: 1rem;
+	width: 15rem;
+	height: 2rem;
+	margin-top: 1.3rem;
 }
 
 .greenAlert{
@@ -385,4 +385,11 @@ input.in_howLong{
 .block{
 	font-size: 25px;
 	margin-left: 12px;
+	margin-top: 0.2rem;
+}
+
+.inside_ckeckbox{
+	height: 25px;
+	margin-left: -50px;
+
 }