feature: add mock user for testing

src/components/TestUserCard/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { MockUser } from "~/mockUsersData";
+import { Container } from "./styled";
+
+interface Props {
+  onClick: () => void;
+  key?: React.Key | null;
+  user: MockUser;
+}
+const TestUserCard = ({ onClick, key, user }: Props) => {
+  return (
+    <Container key={key} onClick={onClick}>
+      <h4>{user.nickname}</h4>
+      <div>
+        <div>email: {user.email}</div>
+        <div>password: {user.password}</div>
+      </div>
+    </Container>
+  );
+};
+
+export default TestUserCard;

src/components/TestUserCard/styled.ts

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const Container = styled("div")`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  z-index: 1;
+  padding: 10px 30px;
+  border: 1px solid ${({ theme }) => theme.backgroundSecondary};
+  border-radius: 16px;
+  margin-bottom: 1rem;
+
+  &:hover {
+    cursor: pointer;
+    background-color: ${({ theme }) => theme.backgroundSecondary};
+  }
+`;

src/mockUsersData.ts

@@ -0,0 +1,23 @@
+export const mockUsersData: MockUser[] = [
+  {
+    nickname: "Tom",
+    email: "[email protected]",
+    password: "Password1",
+  },
+  {
+    nickname: "Luna",
+    email: "[email protected]",
+    password: "Password1",
+  },
+  {
+    nickname: "John",
+    email: "[email protected]",
+    password: "Password1",
+  },
+];
+
+export type MockUser = {
+  nickname: string;
+  email: string;
+  password: string;
+};

src/pages/Login/index.tsx

@@ -16,6 +16,9 @@ import { doc, getDoc, setDoc } from "firebase/firestore";
 import { db, storage } from "~/firebaseConfig";
 import { StyledGoogleIcon } from "../Register/styled";
 import googleIcon from "~/assets/googleIcon.png";
+import Modal from "~/components/common/Modal";
+import { MockUser, mockUsersData } from "~/mockUsersData";
+import TestUserCard from "~/components/TestUserCard";
 
 type Inputs = {
   email: string;
@@ -24,6 +27,7 @@ type Inputs = {
 
 function Login() {
   const [errorMessage, setErrorMessage] = useState("");
+  const [isTestUsersModalOpen, setIsTestUsersModalOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const { loggedUser, setLoggedUser } = useContext(AuthContext);
   const navigate = useNavigate();
@@ -135,6 +139,19 @@ function Login() {
     }
   };
 
+  const loginMockUser = async (user: MockUser) => {
+    try {
+      setIsLoading(true);
+      await FirebaseAuthService.loginUser(user.email, user.password);
+      navigate("/");
+    } catch (err) {
+      const error = ensureError(err);
+      setErrorMessage(error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   useEffect(() => {
     if (loggedUser) {
       navigate("/");
@@ -150,6 +167,23 @@ function Login() {
         errorMessage={errorMessage}
         isOpen={!!errorMessage}
       />
+      <Modal
+        isOpen={isTestUsersModalOpen}
+        onClose={() => setIsTestUsersModalOpen(false)}
+        title="Choose a test user"
+      >
+        <Spacer size="24" />
+        {mockUsersData.map((user, index) => {
+          return (
+            <TestUserCard
+              key={index}
+              user={user}
+              onClick={() => loginMockUser(user)}
+            />
+          );
+        })}
+        <Spacer size="24" />
+      </Modal>
       <FormLayout
         title="Login"
         footer="You don't have an account?"
@@ -192,6 +226,10 @@ function Login() {
           <Button onClick={handleRegistrationViaGoogle} outline>
             Sign in with Google <StyledGoogleIcon src={googleIcon} />
           </Button>
+          <Spacer size="24" />
+          <Button onClick={() => setIsTestUsersModalOpen(true)} outline>
+            Testing - use mock user
+          </Button>
         </>
       </FormLayout>
     </>