Merge pull request #48 from Typext/develop

Develop

Author: MatheusCampos-450

public/app_logo.svg

@@ -1,4 +1,3 @@
-import { StringifyOptions } from 'node:querystring';
 import { ReactNode } from 'react';
 
 export interface AuthState {
@@ -43,8 +42,9 @@ export interface RecoveryCredentials {
 }
 
 export interface ResetCredentials {
+  email: string;
   password: string;
-  confirmPassword: string;
+  password_confirmation: string;
 }
 
 interface InvitationData {
@@ -65,6 +65,7 @@ interface RecoveryPassowordData {
 interface ResetPasswordData {
   error: String;
   loader: boolean;
+  success: boolean;
 }
 
 export interface AuthContextData {

src/DTOs/Auth.tsx

@@ -27,7 +27,7 @@ const StyledBoxInformation = styled.div`
     justify-content: flex-end;
 
     color: #fff;
-    font-size: 1.5rem;
+    font-size: 1rem;
     font-weight: 900;
     margin: 0;
 

src/components/BoxInformation/styles.ts

@@ -14,13 +14,13 @@ const StyledButton = styled.button<StyledButtonProps>`
   width: ${props => props.size || '17.313rem'};
   height: 4.063rem;
   border-radius: 1.25rem;
-  border: none;
-  outline: none;
+  border: 0.063rem;
+  outline: 0.063rem;
 
   font-family: Roboto;
   font-style: normal;
   font-weight: bold;
-  font-size: 1.5rem;
+  font-size: 2rem;
 
   color: ${props => props.colorText || '#fff'};
   background: ${props => props.color || '#F60846'};

src/components/Button/styles.ts

@@ -5,10 +5,12 @@ import { Form } from '@unform/web';
 
 import InputForm from 'components/InputForm';
 import Button from 'components/Button/Button';
+import Input from 'components/Input/Input';
 
 import { Container } from './styles';
 
 interface FormUpdateProps {
+  emailIsNotAllowed?: boolean;
   handleSubmit: any;
   formRef: any;
   hasPasswordField?: boolean;
@@ -30,6 +32,7 @@ interface ParamsProps {
   email: string;
 }
 function FormUpdate({
+  emailIsNotAllowed,
   handleSubmit,
   formRef,
   inviteInfo,
@@ -64,12 +67,24 @@ function FormUpdate({
             title="Empresa"
           />
 
-          <InputForm
-            name="email"
-            title="E-mail"
-            defaultValue={paramsEmail || user?.email || ''}
-            readOnly={!!paramsEmail}
-          />
+          {emailIsNotAllowed ? (
+            <Input
+              name="email"
+              title="E-mail"
+              styleWidth="40rem"
+              color="var(--black);"
+              weight="bold"
+              defaultValue={paramsEmail || user?.email || ''}
+              readOnly={!!paramsEmail}
+            />
+          ) : (
+            <InputForm
+              name="email"
+              title="E-mail"
+              defaultValue={paramsEmail || user?.email || ''}
+              readOnly={!!paramsEmail}
+            />
+          )}
 
           <InputForm defaultValue={user?.phone} name="phone" title="Telefone" />
 
@@ -98,6 +113,7 @@ function FormUpdate({
 }
 
 FormUpdate.defaultProps = {
+  emailIsNotAllowed: false,
   hasPasswordField: false,
   user: {
     name: '',

src/components/FormUpdate/index.tsx

@@ -31,6 +31,10 @@ const Header = () => {
     history.push('/minute');
   }, [history]);
 
+  const handleNavigateToUserUpdate = useCallback(() => {
+    history.push('/user/update');
+  }, [history]);
+
   return (
     <StyledHeader>
       <section className="shortOptions">
@@ -48,7 +52,9 @@ const Header = () => {
       </figure>
 
       <section className="usernameAndLogout">
-        <h1>{user?.name || 'Nome do usuário'}</h1>
+        <button type="button" onClick={handleNavigateToUserUpdate}>
+          <h1>{user?.name || 'Nome do usuário'}</h1>
+        </button>
 
         <button type="button" onClick={handleLogout}>
           <img src={logoutIcon} alt="logout" />

src/components/Header/index.tsx

@@ -61,4 +61,13 @@ export const StyledHeader = styled.header`
     border: none;
     background: none;
   }
+
+  @media (max-width: 960px) {
+    zoom: 70%;
+    height: 6rem;
+
+    img {
+      zoom: 135%;
+    }
+  }
 `;

src/components/Header/styles.ts

@@ -4,6 +4,7 @@ import { StyledInput } from './styles';
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   title: string;
   color?: string;
+  weight?: string;
   Size?: string;
   styleWidth?: string;
   Type?: string;
@@ -14,6 +15,7 @@ const Input: React.FC<InputProps> = ({
   color,
   Size,
   styleWidth,
+  weight,
   Type,
   ...rest
 }: InputProps) => {
@@ -22,6 +24,7 @@ const Input: React.FC<InputProps> = ({
       InputWidth={styleWidth || '23.75rem'}
       Color={color || 'var(--black)'}
       Size={Size || '1.5rem'}
+      weight={weight}
       className="input-styled"
     >
       <h3>{title}</h3>
@@ -34,8 +37,9 @@ const Input: React.FC<InputProps> = ({
 Input.defaultProps = {
   Type: '',
   Size: '',
+  weight: '',
   styleWidth: '23.75rem',
-  color: '',
+  color: 'var(--black)',
 };
 
 export default Input;

src/components/Input/Input.tsx

@@ -4,6 +4,7 @@ interface Props {
   InputWidth: string;
   Color: string;
   Size: string;
+  weight?: string;
 }
 
 export const StyledInput = styled.div<Props>`
@@ -16,7 +17,7 @@ export const StyledInput = styled.div<Props>`
   margin: 0;
 
   h3 {
-    font-weight: bold;
+    font-weight: 500;
     font-size: ${props => props.Size || '1.5rem'};
     color: ${props => props.Color || 'var(--black)'};
 
@@ -33,12 +34,13 @@ export const StyledInput = styled.div<Props>`
     font-family: Roboto;
     font-size: 1.3rem;
     font-style: normal;
-    font-weight: bold;
+    font-weight: ${props => props.weight || '400'};
 
     outline: none;
     border: 0;
     border-radius: 1.25rem;
 
+    color: ${props => props.Color || 'var(--black)'};
     max-width: ${props => props.InputWidth || '23.75rem'};
     width: 100%;
   }

src/components/Input/styles.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route as ReactRoute } from 'react-router-dom';
+import { Route as ReactRoute, Redirect } from 'react-router-dom';
 
 import { useAuth } from 'contexts/auth';
 import Header from 'components/Header';
@@ -11,15 +11,26 @@ interface RouteProps {
   path: string;
   exact?: boolean;
   isPrivate?: boolean;
+  onlyAdmin?: boolean;
 }
 
-const Route = ({ component: Component, isPrivate, ...rest }: RouteProps) => {
+const Route = ({
+  component: Component,
+  isPrivate,
+  onlyAdmin,
+  ...rest
+}: RouteProps) => {
   const { user: userContext } = useAuth();
   const user = getUser();
+  const userIsAdmin = user?.type === 'Admin';
   const userToken = getUserToken();
 
   const userIsAuthenticated = !!user && !!userToken;
 
+  if (onlyAdmin && !userIsAdmin) {
+    return <Redirect to="404" />;
+  }
+
   return (
     <ReactRoute
       {...rest}
@@ -49,6 +60,7 @@ const Route = ({ component: Component, isPrivate, ...rest }: RouteProps) => {
 
 Route.defaultProps = {
   exact: false,
+  onlyAdmin: false,
   isPrivate: false,
 };