Fixed Login Modals for both desktop and Mobile + added link to work s…

…ignup 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 <[email protected]>
TMEIT · Jan 23, 2023 · 444db28 · 444db28
1 parent 63bf4c5
commit 444db28
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 24 deletions.
diff --git 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
@@ -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"
   }
 ]
diff --git 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"
   }
 ]
diff --git 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"
   }
 ]
diff --git 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"
   }
 ]
diff --git 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
@@ -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, (<Link to={"/events"}><MenuItem>Events</MenuItem></Link>)],
         [true, (<Link to={"/team"}><MenuItem>Team</MenuItem></Link>)],
         [true, (<Link to={"/about"}><MenuItem>About TMEIT</MenuItem></Link>)],
-        [true, (<MenuItem onClick={() => logOut(navigate)}>Log Out</MenuItem>)],
+        [true, (<Link to={"/join_tmeit"}><MenuItem>Join</MenuItem></Link>)],
+        [!loggedIn, (<MenuItem onClick={() => {setLoginModalOpen(true)}}>Log in</MenuItem>)],
+        [loggedIn, (<MenuItem onClick={() => logOut(navigate)}>Log Out</MenuItem>)],
         ]
 
     return (

diff --git 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 (
+            <div className={className}>
+                <dialog open>
+                    <header className="modalHeader">
+                        <h2>Login</h2>
+                        <button
+                            onClick={() => setLoginModalOpen(false)}
+                            className="closeButton"
+                            >
+                            &times;
+                        </button>
+                    </header>
+                    <div className="modalMain">
+                        <form onSubmit={handleLogin}>
+                            <label htmlFor="email">Email</label>
+                            <input
+                                type="text"
+                                id="email"
+                                name="email"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                ></input>
+                            <label htmlFor="pswrd">Password</label>
+                            <input
+                                type="password"
+                                id="pswrd"
+                                name="password"
+                                value={pswrd}
+                                onChange={(e) => setPswrd(e.target.value)}
+                                ></input>
+                            <input type="submit" value="login"></input>
+                        </form>
+                        <div className="errorMessage">
+                            {(() => {
+                                switch (errorMessage) {
+                                    case 0:
+                                        return <></>;
+                                    case 1:
+                                        return <>Incorrect email or password</>;
+                                    case 2:
+                                        return <>Validation error</>;
+                                }
+                            })()}
+                        </div>
+                    </div>
+                </dialog>
+            </div>
+        )}
+    else            //Make a small LoginModal for mobiles/thinner screens
+    {return (
         <div className={className}>
-            <dialog open>
-                <header className="modalHeader">
+            <dialogMobile open>
+                <header className="modalHeaderMobile">
                     <h2>Login</h2>
                     <button
                         onClick={() => setLoginModalOpen(false)}
-                        className="closeButton"
+                        className="closeButtonMobile"
                         >
                         &times;
                     </button>
                 </header>
-                <div className="modalMain">
+                <div className="modalMainMobile">
                     <form onSubmit={handleLogin}>
                         <label htmlFor="email">Email</label>
                         <input
@@ -157,9 +246,9 @@ function LoginModal({className, loggedIn, setLoggedIn, setLoginModalOpen}) {
                         })()}
                     </div>
                 </div>
-            </dialog>
+            </dialogMobile>
         </div>
-    )
+    )}
 }
 
 export default StyledLoginModal;
diff --git 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: <routes.Documents.component />, loader: routes.Documents.loader},
         { path: "/join_tmeit", element: <routes.Join.component />, loader: routes.Join.loader },
         { path: "/profile/:shortUuid", element: <routes.Profile.component />, loader: routes.Profile.loader },
         { path: "/profile/:shortUuid/:name", element: <routes.Profile.component />, loader: routes.Profile.loader },

diff --git 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}) {
                 <p>TMEIT.SE GEN 3 is very new and we're still re-implementing the event pages.</p>
                 <p>Check out our <a href="https://www.facebook.com/TMEIT/events" target="_blank">Facebook events</a> in the meantime!</p>
             </TextSummary>
+            <>{hasLoginCookie()? 
+                <TextSummary>
+                <h1>Work signup</h1><p>Meanwhile the development of the events page is underway,</p>
+                <p>you can sign up to work on an event here: </p>
+                <a href="https://docs.google.com/spreadsheets/d/1XxQQKn0U0aYRtVvEvowolVkEkQn55XNmB1my1TOB3cc/edit?usp=sharing" target="_blank">Work sign-up</a>
+                </TextSummary>
+             : <></>}
+             </>
         </Centered>
     );
 }