Ebazhanov / reset-password-flow

Simple Web App `Reset password flow` with responsive mobile design

Web App with RESET-PASSWORD flow

React and Typescript

---

What was done:

• implement responsive design (mobile first) DEMO https://keleya.netlify.app/
• add translation EN/DE
• store email/password in localStorage
• E2E screenshot tests

Want to change translation manually DE/EN?

• http://localhost:3002/?lng=en
• http://localhost:3002/?lng=de

Reset password flow

• $ yarn start
• Forgot password page http://localhost:3002/
• Email sent page http://localhost:3002/email-sent
• Choose New Password page http://localhost:3002/choose-new-password
• Change Password page http://localhost:3002/change-password
• Success page http://localhost:3002/success

---

How to run screenshot comparison E2E tests:

• $ yarn cypress:run
• find failed screen into __diff_output__ folder:

Cypress
    ├── integration
    │   ├── screenshot-tests.spec.ts
    │   ├── snapshots
    │   │   └── screenshot-tests.spec.ts
    │   │          ├── __diff_output__
    │   │          │     └── ... navigate to forgot password page.snap.png
    │   │          └── ... forgot password page.snap.png

• more info here cypress-image-snapshot npm library