Develop

src/DTOs/Auth.tsx

@@ -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/components/BoxInformation/styles.ts

@@ -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/Button/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/FormUpdate/index.tsx

@@ -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/Header/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/styles.ts

@@ -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/Input/Input.tsx

@@ -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/styles.ts

@@ -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/Route/index.tsx

@@ -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,
 };
 

src/components/ScrollBox/styles.ts

@@ -11,11 +11,11 @@ const StyledScrollBox = styled.div`
   ::-webkit-scrollbar {
     width: 12px;
     border-radius: 20px;
-    background: var(--red-pink);
+    background: #ffe7ed;
   }
 
   ::-webkit-scrollbar-thumb {
-    border: 3px solid var(--red-pink);
+    border: 3px solid #ffe7ed;
     border-radius: 20px;
     background: white;
   }

src/contexts/auth.tsx

@@ -19,6 +19,7 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
 
   const [resetError, setResetError] = useState<string>('');
   const [resetLoader, setResetLoader] = useState<boolean>(false);
+  const [resetSuccess, setResetSuccess] = useState<boolean>(false);
 
   const [data, setData] = useState<AuthState>(() => {
     const token = localStorage.getItem('@Typext:token');
@@ -130,23 +131,28 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
     setRecoveryLoader(false);
   }, []);
 
-  const resetPassword = useCallback(async ({ password, confirmPassword }) => {
-    setResetLoader(true);
+  const resetPassword = useCallback(
+    async ({ email, password, password_confirmation }) => {
+      setResetLoader(true);
 
-    try {
-      setRecoveryError('');
+      try {
+        setResetError('');
 
-      await api.post('/password/reset', { password, confirmPassword });
-    } catch (err) {
-      const errorStatus = err.response?.status;
+        await api.post('/password/reset', {
+          email,
+          password,
+          password_confirmation,
+        });
 
-      if (errorStatus === 401) {
-        setResetError(err.response?.data.message);
+        setResetLoader(false);
+        setResetSuccess(true);
+      } catch (err) {
+        setResetLoader(false);
+        setResetError(err.response?.data.validation.body.message);
       }
-
-      setResetLoader(false);
-    }
-  }, []);
+    },
+    [],
+  );
 
   return (
     <AuthContext.Provider
@@ -168,6 +174,7 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
         reset: {
           error: resetError,
           loader: resetLoader,
+          success: resetSuccess,
         },
         signIn,
         signUp,
@@ -193,6 +200,3 @@ function useAuth(): AuthContextData {
 }
 
 export { AuthProvider, useAuth };
-function async(arg0: { email: any }): any {
-  throw new Error('Function not implemented.');
-}

src/pages/Minute/components/Distributions/Distributions.tsx

@@ -32,9 +32,9 @@ const Distributions = () => {
   };
 
   const deleteDistributions = (value: string) => {
-    setDistributions(distributions.filter(
-      distributionValue => distributionValue !== value,
-    ));
+    setDistributions(
+      distributions.filter(distributionValue => distributionValue !== value),
+    );
   };
 
   return (
@@ -46,7 +46,7 @@ const Distributions = () => {
           <div className="DataDepartments">
             <Input
               title="Área"
-              styleWidth="49.375rem"
+              styleWidth="100%"
               value={distribution}
               onChange={(e: any) => setDistribution(e.target.value)}
             />
@@ -63,6 +63,7 @@ const Distributions = () => {
           </div>
 
           <div className="Departments">
+            <h3>Distribuições adicionadas:</h3>
             <ScrollBox>
               {distributions.map(distributionValue => (
                 <BoxInformation
@@ -72,7 +73,6 @@ const Distributions = () => {
                   <h4>{distributionValue}</h4>
                 </BoxInformation>
               ))}
-
             </ScrollBox>
           </div>
         </div>