Criação da estrutura

1. Aqui, nós iremos fazer a manipulação da estrutura da nossa senha. Nós iremos então criar o “index.tsx” dentro da pasta “password”, iremos usar o mesmo estilo de user.

   import styles from "../../../../styles/profile.module.scss";
   
   const PasswordForm= function () {
     return <></>;
   };
   
   export default PasswordForm;
   

2. Nós iremos agora fazer a criação de um formulário novamente. Nós teremos uma estrutura de inputs parecida com a que temos no user.

   <>
   	<Form className={styles.form}>
   	  <div className={styles.inputNormalDiv}>
   	    <FormGroup>
   	      <Label className={styles.label} for="currentPassword">
   	        SENHA ATUAL
           </Label>
           <Input
           name="currentPassword"
           type="password"
           id="currentPassword"
           placeholder="******"
           required
           maxLength={12}
           className={styles.input}
           />
         </FormGroup>
       </div>
       <div className={styles.inputFlexDiv}>
   	    <FormGroup>
   	      <Label className={styles.label} for="newPassword">
   	        NOVA SENHA
           </Label>
           <Input
           name="newPassword"
           type="password"
           id="newPassword"
           placeholder="******"
           required
           className={styles.inputFlex}
           />
         </FormGroup>
   	    <FormGroup>
   	      <Label className={styles.label} for="confirmNewPassword">
   		      CONFIRMAR NOVA SENHA
   	      </Label>
   	      <Input
   		    name="confirmNewPassword"
   		    type="password"
   	      id="confirmNewPassword"
   	      placeholder="******"
   	      required
   	      className={styles.inputFlex}
   	      />
   	    </FormGroup>
   
         <Button className={styles.formBtn} outline>
   	      Salvar Alterações
         </Button>
       </div>
     </Form>
   </>
   

3. Agora, nós iremos fazer uma manipulação nos nosso botões da página “profile”. Nela, nós iremos fazer a renderização condicional para o formulário de senha e o do usuário. Começaremos criando um useAuth para renderizar.

   const [form, setForm] = useState("userForm");
   

4. Agora nós iremos fazer com que a pessoa clique e mude o state.

   <Button
   outline
   className={styles.renderFormBtn}
   style={{ color: form === "userForm" ? "#ff0044" : "white" }}
   onClick={() => {
   	setForm("userForm");
   }}
   >
   	DADOS PESSOAIS
   </Button>
   <Button
   outline
   className={styles.renderFormBtn}
   style={{ color: form === "userForm" ? "#ff0044" : "white" }}
   onClick={() => {
   	setForm("passwordForm");
   }}
   >
   	SENHA
   </Button>
   

5. Agora, nós iremos fazer a renderização condicional de acordo com esse nosso useState.

   {form === "userForm" ? <UserFrom /> : <PasswordForm />}
   

6. Agora, nós iremos fazer uma renderização condicional para os nossos botões. Nós iremos ver qual está como ativo, e qual deles for o “ativo”, nós iremos colocar como vermelho. Para isso, iremos usar css inline.

   <Button
   outline
   className={styles.renderFormBtn}
   onClick={() => {
   	setForm("userForm");
   }}
   >
   	DADOS PESSOAIS
   </Button>
   <Button
   outline
   className={styles.renderFormBtn}
   onClick={() => {
   	setForm("passwordForm");
   }}
   >
   	SENHA
   </Button>
   

7. Agora, qual nós estivermos renderizando, ele vai ficar de vermelho, ele inicia como o user, então ficará vermelho primeiro. Podemos ver que ficou tudo 100%, em termos visuais, quanto também de funcionalidade.

Responsividade da seção

1. Nós não iremos modificar nada relacionado a responsividade, pois a nossa responsividade já foi feita através do nosso userForm, então não precisamos fazer mais nada aqui.

Commit do git

1. Com o nosso formulário de senha finalizado, podemos então dar o seu commit.

   git add -A
   

   git commit -m "Criação dos elementos de formulário de senha e do seu estilo visual - Formulário de senha"
   

Conclusão

O que foi feito/visto nessa aula:

1. Criação do formulário de senha
2. Implementação da renderização condicional da senha