From 5b1a1487e1a24e9433fc145ffbaed12c2a4e6ba8 Mon Sep 17 00:00:00 2001 From: kinou-p Date: Sat, 17 Jun 2023 02:08:55 +0200 Subject: [PATCH] add working ban, invite, mute, admin, change name/pass. no verified perm, reset the add friend/ban user to when it worked --- .env | 6 +- containers/api/src/app.controller.ts | 60 ++- containers/api/src/chat/chat.service.ts | 131 ++++--- containers/api/src/model/chat.entity.ts | 21 + containers/api/src/users/users.service.ts | 12 + containers/react/.env | 2 +- .../src/components/Messages/Chats copy.jsx | 362 ++++++++++++++++++ .../react/src/components/Messages/Chats.jsx | 87 ++--- .../src/components/Messages/ModalSetting.jsx | 230 +++++++++++ containers/react/src/pages/Home.js | 2 +- containers/react/src/styles/Messages.css | 56 ++- containers/react/src/styles/Win_Loss.css | 4 + 12 files changed, 845 insertions(+), 128 deletions(-) create mode 100644 containers/react/src/components/Messages/Chats copy.jsx create mode 100644 containers/react/src/components/Messages/ModalSetting.jsx diff --git a/.env b/.env index 4b96a475..aae0c767 100644 --- a/.env +++ b/.env @@ -14,9 +14,9 @@ NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf" # BASE_URL=http://localhost -BASE_URL=92.143.191.152 -REACT_APP_BASE_URL=92.143.191.152 -REDIRECT_URI=http://92.143.191.152/api/auth/login +BASE_URL=localhost +REACT_APP_BASE_URL=localhost +REDIRECT_URI=http://localhost/api/auth/login #postgres var # POSTGRES_HOST=127.0.0.1 # DB_TYPE=postgres diff --git a/containers/api/src/app.controller.ts b/containers/api/src/app.controller.ts index 14046904..e396be5b 100644 --- a/containers/api/src/app.controller.ts +++ b/containers/api/src/app.controller.ts @@ -1,3 +1,15 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* app.controller.ts :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: apommier +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* Created: 2023/06/17 01:00:00 by apommier #+# #+# */ +/* Updated: 2023/06/17 01:47:43 by apommier ### ########.fr */ +/* */ +/* ************************************************************************** */ + import { Controller, Request, Req, Get, Post, UseGuards, Redirect, Res, Body, UploadedFile, UseInterceptors} from '@nestjs/common'; import { FileInterceptor } from '@nestjs/platform-express'; @@ -93,12 +105,16 @@ export class AppController { const conv = { id: null, name: req.user.username + ", " + data.username, - banned: null, - admin: null, - messages: null, + banned: [], + admin: [], + muted: [], members: [], owner: req.user.username, + password: null, + messages: null, group: false, + private: false, + }; conv.members.push(req.user.username); conv.members.push(data.username); @@ -441,4 +457,42 @@ export class AppController { // res.json(messages); } + @Post('/ban') + async banUser(@Body() data: any) { + return await this.chatService.banUser(data.convId, data.username) + } + + @Post('/name') + async setName(@Body() data: any) { + //find conv + // data.convId + return await this.chatService.setName(data.convId, data.name) + } + + @Post('/invite') + async inviteUser(@Body() data: any) { + return await this.chatService.inviteUser(data.convId, data.username) + } + + @Post('/password') + async setPassword(@Body() data: any) { + return await this.chatService.setPassword(data.convId, data.password) + } + + @Post('/admin') + async setAdmin(@Body() data: any) { + return await this.chatService.setAdmin(data.convId, data.username) + } + + @Post('/mute') + async muteUser(@Body() data: any) { + return await this.chatService.muteUser(data.convId, data.username) + } + + @Post('/private') + async setPrivate(@Body() data: any) { + return await this.chatService.setPrivate(data.convId) + } + + } \ No newline at end of file diff --git a/containers/api/src/chat/chat.service.ts b/containers/api/src/chat/chat.service.ts index 5cfa25a3..ed91847a 100644 --- a/containers/api/src/chat/chat.service.ts +++ b/containers/api/src/chat/chat.service.ts @@ -1,7 +1,14 @@ -// import { Injectable } from '@nestjs/common'; - -// @Injectable() -// export class ConvService {} +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* chat.service.ts :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: apommier +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* Created: 2023/06/17 01:00:25 by apommier #+# #+# */ +/* Updated: 2023/06/17 01:48:15 by apommier ### ########.fr */ +/* */ +/* ************************************************************************** */ import { Injectable } from '@nestjs/common'; import { InjectRepository } from '@nestjs/typeorm'; @@ -11,6 +18,7 @@ import { Message } from '../model/chat.entity'; import { ArrayContains } from "typeorm" import { query } from 'express'; +import { InitializeOnPreviewAllowlist } from '@nestjs/core'; @Injectable() @@ -19,17 +27,14 @@ export class ChatService { @InjectRepository(Message) private messageRepository: Repository, ) {} + async save(conv: Conv): Promise { + return await this.chatRepository.save(conv); +} + async createConv(conv: Conv): Promise { return await this.chatRepository.save(conv); } - - -// SELECT "conv"."id" AS "conv_id", "conv"."members" AS "conv_members", "conv"."name" AS "conv_name", "conv"."banned" AS "conv_banned", "conv"."admin" AS "conv_admin", "conv"."messages" AS "conv_messages" FROM "conv" "conv" WHERE $1 = ANY("conv"."members") - - -// import { createConnection } from 'typeorm'; - async getConv(username: string): Promise{ // username = "apommier" const convs = await this.chatRepository.query("SELECT * FROM \"conv\" WHERE $1 = ANY (ARRAY[members]);", [username]) @@ -44,56 +49,76 @@ async findConv(number: number){ return conv; } -// Usage -// const user = 'user1'; -// findConvsContainingUser(user) -// .then((convs) => { -// console.log('Convs containing user:', convs); -// }) -// .catch((error) => { -// console.error('Error:', error); -// }); - // return await this.chatRepository.findOneBy({ - // members: { $in: [username] }, - // }); - - // return await this.chatRepository.find() - - - // return await this.chatRepository.findOneBy({ - // members: ArrayContains(["apommier"]), - // }) - - // console.log(`get conv username= ${username} `) - // let test = await this.chatRepository.find({ - // where : { - // members: { $all: ["apommier"] }, - // }}) - // console.log(`test= ${test}`) - // return test -// } - - - - - -// -// message -// - async createMessage(message: Message): Promise { return await this.messageRepository.save(message); } async getMessages(convId: number): Promise { -// return await this.messageRepository.find({ -// where: { -// convId: convId, -// }, -// }); const convs = await this.chatRepository .query("SELECT * FROM \"message\" WHERE $1 = message.convid;", [convId]) return (convs) } + +async banUser(convId: number, username: string) { + const conv = await this.findConv(convId); + + conv.banned = conv.banned || []; + if (conv.banned.find(item => item === username)) + return (1); + conv.banned.push(username); + this.save(conv); +} + +async inviteUser(convId: number, username: string) { + // const conv = await this.findConv(convId); + // this.save(conv); + + //find user + //add in chanInvite chanID + //save user +} + +async setPassword(convId: number, password: string) { + //verify is user is admin ? + const conv = await this.findConv(convId); + conv.password = password + this.save(conv); +} + +async muteUser(convId: number, username: string) { + const conv = await this.findConv(convId); + + conv.muted = conv.muted || []; + if (conv.muted.find(item => item === username)) + return (1); + conv.muted.push(username); + this.save(conv); +} + +async setAdmin(convId: number, username: string) { + const conv = await this.findConv(convId); + + conv.admin = conv.admin || []; + if (conv.admin.find(item => item === username)) + return (1); + conv.admin.push(username); + this.save(conv); +} + +async setPrivate(convId: number) { + const conv = await this.findConv(convId); + if (conv.private === true) + conv.private = false; + else + conv.private = true; + this.save(conv); +} + +async setName(convId: number, name: string) { + const conv = await this.findConv(convId); + conv.name = name; + this.save(conv); +} + } diff --git a/containers/api/src/model/chat.entity.ts b/containers/api/src/model/chat.entity.ts index eb483c35..b81950d6 100644 --- a/containers/api/src/model/chat.entity.ts +++ b/containers/api/src/model/chat.entity.ts @@ -1,3 +1,15 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* chat.entity.ts :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: apommier +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* Created: 2023/06/17 01:00:20 by apommier #+# #+# */ +/* Updated: 2023/06/17 01:31:29 by apommier ### ########.fr */ +/* */ +/* ************************************************************************** */ + import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, BaseEntity } from 'typeorm'; @Entity() @@ -14,17 +26,26 @@ import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, BaseEntity } @Column({ nullable: true }) group: boolean + @Column({ nullable: true }) + private: boolean + // @Column() // members: string;// arry ??? one to many ??? @Column('text', { array: true, nullable: true }) banned: string[]; + @Column('text', { array: true, nullable: true }) + muted: string[]; + @Column('text', { array: true, nullable: true }) admin: string[]; @Column({ nullable: true }) owner: string; + + @Column({ nullable: true }) + password: string; @Column({ nullable: true }) messages: string; diff --git a/containers/api/src/users/users.service.ts b/containers/api/src/users/users.service.ts index 5b596874..45a9e1e4 100644 --- a/containers/api/src/users/users.service.ts +++ b/containers/api/src/users/users.service.ts @@ -1,3 +1,15 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* users.service.ts :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: apommier +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* Created: 2023/06/17 01:00:07 by apommier #+# #+# */ +/* Updated: 2023/06/17 01:00:08 by apommier ### ########.fr */ +/* */ +/* ************************************************************************** */ + import { Injectable } from '@nestjs/common'; import { InjectRepository } from '@nestjs/typeorm'; import { Repository } from 'typeorm'; diff --git a/containers/react/.env b/containers/react/.env index 164f6aa7..3b0e2b83 100644 --- a/containers/react/.env +++ b/containers/react/.env @@ -1,2 +1,2 @@ -REACT_APP_BASE_URL=92.143.191.152 +REACT_APP_BASE_URL=localhost # REACT_APP_BASE_URL=192.168.1.19 \ No newline at end of file diff --git a/containers/react/src/components/Messages/Chats copy.jsx b/containers/react/src/components/Messages/Chats copy.jsx new file mode 100644 index 00000000..56b7c017 --- /dev/null +++ b/containers/react/src/components/Messages/Chats copy.jsx @@ -0,0 +1,362 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* Chats.jsx :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: apommier +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* Created: 2023/06/17 00:59:57 by apommier #+# #+# */ +/* Updated: 2023/06/17 01:24:24 by apommier ### ########.fr */ +/* */ +/* ************************************************************************** */ + +import React, { useState, useEffect, useRef } from "react"; +import io from 'socket.io-client'; +import '../../styles/Messages.css' +import styled from "styled-components"; +import DefaultPic from '../../assets/profile.jpg' +import api from '../../script/axiosApi'; +import { motion , AnimatePresence} from "framer-motion"; +import Modal from "./Modal"; + +import Message from "./Message" +// import Input from "./Input"; + +//react icons +import { TbSend } from 'react-icons/tb'; +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 { Rank } from "../../DataBase/DataRank"; +import GreenAlert from "../Alert/GreenAlert"; +import RedAlert from "../Alert/RedAlert"; +import YellowAlert from "../Alert/YellowAlert"; +import ModalSetting from "./ModalSetting"; + + +const TouchDiv = styled.div` + margin-left: 10px; + margin-right: 4px; + margin-bottom: 21px; + margin-top: 21px; + cursor: pointer; + justify-content: space-around; + + &:hover { + color: #F4F3EF; + } +` + +const UserChat = styled.div ` + padding: 5px; + display: flex; + align-items: center; + gap: 5px; + color: white; + cursor: pointer; + + &:hover{ + background-color: #3e3c61; + } + &:active { + filter: black; + } +` + +// const SideSpan = styled.span` +// font-size: 18px; +// font-weight: 500; +// ` + +const SideP = styled.p` + font-size: 14px; + color: lightgray; + margin-left: 15px; +` + +//======================================================================================================== +//======================================================================================================== +// Logical part +//======================================================================================================== +//======================================================================================================== + + +function Chats(){ + + const [isLoading, setIsLoading] = useState(true); + const [conversations, setConversation] = useState([]); + const [user, setUser] = useState(null); + const [currentChat, setCurrentChat] = useState(false); // false is good? + const [messages, setMessage] = useState([]); + const [newMessages, setNewMessage] = useState(""); + const [incomingMessage, setIncomingMessage] = useState(""); + const socket = useRef(); + + useEffect(()=> { + + const getConv = async ()=>{ + try{ + const convs = await api.get("/conv") + const tmpUser = await api.get("/profile") + console.log(convs); + setUser(tmpUser.data); + setConversation(convs.data); + // return tmpUser; + + + // console.log(`user= ${tmpUser.data.username}`); + // console.log(`user= ${tmpUser.data.nickname}`); + // console.log(`user= ${tmpUser.data}`); + socket.current = io("ws://localhost:4001"); + console.log(`connection....`); + socket.current.emit('connection', {username: tmpUser.data.username}) + // const socket = io("http://localhost:4001", { + // query: { + // username: user.username, + // },}); + socket.current.on('message', (data) => { //data should be a message ? + console.log(`message received data= ${data.sender}`) + console.log(`message received data= ${data.convId}`) + console.log(`message received data= ${data.sender}`) + console.log(`current chat = ${currentChat}`) + setIncomingMessage(data); + }); + setIsLoading(false) + + } + catch(err){ + console.log(err); + } + }; + getConv(); + + }, []) + + useEffect(()=> { + if (currentChat) + console.log(currentChat.id) + // console.log(`result1 = ${currentChat.id !== incomingMessage.convId}`) + if (currentChat !== null && currentChat.id === incomingMessage.convId) + setMessage((prev) => [...prev, incomingMessage]); + }, [incomingMessage, currentChat]) + + useEffect(()=> { + const getMessage = async ()=> + { + const data = {convId: currentChat.id}; + + try { + const res = await api.post('/getMessage', data); + setMessage(res.data); + } catch(err) { + + } + } + getMessage(); + }, [currentChat]); + + const handleSubmit = async (e)=>{ + e.preventDefault(); + // console.log(`e= ${e.key}`) + // console.log(`name= ${user.username}`) + const message = { + sender: user.username, + text: newMessages, + convId: currentChat.id, + members: null + }; + try{ + console.log(`id= ${currentChat.id}`) + const res = await api.post('/message', message); + const convMember = await api.post('/member', message); + message.members = convMember.data.members; + console.log(convMember); + // console.log(`currentChat= ${currentChat.id}`) + + setMessage([...messages, res.data]); + setNewMessage(""); + socket.current.emit('sendMessage', message); + } + catch(err){ + console.log(err) + } + } + + const handleKeyPress = async (e)=>{ + // console.log(`e in press= ${e.key}`) + if (e.key !== "Enter") + return ; + // console.log(`name= ${user.username}`) + const message = { + sender: user.username, + text: newMessages, + convId: currentChat.id, + members: null + }; + try{ + console.log(`id= ${currentChat.id}`) + const res = await api.post('/message', message); + const convMember = await api.post('/member', message); + message.members = convMember.data.members; + console.log(convMember); + // console.log(`currentChat= ${currentChat.id}`) + + setMessage([...messages, res.data]); + setNewMessage(""); + socket.current.emit('sendMessage', message); + } + catch(err){ + console.log(err) + } + } + + const [friend, setFriend] = useState(""); + const [modalOpen, setModalOpen] = useState(false); + const [addFriend, setAddFriend] = useState(false); + const [block, setBlock] = useState(false); + const [setting, setSetting] = useState(false); + const close = () => setModalOpen(false); + const open = () => setModalOpen(true); + const closeAddFriend = () => setAddFriend(false); + const closeBlock = () => setBlock(false); + const closeSetting = () => setSetting(false); + + + const handleFriend = e => { + setFriend(e.target.value) + }; + + +//======================================================================================================== +//======================================================================================================== +// HTML +//======================================================================================================== +//======================================================================================================== + + + return ( +
+ +
+ profile + + {isLoading ? ( +

Loading...

+ ) : ( +

{user.nickname}

+ )} + +
+ + + (addFriend ? setAddFriend(false) : setAddFriend(true))}> + + {/* {console.log("find = ",find) && setFind(true)} */} + + null} + > + {addFriend && } + + {/* {console.log("find2 = ", find) && find && } */} + + + (block ? setBlock(false) : setBlock(true))} + > + + null} + > + {block && } + + + + {currentChat ? ( + + + (setting ? setSetting(false) : setSetting(true))} + > + + null} + > + {setting && } + + + + ):("")} +
+
+
+
+ + + (modalOpen ? close() : open())} + > + + New Conversation + + {modalOpen && } + + + {conversations.map((c, index ) => { + return ( +
setCurrentChat(c)}> + + User +
+ {c.name} + Desc? +
+ +
+ + )})} +
+ + { + currentChat ? ( + <> +
+
+ {messages.map(m=>( + + ))} +
+ {/* */} +
+ setNewMessage(e.target.value)} + value={newMessages} + /> +
+ +
+
+
+ + ) : ( +
+ Open a conversation +
+ )} +
+
+ // + ); +} + +export default Chats \ No newline at end of file diff --git a/containers/react/src/components/Messages/Chats.jsx b/containers/react/src/components/Messages/Chats.jsx index 286c46ee..279ae749 100644 --- a/containers/react/src/components/Messages/Chats.jsx +++ b/containers/react/src/components/Messages/Chats.jsx @@ -15,11 +15,13 @@ import { TbSend } from 'react-icons/tb'; 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 { Rank } from "../../DataBase/DataRank"; import GreenAlert from "../Alert/GreenAlert"; import RedAlert from "../Alert/RedAlert"; import YellowAlert from "../Alert/YellowAlert"; +import ModalSetting from "./ModalSetting"; const TouchDiv = styled.div` @@ -80,14 +82,7 @@ function Chats(){ const [incomingMessage, setIncomingMessage] = useState(""); const socket = useRef(); - // Socket handler - // socket.on('message', (data) => { //data should be a message ? - // console.log(`message received data= ${data}`) - // setMessage([...messages, data]); - // }); - - //End of socket handler useEffect(()=> { @@ -98,19 +93,9 @@ function Chats(){ console.log(convs); setUser(tmpUser.data); setConversation(convs.data); - // return tmpUser; - - - // console.log(`user= ${tmpUser.data.username}`); - // console.log(`user= ${tmpUser.data.nickname}`); - // console.log(`user= ${tmpUser.data}`); socket.current = io('http://' + process.env.REACT_APP_BASE_URL + ':4001'); console.log(`connection....`); socket.current.emit('connection', {username: tmpUser.data.username}) - // const socket = io("http://localhost:4001", { - // query: { - // username: user.username, - // },}); socket.current.on('message', (data) => { //data should be a message ? console.log(`message received data= ${data.sender}`) console.log(`message received data= ${data.convId}`) @@ -137,23 +122,6 @@ function Chats(){ setMessage((prev) => [...prev, incomingMessage]); }, [incomingMessage, currentChat]) - // useEffect(()=> { - - // const getConv = async ()=>{ - // try{ - // const convs = await api.get("/conv") - // const tmpUser = await api.get("/profile") - // console.log(convs); - // setUser(tmpUser); - // setConversation(convs.data); - // } - // catch(err){ - // console.log(err); - // } - // }; - // getConv(); - // }, []) - useEffect(()=> { const getMessage = async ()=> { @@ -230,12 +198,16 @@ function Chats(){ const [modalOpen, setModalOpen] = useState(false); const [addFriend, setAddFriend] = useState(false); const [block, setBlock] = useState(false); - + const [showAddFriendAlert, setShowAddFriendAlert] = useState(false); const [showBlockAlert, setShowBlockAlert] = useState(false); - + + const [setting, setSetting] = useState(false); const close = () => setModalOpen(false); const open = () => setModalOpen(true); + // const closeAddFriend = () => setAddFriend(false); + // const closeBlock = () => setBlock(false); + const closeSetting = () => setSetting(false); // const closeAddFriend = () => setAddFriend(false); @@ -294,7 +266,6 @@ function Chats(){ setShowBlockAlert(false); }; - //======================================================================================================== //======================================================================================================== // HTML @@ -304,19 +275,6 @@ function Chats(){ return (
- {/*
- profile - - {isLoading ? ( -

Loading...

- ) : ( -

{user.nickname}

- //

{user.username}

- )} - -
*/} - -
profile @@ -327,11 +285,6 @@ function Chats(){

{user.nickname}

)} - - - - {/* work here bitch */} - {/*
@@ -359,8 +312,25 @@ function Chats(){ + {currentChat ? ( + + + (setting ? setSetting(false) : setSetting(true))} + > + + null} + > + {setting && } + + + + ):("")}
*/} -
+ +
@@ -389,11 +359,6 @@ function Chats(){
- - - - -
diff --git a/containers/react/src/components/Messages/ModalSetting.jsx b/containers/react/src/components/Messages/ModalSetting.jsx new file mode 100644 index 00000000..95908493 --- /dev/null +++ b/containers/react/src/components/Messages/ModalSetting.jsx @@ -0,0 +1,230 @@ +import { motion } from "framer-motion"; +import Backdrop from "../Sidebar/Backdrop"; +import { Rank } from "../../DataBase/DataRank" +import '../../styles/Messages.css' +import { useState, useEffect } from "react"; +import { GrAdd } from "react-icons/gr"; +import { Link } from "react-router-dom"; +import api from "../../script/axiosApi"; + + +const dropIn = { + hidden:{y:"-100vh", + opacity: 0,}, + visible:{y: "0", + opacity: 0, + transotion:{ + duration:0.1, + type:"spring", + damping: 100, + stiffness: 500, + }}, + exit:{y: "100vh", + opacity: 0,}, + +}; + +const ModalSetting = ({handleClose, convId}) => { + const [password, setPassword] = useState(false); + const [users, setUsers] = useState([]); + const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]); + const [selectedUser, setSelectedUser] = useState([]); + const [newName, setNewName] = useState(""); + const [newPassword, setNewPassword] = useState(""); + + useEffect(()=> { + + console.log("convid =", convId) + const getUsers = async ()=>{ + try { + const tmpUsers = await api.get("/users"); + console.log("users=", tmpUsers.data); + setUsers(tmpUsers.data); + } catch(err){ + console.log(err) + } + } + getUsers(); + }, []); + + // const [multi, setMulti] = useState(false); + // const [selectedOptionArray, setSelectedOptionArray] = useState([]); + + + const handleOptionChange = (selectId, selectedOption) => { + console.log("tag= ", selectTags) + console.log("option= ", selectedOption) + setSelectTag((prevTags) => + prevTags.map((tag) => + tag.id === selectId ? { ...tag, selectedOption } : tag + ) + ); + setSelectedUser(selectedOption) + }; + + const handleCheckPass = (e) => { + setPassword(e.target.checked); + console.log("password??", e.target.checked) + } + + const handleCheckPriv = (e) => { + // setPassword(e.target.checked); + if (e.target.checked) + { + console.log("chack true", e.target.checked) + try{ + api.post("/private", {convId: convId}) + } catch(err) { + console.log(err); + } + } + else + { + console.log("chack false", e.target.checked) + try{ + api.post("/private", {convId: convId}) + } catch(err) { + console.log(err); + } + } + } + + const handleName = async (e)=>{ + if (e.key !== "Enter") + return ; + try{ + api.post("/name", {convId: convId, name: newName}) + } catch(err) { + console.log(err); + } + handleClose(); + } + + const handlePassword = async (e)=>{ + if (e.key !== "Enter") + return ; + try{ + api.post("/password", {convId: convId, password: newPassword}) + } catch(err) { + console.log(err); + } + handleClose(); + } + + const handleBan = () => { + // console.log("ban option= ", selectedUser) + try{ + api.post("/ban", {convId: convId, username: selectedUser}) + } catch(err) { + console.log(err); + } + handleClose(); + }; + + const handleAdmin = () => { + try{ + api.post("/admin", {convId: convId, username: selectedUser}) + } catch(err) { + console.log(err); + } + handleClose(); + }; + + const handleMute = () => { + try{ + api.post("/mute", {convId: convId, username: selectedUser}) + } catch(err) { + console.log(err); + } + handleClose(); + }; + + const handleInvite = () => { + try{ + api.post("/invite", {convId: convId, username: selectedUser}) + } catch(err) { + console.log(err); + } + handleClose(); + }; + + return ( + + e.stopPropagation()} + className="modalSetting" + variant={dropIn} + initial="hidden" + animate="visible" + exit="exit" + > + +{/* First selection */} +
+
+

Private

+

Password

+ + + {password ? ( + setNewPassword(e.target.value)} + onKeyDown={handlePassword} + type="text" + className="in" + placeholder="Password"/> + ): + ("")} + + +
+
+ setNewName(e.target.value)} + onKeyDown={handleName} + type="text" + className="in" + placeholder="New Name" + /> +
+
+ +{/* Second selection */} + +
+ + + {selectTags.map((selectTag) => ( +
+ +
+ ))} + + +
+ Send + Ban + Mute + Admin +
+ +
+ + + + ) +} + +export default ModalSetting \ No newline at end of file diff --git a/containers/react/src/pages/Home.js b/containers/react/src/pages/Home.js index 62cee02d..e0291b09 100644 --- a/containers/react/src/pages/Home.js +++ b/containers/react/src/pages/Home.js @@ -27,7 +27,7 @@ function HomeLogin() } // else // let path = "https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2F" + process.env.REACT_APP_BASE_URL + "%3A80%2Fapi%2Fauth%2Flogin&response_type=code"; - let path = "https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2F92.143.191.152%2Fapi%2Fauth%2Flogin&response_type=code" + let path = "https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2F" + process.env.REACT_APP_BASE_URL + "%2Fapi%2Fauth%2Flogin&response_type=code" window.location.replace(path); }; diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index 37c84b40..0d201718 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -1,5 +1,5 @@ .home{ - background-color: black; + background-color: rgb(0, 0, 0); height: 90vh; display: flex; align-items: center; @@ -38,6 +38,10 @@ select{ overflow: scroll; } +::-webkit-scrollbar{ + display:none; +} + .newMessage{ color: white; font-size: 18px; @@ -46,14 +50,14 @@ select{ .contact{ background-color: rgb(46, 46, 46); align-items: left; - height: 29.7rem; + height: 30.2rem; overflow: scroll; /* width: 2rem; */ /* height: 4rem; */ } .messages_box{ - background-color: black; + background-color: rgb(0, 0, 0); /* height: 90vh; */ display: flex; align-items: center; @@ -73,7 +77,7 @@ select{ .sidebar{ flex:1; border-right: 1px solid #3e3c61; - background-color: #060b26; + background-color: #a2a3ac; color: white; } @@ -95,6 +99,7 @@ select{ color: white; padding: 3px; border-radius: 10px 10px 0px 0px; + margin-top: 0px; } .pic{ @@ -122,9 +127,9 @@ select{ } .messages{ - background-color: black; + background-color: rgb(26, 26, 26); /* height: calc(100% - 118px); */ - width: 40rem; + width: 70%; overflow: scroll; } @@ -185,6 +190,7 @@ input{ font-size: 1.2rem; text-decoration: none; font-weight:lighter; + margin: 1%; } .div_submit { @@ -261,3 +267,41 @@ input{ color: rgba(255, 255, 255, 1); } +.modalSetting{ + width: clamp(50%, 700px, 90%); + height: min(50%, 300px); + + margin: auto; + padding: 2rem; + border-radius: 12px; + display: flex; + /* flex-direction: column; */ + /* align-items: center; */ + background-color: #3e3c61; +} + +.settingFirstPart{ + margin-top: 10%; + margin-left: 15%; +} + +.settingSecondPart{ + margin-top: 10%; + margin-left: 10%; + + /* margin-left: 20%; */ +} + +.checkbox{ + display:flex; + flex-direction:row; +} + +input.in{ + margin-top: 5%; + margin-left: 0px; + background-color: black; + color: white; + border-radius: 12px; + width: 70%; +} \ No newline at end of file diff --git a/containers/react/src/styles/Win_Loss.css b/containers/react/src/styles/Win_Loss.css index 068b1a68..fdb3df72 100644 --- a/containers/react/src/styles/Win_Loss.css +++ b/containers/react/src/styles/Win_Loss.css @@ -15,6 +15,10 @@ overflow: scroll; } +.scroll::-webkit-scrollbar{ + display:none; +} + .elements { /* display: flex; */ border-width:1px;