fix(user update): fixing bug in update user form

Author: LeonardoMessias98

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/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>`
@@ -33,12 +34,13 @@ export const StyledInput = styled.div<Props>`
     font-family: Roboto;
     font-size: 1.3rem;
     font-style: normal;
-    font-weight: 400;
+    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/pages/UserUpdate/index.tsx

@@ -11,7 +11,7 @@ import { useUsers } from 'contexts/user';
 import { IUser } from 'DTOs/User';
 
 import getValidationErrors from 'utils/getValidationErrors';
-import updateSchemaValidation from 'utils/updateSchemaValidation copy';
+import updateSchemaValidation from 'utils/updateSchemaValidation';
 
 import ModalUpdateUser from './ModalUpdateUser';
 
@@ -62,6 +62,7 @@ function UserUpdate() {
           inviteInfo={inviteInfo}
           handleSubmit={handleSubmit}
           user={user}
+          emailIsNotAllowed
         />
       </Container>
     </>

src/routes.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import { Switch, BrowserRouter } from 'react-router-dom';
+import { Switch, BrowserRouter, Redirect } from 'react-router-dom';
 
 import Route from 'components/Route';
 
-import { useAuth } from 'contexts/auth';
-
 import Recovery from 'pages/Recovery';
 import UserUpdate from 'pages/UserUpdate';
 import ResetPassword from 'pages/ResetPassword';
@@ -17,9 +15,6 @@ import NotFound from 'pages/NotFound';
 import Users from 'pages/Users';
 
 export default function Routes() {
-  const { user } = useAuth();
-  const userIsAdmin = user?.type === 'Admin';
-
   return (
     <BrowserRouter>
       <Switch>
@@ -33,12 +28,10 @@ export default function Routes() {
         <Route path="/invite/:email" component={Register} />
         <Route path="/404" component={NotFound} />
 
-        {userIsAdmin && (
-          <>
-            <Route path="/invite" exact isPrivate component={Invite} />
-            <Route path="/users" isPrivate component={Users} />
-          </>
-        )}
+        <Route path="/invite" exact isPrivate onlyAdmin component={Invite} />
+        <Route path="/users" isPrivate onlyAdmin component={Users} />
+
+        <Redirect to="/404" />
       </Switch>
     </BrowserRouter>
   );