Implement Authentication with email + password (#343)

* Implement Login screen ui and add RequireNotAuth guard

* Perform login through auth/password-login flow

front/src/modules/auth/components/ui/FooterNote.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: React.ReactNode;
+};
+
+const StyledContainer = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.text40};
+  display: flex;
+  font-size: ${({ theme }) => theme.fontSizeSmall}px;
+  padding-left: ${({ theme }) => theme.spacing(14)};
+  padding-right: ${({ theme }) => theme.spacing(14)};
+  text-align: center;
+`;
+
+export function FooterNote({ children }: OwnProps): JSX.Element {
+  return <StyledContainer>{children}</StyledContainer>;
+}

front/src/modules/auth/components/ui/HorizontalSeparator.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const Separator = styled.div`
+  background-color: ${(props) => props.theme.mediumBorder};
+  height: 1px;
+  margin-bottom: ${(props) => props.theme.spacing(3)};
+  margin-top: ${(props) => props.theme.spacing(3)};
+  width: 100%;
+`;
+
+export function HorizontalSeparator(): JSX.Element {
+  return <Separator />;
+}

front/src/modules/auth/components/ui/InputLabel.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  label: string;
+  subLabel?: string;
+};
+
+const StyledContainer = styled.div`
+  font-weight: ${({ theme }) => theme.fontWeightMedium};
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme }) => theme.spacing(4)};
+`;
+
+export function InputLabel({ label, subLabel }: OwnProps): JSX.Element {
+  return <StyledContainer>{label}</StyledContainer>;
+}

front/src/modules/auth/components/ui/Logo.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+const StyledLogo = styled.div`
+  height: 40px;
+  width: 40px;
+
+  img {
+    height: 100%;
+    width: 100%;
+  }
+`;
+
+export function Logo(): JSX.Element {
+  return (
+    <StyledLogo>
+      <img src="/icons/android/android-launchericon-192-192.png" alt="logo" />
+    </StyledLogo>
+  );
+}

front/src/modules/auth/components/ui/Modal.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { Modal as UIModal } from '@/ui/components/modal/Modal';
+
+type OwnProps = {
+  children: React.ReactNode;
+};
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${({ theme }) => theme.spacing(10)};
+  padding-top: ${({ theme }) => theme.spacing(10)};
+  width: 400px;
+`;
+
+export function Modal({ children }: OwnProps): JSX.Element {
+  return (
+    <UIModal>
+      <StyledContainer>{children}</StyledContainer>
+    </UIModal>
+  );
+}

front/src/modules/auth/components/ui/SubTitle.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: React.ReactNode;
+};
+
+const StyledSubTitle = styled.div`
+  color: ${({ theme }) => theme.text60};
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+export function SubTitle({ children }: OwnProps): JSX.Element {
+  return <StyledSubTitle>{children}</StyledSubTitle>;
+}

front/src/modules/auth/components/ui/Title.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: React.ReactNode;
+};
+
+const StyledTitle = styled.div`
+  font-size: ${({ theme }) => theme.fontSizeExtraLarge};
+  font-weight: ${({ theme }) => theme.fontWeightSemibold};
+  margin-top: ${({ theme }) => theme.spacing(10)};
+`;
+
+export function Title({ children }: OwnProps): JSX.Element {
+  return <StyledTitle>{children}</StyledTitle>;
+}