update MFA screen to use updated auth layout

spacebarchat · Aug 9, 2023 · d016c5b · d016c5b
1 parent be4595d
commit d016c5b
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 179 deletions.
diff --git a/src/components/AuthComponents.tsx b/src/components/AuthComponents.tsx
@@ -102,7 +102,7 @@ export const Input = styled.input<{ error?: boolean }>`
 	}
 `;
 
-export const PasswordResetLink = styled.button`
+export const Link = styled.button`
 	margin-bottom: 20px;
 	margin-top: 4px;
 	padding: 2px 0;

diff --git a/src/components/MFA.tsx b/src/components/MFA.tsx
@@ -2,7 +2,7 @@ import { Routes } from "@spacebarchat/spacebar-api-types/v9";
 import React from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
-import styled from "styled-components";
+import { ReactComponent as SpacebarLogoBlue } from "../assets/images/logo/Logo-Blue.svg";
 import { useAppStore } from "../stores/AppStore";
 import {
 	IAPIError,
@@ -11,154 +11,23 @@ import {
 	IAPITOTPRequest,
 } from "../utils/interfaces/api";
 import { messageFromFieldError } from "../utils/messageFromFieldError";
-import Button from "./Button";
-import Container from "./Container";
-
-export const Wrapper = styled(Container)`
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 100vh;
-	background-color: var(--background-secondary);
-`;
-
-export const AuthBox = styled(Container)`
-	background-color: var(--background-primary-alt);
-	padding: 32px;
-	font-size: 18px;
-	color: var(--text-muted);
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	text-align: center;
-
-	@media (max-width: 480px) {
-		width: 100%;
-		height: 100%;
-	}
-
-	@media (min-width: 480px) {
-		width: 480px;
-		border-radius: 18px;
-	}
-`;
-
-export const HeaderContainer = styled.div`
-	width: 100%;
-`;
-
-export const Header = styled.h1`
-	font-weight: 600;
-	margin-bottom: 8px;
-	font-size: 24px;
-	color: var(--text);
-`;
-
-export const SubHeader = styled.h2`
-	color: var(--text-muted);
-	font-weight: 400;
-	font-size: 16px;
-	margin-bottom: 40px;
-`;
-
-export const FormContainer = styled.form`
-	width: 100%;
-`;
-
-export const InputContainer = styled.h1<{ marginBottom: boolean }>`
-	margin-bottom: ${(props) => (props.marginBottom ? "20px" : "0")};
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-`;
-
-export const LabelWrapper = styled.div<{ error?: boolean }>`
-	display: flex;
-	flex-direction: row;
-	margin-bottom: 8px;
-	color: ${(props) => (props.error ? "var(--error)" : "#b1b5bc")};
-`;
-
-export const InputErrorText = styled.label`
-	font-size: 14px;
-	font-weight: 400;
-	font-style: italic;
-`;
-
-export const InputLabel = styled.label`
-	font-size: 14px;
-	font-weight: 700;
-`;
-
-export const InputWrapper = styled.div`
-	width: 100%;
-	display: flex;
-`;
-
-export const Input = styled.input<{ error?: boolean }>`
-	outline: none;
-	background: var(--background-secondary);
-	padding: 10px;
-	font-size: 16px;
-	flex: 1;
-	border-radius: 12px;
-	color: var(--text);
-	margin: 0;
-	border: none;
-	aria-invalid: ${(props) => (props.error ? "true" : "false")};
-`;
-
-export const Link = styled.button`
-	margin-bottom: 20px;
-	margin-top: 4px;
-	padding: 2px 0;
-	font-size: 14px;
-	display: flex;
-	color: var(--text-link);
-	background: none;
-	border: none;
-
-	&:hover {
-		text-decoration: underline;
-		cursor: pointer;
-	}
-`;
-
-export const LoginButton = styled(Button)`
-	margin-bottom: 8px;
-	width: 100%;
-	min-width: 130px;
-	min-height: 44px;
-`;
-
-export const RegisterContainer = styled.div`
-	margin-top: 4px;
-	text-align: initial;
-`;
-
-export const RegisterLabel = styled.label`
-	font-size: 14px;
-`;
-
-export const RegisterLink = styled.button`
-	font-size: 14px;
-	background: none;
-	border: none;
-	color: var(--text-link);
-
-	@media (max-width: 480px) {
-		display: inline-block;
-	}
-
-	&:hover {
-		text-decoration: underline;
-		cursor: pointer;
-	}
-`;
-
-export const Divider = styled.span`
-	padding: 0 4px;
-`;
+import {
+	AuthContainer,
+	Divider,
+	FormContainer,
+	Header,
+	HeaderContainer,
+	Input,
+	InputContainer,
+	InputErrorText,
+	InputLabel,
+	InputWrapper,
+	LabelWrapper,
+	Link,
+	SubHeader,
+	SubmitButton,
+	Wrapper,
+} from "./AuthComponents";
 
 type FormValues = {
 	code: string;
@@ -224,8 +93,9 @@ function MFA(props: IAPILoginResponseMFARequired) {
 
 	return (
 		<Wrapper>
-			<AuthBox>
+			<AuthContainer>
 				<HeaderContainer>
+					<SpacebarLogoBlue height={48} width="auto" />
 					<Header>Two-factor authentication</Header>
 					<SubHeader>
 						You can use a backup code or your two-factor
@@ -238,9 +108,7 @@ function MFA(props: IAPILoginResponseMFARequired) {
 							style={{ marginTop: 0 }}
 						>
 							<LabelWrapper error={!!errors.code}>
-								<InputLabel>
-									Enter Spacebar Auth/Backup Code
-								</InputLabel>
+								<InputLabel>Enter 2FA/Backup Code</InputLabel>
 								{errors.code && (
 									<InputErrorText>
 										<>
@@ -262,13 +130,13 @@ function MFA(props: IAPILoginResponseMFARequired) {
 							</InputWrapper>
 						</InputContainer>
 
-						<LoginButton
+						<SubmitButton
 							variant="primary"
 							type="submit"
 							disabled={loading}
 						>
 							Log In
-						</LoginButton>
+						</SubmitButton>
 
 						{/* <Link
 						onClick={() => {
@@ -295,7 +163,7 @@ function MFA(props: IAPILoginResponseMFARequired) {
 						</Link>
 					</FormContainer>
 				</HeaderContainer>
-			</AuthBox>
+			</AuthContainer>
 		</Wrapper>
 	);
 }

diff --git a/src/components/modals/ForgotPasswordModal.tsx b/src/components/modals/ForgotPasswordModal.tsx
@@ -0,0 +1,81 @@
+import { useModals } from "@mattjennings/react-modal-stack";
+import styled from "styled-components";
+import Icon from "../Icon";
+import {
+	ModalActionItem,
+	ModalCloseWrapper,
+	ModalContainer,
+	ModalFooter,
+	ModalHeaderText,
+	ModalWrapper,
+	ModelContentContainer,
+} from "./ModalComponents";
+
+export const ModalHeader = styled.div`
+	padding: 16px;
+`;
+
+const SubmitButton = styled(ModalActionItem)`
+	transition: background-color 0.2s ease-in-out;
+	font-size: 16px;
+
+	&:hover {
+		background-color: var(--background-secondary-highlight);
+	}
+`;
+
+function ForgotPasswordModal() {
+	const { openModal, closeModal } = useModals();
+
+	if (!open) {
+		return null;
+	}
+
+	return (
+		<ModalContainer>
+			<ModalWrapper>
+				<ModalCloseWrapper>
+					<button
+						onClick={closeModal}
+						style={{
+							background: "none",
+							border: "none",
+							outline: "none",
+						}}
+					>
+						<Icon
+							icon="mdiClose"
+							size={1}
+							style={{
+								cursor: "pointer",
+								color: "var(--text)",
+							}}
+						/>
+					</button>
+				</ModalCloseWrapper>
+
+				<ModalHeader>
+					<ModalHeaderText>Instructions Sent</ModalHeaderText>
+				</ModalHeader>
+
+				<ModelContentContainer>
+					We sent instructions to change your password to
+					[email protected], please check both your inbox and spam
+					folder.
+				</ModelContentContainer>
+
+				<ModalFooter>
+					<SubmitButton
+						variant="filled"
+						size="med"
+						onClick={closeModal}
+					>
+						Okay
+					</SubmitButton>
+				</ModalFooter>
+			</ModalWrapper>
+		</ModalContainer>
+	);
+}
+
+export default ForgotPasswordModal;