From 444db28224268227825d10fce1ca6c628ee151e3 Mon Sep 17 00:00:00 2001 From: Sebbedi <81374028+Sebbedi@users.noreply.github.com> Date: Mon, 23 Jan 2023 01:55:17 +0100 Subject: [PATCH] Fixed Login Modals for both desktop and Mobile + added link to work signup for logged in users (#198) * Have started to work on a new documents-page. I will have to figure out how to import the module to the app * tmp * centered the Login modal and added a link to work signup (temporarily) * Fixed the LoginModal on mobile, ready for deploy * Bumped version number Co-authored-by: Sebbe --- back/pyproject.toml | 2 +- .../tmeit-se/postgres/set_image_tag.json | 2 +- .../run-migrations/set_image_tag.json | 2 +- .../tmeit-se/tmeit-app/set_image_tag.json | 2 +- .../tmeit-se/tmeit-worker/set_image_tag.json | 2 +- front/package.json | 2 +- .../HeaderFooter/MobileHeaderMenu.js | 7 +- front/src/app/components/LoginModal.js | 121 +++++++++++++++--- front/src/app/index.js | 1 + front/src/app/layouts/Events.js | 9 ++ 10 files changed, 126 insertions(+), 24 deletions(-) diff --git a/back/pyproject.toml b/back/pyproject.toml index 57c754c..e404028 100644 --- a/back/pyproject.toml +++ b/back/pyproject.toml @@ -1,6 +1,6 @@ [tool.poetry] name = "tmeit_backend" -version = "1.0.4" +version = "1.0.5" description = "Python backend for the TMEIT website" authors = ["TraditionsMEsterIT"] license = "AGPL-3.0" diff --git a/deploy/kubernetes/tmeit-se/postgres/set_image_tag.json b/deploy/kubernetes/tmeit-se/postgres/set_image_tag.json index 89dac0c..9966b65 100644 --- a/deploy/kubernetes/tmeit-se/postgres/set_image_tag.json +++ b/deploy/kubernetes/tmeit-se/postgres/set_image_tag.json @@ -2,6 +2,6 @@ { "op": "replace", "path": "/spec/jobTemplate/spec/template/spec/containers/0/image", - "value": "ghcr.io/tmeit/db-backup-agent:1.0.4" + "value": "ghcr.io/tmeit/db-backup-agent:1.0.5" } ] \ No newline at end of file diff --git a/deploy/kubernetes/tmeit-se/run-migrations/set_image_tag.json b/deploy/kubernetes/tmeit-se/run-migrations/set_image_tag.json index 807e506..6df0899 100644 --- a/deploy/kubernetes/tmeit-se/run-migrations/set_image_tag.json +++ b/deploy/kubernetes/tmeit-se/run-migrations/set_image_tag.json @@ -2,6 +2,6 @@ { "op": "replace", "path": "/spec/template/spec/containers/0/image", - "value": "ghcr.io/tmeit/tmeit-run-migrations:1.0.4" + "value": "ghcr.io/tmeit/tmeit-run-migrations:1.0.5" } ] \ No newline at end of file diff --git a/deploy/kubernetes/tmeit-se/tmeit-app/set_image_tag.json b/deploy/kubernetes/tmeit-se/tmeit-app/set_image_tag.json index 3aad02a..42318cb 100644 --- a/deploy/kubernetes/tmeit-se/tmeit-app/set_image_tag.json +++ b/deploy/kubernetes/tmeit-se/tmeit-app/set_image_tag.json @@ -2,6 +2,6 @@ { "op": "replace", "path": "/spec/template/spec/containers/0/image", - "value": "ghcr.io/tmeit/tmeit-app:1.0.4" + "value": "ghcr.io/tmeit/tmeit-app:1.0.5" } ] \ No newline at end of file diff --git a/deploy/kubernetes/tmeit-se/tmeit-worker/set_image_tag.json b/deploy/kubernetes/tmeit-se/tmeit-worker/set_image_tag.json index 9fabac7..98783ae 100644 --- a/deploy/kubernetes/tmeit-se/tmeit-worker/set_image_tag.json +++ b/deploy/kubernetes/tmeit-se/tmeit-worker/set_image_tag.json @@ -2,6 +2,6 @@ { "op": "replace", "path": "/spec/template/spec/containers/0/image", - "value": "ghcr.io/tmeit/tmeit-worker:1.0.4" + "value": "ghcr.io/tmeit/tmeit-worker:1.0.5" } ] \ No newline at end of file diff --git a/front/package.json b/front/package.json index 31ac86f..9dba807 100644 --- a/front/package.json +++ b/front/package.json @@ -3,7 +3,7 @@ "sideEffects": [ "*.css" ], - "version": "1.0.4", + "version": "1.0.5", "description": "Front-end for the TMEIT website.", "main": "index.js", "scripts": { diff --git a/front/src/app/components/HeaderFooter/MobileHeaderMenu.js b/front/src/app/components/HeaderFooter/MobileHeaderMenu.js index afd3fc6..4320257 100644 --- a/front/src/app/components/HeaderFooter/MobileHeaderMenu.js +++ b/front/src/app/components/HeaderFooter/MobileHeaderMenu.js @@ -7,11 +7,12 @@ import {DropdownMenu} from "../DropdownMenu.js"; import {getApiFetcher} from "../../api"; import logOut from "../../login_cookie/logOut"; import MenuItem from "@mui/material/MenuItem"; +import hasLoginCookie from "../../hasLoginCookie.js"; const StyledMobileHeaderMenu = styled(MobileHeaderMenu)({}); -function MobileHeaderMenu({className}) { +function MobileHeaderMenu({className, loggedIn, setLoginModalOpen}) { let navigate = useNavigate(); const [meData, setMeData] = useState(null); // Yarr, set me data (Logged-in user's member data) @@ -28,7 +29,9 @@ function MobileHeaderMenu({className}) { [true, (Events)], [true, (Team)], [true, (About TMEIT)], - [true, ( logOut(navigate)}>Log Out)], + [true, (Join)], + [!loggedIn, ( {setLoginModalOpen(true)}}>Log in)], + [loggedIn, ( logOut(navigate)}>Log Out)], ] return ( diff --git a/front/src/app/components/LoginModal.js b/front/src/app/components/LoginModal.js index f3ac547..f7ca12d 100644 --- a/front/src/app/components/LoginModal.js +++ b/front/src/app/components/LoginModal.js @@ -2,6 +2,7 @@ import { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import styled from "@emotion/styled"; import {getApiFetcher} from "../api"; +import useIsScreenWide from "../useIsScreenWide"; const StyledLoginModal = styled(LoginModal)({ @@ -14,16 +15,18 @@ const StyledLoginModal = styled(LoginModal)({ left: 0, zIndex: 10, + //Desktop/widescreen-headers dialog: { - position: "fixed", + position: "relative", zIndex: 20, background: "#fff", width: "500px", + marginTop: "10%", /* Center the modal */ - top: "50%", - left: "50%", - transform: "translateX(-50%) translateY(-50%)", + display: "flex", + flexDirection: "column", + justifyContent: "space-around", }, ".modalHeader": { @@ -37,11 +40,6 @@ const StyledLoginModal = styled(LoginModal)({ padding: "20px", }, - form: { - display: "flex", - flexDirection: "column", - }, - ".closeButton": { border: "none", background: "transparent", @@ -54,6 +52,46 @@ const StyledLoginModal = styled(LoginModal)({ ".closeButton:hover": { color: "yellow", }, + + //Mobile/thinscreen-headers + dialogMobile: { + position: "relative", + zIndex: 20, + background: "#fff", + width: "250px", + marginTop: "10%", + marginLeft: "auto", + marginRight: "auto", + + display: "flex", + flexDirection: "column", + justifyContent: "space-around", + }, + + ".modalHeaderMobile": { + background:" #44687d", + padding: "5px 10px", + display: "flex", + justifyContent: "space-between", + }, + + ".modalMainMobile": { + padding: "10px", + }, + + ".closeButtonMobile": { + border: "none", + background: "transparent", + padding: "5px", + color: "#fff", + fontsize: "18px", + }, + + //header used on both desktop and mobil + form: { + display: "flex", + flexDirection: "column", + }, }); function LoginModal({className, loggedIn, setLoggedIn, setLoginModalOpen}) { @@ -81,6 +119,7 @@ function LoginModal({className, loggedIn, setLoggedIn, setLoginModalOpen}) { // Error message for logins const [errorMessage, setError] = useState(0); + const ScreenIsWide = useIsScreenWide(950); function handleLogin(e) { e.preventDefault(); @@ -112,19 +151,69 @@ function LoginModal({className, loggedIn, setLoggedIn, setLoginModalOpen}) { }; } - return ( + if(ScreenIsWide) //Make a big LoginModal for desktops/wider screens + { return ( +
+ +
+

Login

+ +
+
+
+ + setEmail(e.target.value)} + > + + setPswrd(e.target.value)} + > + +
+
+ {(() => { + switch (errorMessage) { + case 0: + return <>; + case 1: + return <>Incorrect email or password; + case 2: + return <>Validation error; + } + })()} +
+
+ +
+ )} + else //Make a small LoginModal for mobiles/thinner screens + {return (
- -
+ +

Login

-
+
-
+
- ) + )} } export default StyledLoginModal; diff --git a/front/src/app/index.js b/front/src/app/index.js index 029aff7..f3552d5 100644 --- a/front/src/app/index.js +++ b/front/src/app/index.js @@ -73,6 +73,7 @@ const router = createBrowserRouter([{ return await getApiFetcher().get("/members/").json(); } }, + { path: "/documents", element: , loader: routes.Documents.loader}, { path: "/join_tmeit", element: , loader: routes.Join.loader }, { path: "/profile/:shortUuid", element: , loader: routes.Profile.loader }, { path: "/profile/:shortUuid/:name", element: , loader: routes.Profile.loader }, diff --git a/front/src/app/layouts/Events.js b/front/src/app/layouts/Events.js index 39a7269..d6054c6 100644 --- a/front/src/app/layouts/Events.js +++ b/front/src/app/layouts/Events.js @@ -2,6 +2,7 @@ import styled from "@emotion/styled"; import Centered from "../components/Centered.js"; import TextSummary from "../components/TextSummary.js"; +import hasLoginCookie from "../hasLoginCookie.js"; const StyledEvents = styled(Events)({ [TextSummary]: { @@ -19,6 +20,14 @@ function Events({className}) {

TMEIT.SE GEN 3 is very new and we're still re-implementing the event pages.

Check out our Facebook events in the meantime!

+ <>{hasLoginCookie()? + +

Work signup

Meanwhile the development of the events page is underway,

+

you can sign up to work on an event here:

+ Work sign-up + + : <>} + ); }