feat: Dual login screen (#3452)

theopensystemslab · Jul 30, 2024 · 3eb174f · 3eb174f
1 parent 7ccde86
commit 3eb174f
Showing 1 changed file with 39 additions and 6 deletions.
diff --git a/editor.planx.uk/src/pages/Login.tsx b/editor.planx.uk/src/pages/Login.tsx
@@ -1,6 +1,8 @@
+import GoogleIcon from "@mui/icons-material/Google";
+import MicrosoftIcon from "@mui/icons-material/Microsoft";
 import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
-import Link from "@mui/material/Link";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import React from "react";
@@ -27,6 +29,22 @@ const PhaseText = styled("span")(() => ({
   color: "rgba(255, 255, 255, 0.49);",
 }));
 
+const LoginButton = styled(Button)(({ theme }) => ({
+  minWidth: "280px",
+  marginTop: theme.spacing(1),
+  display: "flex",
+  flexDirection: "column",
+  "& > span": {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.75),
+  },
+  "&.Mui-disabled": {
+    color: "#eee",
+    backgroundColor: `rgba(0, 0, 0, 0.25)`,
+  },
+}));
+
 const Login: React.FC = () => {
   return (
     <Wrapper>
@@ -35,16 +53,31 @@ const Login: React.FC = () => {
           Plan✕
           <PhaseText>beta</PhaseText>
         </Typography>
-        <Link
-          variant="body1"
-          color="#FFFFFF"
+        <LoginButton
+          variant="contained"
+          color="secondary"
           href={`${
             process.env.REACT_APP_GOOGLE_OAUTH_OVERRIDE ??
             process.env.REACT_APP_API_URL
           }/auth/google`}
         >
-          Login with Google
-        </Link>
+          <Box component="span">
+            <GoogleIcon />
+            Continue with Google
+          </Box>
+        </LoginButton>
+        <LoginButton
+          disabled
+          variant="contained"
+          color="secondary"
+          href={`...`}
+        >
+          <Box component="span">
+            <MicrosoftIcon />
+            Continue with Microsoft
+          </Box>
+          (coming soon)
+        </LoginButton>
       </LoginContainer>
     </Wrapper>
   );