Completed

Pacote de funções de Autenticação

Published on the August 14, 2018 in IT & Programming

About this project

Open

Seguir padão da estrutura pré-definida (você poderá dar um fork nela):
https://codesandbox.io/s/4wo1jm9n50
Nem todos os componentes e screens estão adicionadas

Nessa estrutura já temos o sagas conectado com o Redux (actions e reducers) chamando o firestore (do firebase) em Data01List (lista de tarefas com label e done) sem autenticação. O sistema de autenticação não está operando e está apenas conectado com: login, sign-out e sync.

Na nossa estrutura usamos o PureComponent do React e só conectamos os dados do Redux nas Screens e os componentes apenas criam a estrutura de props (propriedades). Essa estrutura também não envolve nenhum tipo de estilização já que isso é feito por outro time.

Precisamos dos seguintes componentes seguindo o padrão da nossa estrutura:
Screen01 - Manter o Component01.js como exemplo de conexão com o firestore usando o Data01List (Lista de tarefas). Não deve aparecer até que o usuário esteja logado.
Screen02 - Tela que aparece apenas se não está autenticado e deve incluir o Component02.js que faça a entrada completa por e-mail, gmail e facebook.
Conterá input de e-mail na hora que escreve (com validação de e-mail escrito correto), input de senha, Botão esqueci senha (que será direcionado para a tela 03), Botão Entrar, Botão Entrar com Gmail, entrar com Facebook e botão cadastrar e-mail. Os erros deverão responder ao API do firebase em português de forma que possamos editar posteriormente. Assim que entrar por gmail ou facebook pela primeira vez o sistema enviará um e-mail de boas-vindas com possibilidade de estilização por html desse e-mail.

Screen03 - Tela que aparece apenas se não está autenticado e deve incluir o Component03.js que faça a validação e o envio de um e-mail. Deverá conter o botão voltar, um input para incluir e-mail válido cadastrado (avisando se não estiver cadastrado) e um aviso de que o e-mail de redefinição de senha foi enviado. Depois do cadastro o usuário será levado para a Screen07 do perfil com o aviso fixo de que deverá confirmar o e-mail.
No e-mail enviado nos moldes dos boas-vindas que permita a formatação via html, deverá conter também um link dinâmico para a alteração da senha que não aparecerá pra usuários que não têm o link. Esse link levará para a Screen04.
Screen04 - Conterá o Component04.js com um label, um input de definir senha (com aviso de força de senha indicada pelo firebase), repetir senha indicando se estão compatíveis e botão confirmar.
Depois dessa tela o usuário será direcionado para a Screen07 de perfil.
Screen05 - Tela que aparece se não está autenticado. Nessa tela terá 2 componentes.
O Component04.js reutilizado da Screen04 e o Component05.js com o input de nome, e-mail com validação e o botão voltar. Assim que o usuário entrar ele receberá um e-mail de boas-vindas parecido com o do gmail e facebook (todos o mesmo componente inicial) porém com um pequeno componente pedindo para clicar no link para confirmar o e-mail. Esse link que não deverá conter o e-mail na url (url embaralhada) levará a Screen06 de confirmação de E-mail.

Screen06 - Essa tela conterá o Component06.js que terá duas labels e um botão. A primeira label estática indicará que o e-mail abaixo foi confirmado com sucesso, a label 2 indicará o e-mail que foi confirmado e o botão fechar. Ao clicar no botão fechar aparecerá a Screen07 com o perfil.

Screen07 - Conterá o menu acima com as opções Screen01, Screen07 e Screen08 e abaixo o Component07.js contendo as labels nome, e-mail e senha e se o usuário ainda não confirmou o e-mail o aviso de e-mail não confirmado. Abaixo de tudo também haverá o botão sair que acionará um modal pra confirmar saida ou cancelar. Ao clicar na label de nome aparecerá o input com o nome preenchido e o botão salvar.
Ao clicar em salvar aparecerá o loader até que o sistema confirme que foi alterado mostrando uma mensagem. Depois de salvar o input com o novo e-mail a informação da necessidade de confirmar o novo e-mail aparecerá acima. Caso tente cadastrar um e-mail já cadastrado aparecerá um aviso de erro.
Ao clicar no label de senha poderá aparecer nesse espaço o Component04.
Screen08 - Além do menu superior deverá conter o Component08.js com a lista de usuários já cadastrados. Essa lista deverá estar conectada com o Redux-Sagas com o título de Data02List (já que o 01 é a lista de tarefas). Essa lista irá conter o Data02A(nome), Data02B(e-mail) e Data02C(array de entradas no sistema).
No componente a lista deverá indicar o nome, e-mail e apenas a última entrada do array de entradas. Também no fim de cada item da lista deverá conter um botão de excluir usuário do banco de dados com um aviso.

Depois de logado o usuário deverá ficar permanentemente logado e não terá tempo de expiração. Mas isso deverá ser indicado no código para futuras alterações (exemplo logado por apenas 30 dias).

Parte dessas funcionalidades estão descritas no blog abaixo mas ele está sem conexão com o Sagas:
https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/#react-firebase-sign-out

Para mais consultas de utilização do sagas sugerimos consultar o link

Category IT & Programming
Subcategory Web development
What is the scope of the project? Medium-sized change
Is this a project or a position? Project
I currently have I have specifications
Required availability As needed
Experience in this type of projects Yes (I have managed this kind of project before)
API Integrations Other (Other APIs)
Roles needed Developer

Delivery term: August 19, 2018

Skills needed

Other projects posted by Morfos S. E. C. D.