Nonprofit-Exchange-Hub/web-app

new reset password styling

jd2rogers2 opened this issue · 2 comments

jd2rogers2 commented

blocked by sign up views (as it will use same styling and layout etc.)
but build the screen from the below figmas with all of the old functionality of the old client/src/components/Users/Auth/SetNewPassword.tsx component

https://www.figma.com/file/K7DT5jYcLKRc9epmNrO0N7/UX---Dev-Handoff?node-id=228-5233&t=0a5133SJk6atcWfw-0

marvinsjsu commented

hi @jd2rogers2, I have these questions/clarifications re: the mocks:

  • the first field (New Password) shows an icon to display the password, would the second field (Confirm New Password) need the visibility icon as well?
  • do we prioritize responsiveness at this time? if this page is viewed on mobile or a narrower viewport, do we adjust the layout or shrink the fields?
  • if passwords don't match or we have an error after submitting, do we have mocks for how we display error messages?
  • it looks like passwords have a minimum length of 6 characters; are there other validation rules we need to apply for passwords?
  • I'm assuming clicking the "Cancel" button will clear both password fields and resets validation errors; is there anything else it needs to do?
  • I'm also trying to export the image/asset for the page, but these look to be two different items on Figma and so I'm unable to export as one asset

Image

  • a general question re: browser support, do we have a set we prioritize?
jd2rogers2 commented
  • the first field (New Password) shows an icon to display the password, would the second field (Confirm New Password) need the visibility icon as well?
    • for minor details use your best judgement and we can have a ui audit at the end to go back and fix things that they deem important. for this one i've seen sites do both so i'm not tied to one option either way
  • do we prioritize responsiveness at this time? if this page is viewed on mobile or a narrower viewport, do we adjust the layout or shrink the fields?
    • only if it's minimal effort. trying to keep our MVP simple so focusing on desktop
  • if passwords don't match or we have an error after submitting, do we have mocks for how we display error messages?
    • i haven't seen any, feel free to put it in if you'd like, just to get the logic in there but regarding styling 🤷
  • it looks like passwords have a minimum length of 6 characters; are there other validation rules we need to apply for passwords?
    • ha i'm seeing 8 in client/src/components/Users/Auth/SignUpUserAndNonprofit/validation-rules.ts so go with whatever. seems like we probably need a ticket to align all of the pw validation checkpoints
  • I'm assuming clicking the "Cancel" button will clear both password fields and resets validation errors; is there anything else it needs to do?
    • just asked in slack channel and cc'd you
  • I'm also trying to export the image/asset for the page, but these look to be two different items on Figma and so I'm unable to export as one asset
    • assets can be found (in the g drive)[https://drive.google.com/drive/u/0/folders/17TyKrqROm9epjrv_cQvvQwNmniNInkq5] just pick the one closest

@marvinsjsu lmk if you have any questions on my answers above :)

  • 👍1