Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge reborn

Browse Source
This commit is contained in:
Alexandre POMMIER 2023-06-26 04:16:48 +02:00
commit abf09f24fd
20 changed files with 225 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.env
View File

@ -7,18 +7,17 @@
# POSTGRES_PASSWORD=pass # POSTGRES_PASSWORD=pass
# POSTGRES_DB=postgreDB # POSTGRES_DB=postgreDB
# POSTGRES_ROOT_PASSWORD=pass # POSTGRES_ROOT_PASSWORD=pass
# POSTGRES_HOST=bess-f2r5s13 # POSTGRES_HOST=localhost
# POSTGRES_HOST_AUTH_METHOD=trust # POSTGRES_HOST_AUTH_METHOD=trust
#URL #URL
NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf" NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf"
# BASE_URL=http://bess-f2r5s13 # BASE_URL=http://localhost
# SOCKET_URL=bess-f2r5s13:8080 # SOCKET_URL=localhost:8080
BASE_URL=bess-f2r5s13:8080 BASE_URL=localhost:8080
REACT_APP_BASE_URL=bess-f2r5s13:8080 REACT_APP_BASE_URL=localhost:8080
REDIRECT_URI=http://bess-f2r5s13:8080/api/auth/login REDIRECT_URI=http://localhost:8080/api/auth/login
INTRA_URL="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789&redirect_uri=http%3A%2F%2Fbess-f2r5s13%3A8080%2Fapi%2Fauth%2Flogin&response_type=code"
#postgres var #postgres var
# POSTGRES_HOST=127.0.0.1 # POSTGRES_HOST=127.0.0.1
# DB_TYPE=postgres # DB_TYPE=postgres
@ -43,6 +42,6 @@ REACT_HOST=0.0.0.0
#auth var #auth var
JWT_SECRET=secrethere JWT_SECRET=secrethere
# REDIRECT_URI=http://bess-f2r5s13:80/api/auth/login # REDIRECT_URI=http://localhost:80/api/auth/login
API_SECRET=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 API_SECRET=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
CLIENT_UID=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789 CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41

15
containers/api/src/app.controller.ts
View File

@ -6,13 +6,12 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/17 01:00:00 by apommier #+# #+# */ /* Created: 2023/06/17 01:00:00 by apommier #+# #+# */
/* Updated: 2023/06/26 03:23:42 by apommier ### ########.fr */ /* Updated: 2023/06/26 04:10:56 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { Controller, Request, Req, Get, Post, UseGuards, Redirect, Res, Body, UploadedFile, UseInterceptors} from '@nestjs/common'; import { Controller, Request, Req, Get, Post, UseGuards, Redirect, Res, Body, UploadedFile, UseInterceptors} from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express'; import { FileInterceptor } from '@nestjs/platform-express';
import { JwtAuthGuard } from './auth/jwt-auth.guard'; import { JwtAuthGuard } from './auth/jwt-auth.guard';
import { AuthService } from './auth/auth.service'; import { AuthService } from './auth/auth.service';
import { loginClass } from './auth/login42' import { loginClass } from './auth/login42'
@ -452,14 +451,22 @@ export class AppController {
@UseGuards(JwtAuthGuard) @UseGuards(JwtAuthGuard)
@Post('/quit') @Post('/quit')
async setOffline(@Request() req) { async setOffline(@Request() req) {
const user = await this.userService.findOne(req.user.username); const user = await this.userService.findOne(req.user.username);
user.sessionNumber-- ;
if (!user.sessionNumber)
user.status = 0; user.status = 0;
await this.userService.save(user); await this.userService.save(user);
console.log("User quit"); console.log("User quit");
} }
@UseGuards(JwtAuthGuard)
@Post('/addSession')
async addSession(@Request() req) {
const user = await this.userService.findOne(req.user.username);
user.sessionNumber++ ;
await this.userService.save(user);
}
//======================================================================================================== //========================================================================================================
//======================================================================================================== //========================================================================================================

3
containers/api/src/auth/login42.ts
View File

@ -17,8 +17,6 @@ export class loginClass {
let userId = null; let userId = null;
let userName = null; let userName = null;
console.log("process.env.REDIRECT_URI=", process.env.REDIRECT_URI)
const params = new URLSearchParams(url.split('?')[1]); const params = new URLSearchParams(url.split('?')[1]);
const code = params.get('code'); const code = params.get('code');
@ -76,6 +74,7 @@ export class loginClass {
friends: null, friends: null,
blocked: null, blocked: null,
photo: null, photo: null,
sessionNumber: 1,
}; };
await this.usersService.create(user); await this.usersService.create(user);
} }

9
containers/api/src/chat/chat.service.ts
View File

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/17 01:00:25 by apommier #+# #+# */ /* Created: 2023/06/17 01:00:25 by apommier #+# #+# */
/* Updated: 2023/06/26 04:02:50 by apommier ### ########.fr */ /* Updated: 2023/06/26 04:11:00 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -84,10 +84,15 @@ async banUser(convId: number, username: string) {
conv.banned = conv.banned || []; conv.banned = conv.banned || [];
if (conv.banned.find(item => item === username)) if (conv.banned.find(item => item === username))
return (1); {
conv.banned = conv.banned.filter((item) => item !== username);
this.save(conv);
return (2);
}
conv.members = conv.members.filter((item) => item !== username); conv.members = conv.members.filter((item) => item !== username);
conv.banned.push(username); conv.banned.push(username);
this.save(conv); this.save(conv);
return (1);
} }
async inviteUser(convId: number, username: string) { async inviteUser(convId: number, username: string) {

3
containers/api/src/model/user.entity.ts
View File

@ -50,6 +50,9 @@ export class User {
@Column({ default: 0 }) @Column({ default: 0 })
loss: number; loss: number;
@Column({ default: 0 })
sessionNumber: number;
@Column({ default: 0 }) @Column({ default: 0 })
rank: number; rank: number;

10
containers/api/src/users/users.service.ts
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* users.service.ts :+: :+: :+: */ /* users.service.ts :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/17 01:00:07 by apommier #+# #+# */ /* Created: 2023/06/17 01:00:07 by apommier #+# #+# */
/* Updated: 2023/06/24 23:30:52 by apommier ### ########.fr */ /* Updated: 2023/06/26 02:23:16 by sadjigui ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -143,7 +143,11 @@ export class UsersService {
return (0); return (0);
user.blocked = user.blocked || []; user.blocked = user.blocked || [];
if (user.blocked.find(item => item === username)) if (user.blocked.find(item => item === username))
return (1); {
this.save(user);
user.blocked = user.blocked.filter((item) => item !== username);
return (2);
}
user.blocked.push(username); user.blocked.push(username);
this.save(user); this.save(user);
return (1); return (1);

13
containers/react/.env
View File

@ -1,8 +1,11 @@
REACT_APP_BASE_URL=bess-f2r5s13:8080 REACT_APP_BASE_URL=localhost:8080
REACT_APP_SOCKET_URL=bess-f2r5s13 REACT_APP_SOCKET_URL=localhost
REACT_APP_API_SECRET=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 REACT_APP_API_SECRET=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
REACT_APP_CLIENT_UID=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789 REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
REACT_APP_INTRA_URL="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789&redirect_uri=http%3A%2F%2Fbess-f2r5s13%3A8080%2Fapi%2Fauth%2Flogin&response_type=code"
# REACT_APP_BASE_URL=92.143.191.152
# REACT_APP_BASE_URL=192.168.1.19
REACT_APP_INTRA_URL="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fapi%2Fauth%2Flogin&response_type=code"
# REACT_APP_BASE_URL=92.143.191.152 # REACT_APP_BASE_URL=92.143.191.152
# REACT_APP_BASE_URL=192.168.1.19 # REACT_APP_BASE_URL=192.168.1.19

4
containers/react/src/components/Alert/GreenAlert.tsx
View File

@ -23,8 +23,9 @@ interface AlertProps {
} }
function GreenAlert ({handleClose, text}: AlertProps){ function GreenAlert ({handleClose, text}: AlertProps){
{setTimeout(handleClose, 1500)}
return( return(
<Backdrop onClick={handleClose}> <Backdrop onClick={handleClose}>
<motion.div <motion.div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@ -37,7 +38,6 @@ function GreenAlert ({handleClose, text}: AlertProps){
<AiOutlineCheckCircle/> <AiOutlineCheckCircle/>
<p>{text}</p> <p>{text}</p>
</motion.div> </motion.div>
{setTimeout(handleClose, 1500)}
</Backdrop> </Backdrop>
) )
} }

2
containers/react/src/components/Alert/RedAlert.tsx
View File

@ -23,6 +23,7 @@ interface AlertProps {
} }
function RedAlert ({handleClose, text}: AlertProps) { function RedAlert ({handleClose, text}: AlertProps) {
{setTimeout(handleClose, 1500)}
return( return(
<Backdrop onClick={handleClose}> <Backdrop onClick={handleClose}>
<motion.div <motion.div
@ -36,7 +37,6 @@ function RedAlert ({handleClose, text}: AlertProps) {
<BiErrorCircle/> <BiErrorCircle/>
<p>{text}</p> <p>{text}</p>
</motion.div> </motion.div>
{setTimeout(handleClose, 1500)}
</Backdrop> </Backdrop>
) )
} }

2
containers/react/src/components/Alert/YellowAlert.tsx
View File

@ -25,6 +25,7 @@ interface AlertProps {
} }
function YellowAlert ({handleClose, text, icon}: AlertProps) { function YellowAlert ({handleClose, text, icon}: AlertProps) {
{setTimeout(handleClose, 3000)}
return( return(
<Backdrop onClick={handleClose}> <Backdrop onClick={handleClose}>
<motion.div <motion.div
@ -53,7 +54,6 @@ function YellowAlert ({handleClose, text, icon}: AlertProps) {
<h5>{text}</h5> <h5>{text}</h5>
</motion.div> </motion.div>
{setTimeout(handleClose, 3000)}
</Backdrop> </Backdrop>
) )
} }

15
containers/react/src/components/Game/PlayButton.tsx
View File

@ -1,16 +1,10 @@
import React from 'react'; import React from 'react';
import '../../styles/field.css'; import '../../styles/field.css';
// import { useHistory } from 'react-router-dom';
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
function PlayButton() { function PlayButton() {
const history = useNavigate(); const history = useNavigate();
// const handleButtonClick = () => {
// let path = `play`;
// history(path);
// };
const handleButtonClick = () => { const handleButtonClick = () => {
let path = `play?`; let path = `play?`;
@ -19,17 +13,11 @@ function PlayButton() {
path += 'superpower=true&'; path += 'superpower=true&';
} }
// const obstacleCheckbox = document.querySelector<HTMLInputElement>('input[value="obstacle"]');
// if (obstacleCheckbox && obstacleCheckbox.checked) {
// path += 'obstacle=true&';
// }
const speedCheckbox = document.querySelector<HTMLInputElement>('input[value="speed"]'); const speedCheckbox = document.querySelector<HTMLInputElement>('input[value="speed"]');
if (speedCheckbox && speedCheckbox.checked) { if (speedCheckbox && speedCheckbox.checked) {
path += 'speed=true&'; path += 'speed=true&';
} }
// Remove the trailing '&' character
path = path.slice(0, -1); path = path.slice(0, -1);
console.log(path) console.log(path)
history(path); history(path);
@ -40,8 +28,7 @@ function PlayButton() {
<button onClick={handleButtonClick} className="playButton">Play</button> <button onClick={handleButtonClick} className="playButton">Play</button>
{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */} {/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
<div className='checkbox'> <div className='checkbox'>
<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power</p> <p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power <br/> ( w = wall power ) </p>
{/* <p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p> */}
<p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p> <p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
</div> </div>
</div> </div>

16
containers/react/src/components/Messages/Chats.tsx
View File

@ -17,6 +17,7 @@ import { ImBlocked } from 'react-icons/im';
import { MdOutlineGroupAdd } from 'react-icons/md'; import { MdOutlineGroupAdd } from 'react-icons/md';
import { GrAdd } from 'react-icons/gr'; import { GrAdd } from 'react-icons/gr';
import { RiListSettingsLine } from 'react-icons/ri' import { RiListSettingsLine } from 'react-icons/ri'
import { HiChatBubbleLeft } from 'react-icons/hi2'
// import { Rank } from "../../DataBase/DataRank"; // import { Rank } from "../../DataBase/DataRank";
import GreenAlert from "../Alert/GreenAlert.tsx"; import GreenAlert from "../Alert/GreenAlert.tsx";
@ -269,6 +270,8 @@ function Chats(){
const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]); const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
const [users, setUsers] = useState<User[]>([]); const [users, setUsers] = useState<User[]>([]);
const [unblock, setUnblock] = useState(false);
const closeUnblock = () => setUnblock(false);
const openNewGameModal = () => { const openNewGameModal = () => {
setNewGameModalOpen(true); setNewGameModalOpen(true);
@ -322,10 +325,13 @@ function Chats(){
} }
}; };
const handleBlockFriend = async () => { const handleBlockFriend = async () => {
try{ try{
const res = await api.post("/block", {username: friend}) const res = await api.post("/block", {username: friend})
// if(1) // if(1)
if (res.data === 2)
setUnblock(true);
if (res.data === 1) if (res.data === 1)
{ {
setBlock(true); setBlock(true);
@ -434,7 +440,7 @@ function Chats(){
onChange={(a) => handleOptionChange(selectTag.id, a.target.value)} onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
> >
<option value="">{ <option value="">{
selectTag.selectedOption ? selectTag.selectedOption : "Select an option" selectTag.selectedOption ? selectTag.selectedOption : "Select a user"
}</option> }</option>
{users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.username)).map((item, index) => ( {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.username)).map((item, index) => (
<option key={index} value={item.username}> <option key={index} value={item.username}>
@ -468,6 +474,9 @@ function Chats(){
{showBlockAlert && !block && ( {showBlockAlert && !block && (
<RedAlert handleClose={closeBlock} text={friend + ' was not found'} /> <RedAlert handleClose={closeBlock} text={friend + ' was not found'} />
)} )}
{unblock ? (
<GreenAlert handleClose={closeUnblock} text={friend + ' was unblocked'} />
):("")}
</AnimatePresence> </AnimatePresence>
</TouchDiv> </TouchDiv>
{currentChat && isAdmin ? ( {currentChat && isAdmin ? (
@ -475,7 +484,7 @@ function Chats(){
<motion.div <motion.div
onClick={() => (setting ? setSetting(false) : setSetting(true))} onClick={() => (setting ? setSetting(false) : setSetting(true))}
> >
<RiListSettingsLine/> <RiListSettingsLine className="block"/>
<AnimatePresence <AnimatePresence
initial={false} initial={false}
onExitComplete={() => null} onExitComplete={() => null}
@ -526,7 +535,8 @@ function Chats(){
<div key={index} <div key={index}
onClick={() => setCurrentChat(c)}> onClick={() => setCurrentChat(c)}>
<UserChat> <UserChat>
<img className="pic-user" src={DefaultPic} alt="User" /> {/* <img className="pic-user" src={DefaultPic} alt="User" /> */}
<HiChatBubbleLeft className="catchat"/>
<div className="infoSideBar"> <div className="infoSideBar">
<span>{c.name}</span> <span>{c.name}</span>
{/* <SideP>Desc?</SideP> */} {/* <SideP>Desc?</SideP> */}

8
containers/react/src/components/Messages/Modal.tsx
View File

@ -123,7 +123,7 @@ const Modal = ({handleClose}: ModalProps) => {
onChange={(a) => handleOptionChange(selectTag.id, a.target.value)} onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
> >
<option value="">{ <option value="">{
selectTag.selectedOption ? selectTag.selectedOption : "Select an option" selectTag.selectedOption ? selectTag.selectedOption : "Select a user"
}</option> }</option>
{users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.nickname)).map((item, index) => ( {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.nickname)).map((item, index) => (
<option key={index} value={item.username}> <option key={index} value={item.username}>
@ -137,9 +137,7 @@ const Modal = ({handleClose}: ModalProps) => {
<GrAdd onClick={addNewSelectedTag}/> <GrAdd onClick={addNewSelectedTag}/>
</div> </div>
<div className="div_submit"> <div className="div_submit">
<Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link> <Link to='#' className="submit" onClick={saveSelectedOptions}>Submit</Link>
<Link to="#" className="submit" onClick={() => handleClose}>Cancel</Link>
</div> </div>
</div> </div>
@ -152,7 +150,7 @@ const Modal = ({handleClose}: ModalProps) => {
onChange={(event) => setChannel(event.target.value)} onChange={(event) => setChannel(event.target.value)}
> >
<option value="">Select an option</option> <option value="">Select a channel</option>
{convs.map((conv) => ( {convs.map((conv) => (
!(!conv.group || conv.private || (conv.banned && user && conv.banned.includes(user.username)) || (conv.members && user && conv.members.includes(user.username))) && ( !(!conv.group || conv.private || (conv.banned && user && conv.banned.includes(user.username)) || (conv.members && user && conv.members.includes(user.username))) && (
<option key={conv.id} value={conv.id}> <option key={conv.id} value={conv.id}>

25
containers/react/src/components/Messages/ModalSetting.tsx
View File

@ -1,4 +1,4 @@
import { motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import Backdrop from "../Sidebar/Backdrop.tsx"; import Backdrop from "../Sidebar/Backdrop.tsx";
// import { Rank } from "../../DataBase/DataRank" // import { Rank } from "../../DataBase/DataRank"
import '../../styles/Messages.css' import '../../styles/Messages.css'
@ -9,6 +9,7 @@ import api from "../../script/axiosApi.tsx";
import React from "react"; import React from "react";
import {User} from "../../../interfaces.tsx" import {User} from "../../../interfaces.tsx"
import { Socket } from "socket.io-client"; import { Socket } from "socket.io-client";
import GreenAlert from "../Alert/GreenAlert.tsx";
const dropIn = { const dropIn = {
@ -161,13 +162,18 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
handleClose(); handleClose();
} }
const [unban, setUnban] = useState(false);
const closeUnban = () => setUnban(false);
const handleBan = async () => { const handleBan = async () => {
// console.log("ban option= ", selectedUser) // console.log("ban option= ", selectedUser)
try{ try{
// console.log("user select=", selectedUser.length) // console.log("user select=", selectedUser.length)
if (!selectedUser.length) if (!selectedUser.length)
return ; return ;
await api.post("/ban", {convId: convId, username: selectedUser}) const res = await api.post("/ban", {convId: convId, username: selectedUser})
if (res.data === 2)
setUnban(true);
if (socket) if (socket)
{ {
console.log("emit to ban server") console.log("emit to ban server")
@ -207,8 +213,8 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
const handleInvite = async () => { const handleInvite = async () => {
try{ try{
console.log("post invite bitch") console.log("post invite bitch");
await api.post("/inviteConv", {convId: convId, username: selectedUser}) await api.post("/inviteConv", {convId: convId, username: selectedUser});
} catch(err) { } catch(err) {
console.log(err); console.log(err);
} }
@ -244,7 +250,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
<Link to="#" onClick={dark} className={ privateConv ? "darkSubmit" : "submit"}>Private</Link> <Link to="#" onClick={dark} className={ privateConv ? "darkSubmit" : "submit"}>Private</Link>
</div> </div>
{/* <p className="checkbox">Private<input className="check"type="checkbox" value="private" onChange={handleCheckPriv}/></p> */} {/* <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 ? ( {password ? (
@ -294,7 +300,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
<div> <div>
<Link to="#" onClick={handleInvite} className="submit">Send</Link> <Link to="#" onClick={handleInvite} className="submit">Invite</Link>
<Link to="#" onClick={handleBan} className="submit">Ban</Link> <Link to="#" onClick={handleBan} className="submit">Ban</Link>
<Link to="#" onClick={mute ? darkMute : lightMute} className={mute ? "darkSubmit": "submit"}>Mute</Link> <Link to="#" onClick={mute ? darkMute : lightMute} className={mute ? "darkSubmit": "submit"}>Mute</Link>
<Link to="#" onClick={handleAdmin} className="submit">Admin</Link> <Link to="#" onClick={handleAdmin} className="submit">Admin</Link>
@ -306,11 +312,16 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
onKeyDown={handleMute} onKeyDown={handleMute}
type="number" type="number"
className="in_howLong" className="in_howLong"
placeholder="How long ?" placeholder="Time"
value={time} value={time}
onChange={(e) => setTime(e.target.value)} onChange={(e) => setTime(e.target.value)}
/> />
):("")} ):("")}
<AnimatePresence initial={false} onExitComplete={() => null}>
{unban ? (
<GreenAlert handleClose={closeUnban} text={selectedUser+": was unbanned"} />
): ("")}
</AnimatePresence>
</motion.div> </motion.div>
</Backdrop> </Backdrop>

15
containers/react/src/components/Profile/EditName.tsx
View File

@ -54,14 +54,12 @@ const ModalEdit = () => {
const handlePostNickname = async () => { const handlePostNickname = async () => {
console.log("nickname=", nickname) console.log("nickname=", nickname)
try { try {
const ret = await api.post("/nickname", { nickname: nickname });
// console.log("cest ici = ",ret); // console.log("cest ici = ",ret);
// if (!ret) // if (!ret)
console.log("test ret =", ret.data); // console.log("test ret =", ret.data);
if (nickname.length < 3) { if (nickname.length > 3) {
setErrTooShort(true); const ret = await api.post("/nickname", { nickname: nickname });
} if (ret.data) {
else if (ret.data) {
console.log("ici error = ", ret.data); console.log("ici error = ", ret.data);
window.location.reload(); window.location.reload();
} }
@ -70,6 +68,11 @@ const ModalEdit = () => {
setErrTaken(true); setErrTaken(true);
} }
}
else if (nickname.length < 3)
{
setErrTooShort(true);
}
// setUser(tmpUser.data); // setUser(tmpUser.data);

20
containers/react/src/pages/Home.tsx
View File

@ -3,16 +3,18 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Home.tsx :+: :+: :+: */ /* Home.tsx :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/09 08:19:04 by apommier #+# #+# */ /* Created: 2023/06/09 08:19:04 by apommier #+# #+# */
/* Updated: 2023/06/24 23:26:45 by apommier ### ########.fr */ /* Updated: 2023/06/26 04:03:16 by sadjigui ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
// import { React, useState } from "react"; // import { React, useState } from "react";
import '../styles/Profile.css' import '../styles/Profile.css'
// import '../styles/App.css' // import '../styles/App.css'
import RedAlert from "../components/Alert/RedAlert.tsx";
import DefaultPicture from "../assets/profile.jpg"; import DefaultPicture from "../assets/profile.jpg";
import WinLoss from "../components/Profile/Win_Loss.tsx"; import WinLoss from "../components/Profile/Win_Loss.tsx";
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
@ -52,7 +54,10 @@ function Profile () {
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
const [modalOpen, setModalOpen] = useState<boolean>(false); const [modalOpen, setModalOpen] = useState<boolean>(false);
const [mine, setMine] = useState<boolean>(false); const [mine, setMine] = useState<boolean>(false);
const [error, setError] = useState<boolean>(false);
// const [visible, setVisible] = useState<boolean>(false);
const close = () => setModalOpen(false); const close = () => setModalOpen(false);
const closeError = () => setError(false);
const open = () => setModalOpen(true); const open = () => setModalOpen(true);
const { username } = useParams(); const { username } = useParams();
@ -76,6 +81,7 @@ function Profile () {
console.log('File uploaded successfully'); console.log('File uploaded successfully');
window.location.reload(); window.location.reload();
} catch (error) { } catch (error) {
setError(true);
console.error('Error uploading file:', error); console.error('Error uploading file:', error);
} }
} }
@ -146,6 +152,14 @@ function Profile () {
<> <>
<label htmlFor="file-input" className="edit_name"><MdOutlinePhotoLibrary/></label> <label htmlFor="file-input" className="edit_name"><MdOutlinePhotoLibrary/></label>
<input type="file" id="file-input" className="file-input" accept="image/*" onChange={handleFileChange} /> <input type="file" id="file-input" className="file-input" accept="image/*" onChange={handleFileChange} />
<AnimatePresence initial={false} onExitComplete={() => null}>
{error ? (
<RedAlert handleClose={closeError} text={'Error : upload failed'} />
): ("")}
</AnimatePresence>
</> </>
)} )}
</motion.div> </motion.div>
@ -229,7 +243,7 @@ function Home () {
// backdropFilter: move ? "blur(10px)" : "none", // backdropFilter: move ? "blur(10px)" : "none",
// WebkitBackdropFilter: move ? "blur(10px)" : "none" // WebkitBackdropFilter: move ? "blur(10px)" : "none"
// }} // }}
animate={{x: move ? '-50%' : '30%'}} animate={{x: move ? '-50%' : '25%'}}
transition={{type: "tween", duration: 0.5}}> transition={{type: "tween", duration: 0.5}}>
<Profile/> <Profile/>
</motion.div> </motion.div>

14
containers/react/src/pages/QrCode.tsx
View File

@ -6,7 +6,8 @@ import "../styles/App.css";
import api from '../script/axiosApi.tsx'; import api from '../script/axiosApi.tsx';
import QRCodeStyling from "qr-code-styling"; 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 [secret, setSecret] = useState(false);
const [code, setCode] = useState(''); const [code, setCode] = useState('');
const [activated, setActivated] = useState(false); const [activated, setActivated] = useState(false);
const [err, setErr] = useState(false);
const closeErr = () => setErr(false);
// const history = useHistory(); // const history = useHistory();
@ -80,6 +83,10 @@ function QrCode () {
const res = await api.post("/verifyOtp", {token: code}) const res = await api.post("/verifyOtp", {token: code})
console.log("res= ", res.data) console.log("res= ", res.data)
console.log("res= ", res) console.log("res= ", res)
if (!res.data)
{
setErr(true);
}
if (res.data === 1) if (res.data === 1)
{ {
console.log("registered") console.log("registered")
@ -158,6 +165,11 @@ function QrCode () {
) : ( ) : (
<button className="desactivate" onClick={handleDesactivate}>Desactivate 2FA</button> <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') && ( {/* {!localStorage.getItem('token') && (

3
containers/react/src/styles/App.css
View File

@ -15,9 +15,10 @@ input.qr{
border-radius: 5px; border-radius: 5px;
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
margin : 1%; margin : 1%;
color:rgb(42, 41, 41); border-color:rgb(42, 41, 41);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
color: #ccc;
} }
.desactivate { .desactivate {

13
containers/react/src/styles/Messages.css
View File

@ -233,9 +233,9 @@ p {
backdrop-filter: sepia(90%); backdrop-filter: sepia(90%);
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
border-radius: 4px; border-radius: 4px;
width: 11rem; width: 15rem;
height: 1.5rem; height: 2rem;
margin-top: 1rem; margin-top: 1.3rem;
} }
.greenAlert{ .greenAlert{
@ -385,4 +385,11 @@ input.in_howLong{
.block{ .block{
font-size: 25px; font-size: 25px;
margin-left: 12px; margin-left: 12px;
margin-top: 0.2rem;
}
.inside_ckeckbox{
height: 25px;
margin-left: -50px;
} }