merge reborn

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

19
.env
View File

@ -7,18 +7,17 @@
# POSTGRES_PASSWORD=pass
# POSTGRES_DB=postgreDB
# POSTGRES_ROOT_PASSWORD=pass
# POSTGRES_HOST=bess-f2r5s13
# POSTGRES_HOST=localhost
# POSTGRES_HOST_AUTH_METHOD=trust
#URL
NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf"
# BASE_URL=http://bess-f2r5s13
# SOCKET_URL=bess-f2r5s13:8080
BASE_URL=bess-f2r5s13:8080
REACT_APP_BASE_URL=bess-f2r5s13:8080
REDIRECT_URI=http://bess-f2r5s13: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"
# BASE_URL=http://localhost
# SOCKET_URL=localhost:8080
BASE_URL=localhost:8080
REACT_APP_BASE_URL=localhost:8080
REDIRECT_URI=http://localhost:8080/api/auth/login
#postgres var
# POSTGRES_HOST=127.0.0.1
# DB_TYPE=postgres
@ -43,6 +42,6 @@ REACT_HOST=0.0.0.0
#auth var
JWT_SECRET=secrethere
# REDIRECT_URI=http://bess-f2r5s13:80/api/auth/login
API_SECRET=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
CLIENT_UID=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789
# REDIRECT_URI=http://localhost:80/api/auth/login
API_SECRET=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
CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41

View File

@ -6,13 +6,12 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 { FileInterceptor } from '@nestjs/platform-express';
import { JwtAuthGuard } from './auth/jwt-auth.guard';
import { AuthService } from './auth/auth.service';
import { loginClass } from './auth/login42'
@ -452,14 +451,22 @@ export class AppController {
@UseGuards(JwtAuthGuard)
@Post('/quit')
async setOffline(@Request() req) {
const user = await this.userService.findOne(req.user.username);
user.status = 0;
user.sessionNumber-- ;
if (!user.sessionNumber)
user.status = 0;
await this.userService.save(user);
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);
}
//========================================================================================================
//========================================================================================================

View File

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

View File

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 || [];
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.banned.push(username);
this.save(conv);
return (1);
}
async inviteUser(convId: number, username: string) {

View File

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

View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* users.service.ts :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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);
user.blocked = user.blocked || [];
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);
this.save(user);
return (1);

View File

@ -1,8 +1,11 @@
REACT_APP_BASE_URL=bess-f2r5s13:8080
REACT_APP_SOCKET_URL=bess-f2r5s13
REACT_APP_API_SECRET=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
REACT_APP_CLIENT_UID=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789
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=localhost:8080
REACT_APP_SOCKET_URL=localhost
REACT_APP_API_SECRET=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
REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
# 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=192.168.1.19

View File

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

View File

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

View File

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

View File

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

View File

@ -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";
@ -269,6 +270,8 @@ function Chats(){
const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
const [users, setUsers] = useState<User[]>([]);
const [unblock, setUnblock] = useState(false);
const closeUnblock = () => setUnblock(false);
const openNewGameModal = () => {
setNewGameModalOpen(true);
@ -322,10 +325,13 @@ function Chats(){
}
};
const handleBlockFriend = async () => {
try{
const res = await api.post("/block", {username: friend})
// if(1)
if (res.data === 2)
setUnblock(true);
if (res.data === 1)
{
setBlock(true);
@ -434,7 +440,7 @@ function Chats(){
onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
>
<option value="">{
selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
selectTag.selectedOption ? selectTag.selectedOption : "Select a user"
}</option>
{users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.username)).map((item, index) => (
<option key={index} value={item.username}>
@ -468,6 +474,9 @@ function Chats(){
{showBlockAlert && !block && (
<RedAlert handleClose={closeBlock} text={friend + ' was not found'} />
)}
{unblock ? (
<GreenAlert handleClose={closeUnblock} text={friend + ' was unblocked'} />
):("")}
</AnimatePresence>
</TouchDiv>
{currentChat && isAdmin ? (
@ -475,7 +484,7 @@ function Chats(){
<motion.div
onClick={() => (setting ? setSetting(false) : setSetting(true))}
>
<RiListSettingsLine/>
<RiListSettingsLine className="block"/>
<AnimatePresence
initial={false}
onExitComplete={() => null}
@ -526,7 +535,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> */}

View File

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

View File

@ -1,4 +1,4 @@
import { motion } from "framer-motion";
import { AnimatePresence, motion } from "framer-motion";
import Backdrop from "../Sidebar/Backdrop.tsx";
// import { Rank } from "../../DataBase/DataRank"
import '../../styles/Messages.css'
@ -9,6 +9,7 @@ import api from "../../script/axiosApi.tsx";
import React from "react";
import {User} from "../../../interfaces.tsx"
import { Socket } from "socket.io-client";
import GreenAlert from "../Alert/GreenAlert.tsx";
const dropIn = {
@ -161,13 +162,18 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
handleClose();
}
const [unban, setUnban] = useState(false);
const closeUnban = () => setUnban(false);
const handleBan = async () => {
// console.log("ban option= ", selectedUser)
try{
// console.log("user select=", selectedUser.length)
if (!selectedUser.length)
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)
{
console.log("emit to ban server")
@ -207,8 +213,8 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
const handleInvite = async () => {
try{
console.log("post invite bitch")
await api.post("/inviteConv", {convId: convId, username: selectedUser})
console.log("post invite bitch");
await api.post("/inviteConv", {convId: convId, username: selectedUser});
} catch(err) {
console.log(err);
}
@ -244,7 +250,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 ? (
@ -294,7 +300,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
<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={mute ? darkMute : lightMute} className={mute ? "darkSubmit": "submit"}>Mute</Link>
<Link to="#" onClick={handleAdmin} className="submit">Admin</Link>
@ -306,11 +312,16 @@ 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)}
/>
):("")}
<AnimatePresence initial={false} onExitComplete={() => null}>
{unban ? (
<GreenAlert handleClose={closeUnban} text={selectedUser+": was unbanned"} />
): ("")}
</AnimatePresence>
</motion.div>
</Backdrop>

View File

@ -54,21 +54,24 @@ const ModalEdit = () => {
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) {
setErrTooShort(true);
}
else if (ret.data) {
console.log("ici error = ", ret.data);
window.location.reload();
}
else {
console.log("nickname already set = ", ret.data);
// 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);
setErrTaken(true);
}
}
else if (nickname.length < 3)
{
setErrTooShort(true);
}

View File

@ -3,16 +3,18 @@
/* ::: :::::::: */
/* Home.tsx :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 '../styles/Profile.css'
// import '../styles/App.css'
import RedAlert from "../components/Alert/RedAlert.tsx";
import DefaultPicture from "../assets/profile.jpg";
import WinLoss from "../components/Profile/Win_Loss.tsx";
import { motion, AnimatePresence } from 'framer-motion'
@ -52,7 +54,10 @@ function Profile () {
const [isLoading, setIsLoading] = useState<boolean>(true);
const [modalOpen, setModalOpen] = 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 closeError = () => setError(false);
const open = () => setModalOpen(true);
const { username } = useParams();
@ -76,6 +81,7 @@ function Profile () {
console.log('File uploaded successfully');
window.location.reload();
} catch (error) {
setError(true);
console.error('Error uploading file:', error);
}
}
@ -146,6 +152,14 @@ function Profile () {
<>
<label htmlFor="file-input" className="edit_name"><MdOutlinePhotoLibrary/></label>
<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>
@ -229,7 +243,7 @@ function Home () {
// backdropFilter: 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}}>
<Profile/>
</motion.div>

View File

@ -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') && (

View File

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

View File

@ -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;
}