From 1a53ef62a019159978bdab8432963e3b351eaa28 Mon Sep 17 00:00:00 2001 From: Aniket Date: Mon, 3 Oct 2022 16:33:17 +0530 Subject: [PATCH 1/9] Logout modal created --- client/.env.example | 2 - client/src/components/navbar/Navbar.css | 87 +++++++- client/src/components/navbar/Navbar.jsx | 186 ++++++++++------ client/src/pages/signin/Signin.jsx | 281 +++++++++--------------- server/.env.example | 5 - 5 files changed, 310 insertions(+), 251 deletions(-) delete mode 100644 client/.env.example delete mode 100644 server/.env.example diff --git a/client/.env.example b/client/.env.example deleted file mode 100644 index c39296e..0000000 --- a/client/.env.example +++ /dev/null @@ -1,2 +0,0 @@ -REACT_APP_MAGIC_PUBLISHABLE_KEY = -REACT_APP_SERVER_URL = http://localhost:8080 \ No newline at end of file diff --git a/client/src/components/navbar/Navbar.css b/client/src/components/navbar/Navbar.css index 36e1b24..c352c20 100644 --- a/client/src/components/navbar/Navbar.css +++ b/client/src/components/navbar/Navbar.css @@ -66,8 +66,91 @@ color: #C8C8C8; } +.hide { + display: none; +} + +.logout { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 175px; + width: 400px; + z-index: 999; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background: + linear-gradient(rgb(6, 6, 6) 0 0) padding-box, + linear-gradient(to right, #00939c, #00ffa8) border-box; + border: 2px solid transparent; + border-radius: 10px; +} + +.logout >p { + color: azure; + text-shadow: 0 0 6px rgba(0, 0, 0, 0.25); + font-family: PolySans-Bulky; + font-size: 24px; + text-align: center; + color: #fff; +} + +.logout >div{ + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-evenly; +} + +.log-out_button { + align-items: center; + border-radius: 8px !important; + color:#00ffa8; + font-size: 16px; + width: 105px; + height: 30px; + background: + linear-gradient(rgb(6, 6, 6) 0 0) padding-box, + linear-gradient(to right, #00939c, #00ffa8) border-box; + border: 1.5px solid transparent; + border-radius: 3px; + display: inline-block; +} + +.cancel_button { + border-radius: 8px; + border: solid 1.5px #999; + font-size: 16px; + width: 105px; + color: #999; + height: 30px; + background-color: black; +} + /* Ipad */ -@media screen and (max-width: 820px) { - +@media screen and (max-width: 450px) { + .logout{ + width: 280px; + height: 125px; + } + + .logout >p{ + font-size: 16px; + } + + .cancel_button { + font-size: 10px; + width: 75px; + height: 20px; + } + + .log-out_button { + font-size: 10px; + width: 75px; + height: 20px; + } } \ No newline at end of file diff --git a/client/src/components/navbar/Navbar.jsx b/client/src/components/navbar/Navbar.jsx index 8c73d3c..8274981 100644 --- a/client/src/components/navbar/Navbar.jsx +++ b/client/src/components/navbar/Navbar.jsx @@ -1,77 +1,127 @@ -import React, { useContext } from 'react' -import './Navbar.css' -import { NavLink, useNavigate } from 'react-router-dom' -import app_logo from '../../assets/icons/app-logo.png' -import home_icon from '../../assets/icons/home.png' -import files_icon from '../../assets/icons/files.png' -import shared_icon from '../../assets/icons/shared.png' -import logout_icon from '../../assets/icons/logout.png' -import { UserContext } from '../../utils/UserContext' -import { magic } from '../../utils/magic' -import Cookies from 'universal-cookie'; -import Axios from 'axios'; -import Tippy from '@tippyjs/react' -import 'tippy.js/dist/tippy.css' +import React, { useContext, useState } from "react"; +import "./Navbar.css"; +import { NavLink, useNavigate } from "react-router-dom"; +import app_logo from "../../assets/icons/app-logo.png"; +import home_icon from "../../assets/icons/home.png"; +import files_icon from "../../assets/icons/files.png"; +import shared_icon from "../../assets/icons/shared.png"; +import logout_icon from "../../assets/icons/logout.png"; +import { UserContext } from "../../utils/UserContext"; +import { magic } from "../../utils/magic"; +import Cookies from "universal-cookie"; +import Axios from "axios"; +import Tippy from "@tippyjs/react"; +import "tippy.js/dist/tippy.css"; function Navbar() { - const navigate = useNavigate(); - const cookie = new Cookies(); + const navigate = useNavigate(); + const cookie = new Cookies(); - const [user, setUser] = useContext(UserContext); + const [logoutModal, setLogoutModal] = useState(false); + const [user, setUser] = useContext(UserContext); - const logout = () => { - magic.user.logout().then(() => { - setUser({ user: null }); - window.localStorage.removeItem("didToken"); - // cookie.remove("didToken"); - navigate('/'); - }) - } + const logout = () => { + magic.user.logout().then(() => { + setUser({ user: null }); + window.localStorage.removeItem("didToken"); + // cookie.remove("didToken"); + navigate("/"); + }); + document.body.style.opacity = 1; + }; - const testApi = async () => { - Axios.post(`${process.env.REACT_APP_SERVER_URL}/test`, {}, { headers: { Authorization: 'Bearer ' + window.localStorage.getItem("didToken") } }).then((res) => { - alert(res.data); - }).catch((err) => { - alert(err); - }) - } + const logoutPopup = () => { + setLogoutModal(true); + document.body.style.opacity = 0.5; + }; - return ( - + const cancelLogout = () => { + setLogoutModal(false); + document.body.style.opacity = 1; + }; + + const testApi = async () => { + Axios.post( + `${process.env.REACT_APP_SERVER_URL}/test`, + {}, + { + headers: { + Authorization: "Bearer " + window.localStorage.getItem("didToken"), + }, + } ) + .then((res) => { + alert(res.data); + }) + .catch((err) => { + alert(err); + }); + }; + + return ( + + ) } -export default Navbar +export default Navbar; diff --git a/client/src/pages/signin/Signin.jsx b/client/src/pages/signin/Signin.jsx index 87e2fdc..3ad6177 100644 --- a/client/src/pages/signin/Signin.jsx +++ b/client/src/pages/signin/Signin.jsx @@ -1,16 +1,16 @@ -import React, { useState, useEffect, useContext, useRef } from "react"; -import "./Signin.css"; -import signin_gradient from "../../assets/images/signin-gradient.png"; -import email_icon from "../../assets/icons/email.png"; -import user_icon from "../../assets/icons/user.png"; -import { UserContext } from "../../utils/UserContext"; -import { useNavigate } from "react-router-dom"; -import { magic } from "../../utils/magic"; -import app_logo from "../../assets/icons/app-logo.png"; -import Axios from "axios"; -import { motion } from "framer-motion"; -import loadingg from "../../assets/images/loadingg.svg"; -import toast, { Toaster } from "react-hot-toast"; +import React, { useState, useEffect, useContext, useRef } from 'react' +import './Signin.css' +import signin_gradient from '../../assets/images/signin-gradient.png' +import email_icon from '../../assets/icons/email.png' +import user_icon from '../../assets/icons/user.png' +import { UserContext } from '../../utils/UserContext' +import { useNavigate } from 'react-router-dom' +import { magic } from '../../utils/magic'; +import app_logo from '../../assets/icons/app-logo.png' +import Axios from 'axios'; +import { motion } from 'framer-motion' +import loadingg from "../../assets/images/loadingg.svg" +import toast, { Toaster } from 'react-hot-toast'; function Signin() { const navigate = useNavigate(); @@ -19,24 +19,26 @@ function Signin() { const [disabled, setDisabled] = useState(false); const [email, setEmail] = useState(""); const [userName, setUserName] = useState(""); - const [newUser, setNewUser] = useState(false); + const [newUser, setNewUser] = useState(false) const [user, setUser] = useContext(UserContext); useEffect(() => { - user && user.issuer && navigate("/app/home"); + user && user.issuer && navigate('/app/home'); }, [user, navigate]); - const handleLogin = async (e) => { - e.preventDefault(); - document.activeElement.blur(); - if (email === "") { - toast((t) => Please fill all the fields!, { - icon: "❌", + const handleLogin = async () => { + if (email==="") { + toast((t) => ( + + Please fill all the fields! + + ), { + icon: '❌', style: { - borderRadius: "5px", - background: "#333", - color: "#c8c8c8", + borderRadius: '5px', + background: '#333', + color: '#c8c8c8', }, }); return; @@ -45,18 +47,19 @@ function Signin() { setDisabled(true); // disable login button to prevent multiple emails from being triggered if (!newUser) { - const check = await Axios.post( - `${process.env.REACT_APP_SERVER_URL}/api/user/check`, - { email } - ); - console.log(check.data.message); + const check = await Axios.post(`${process.env.REACT_APP_SERVER_URL}/api/user/check`, { email }); + console.log(check.data.message) if (check.data.message === "user_not_found") { - toast((t) => Please Sign Up first!, { - icon: "⚠️", + toast((t) => ( + + Please Sign Up first! + + ), { + icon: '⚠️', style: { - borderRadius: "5px", - background: "#333", - color: "#c8c8c8", + borderRadius: '5px', + background: '#333', + color: '#c8c8c8', }, }); inpRef.current.value = ""; @@ -71,176 +74,106 @@ function Signin() { }); // Validate didToken with server - const res = await fetch( - `${process.env.REACT_APP_SERVER_URL}/api/user/login`, - { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: "Bearer " + didToken, - }, - } - ); + const res = await fetch(`${process.env.REACT_APP_SERVER_URL}/api/user/login`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + didToken, + }, + }); if (res.status === 200) { // Set the UserContext to the now logged in user let userMetadata = await magic.user.getMetadata(); await setUser(userMetadata); - let newDidToken = await magic.user.getIdToken({ - lifespan: 24 * 60 * 60 * 7, - }); + let newDidToken = await magic.user.getIdToken({ lifespan: 24 * 60 * 60 * 7 }); window.localStorage.setItem("didToken", newDidToken); // cookie.set("didToken", newDidToken); - await Axios.post( - `${process.env.REACT_APP_SERVER_URL}/api/user/create`, - { magic_id: userMetadata.issuer, user_name: userName, email: email }, - { - headers: { - Authorization: - "Bearer " + window.localStorage.getItem("didToken"), - }, - } - ) - .then((res) => { - console.log(res.data); - }) - .catch((err) => { - console.log(err); - }); + await Axios.post(`${process.env.REACT_APP_SERVER_URL}/api/user/create`, { magic_id: userMetadata.issuer, user_name: userName, email: email }, { headers: { Authorization: 'Bearer ' + window.localStorage.getItem("didToken") } }).then((res) => { + console.log(res.data); + }).catch((err) => { + console.log(err); + }) - await Axios.get( - `${process.env.REACT_APP_SERVER_URL}/api/user/getName/${userMetadata.issuer}` - ).then((res) => { + await Axios.get(`${process.env.REACT_APP_SERVER_URL}/api/user/getName/${userMetadata.issuer}`).then(res => { window.localStorage.setItem("userName", res.data.user_name); - }); + }) console.log(userMetadata); - navigate("/app/home"); + navigate('/app/home'); } } catch (error) { setDisabled(false); // re-enable login button - user may have requested to edit their email console.log(error); } - }; + } return ( - + transition={{ duration: 0.2 }}> - -
+ +
navigate("/")}>

Storz

- {!newUser ? ( - <> -
-
-

Login

-

Login with your email

-
- - {disabled && ( - Loading - )} - -
- - { - setEmail(e.target.value); - }} - /> -
- - {!disabled && ( - - )} -
- - ) : ( - <> -
-
-

Sign Up

-

Create a new account with your email

-
-
-
- - { - setUserName(e.target.value); - }} - /> -
-
- - { - setEmail(e.target.value); - }} - /> -
-
- {!disabled && ( - - )} -
- - )} - {!newUser ? ( - <> -
- Don't have an account yet?{" "} - { - setNewUser(true); - }} - > - Sign Up - + {(!newUser) ? <> +
+
+

Login

+

Login with your email

- - ) : ( - <> -
- Already have an account?{" "} - { - setNewUser(false); - }} - > - Login - + + {disabled && Loading} + +
+ + { setEmail(e.target.value) }} /> +
+ + {!disabled &&
Login
} +
+ : <> +
+
+

Sign Up

+

Create a new account with your email

+
+
+
+ + { setUserName(e.target.value) }} />
- - )} -
©2022 Storz
+
+ + { setEmail(e.target.value) }} /> +
+
+ {!disabled &&
Sign Up
} +
+ } + {(!newUser) ? <> +
Don't have an account yet? { + setNewUser(true); + }}>Sign Up +
+ : <> +
Already have an account? { + setNewUser(false); + }}>Login +
+ } +
+ ©2022 Storz +
- ); + ) } -export default Signin; +export default Signin \ No newline at end of file diff --git a/server/.env.example b/server/.env.example deleted file mode 100644 index 348dc1a..0000000 --- a/server/.env.example +++ /dev/null @@ -1,5 +0,0 @@ - -MAGIC_SECRET_KEY = -INFURA_PROJECT_ID = -INFURA_PROJECT_SECRET = -MONGODB_URI = \ No newline at end of file From 837d1f4897494b29245f58f31af335549da863fe Mon Sep 17 00:00:00 2001 From: Aniket Date: Mon, 3 Oct 2022 16:55:38 +0530 Subject: [PATCH 2/9] removed code added back --- client/src/pages/signin/Signin.jsx | 281 ++++++++++++++++++----------- 1 file changed, 174 insertions(+), 107 deletions(-) diff --git a/client/src/pages/signin/Signin.jsx b/client/src/pages/signin/Signin.jsx index 3ad6177..87e2fdc 100644 --- a/client/src/pages/signin/Signin.jsx +++ b/client/src/pages/signin/Signin.jsx @@ -1,16 +1,16 @@ -import React, { useState, useEffect, useContext, useRef } from 'react' -import './Signin.css' -import signin_gradient from '../../assets/images/signin-gradient.png' -import email_icon from '../../assets/icons/email.png' -import user_icon from '../../assets/icons/user.png' -import { UserContext } from '../../utils/UserContext' -import { useNavigate } from 'react-router-dom' -import { magic } from '../../utils/magic'; -import app_logo from '../../assets/icons/app-logo.png' -import Axios from 'axios'; -import { motion } from 'framer-motion' -import loadingg from "../../assets/images/loadingg.svg" -import toast, { Toaster } from 'react-hot-toast'; +import React, { useState, useEffect, useContext, useRef } from "react"; +import "./Signin.css"; +import signin_gradient from "../../assets/images/signin-gradient.png"; +import email_icon from "../../assets/icons/email.png"; +import user_icon from "../../assets/icons/user.png"; +import { UserContext } from "../../utils/UserContext"; +import { useNavigate } from "react-router-dom"; +import { magic } from "../../utils/magic"; +import app_logo from "../../assets/icons/app-logo.png"; +import Axios from "axios"; +import { motion } from "framer-motion"; +import loadingg from "../../assets/images/loadingg.svg"; +import toast, { Toaster } from "react-hot-toast"; function Signin() { const navigate = useNavigate(); @@ -19,26 +19,24 @@ function Signin() { const [disabled, setDisabled] = useState(false); const [email, setEmail] = useState(""); const [userName, setUserName] = useState(""); - const [newUser, setNewUser] = useState(false) + const [newUser, setNewUser] = useState(false); const [user, setUser] = useContext(UserContext); useEffect(() => { - user && user.issuer && navigate('/app/home'); + user && user.issuer && navigate("/app/home"); }, [user, navigate]); + const handleLogin = async (e) => { + e.preventDefault(); + document.activeElement.blur(); - const handleLogin = async () => { - if (email==="") { - toast((t) => ( - - Please fill all the fields! - - ), { - icon: '❌', + if (email === "") { + toast((t) => Please fill all the fields!, { + icon: "❌", style: { - borderRadius: '5px', - background: '#333', - color: '#c8c8c8', + borderRadius: "5px", + background: "#333", + color: "#c8c8c8", }, }); return; @@ -47,19 +45,18 @@ function Signin() { setDisabled(true); // disable login button to prevent multiple emails from being triggered if (!newUser) { - const check = await Axios.post(`${process.env.REACT_APP_SERVER_URL}/api/user/check`, { email }); - console.log(check.data.message) + const check = await Axios.post( + `${process.env.REACT_APP_SERVER_URL}/api/user/check`, + { email } + ); + console.log(check.data.message); if (check.data.message === "user_not_found") { - toast((t) => ( - - Please Sign Up first! - - ), { - icon: '⚠️', + toast((t) => Please Sign Up first!, { + icon: "⚠️", style: { - borderRadius: '5px', - background: '#333', - color: '#c8c8c8', + borderRadius: "5px", + background: "#333", + color: "#c8c8c8", }, }); inpRef.current.value = ""; @@ -74,106 +71,176 @@ function Signin() { }); // Validate didToken with server - const res = await fetch(`${process.env.REACT_APP_SERVER_URL}/api/user/login`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: 'Bearer ' + didToken, - }, - }); + const res = await fetch( + `${process.env.REACT_APP_SERVER_URL}/api/user/login`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: "Bearer " + didToken, + }, + } + ); if (res.status === 200) { // Set the UserContext to the now logged in user let userMetadata = await magic.user.getMetadata(); await setUser(userMetadata); - let newDidToken = await magic.user.getIdToken({ lifespan: 24 * 60 * 60 * 7 }); + let newDidToken = await magic.user.getIdToken({ + lifespan: 24 * 60 * 60 * 7, + }); window.localStorage.setItem("didToken", newDidToken); // cookie.set("didToken", newDidToken); - await Axios.post(`${process.env.REACT_APP_SERVER_URL}/api/user/create`, { magic_id: userMetadata.issuer, user_name: userName, email: email }, { headers: { Authorization: 'Bearer ' + window.localStorage.getItem("didToken") } }).then((res) => { - console.log(res.data); - }).catch((err) => { - console.log(err); - }) + await Axios.post( + `${process.env.REACT_APP_SERVER_URL}/api/user/create`, + { magic_id: userMetadata.issuer, user_name: userName, email: email }, + { + headers: { + Authorization: + "Bearer " + window.localStorage.getItem("didToken"), + }, + } + ) + .then((res) => { + console.log(res.data); + }) + .catch((err) => { + console.log(err); + }); - await Axios.get(`${process.env.REACT_APP_SERVER_URL}/api/user/getName/${userMetadata.issuer}`).then(res => { + await Axios.get( + `${process.env.REACT_APP_SERVER_URL}/api/user/getName/${userMetadata.issuer}` + ).then((res) => { window.localStorage.setItem("userName", res.data.user_name); - }) + }); console.log(userMetadata); - navigate('/app/home'); + navigate("/app/home"); } } catch (error) { setDisabled(false); // re-enable login button - user may have requested to edit their email console.log(error); } - } + }; return ( - + transition={{ duration: 0.2 }} + > - -
+ +
navigate("/")}>

Storz

- {(!newUser) ? <> -
-
-

Login

-

Login with your email

-
- - {disabled && Loading} - -
- - { setEmail(e.target.value) }} /> -
- - {!disabled &&
Login
} -
- : <> -
-
-

Sign Up

-

Create a new account with your email

-
-
-
- - { setUserName(e.target.value) }} /> + {!newUser ? ( + <> +
+
+

Login

+

Login with your email

+
+ + {disabled && ( + Loading + )} + +
+ + { + setEmail(e.target.value); + }} + /> +
+ + {!disabled && ( + + )} +
+ + ) : ( + <> +
+
+

Sign Up

+

Create a new account with your email

+
+
+
+ + { + setUserName(e.target.value); + }} + /> +
+
+ + { + setEmail(e.target.value); + }} + /> +
+
+ {!disabled && ( + + )} +
+ + )} + {!newUser ? ( + <> +
+ Don't have an account yet?{" "} + { + setNewUser(true); + }} + > + Sign Up +
-
- - { setEmail(e.target.value) }} /> + + ) : ( + <> +
+ Already have an account?{" "} + { + setNewUser(false); + }} + > + Login +
-
- {!disabled &&
Sign Up
} -
- } - {(!newUser) ? <> -
Don't have an account yet? { - setNewUser(true); - }}>Sign Up -
- : <> -
Already have an account? { - setNewUser(false); - }}>Login -
- } -
- ©2022 Storz -
+ + )} +
©2022 Storz
- ) + ); } -export default Signin \ No newline at end of file +export default Signin; From a9e655cb928e433297a746b957fb5e58e7231368 Mon Sep 17 00:00:00 2001 From: Aniket Date: Mon, 3 Oct 2022 17:56:04 +0530 Subject: [PATCH 3/9] .env file renamed --- client/.env.example | 2 ++ server/.env.example | 5 +++++ 2 files changed, 7 insertions(+) create mode 100644 client/.env.example create mode 100644 server/.env.example diff --git a/client/.env.example b/client/.env.example new file mode 100644 index 0000000..0c0c5a6 --- /dev/null +++ b/client/.env.example @@ -0,0 +1,2 @@ +REACT_APP_MAGIC_PUBLISHABLE_KEY = pk_live_CE670FA6C21B1821 +REACT_APP_SERVER_URL = http://localhost:8080 \ No newline at end of file diff --git a/server/.env.example b/server/.env.example new file mode 100644 index 0000000..7d0bd2d --- /dev/null +++ b/server/.env.example @@ -0,0 +1,5 @@ + +MAGIC_SECRET_KEY = sk_live_DAE44C5F8AEECF2C +INFURA_PROJECT_ID = 2FX8bhMBac9sJzEWTn0jUupL58n +INFURA_PROJECT_SECRET = ce4db6b0e00b6fd618f68029ca6131b8 +MONGODB_URI = mongodb+srv://storz-dev:hacktoberfest@cluster0.pvq1ns2.mongodb.net/?retryWrites=true&w=majority \ No newline at end of file From 2fc7cd3b9e236bf28c7c98031be956b64f65242f Mon Sep 17 00:00:00 2001 From: Aniket <92184189+Aniket1026@users.noreply.github.com> Date: Mon, 3 Oct 2022 17:59:40 +0530 Subject: [PATCH 4/9] file removed --- client/.env.example | 2 -- 1 file changed, 2 deletions(-) delete mode 100644 client/.env.example diff --git a/client/.env.example b/client/.env.example deleted file mode 100644 index 0c0c5a6..0000000 --- a/client/.env.example +++ /dev/null @@ -1,2 +0,0 @@ -REACT_APP_MAGIC_PUBLISHABLE_KEY = pk_live_CE670FA6C21B1821 -REACT_APP_SERVER_URL = http://localhost:8080 \ No newline at end of file From d457f345d4db32d2d7c7641690b12a5346ebe182 Mon Sep 17 00:00:00 2001 From: Aniket Date: Mon, 3 Oct 2022 18:55:10 +0530 Subject: [PATCH 5/9] Popup Modal appearance changed to match the UI --- client/.env.example | 2 +- client/src/components/navbar/Navbar.css | 28 ++++++++++++------------- client/src/components/navbar/Navbar.jsx | 7 ++----- server/.env.example | 8 +++---- 4 files changed, 21 insertions(+), 24 deletions(-) diff --git a/client/.env.example b/client/.env.example index 0c0c5a6..c39296e 100644 --- a/client/.env.example +++ b/client/.env.example @@ -1,2 +1,2 @@ -REACT_APP_MAGIC_PUBLISHABLE_KEY = pk_live_CE670FA6C21B1821 +REACT_APP_MAGIC_PUBLISHABLE_KEY = REACT_APP_SERVER_URL = http://localhost:8080 \ No newline at end of file diff --git a/client/src/components/navbar/Navbar.css b/client/src/components/navbar/Navbar.css index c352c20..5f8f744 100644 --- a/client/src/components/navbar/Navbar.css +++ b/client/src/components/navbar/Navbar.css @@ -75,12 +75,12 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - height: 175px; - width: 400px; + height: 200px; + width: 450px; z-index: 999; display: flex; flex-direction: column; - justify-content: space-evenly; + justify-content: space-between; align-items: center; background: linear-gradient(rgb(6, 6, 6) 0 0) padding-box, @@ -92,10 +92,11 @@ .logout >p { color: azure; text-shadow: 0 0 6px rgba(0, 0, 0, 0.25); - font-family: PolySans-Bulky; + font-family: PolySans Bulky; font-size: 24px; text-align: center; color: #fff; + padding-top: 30px; } .logout >div{ @@ -103,6 +104,7 @@ display: flex; flex-direction: row; justify-content: space-evenly; + padding-bottom: 25px; } .log-out_button { @@ -111,13 +113,15 @@ color:#00ffa8; font-size: 16px; width: 105px; - height: 30px; + height: 40px; background: linear-gradient(rgb(6, 6, 6) 0 0) padding-box, linear-gradient(to right, #00939c, #00ffa8) border-box; border: 1.5px solid transparent; border-radius: 3px; display: inline-block; + font-weight: 600; + word-spacing: 0px; } .cancel_button { @@ -126,8 +130,9 @@ font-size: 16px; width: 105px; color: #999; - height: 30px; + height: 40px; background-color: black; + font-weight: 600; } /* Ipad */ @@ -142,15 +147,10 @@ font-size: 16px; } - .cancel_button { - font-size: 10px; - width: 75px; - height: 20px; - } - - .log-out_button { + .cancel_button,.log-out_button { font-size: 10px; width: 75px; - height: 20px; + height: 25px; + border-radius: 5px; } } \ No newline at end of file diff --git a/client/src/components/navbar/Navbar.jsx b/client/src/components/navbar/Navbar.jsx index 8274981..a957317 100644 --- a/client/src/components/navbar/Navbar.jsx +++ b/client/src/components/navbar/Navbar.jsx @@ -27,17 +27,15 @@ function Navbar() { // cookie.remove("didToken"); navigate("/"); }); - document.body.style.opacity = 1; }; const logoutPopup = () => { setLogoutModal(true); - document.body.style.opacity = 0.5; + document.body.style.opacity = 0.9 }; const cancelLogout = () => { setLogoutModal(false); - document.body.style.opacity = 1; }; const testApi = async () => { @@ -107,9 +105,8 @@ function Navbar() {
-

Are you sure you want to logout?

+

Are you sure you want to log out?

- ) + ); } export default Navbar; diff --git a/client/src/pages/home/Home.css b/client/src/pages/home/Home.css index d649cc1..58971eb 100644 --- a/client/src/pages/home/Home.css +++ b/client/src/pages/home/Home.css @@ -224,6 +224,14 @@ background-color: var(--primary-color-dark); } +.bg-blur { + opacity: 0.4; +} + +.bg-opaque{ + opacity: 1; +} + @media screen and (max-width: 1350px ){ .gradient-triangle{ display: none; diff --git a/client/src/pages/home/Home.jsx b/client/src/pages/home/Home.jsx index 05c1dcb..c2e83a1 100644 --- a/client/src/pages/home/Home.jsx +++ b/client/src/pages/home/Home.jsx @@ -16,7 +16,7 @@ import right_glass_triangle from '../../assets/images/right-glass-triangle.svg' import toast, { Toaster } from 'react-hot-toast'; -function Home() { +function Home({logoutModal}) { const userName = window.localStorage.getItem('userName'); const navigate = useNavigate(); const [files, setFiles] = useState([]); @@ -77,8 +77,7 @@ function Home() { } return ( - diff --git a/client/src/pages/main/Main.jsx b/client/src/pages/main/Main.jsx index 23616d8..9210c80 100644 --- a/client/src/pages/main/Main.jsx +++ b/client/src/pages/main/Main.jsx @@ -5,22 +5,22 @@ import Navbar from '../../components/navbar/Navbar' import { UserContext } from '../../utils/UserContext' import { useEffect } from 'react' -function Main() { - const navigate = useNavigate(); - const [user] = useContext(UserContext); +function Main({ setLogoutModal, logoutModal }) { + const navigate = useNavigate(); + const [user] = useContext(UserContext); - useEffect(() => { - if (!user) { - navigate('/signin'); - } - }, [navigate, user]) + useEffect(() => { + if (!user) { + navigate("/signin"); + } + }, [navigate, user]); - return ( -
- - -
- ) + return ( +
+ + +
+ ); } export default Main \ No newline at end of file diff --git a/client/src/pages/myFiles/MyFiles.jsx b/client/src/pages/myFiles/MyFiles.jsx index 802ff44..e45c673 100644 --- a/client/src/pages/myFiles/MyFiles.jsx +++ b/client/src/pages/myFiles/MyFiles.jsx @@ -16,7 +16,7 @@ const tableHeaders = [ '', 'Name', '', 'Size', 'Date' ] -function MyFiles() { +function MyFiles({logoutModal}) { const navigate = useNavigate(); const [files, setFiles] = useState([]); const [isLoading, setIsLoading] = useState(true); @@ -37,9 +37,7 @@ function MyFiles() { }, []) return ( -
diff --git a/server/.env.example b/server/.env.example index e19ee45..e92541f 100644 --- a/server/.env.example +++ b/server/.env.example @@ -1,5 +1,4 @@ - MAGIC_SECRET_KEY = -INFURA_PROJECT_ID = +INFURA_PROJECT_ID = INFURA_PROJECT_SECRET = -MONGODB_URI = \ No newline at end of file +MONGODB_URI = \ No newline at end of file From 586e4913d7c63c23aebe469932aa4cf33502142c Mon Sep 17 00:00:00 2001 From: Aniket Date: Wed, 5 Oct 2022 12:47:25 +0530 Subject: [PATCH 7/9] Modal centralized --- client/src/components/navbar/Navbar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/navbar/Navbar.css b/client/src/components/navbar/Navbar.css index dda6ecf..c5ea6c1 100644 --- a/client/src/components/navbar/Navbar.css +++ b/client/src/components/navbar/Navbar.css @@ -72,7 +72,7 @@ .logout { position: fixed; - top: 60%; + top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; From 000dfb7c8c075373be3ba1e1108b80d5f5dd473f Mon Sep 17 00:00:00 2001 From: Aniket Date: Sat, 8 Oct 2022 01:12:24 +0530 Subject: [PATCH 8/9] indentation --- client/src/components/AnimatedRoutes.jsx | 44 ++++++++++-------------- client/src/components/navbar/Navbar.jsx | 2 +- 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/client/src/components/AnimatedRoutes.jsx b/client/src/components/AnimatedRoutes.jsx index 872a38b..d8644f9 100644 --- a/client/src/components/AnimatedRoutes.jsx +++ b/client/src/components/AnimatedRoutes.jsx @@ -1,15 +1,19 @@ -import React , {useState} from 'react' -import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom'; -import Landing from '../pages/landing/Landing'; -import Signin from '../pages/signin/Signin'; -import Main from '../pages/main/Main'; -import Home from '../pages/home/Home'; -import MyFiles from '../pages/myFiles/MyFiles'; -import Callback from '../pages/Callback'; -import Error from '../pages/error/Error'; -import Desc from '../components/file-desc/Desc'; -import { AnimatePresence } from 'framer-motion' - +import React, { useState } from "react"; +import { + BrowserRouter as Router, + Routes, + Route, + useLocation, +} from "react-router-dom"; +import Landing from "../pages/landing/Landing"; +import Signin from "../pages/signin/Signin"; +import Main from "../pages/main/Main"; +import Home from "../pages/home/Home"; +import MyFiles from "../pages/myFiles/MyFiles"; +import Callback from "../pages/Callback"; +import Error from "../pages/error/Error"; +import Desc from "../components/file-desc/Desc"; +import { AnimatePresence } from "framer-motion"; function AnimatedRoutes() { const location = useLocation(); @@ -22,18 +26,8 @@ function AnimatedRoutes() { } /> } /> } /> - - } - > - - } - /> + } > + } /> } /> } /> @@ -42,4 +36,4 @@ function AnimatedRoutes() { ); } -export default AnimatedRoutes \ No newline at end of file +export default AnimatedRoutes; \ No newline at end of file diff --git a/client/src/components/navbar/Navbar.jsx b/client/src/components/navbar/Navbar.jsx index a93cf25..d035739 100644 --- a/client/src/components/navbar/Navbar.jsx +++ b/client/src/components/navbar/Navbar.jsx @@ -1,4 +1,4 @@ -import React, { useContext, useState } from "react"; +import React, { useContext, useState } from 'react'; import "./Navbar.css"; import { NavLink, useNavigate } from "react-router-dom"; import app_logo from "../../assets/icons/app-logo.png"; From a9ce4c1de5f7f929226b7a196f0c8a9a5d179430 Mon Sep 17 00:00:00 2001 From: Aniket Date: Sat, 8 Oct 2022 01:12:47 +0530 Subject: [PATCH 9/9] single quotes added --- client/src/components/navbar/Navbar.jsx | 26 ++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/client/src/components/navbar/Navbar.jsx b/client/src/components/navbar/Navbar.jsx index d035739..69590c3 100644 --- a/client/src/components/navbar/Navbar.jsx +++ b/client/src/components/navbar/Navbar.jsx @@ -1,17 +1,17 @@ import React, { useContext, useState } from 'react'; -import "./Navbar.css"; -import { NavLink, useNavigate } from "react-router-dom"; -import app_logo from "../../assets/icons/app-logo.png"; -import home_icon from "../../assets/icons/home.png"; -import files_icon from "../../assets/icons/files.png"; -import shared_icon from "../../assets/icons/shared.png"; -import logout_icon from "../../assets/icons/logout.png"; -import { UserContext } from "../../utils/UserContext"; -import { magic } from "../../utils/magic"; -import Cookies from "universal-cookie"; -import Axios from "axios"; -import Tippy from "@tippyjs/react"; -import "tippy.js/dist/tippy.css"; +import './Navbar.css'; +import { NavLink, useNavigate } from 'react-router-dom'; +import app_logo from '../../assets/icons/app-logo.png'; +import home_icon from '../../assets/icons/home.png'; +import files_icon from '../../assets/icons/files.png'; +import shared_icon from '../../assets/icons/shared.png'; +import logout_icon from '../../assets/icons/logout.png'; +import { UserContext } from '../../utils/UserContext'; +import { magic } from '../../utils/magic'; +import Cookies from 'universal-cookie'; +import Axios from 'axios'; +import Tippy from '@tippyjs/react'; +import 'tippy.js/dist/tippy.css'; function Navbar({ setLogoutModal, logoutModal }) { const navigate = useNavigate();