diff --git a/Sprint 1/README.md b/Sprint 1/README.md deleted file mode 100644 index c84ace4..0000000 --- a/Sprint 1/README.md +++ /dev/null @@ -1,19 +0,0 @@ -# Sprint 1 - Descrição da entrega - -A primeira sprint contemplará os seguintes incrementos previamente propostos: - -- 1º - Protótipo funcional da tela de criação de atas, seguindo modelo proposto pelo cliente; -- 2º - Protótipo visual de todo o produto, contendo todas as interfaces gráficas prontas; -- 3º - Documentação dos valores entregues e dos casos de uso detalhados (entrega padrão, inclusa em todas as sprints). - -## Acesso aos incrementos contemplados na sprint 1: - -1º - O protótipo funcional pode ser acessado [clicando aqui.](https://typext.vercel.app/) - -Nele você poderá criar atas e exportá-las como PDF. Uma amostra do que nossa plataforma entregará. - -2º - A interface gráfica completa da ferramenta pode ser vista no nosso protótipo visual, em [nosso Figma.](https://www.figma.com/file/Zc5xu1dvWulkhRkqGWU8bS/Typext-Novo-Prot%C3%B3tipo?node-id=0%3A1) - -3º - Nossa primeira versão da documentação, contemplando todos os casos de uso e requisitos funcionais, é acessada [clicando aqui.](https://github.com/MatheusCampos-450/typext-frontend/blob/main/docs/Documenta%C3%A7%C3%A3o%20geral%20-%20Casos%20de%20uso%2C%20requisitos%20e%20diagrama%20de%20modelo.pdf) - -4º - Apresentação realizada para empresa cliente: [Acesse aqui.](https://www.canva.com/design/DAEaLlaUFec/Sa-mv3LFWQdluoEd9wFDUw/view?utm_content=DAEaLlaUFec&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton) diff --git "a/docs/Documenta\303\247\303\243o geral - Casos de uso, requisitos e diagrama de contexto.pdf" "b/docs/Documenta\303\247\303\243o geral - Casos de uso, requisitos e diagrama de contexto.pdf" deleted file mode 100644 index 716abbb..0000000 Binary files "a/docs/Documenta\303\247\303\243o geral - Casos de uso, requisitos e diagrama de contexto.pdf" and /dev/null differ diff --git a/src/App.tsx b/src/App.tsx index 743c6f4..d7d48ab 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,11 @@ import React from 'react'; -import Header from './components/Header/Header'; import Routes from './routes'; import GlobalStyle from './styles/global'; function App() { return ( <> -
diff --git a/src/pages/Main/components/MinuteViewer/components/Minute/DTOs/index.ts b/src/DTOs/Minute.tsx similarity index 100% rename from src/pages/Main/components/MinuteViewer/components/Minute/DTOs/index.ts rename to src/DTOs/Minute.tsx diff --git a/src/DTOs/User.tsx b/src/DTOs/User.tsx new file mode 100644 index 0000000..3036c55 --- /dev/null +++ b/src/DTOs/User.tsx @@ -0,0 +1,5 @@ +export interface IUser { + name: string; + username: string; + email: string; +} diff --git a/src/DTOs/index.tsx b/src/DTOs/index.tsx new file mode 100644 index 0000000..61fc5df --- /dev/null +++ b/src/DTOs/index.tsx @@ -0,0 +1,2 @@ +export * from './User'; +export * from './Minute'; diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..3aa4c46 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/workInProgress.svg b/src/assets/workInProgress.svg new file mode 100644 index 0000000..7884dd3 --- /dev/null +++ b/src/assets/workInProgress.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Header/Header.tsx b/src/components/Header/index.tsx similarity index 71% rename from src/components/Header/Header.tsx rename to src/components/Header/index.tsx index 2ae61f9..22b97d5 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useHistory } from 'react-router-dom'; import addIcon from '../../assets/add_icon.svg'; import homeIcon from '../../assets/home_icon.svg'; @@ -8,10 +9,19 @@ import logoutIcon from '../../assets/logout_icon.svg'; import { StyledHeader } from './styles'; const Header = () => { + const history = useHistory(); + + const handleNavigateToHome = () => { + history.push('/'); + }; + return (
- + +
diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index afeccb7..9e0d810 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -33,4 +33,15 @@ export const StyledHeader = styled.header` width: 14.375rem; } } + + button { + border: none; + background: none; + } + + .shortOptions { + max-width: 150px; + width: 100%; + justify-content: flex-start; + } `; diff --git a/src/components/Route/index.tsx b/src/components/Route/index.tsx new file mode 100644 index 0000000..e9d4f5b --- /dev/null +++ b/src/components/Route/index.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import Header from 'components/Header'; + +import { Route as ReactRoute } from 'react-router-dom'; + +interface RouteProps { + component: Function; + path: string; + exact?: boolean; + isPrivate?: boolean; +} + +const Route = ({ component: Component, isPrivate, ...rest }: RouteProps) => { + return ( + { + return ( + <> + {isPrivate &&
} + + + ); + }} + /> + ); +}; + +Route.defaultProps = { + exact: false, + isPrivate: false, +}; + +export default Route; diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx new file mode 100644 index 0000000..da80790 --- /dev/null +++ b/src/components/Select/Select.tsx @@ -0,0 +1,39 @@ +import React, { SelectHTMLAttributes } from 'react'; +import { StyledSelect } from './styles'; + +interface SelectProps extends SelectHTMLAttributes { + title: string; + color?: string; + Size?: string; + styleWidth?: string; +} + +const Select: React.FC = ({ + title, + id, + color, + Size, + styleWidth, + ...rest + }: SelectProps) => { + return ( + +

{title}

+ + + + + + + + + + ); +} + +export default index; diff --git a/src/pages/InviteUsers/styles.tsx b/src/pages/InviteUsers/styles.tsx new file mode 100644 index 0000000..d993121 --- /dev/null +++ b/src/pages/InviteUsers/styles.tsx @@ -0,0 +1,44 @@ +import styled from 'styled-components'; + +export const StyleInviteUsers = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + margin-top: 4.375rem; + + h1 { + font-family: Roboto; + font-style: normal; + font-weight: 900; + font-size: 3.125rem; + color: #CECFD0; + } + + + .EmailAndPermission { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + margin-top: 13.25rem; + + align-items: flex-end; + + + Input { + margin-bottom: 2rem; + } + + Button { + margin-top: 4rem; + width: 14.063rem; + } + } + + +`; + +export default StyleInviteUsers; diff --git a/src/pages/LandingPage/index.tsx b/src/pages/LandingPage/index.tsx new file mode 100644 index 0000000..54871ed --- /dev/null +++ b/src/pages/LandingPage/index.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { ReactComponent as WorkInProgress } from 'assets/workInProgress.svg'; + +import { Container } from './styles'; + +const LandingPage = () => { + return ( + +

LandingPage

+

Working in progress

+ + + ); +}; + +export default LandingPage; diff --git a/src/pages/LandingPage/styles.ts b/src/pages/LandingPage/styles.ts new file mode 100644 index 0000000..51102ae --- /dev/null +++ b/src/pages/LandingPage/styles.ts @@ -0,0 +1,16 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + width: 100vw; + height: 100vh; + + svg { + max-width: 40rem; + width: 100%; + } +`; diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx new file mode 100644 index 0000000..4232087 --- /dev/null +++ b/src/pages/Login/index.tsx @@ -0,0 +1,61 @@ +import React from 'react'; + +import Input from 'components/Input/Input'; +import Button from 'components/Button/Button'; +import Logo from 'assets/logo.svg'; +import Content from './styles'; + +function Login() { + return ( + <> + + +
+ + + Logo + + +
+ + + + +
+ + + +
+ + + + ); +} + +export default Login; diff --git a/src/pages/Login/styles.ts b/src/pages/Login/styles.ts new file mode 100644 index 0000000..b2fe4f9 --- /dev/null +++ b/src/pages/Login/styles.ts @@ -0,0 +1,77 @@ +import styled from 'styled-components'; + +const Content = styled.div` + + display: flex; + justify-content: center; + + margin-top: 4.375rem; + + + .Login { + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + + a { + width: 18.125rem; + height: 3.125rem; + + img { + width: 18.125rem; + height: 3.125rem; + } + } + + .EmailPassword { + + margin-top: 13.25rem; + + display: flex; + flex-direction: column; + align-items: flex-start; + + Input { + margin-bottom: 2rem; + } + + + } + + .LoginPassForgot { + + margin-top: 4rem; + width: 100%; + + display: flex; + align-items: center; + justify-content: space-between; + + Button { + width: 14.063rem; + } + + a { + display: flex; + align-items: center; + color: var(--red-pink); + } + + strong { + margin-left: 0.2rem; + } + + } + + + + } + + + +`; + +export default Content; diff --git a/src/pages/Main/components/Distributions/Distributions.tsx b/src/pages/Main/components/Distributions/Distributions.tsx index 7bdbf3e..9016163 100644 --- a/src/pages/Main/components/Distributions/Distributions.tsx +++ b/src/pages/Main/components/Distributions/Distributions.tsx @@ -1,6 +1,8 @@ -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; import { message } from 'antd'; +import { MainContext } from 'contexts/MainContext'; + import Input from 'components/Input/Input'; import Button from 'components/Button/Button'; @@ -10,12 +12,9 @@ import ScrollBox from 'components/ScrollBox/ScrollBox'; import BoxInformation from 'components/BoxInformation/BoxInformation'; import StyledDistributions from './styles'; -interface DistributionsProps { - setDistributions: Function - distributions: Array -} +const Distributions = () => { + const { distributions, setDistributions } = useContext(MainContext); -const Distributions = ({ setDistributions, distributions } : DistributionsProps) => { const [distribution, setDistribution] = useState(''); const handleCleanFields = () => { diff --git a/src/pages/Main/components/Initial/Initial.tsx b/src/pages/Main/components/Initial/Initial.tsx index 8b7a34a..9983cc5 100644 --- a/src/pages/Main/components/Initial/Initial.tsx +++ b/src/pages/Main/components/Initial/Initial.tsx @@ -1,13 +1,14 @@ /* eslint-disable prettier/prettier */ -import React, { useState, useEffect } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; + +import { MainContext } from 'contexts/MainContext'; + import Input from 'components/Input/Input'; import { StyledInitial } from './styles'; -interface IInitialProps { - setAddressAndHour: Function -} +const Initial = () => { + const { setAddressAndHour } = useContext(MainContext); -const Initial = ({ setAddressAndHour }: IInitialProps) => { const [local, setLocal] = useState(''); const [startHour, setStartHour] = useState(''); const [startDate, setStartDate] = useState(''); diff --git a/src/pages/Main/components/MinuteViewer/components/Minute/components/GeneralInfo/index.tsx b/src/pages/Main/components/MinuteViewer/components/Minute/components/GeneralInfo/index.tsx index 7fdae1c..bb4a191 100644 --- a/src/pages/Main/components/MinuteViewer/components/Minute/components/GeneralInfo/index.tsx +++ b/src/pages/Main/components/MinuteViewer/components/Minute/components/GeneralInfo/index.tsx @@ -3,10 +3,9 @@ import moment from 'moment'; import iacitLogo from 'assets/iacit_logo.jpg'; +import { IAddressAndHour } from 'DTOs'; import { Container } from './styles'; -import { IAddressAndHour } from '../../DTOs'; - interface IGeneralInfoProps { addressAndHour: IAddressAndHour; } diff --git a/src/pages/Main/components/MinuteViewer/components/Minute/components/Project/index.tsx b/src/pages/Main/components/MinuteViewer/components/Minute/components/Project/index.tsx index 6370f51..b8c086b 100644 --- a/src/pages/Main/components/MinuteViewer/components/Minute/components/Project/index.tsx +++ b/src/pages/Main/components/MinuteViewer/components/Minute/components/Project/index.tsx @@ -1,9 +1,8 @@ import React from 'react'; +import { IProjectInfo } from 'DTOs'; import { Container } from './styles'; -import { IProjectInfo } from '../../DTOs'; - interface IProjectProps { projectInfo: IProjectInfo; } diff --git a/src/pages/Main/components/MinuteViewer/components/Minute/components/Subjects/index.tsx b/src/pages/Main/components/MinuteViewer/components/Minute/components/Subjects/index.tsx index f72a1ef..9379549 100644 --- a/src/pages/Main/components/MinuteViewer/components/Minute/components/Subjects/index.tsx +++ b/src/pages/Main/components/MinuteViewer/components/Minute/components/Subjects/index.tsx @@ -1,10 +1,9 @@ import React from 'react'; import { Table } from 'antd'; +import { ISubject } from 'DTOs'; import { Container } from './styles'; -import { ISubject } from '../../DTOs'; - interface ISubjectsProp { subjects: Array; distributions: Array; diff --git a/src/pages/Main/components/MinuteViewer/components/Minute/components/Topics/index.tsx b/src/pages/Main/components/MinuteViewer/components/Minute/components/Topics/index.tsx index 8030cc5..89eb392 100644 --- a/src/pages/Main/components/MinuteViewer/components/Minute/components/Topics/index.tsx +++ b/src/pages/Main/components/MinuteViewer/components/Minute/components/Topics/index.tsx @@ -1,9 +1,8 @@ import React from 'react'; +import { ITopic } from 'DTOs'; import { Container } from './styles'; -import { ITopic } from '../../DTOs'; - interface ITopicsProps { topics: Array; } diff --git a/src/pages/Main/components/MinuteViewer/components/Minute/index.tsx b/src/pages/Main/components/MinuteViewer/components/Minute/index.tsx index 67dbbd5..48e85b8 100644 --- a/src/pages/Main/components/MinuteViewer/components/Minute/index.tsx +++ b/src/pages/Main/components/MinuteViewer/components/Minute/index.tsx @@ -1,6 +1,7 @@ /* eslint-disable react/prop-types */ import React, { PureComponent } from 'react'; +import { IMinute } from 'DTOs'; import GeneralInfo from './components/GeneralInfo'; import Project from './components/Project'; import Topics from './components/Topics'; @@ -8,8 +9,6 @@ import Subjects from './components/Subjects'; import { Container } from './styles'; -import { IMinute } from './DTOs'; - interface IPrintProps { minute: IMinute; } diff --git a/src/pages/Main/components/OptionButtons/index.tsx b/src/pages/Main/components/OptionButtons/index.tsx index 56f1473..7de99eb 100644 --- a/src/pages/Main/components/OptionButtons/index.tsx +++ b/src/pages/Main/components/OptionButtons/index.tsx @@ -1,4 +1,6 @@ -import React from 'react'; +import React, { useContext } from 'react'; + +import { MainContext } from 'contexts/MainContext'; import Button from 'components/Button/Button'; @@ -7,16 +9,16 @@ import { getMode } from 'services/api'; import { Container } from './styles'; interface OptionButtonsProps { - setShowSchedule: Function; setShowMinute: Function; handleGenerateMinute: Function; } const OptionButtons: React.FC = ({ - setShowSchedule, setShowMinute, handleGenerateMinute, }: OptionButtonsProps) => { + const { setShowSchedule } = useContext(MainContext); + const isNotProduction = getMode(); const handleOpenMinuteModal = () => { diff --git a/src/pages/Main/components/ProjectInformation/ProjectInformation.tsx b/src/pages/Main/components/ProjectInformation/ProjectInformation.tsx index 75d7126..0e1b2c0 100644 --- a/src/pages/Main/components/ProjectInformation/ProjectInformation.tsx +++ b/src/pages/Main/components/ProjectInformation/ProjectInformation.tsx @@ -1,4 +1,6 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; + +import { MainContext } from 'contexts/MainContext'; import Button from 'components/Button/Button'; import Input from 'components/Input/Input'; @@ -19,11 +21,9 @@ interface IMembers { enterprise: string; } -interface ProjectProps { - setProjectInfo: Function; -} +const ProjectInformation = () => { + const { setProjectInfo } = useContext(MainContext); -const ProjectInformation = ({ setProjectInfo }: ProjectProps) => { const [members, setMembers] = useState([]); const [projectName, setProjectName] = useState(''); diff --git a/src/pages/Main/components/ScheduleModal/index.tsx b/src/pages/Main/components/ScheduleModal/index.tsx index 883f620..80a785c 100644 --- a/src/pages/Main/components/ScheduleModal/index.tsx +++ b/src/pages/Main/components/ScheduleModal/index.tsx @@ -1,15 +1,15 @@ -import React from 'react'; +import React, { useContext } from 'react'; + +import { MainContext } from 'contexts/MainContext'; import scheduleImage from 'assets/calendar.svg'; import exit_icon from 'assets/exit_logo_red.svg'; import { Container } from './styles'; -interface IScheduleModalProps { - setShowSchedule: Function; -} +const ScheduleModal = () => { + const { setShowSchedule } = useContext(MainContext); -const ScheduleModal = ({ setShowSchedule }: IScheduleModalProps) => { const handleCloseModal = () => { if (setShowSchedule) setShowSchedule(); }; diff --git a/src/pages/Main/components/Subjects/Subjects.tsx b/src/pages/Main/components/Subjects/Subjects.tsx index 7839a77..349287f 100644 --- a/src/pages/Main/components/Subjects/Subjects.tsx +++ b/src/pages/Main/components/Subjects/Subjects.tsx @@ -1,19 +1,16 @@ -import React, { useState } from 'react'; -import ScrollBox from 'components/ScrollBox/ScrollBox'; +import React, { useContext, useState } from 'react'; + +import { MainContext } from 'contexts/MainContext'; +import ScrollBox from 'components/ScrollBox/ScrollBox'; import Button from 'components/Button/Button'; import StyledSubjects from './styles'; import SubjectModal from './components/SubjectModal'; -import { ISubject } from '../MinuteViewer/components/Minute/DTOs'; - -interface ISubjectsProps { - subjects: Array; - setSubjects: Function; -} +const Subjects = () => { + const { subjects, setSubjects } = useContext(MainContext); -const Subjects = ({ subjects, setSubjects }: ISubjectsProps) => { const [openSubjectModal, setOpenSubjectModal] = useState(false); const handleOpenSubjectModal = () => { diff --git a/src/pages/Main/components/Subjects/components/SubjectModal/index.tsx b/src/pages/Main/components/Subjects/components/SubjectModal/index.tsx index de43f44..10a36cc 100644 --- a/src/pages/Main/components/Subjects/components/SubjectModal/index.tsx +++ b/src/pages/Main/components/Subjects/components/SubjectModal/index.tsx @@ -4,10 +4,9 @@ import Button from 'components/Button/Button'; import Input from 'components/Input/Input'; import TextArea from 'components/TextArea/TextArea'; +import { ISubject } from 'DTOs'; import { Container } from './styles'; -import { ISubject } from '../../../MinuteViewer/components/Minute/DTOs'; - interface ISubjectModalProps { setOpenSubjectModal: Function; setSubjects: Function; diff --git a/src/pages/Main/components/Topics/Topics.tsx b/src/pages/Main/components/Topics/Topics.tsx index 056587c..8bd90e5 100644 --- a/src/pages/Main/components/Topics/Topics.tsx +++ b/src/pages/Main/components/Topics/Topics.tsx @@ -1,23 +1,23 @@ /* eslint-disable prettier/prettier */ -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; import { message } from 'antd'; +import { MainContext } from 'contexts/MainContext'; + import Input from 'components/Input/Input'; import Button from 'components/Button/Button'; import BoxInformation from 'components/BoxInformation/BoxInformation'; import ScrollBox from 'components/ScrollBox/ScrollBox'; + +import { ITopic } from 'DTOs'; + import addIcon from '../../../../assets/add_icon.svg'; import StyledTopics from './styles'; -import { ITopic } from '../MinuteViewer/components/Minute/DTOs'; - -interface ITopicsProps { - setTopics: Function; - topics: Array; -} +const Topics = () => { + const { topics, setTopics } = useContext(MainContext); -const Topics = ({ setTopics, topics }: ITopicsProps) => { const [topicName, setTopicName] = useState(''); const handleCleanFields = () => { diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx index bba54b7..92448ab 100644 --- a/src/pages/Main/index.tsx +++ b/src/pages/Main/index.tsx @@ -1,7 +1,8 @@ -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; -import { MainProvider } from 'contexts/MainContext'; +import { MainContext, MainProvider } from 'contexts/MainContext'; +import { IMinute } from 'DTOs'; import Initial from './components/Initial/Initial'; import ProjectInformation from './components/ProjectInformation/ProjectInformation'; import OptionButtons from './components/OptionButtons'; @@ -15,32 +16,19 @@ import ScheduleModal from './components/ScheduleModal'; import Container from './styles'; -import { - IProjectInfo, - ISubject, - ITopic, - IAddressAndHour, - IMinute, -} from './components/MinuteViewer/components/Minute/DTOs'; - const Main = () => { + const { + topics, + showSchedule, + addressAndHour, + projectInfo, + subjects, + distributions, + } = useContext(MainContext); + const [showMinute, setShowMinute] = useState(false); - const [showSchedule, setShowSchedule] = useState(false); const [minute, setMinute] = useState(); - const [addressAndHour, setAddressAndHour] = useState({ - local: '', - startDate: '', - startHour: '', - }); - const [projectInfo, setProjectInfo] = useState({ - projectName: '', - members: [], - }); - - const [topics, setTopics] = useState([]); - const [subjects, setSubjects] = useState([]); - const [distributions, setDistributions] = useState([]); const handleGenerateMinute = () => { setMinute({ @@ -53,30 +41,29 @@ const Main = () => { }; return ( - - {showMinute && ( - - )} + <> + + {showMinute && ( + + )} + + {showSchedule && } - {showSchedule && } + + + - - - - + - - - - - + + + + + + ); }; diff --git a/src/pages/NewPassword/index.tsx b/src/pages/NewPassword/index.tsx new file mode 100644 index 0000000..a950d92 --- /dev/null +++ b/src/pages/NewPassword/index.tsx @@ -0,0 +1,41 @@ +import React from 'react'; + +import Input from 'components/Input/Input'; +import Button from 'components/Button/Button'; +import Logo from 'assets/logo.svg'; + +import StyledNewPassword from './styles'; + +const NewPassword = () => { + return ( + + Logo Typext + +
+ + + + + + +
+ + + ); +}; + +export default NewPassword; diff --git a/src/pages/NewPassword/styles.ts b/src/pages/NewPassword/styles.ts new file mode 100644 index 0000000..07c5b90 --- /dev/null +++ b/src/pages/NewPassword/styles.ts @@ -0,0 +1,33 @@ +import styled from 'styled-components'; + +export const StyledNewPassword = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + margin-top: 4.375rem; + + .NewPassword { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + margin-top: 13.25rem; + + align-items: flex-end; + + Input { + margin-bottom: 2rem; + } + + Button { + margin-top: 4rem; + width: 14.063rem; + } + } + +`; + +export default StyledNewPassword; diff --git a/src/pages/RecoveryPassword/index.tsx b/src/pages/RecoveryPassword/index.tsx new file mode 100644 index 0000000..5d94d27 --- /dev/null +++ b/src/pages/RecoveryPassword/index.tsx @@ -0,0 +1,39 @@ +import React from 'react'; + +import Button from 'components/Button/Button'; +import Input from 'components/Input/Input'; + +import LogoIcon from 'assets/logo.svg'; + +import StyledRecoveryPassword from './styles'; + +const RecoveryPassword = () => { + return ( + <> + +
+ + Typext + + +
+ + + +
+
+ + + ); +}; + +export default RecoveryPassword; diff --git a/src/pages/RecoveryPassword/styles.ts b/src/pages/RecoveryPassword/styles.ts new file mode 100644 index 0000000..a3e79d7 --- /dev/null +++ b/src/pages/RecoveryPassword/styles.ts @@ -0,0 +1,44 @@ +import styled from 'styled-components'; + +const StyledRecoveryPassword = styled.div` + display: flex; + justify-content: center; + margin-top: 4.375rem; + + .RecoveryPassword { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + max-width: 102.125rem; + width: 100%; + + a { + width: 18.125rem; + height: 3.125rem; + + img { + width: 18.125rem; + height: 3.125rem; + } + } + + .Email { + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: center; + + width: 41.875rem; + + margin-top: 16rem; + + Button { + margin-top: 9.688rem; + } + } + } +`; + +export default StyledRecoveryPassword; diff --git a/src/pages/RegisterNewUser/index.tsx b/src/pages/RegisterNewUser/index.tsx new file mode 100644 index 0000000..210e97f --- /dev/null +++ b/src/pages/RegisterNewUser/index.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import LogoIcon from 'assets/logo.svg'; +import Input from 'components/Input/Input'; +import Button from 'components/Button/Button'; +import StyledRegisterNewUser from './styles'; + +const RegisterNewUser = () => { + return ( + + + Typext + + +
+
+
+ + + + + + + +
+ +
+ + + + + + + +
+
+ + +
+ + ); +}; + +export default RegisterNewUser; diff --git a/src/pages/RegisterNewUser/styles.ts b/src/pages/RegisterNewUser/styles.ts new file mode 100644 index 0000000..2195c73 --- /dev/null +++ b/src/pages/RegisterNewUser/styles.ts @@ -0,0 +1,42 @@ +import styled from 'styled-components'; + +const StyledRegisterNewUser = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin-top: 4.375rem; + + a { + width: 18.125rem; + height: 3.125rem; + + img { + width: 18.125rem; + height: 3.125rem; + } + } + + .RegisterNewUser{ + display: flex; + flex-direction: column; + align-items: flex-end; + + .Content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 7.25rem; + + margin-top: 8.75rem; + + Input { + margin-bottom: 1.25rem; + } + } + + Button { + margin-top: 5.625rem; + } + } +`; + +export default StyledRegisterNewUser; diff --git a/src/routes.tsx b/src/routes.tsx index b757ae3..11d2e2e 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,13 +1,33 @@ import React from 'react'; -import { Switch, Route, BrowserRouter } from 'react-router-dom'; +import RecoveryPassword from 'pages/RecoveryPassword'; +import { Switch, BrowserRouter } from 'react-router-dom'; +import { getMode } from 'services/api'; + +import Route from 'components/Route'; + +import LandingPage from 'pages/LandingPage'; +import NewPassword from 'pages/NewPassword'; +import RegisterNewUser from 'pages/RegisterNewUser'; +import Home from 'pages/Home'; import Main from './pages/Main'; +import Login from './pages/Login'; +import InviteUsers from './pages/InviteUsers'; export default function Routes() { + const isNotProduction = getMode(); + return ( - + {isNotProduction && } + + + + + + + ); diff --git a/src/services/auth.ts b/src/services/auth.ts new file mode 100644 index 0000000..352acd5 --- /dev/null +++ b/src/services/auth.ts @@ -0,0 +1,7 @@ +export function getUser(): any { + const storegedUser = localStorage.getItem('tpxt_user'); + + const user = JSON.parse(storegedUser); + + return user; +}