Aula 27 – Implementação da Funcionalidade Redefinir Senha

Voltar para página principal do site

Todas as aulas desse curso

Aula 26

Fiber

Pacote Programador Fullstack

Redes Sociais do Código Fluente:

Scarlett Finch

Scarlett Finch é uma influenciadora virtual criada com IA.

Ela é 🎤 cantora e 🎶compositora pop britânica , 24 anos de idade.

Siga a Scarlett Finch no Instagram:

Conecte-se comigo!

LinkedIn: Fique à vontade para me adicionar no LinkedIn.

Ao conectar-se comigo, você terá acesso a atualizações regulares sobre desenvolvimento web, insights profissionais e oportunidades de networking no setor de tecnologia.

GitHub: Siga-me no GitHub para ficar por dentro dos meus projetos mais recentes, colaborar em código aberto ou simplesmente explorar os repositórios que eu contribuo, o que pode ajudar você a aprender mais sobre programação e desenvolvimento de software.

Recursos e Afiliados

Explorando os recursos abaixo, você ajuda a apoiar nosso site.

Somos parceiros afiliados das seguintes plataformas:

• https://heygen.com/ – Eleve a produção de seus vídeos com HeyGen! Com esta plataforma inovadora, você pode criar vídeos envolventes utilizando avatares personalizados, ideal para quem busca impactar e conectar com audiências em todo o mundo. HeyGen transforma a maneira como você cria conteúdo, oferecendo ferramentas fáceis de usar para produzir vídeos educativos, demonstrações de produtos e muito mais. Descubra o poder de comunicar através de avatares interativos e traga uma nova dimensão para seus projetos. Experimente HeyGen agora e revolucione sua forma de criar vídeos!
• letsrecast.ai – Redefina a maneira como você consome artigos com Recast. Esta plataforma transforma artigos longos em diálogos de áudio que são informativos, divertidos e fáceis de entender. Ideal para quem está sempre em movimento ou busca uma forma mais conveniente de se manter informado. Experimente Recast agora.

• dupdub.com – Explore o universo do marketing digital com DupDub. Esta plataforma oferece ferramentas inovadoras e soluções personalizadas para elevar a sua estratégia de marketing online. Ideal para empresas que buscam aumentar sua visibilidade e eficiência em campanhas digitais. Descubra mais sobre DupDub.
• DeepBrain AI Studios – Revolucione a criação de conteúdo com a tecnologia de inteligência artificial da DeepBrain AI Studios. Esta plataforma avançada permite que você crie vídeos interativos e apresentações utilizando avatares digitais gerados por IA, que podem simular conversas reais e interações humanas. Perfeito para educadores, criadores de conteúdo e empresas que querem inovar em suas comunicações digitais. Explore DeepBrain AI Studios.
• Audyo.ai – Transforme a maneira como você interage com conteúdo auditivo com Audyo.ai. Esta plataforma inovadora utiliza inteligência artificial para criar experiências de áudio personalizadas, melhorando a acessibilidade e a compreensão de informações através de podcasts, transcrições automáticas e síntese de voz avançada. Ideal para profissionais de mídia, educadores e qualquer pessoa que deseje acessar informações auditivas de maneira mais eficiente e envolvente. Descubra Audyo.ai e suas possibilidades.
• Acoust.io – Transforme sua produção de áudio com Acoust.io. Esta plataforma inovadora fornece uma suite completa de ferramentas para criação, edição e distribuição de áudio, ideal para artistas, produtores e empresas de mídia em busca de excelência e inovação sonora. Acoust.io simplifica o processo de levar suas ideias à realidade, oferecendo soluções de alta qualidade que elevam seus projetos de áudio. Experimente Acoust.io agora e descubra um novo patamar de possibilidades para seu conteúdo sonoro.
• Hostinger – Hospedagem web acessível e confiável. Ideal para quem busca soluções de hospedagem de sites com excelente custo-benefício e suporte ao cliente robusto. Saiba mais sobre a Hostinger.
• Digital Ocean – Infraestrutura de nuvem para desenvolvedores. Oferece uma plataforma de nuvem confiável e escalável projetada especificamente para desenvolvedores que precisam de servidores virtuais, armazenamento e networking. Explore a Digital Ocean.
• One.com – Soluções simples e poderosas para o seu site. Uma escolha ideal para quem busca registrar domínios, hospedar sites ou criar presença online com facilidade e eficiência. Visite One.com.

Educação e Networking

Amplie suas habilidades e sua rede participando de cursos gratuitos e comunidades de desenvolvedores:

• Digital Innovation One – Cursos gratuitos com certificado.
• Workover – Aprenda Python3 gratuitamente.
• Comunidades de desenvolvedores para networking:
  • Impulser
  • Google Developer Groups
  • Comunidades.tech

Canais do Youtube

Explore nossos canais no YouTube para uma variedade de conteúdos educativos e de entretenimento, cada um com um foco único para enriquecer sua experiência de aprendizado e lazer.

Toti

Toti: Meu canal pessoal, onde posto clips artesanais de músicas que curto tocar, dicas de teoria musical, entre outras coisas.

Scarlett Finch

Scarlett Finch: Cantora e influenciadora criada com IA.

Lofi Music Zone Beats

Lofi Music Zone Beats: O melhor da música Lofi para estudo, trabalho e relaxamento, criando o ambiente perfeito para sua concentração.

Backing Track / Play-Along

Backing Track / Play-Along: Acompanhe faixas instrumentais para prática musical, ideal para músicos que desejam aprimorar suas habilidades.

Código Fluente

Código Fluente: Aulas gratuitas de programação, devops, IA, entre outras coisas.

Putz!

Putz!: Canal da banda Putz!, uma banda virtual, criada durante a pandemia com mais 3 amigos, Fábio, Tatá e Lula.

PIX para doações

PIX Nubank

Aula 27 – Implementação da Funcionalidade Redefinir Senha

Links da Aula:

Código da Aula

MailHog

Introdução

Nesta aula, iremos implementar a funcionalidade de redefinição de senha para o nosso aplicativo, que foi inicialmente abordada na aula anterior com a funcionalidade de recuperação de senha. Vamos criar o componente Reset em React e integrá-lo ao backend em Golang usando o framework Fiber.

1. Criação do Componente Reset.tsx

O componente Reset.tsx será responsável por permitir que o usuário defina uma nova senha, utilizando o token de recuperação que foi enviado por email.

• Formulário de Redefinição: O formulário conterá dois campos: um para a nova senha e outro para a confirmação da senha. Ambos os campos serão validados no frontend antes de serem enviados ao backend.
• Integração com Token: O token de recuperação será capturado dos parâmetros da URL e enviado ao backend junto com a nova senha.
• Redirecionamento após Sucesso: Após a redefinição bem-sucedida da senha, o usuário será redirecionado para a página de login.

src/pages/Reset.tsx

import React, { useState, SyntheticEvent } from 'react';
import axios from 'axios';
import { Navigate, useParams } from 'react-router-dom';

const Reset = () => {
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [redirect, setRedirect] = useState(false);
  const { token } = useParams<{ token: string }>();

  const submit = async (e: SyntheticEvent) => {
    e.preventDefault();

    if (password !== confirmPassword) {
      console.error('Passwords do not match!');
      return;
    }

    try {
      // Use a consistent base URL, defined as an environment variable or fallback to localhostt
      const apiURL = process.env.REACT_APP_API_URL || 'http://localhost:3001';

      // Make a POST request to the /api/reset route with the necessary data
      await axios.post(`${apiURL}/api/reset`, {
        token,
        password,
        confirm_password: confirmPassword,
      });

      setRedirect(true);
    } catch (e: any) {
      console.error('Failed to reset password:', e.response?.data || e.message);
    }
  };

  // Redirect to the login page if the password reset is successful
  if (redirect) {
    return <Navigate to="/login" />;
  }

  return (
    <form className="form-floating" onSubmit={submit}>
      <h1 className="h3 mb-3 font-weight-normal">Reset your password</h1>
      <div className="form-signin">
        <input
          type="password"
          className="form-control mb-3"
          placeholder="New Password"
          required
          onChange={e => setPassword(e.target.value)}
        />
      </div>
      <div className="form-signin">
        <input
          type="password"
          className="form-control mb-3"
          placeholder="Confirm Password"
          required
          onChange={e => setConfirmPassword(e.target.value)}
        />
      </div>
      <button className="form-signin btn btn-primary w-100 py-2" type="submit">
        Reset Password
      </button>
      <p className="mt-5 mb-3 text-body-secondary">© 2017–2024</p>
    </form>
  );
};

export default Reset;

2. Configuração de Rotas no App.tsx

• Importação do Componente Reset:
  • Foi adicionada a importação do componente Reset no topo do arquivo: import Reset from "./pages/Reset";
  • Este componente será usado para lidar com a funcionalidade de redefinição de senha, geralmente acessada através de um link enviado por e-mail contendo um token.
• Adição da Rota /reset/:token:
  • Uma nova rota foi adicionada para a página de redefinição de senha:
    javascript

    <Route path="/reset/:token" element={<Reset />} />

  • Esta rota permite que o usuário acesse a página de redefinição de senha. O :token na URL é um parâmetro dinâmico que captura o token enviado ao usuário para verificar e permitir a redefinição da senha.

As alterações estão em azul.

src/App.tsx

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./pages/Login";
import Home from "./pages/Home";
import Register from "./pages/Register";
import Forgot from "./pages/Forgot";
import Nav from "./components/Nav";
import Reset from "./pages/Reset";

function App() {
  const [user, setUser] = useState(null); // State to store user data
  const [login, setLogin] = useState(false);

  useEffect(() => {
    (async () => {
      try {
        const response = await axios.get("user");
        const user = response.data;
        setUser(user);// Update the state with user data
      } catch (e) {
        console.error("Error loading user data", e);
        setUser(null); // Sets the user to null in case of error
      }
    })();
  }, [login]);

  return (
    <div className="App">
      <Router>
        <Nav user={user} setLogin={ () => setLogin(false) }/>
        <Routes>

          <Route path="/login" element={<Login setLogin={() => setLogin(true)} />} />
          <Route path="/register" element={<Register />} />
          <Route path="/forgot" element={<Forgot />} />
          <Route path="/reset/:token" element={<Reset />} />

          {/* Protected route that requires authentication */}
          <Route path="/" element={<Home user={user} />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

3. Testando a Feature “Reset Password” com MailHog

Para garantir que a funcionalidade “Reset Password” funcione corretamente, podemos utilizar o MailHog para emular um serviço de email durante nossos testes, assim como fizemos na aula anterior.

Passos para Testar a Feature “Reset Password”:

Inicie o MailHog e acesse: localhost:8025

1. Com o MailHog em execução, acesse a página de “Reset Password” usando o link fornecido no email de recuperação.
2. Insira a nova senha e a confirmação da senha.
3. Envie o formulário e verifique se o redirecionamento para a página de login ocorre corretamente.
4. Tente fazer login com a nova senha para confirmar que a redefinição foi bem-sucedida.

Conclusão

Parabéns por concluir a aula de hoje sobre a implementação da funcionalidade “Reset Password“!

Agora você tem uma aplicação completa com as funcionalidades de recuperação e redefinição de senha, integradas com um backend em Golang e testadas utilizando o MailHog.

O que foi abordado:

• Criação do componente de redefinição de senha.
• Integração do frontend com o backend usando Axios.
• Testes da funcionalidade de redefinição de senha utilizando o MailHog.

Com isso, posso considerar esse tutorial finalizado, mas, provavelmente farei mais algumas aulas ainda, dedicada a fazer o deploy desse 2 projetos, o de backend com golang/fiber e o frontend com react, com o mysql como o banco de dados.

Acredito que essas aulas serão postada nesse tutorial e também no de Kubernates, na aba DevOps, porque o plano é fazer o deploy usando containers Docker em um cluster K8S, usando Terraform.

Nos vemos em breve em outros tutoriais!

Valeu, 😉 \o/