Agora nós iremos fazer algo parecido com o que fizemos no formulário de usuário, só que com a senha. Iremos então na pasta “profileService.ts”
Antes de começar o método nós iremos fazer o “passwordParams”, nele nós teremos os parâmetros que vamos receber do front de alteração, que é a senha antiga e a nova.
```
interface PasswordParams {
  currentPassword: string;
  newPassword: string;
}
```

Agora, nós podemos fazer um método de update da senha, muito semelhante ao que fizemos no nosso userUpdate. O que iremos mudar de fato será o params e também a url.

passwordUpdate: async (params: PasswordParams) => {
	const token = sessionStorage.getItem("onebitflix-token");

  const res = await api
  .put("/users/current/password", params, {
  headers: {
	  Authorization: `Bearer ${token}`,
  },
  })
  .catch((error) => {
  if (error.response.status === 400 || error.response.status === 401) {
	  return error.response;
  }

  return error;
  });

  return res.status;
},

Agora, com esse método criado, podemos ir no “password”, dentro da pasta “profile” para fazermos a mudança de fato. Nós iremos então começar fazendo state para os 3 inputs.
```
const [currentPassword, setCurrentPassword] = useState("");
const [newPassword, setNewPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
```

Agora iremos criar um useEffect para fazer o set das senhas de acordo com o “currentUser”

useEffect(() => {
	profileService.fetchCurrent().then((password) => {
	  setCurrentPassword(password.currentPassword);
    setNewPassword(password.newPassword);
  });
}, []);

Agora podemos ir para o handle, mas antes, iremos setar o toast. Podemos até copiar toda a configuração do toast da página de usuário. (Setar os useState abaixo dos da senha e setar o toast depois de form, antes do fechamento da página)
```
const [color, setColor] = useState("");
const [toastIsOpen, setToastIsOpen] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
```
```
<ToastComponent
	color={color}
  isOpen={toastIsOpen}
  message={errorMessage}
  />
</>
```

Agora, iremos fazer a configuração do “value” e do “onChange”, o nosso input por ser uma senha, não terá o “value” aparecendo, esse value será apenas para poder ter a digitação e também resetarmos após a alteração.

<FormGroup>
	<Label className={styles.label} for="currentPassword">
	  SENHA ATUAL
  </Label>
  <Input
  name="currentPassword"
  type="password"
  id="currentPassword"
  placeholder="******"
  required
  maxLength={12}
  value={currentPassword}
  onChange={(event) => {
	  setCurrentPassword(event.currentTarget.value);
  }}
  className={styles.input}
  />
</FormGroup>
<FormGroup>
	<Label className={styles.label} for="newPassword">
	  NOVA SENHA
  </Label>
  <Input
  name="newPassword"
  type="password"
  id="newPassword"
  placeholder="******"
  required
  value={newPassword}
  onChange={(event) => {
	  setNewPassword(event.currentTarget.value);
  }}
  className={styles.inputFlex}
  />
</FormGroup>
<FormGroup>
	<Label className={styles.label} for="confirmNewPassword">
	  CONFIRMAR NOVA SENHA
  </Label>
  <Input
  name="confirmNewPassword"
  type="password"
  id="confirmNewPassword"
  placeholder="******"
  required
  value={confirmPassword}
  onChange={(event) => {
	  setConfirmPassword(event.currentTarget.value);
  }}
  className={styles.inputFlex}
  />
</FormGroup>

Agora nós podemos fazer o “handlePasswordUpadate“

const handlePasswordUpadate = async function (event: FormEvent<HTMLFormElement>) {
	event.preventDefault()
};

Vamos começar vendo se a senha e confirmação de senha são diferentes, se forem, iremos parar o handle e dar um toast.

const handlePasswordUpadate = async function (event: FormEvent<HTMLFormElement>) {
	event.preventDefault();

	if (newPassword != confirmPassword) {
	  setToastIsOpen(true);
    setErrorMessage("Senha e confirmação de senha diferentes!");
    setColor("bg-danger");
    setTimeout(() => setToastIsOpen(false), 1000 * 3);

    return;
  }
};

Depois, nós iremos fazer uma verificação para vermos se a nova senha é igual a antiga, e também parar a execução.

const handlePasswordUpadate = async function (event: FormEvent<HTMLFormElement>) {
	event.preventDefault();

	if (newPassword != confirmPassword) {
	  setToastIsOpen(true);
    setErrorMessage("Senha e confirmação de senha diferentes!");
    setColor("bg-danger");
    setTimeout(() => setToastIsOpen(false), 1000 * 3);

    return;
  }

	if (currentPassword === newPassword) {
	  setToastIsOpen(true);
    setErrorMessage("Não coloque a nova senha igual a senha antiga!");
    setColor("bg-danger");
    setTimeout(() => setToastIsOpen(false), 1000 * 3);

    return;
  }
};

Depois dessas verificações, poderemos então fazer a resposta, passando então o método de update do nosso service.

const handlePasswordUpadate = async function (event: FormEvent<HTMLFormElement>) {
	event.preventDefault();

	if (newPassword != confirmPassword) {
	  setToastIsOpen(true);
    setErrorMessage("Senha e confirmação de senha diferentes!");
    setColor("bg-danger");
    setTimeout(() => setToastIsOpen(false), 1000 * 3);

    return;
  }

	if (currentPassword === newPassword) {
	  setToastIsOpen(true);
    setErrorMessage("Não coloque a nova senha igual a senha antiga!");
    setColor("bg-danger");
    setTimeout(() => setToastIsOpen(false), 1000 * 3);

    return;
  }

	const res = await profileService.passwordUpdate({
	  currentPassword,
    newPassword,
  });
};

Com isso, nós teremos o método sendo usado, então nós iremos agora verificar se foi feita a alteração com sucesso. Nós iremos também resetar todos os campos tendo sucesso.

if (res === 204) {
      setToastIsOpen(true);
      setErrorMessage("Senha alterada com sucesso!");
      setColor("bg-success");
      setTimeout(() => setToastIsOpen(false), 1000 * 3);

      setCurrentPassword("");
      setNewPassword("");
      setConfirmPassword("");
    }

Agora, se tivermos falha, nós iremos retornar o erro. Como nós sabemos que o erro que pode ser retornado de forma esperada é o de senha atual incorreta, iremos colocar isso.
```
if (res === 400) {
	setToastIsOpen(true);
  setErrorMessage("Senha atual incorreta!");
  setColor("bg-danger");
  setTimeout(() => setToastIsOpen(false), 1000 * 3);
}
```

Agora, iremos apenas configurar o form para ter esse handle quando tiver o submit e também colocar o botão para ficar como submit.

<Form className={styles.form} onSubmit={handlePasswordUpadate}>

<Button type="submit" className={styles.formBtn} outline>
   Salvar Alterações
</Button>

Agora, podemos testar todas as variações de erro e no final ver o resultado correto. (Senha e confirmação de senha diferente, senha nova igual senha atual, senha atual errada, mudar senha)

Commit do git

Agora, com o backend finalizado, podemos dar commit

git add -A

git commit -m "Conexão do backend relacionado ao update de senha. Criação de um método e também de toda a parte de conexão com o front - Conexão backend update da senha"

Conclusão

O que foi feito/visto nessa aula: