issue-129 Update signin/up ui-ux #136
Reference in New Issue
Block a user
Delete Branch "kurt/issue-129-update-signup-in-ui-ux"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Getting rid of the netlify widgit and rolling our own, gives us the
flexibility to also add the username into the signup process as well
as allow the user to opt into the newsletter at the same time.
Auth is still netlify, via their "gotrue", we're just handling the more
of it.
resolves #129
What's Changed?
There's now our own signIn/Up modal (in
web/src/components/LoginModal/LoginModal.js, with help fromweb/src/components/InputTextForm/InputTextForm.js)Sign up now has a userName parameter and well a newsletter checkbox
error state
Sign in has the exact same functionality
The
forgot passwordkicks off to separate page (web/src/pages/AccountRecoveryPage/AccountRecoveryPage.js)And once the user has used the recovery link, there's a page for updating their email (
web/src/pages/UpdatePasswordPage/UpdatePasswordPage.js)The
start hacking nowlanding page CTA also opens the signin/up modal, but is able to have to open on the signup tab specifically.More explanation comments inline for how conformation token etc were handled. Something I got a little stuck on with redwood changing a
dataargument toremember, Also worth pointing out that I have not implement email update functionality in the PR, but if you plan to you will probably want to keep this in mind@@ -0,0 +2,4 @@import { TextField, FieldError } from '@redwoodjs/forms'import { useFormContext } from 'react-hook-form'const InputText = ({ type = 'text', className, name, validation }) => {Very light abstraction of individual text input that still working
with react-hoo-forms.@@ -0,0 +10,4 @@import { Link, routes } from '@redwoodjs/router'import { subscribe } from 'src/helpers/subscribe'const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {The login modal
@@ -0,0 +31,4 @@await signUp({email,password,remember: { full_name: name, userName },Any extra data that you want be inside the payload that's passed to the
identity-signupnetlify function needs to be added to this remember property. It will be in theuser_metadataproperty in the payload.I'm opting to continue using
full_namefor the name as this will display nicely asNamein the netlify identity dashboardWhy is the data put on a property called remember? I'm not sure but it's pretty confusing since for
login,rememberis a boolean value that's mean for persisting the users log in state.Redwood has in mostly places changed gotrue's ordered arguments to named object arguments.
d1565a7d05/index.d.tsWhich I'd normally like, but with the name change it becomes confusing figuring how things differ from gotrue's docs, this might be side-effect of integrating with multiple auth providers and trying to unify the API for all of them, which I can't fault. I just got caught on this for a bit.
@@ -0,0 +26,4 @@try {setError('')if (checkBox) {subscribe({ email, addMessage })Somewhat crude way of subscribing the user to the newsletter, this doesn't got through the API like everything else so it's a little out place. But it works for now.
@@ -0,0 +41,4 @@const onSubmitSignIn = async ({ email, password }) => {try {setError('')await logIn({ email, password, remember: true })As above mentioned above,
rememberhere has to do with persisting the login.This effect is big and unruly enough that I probably should have pulled it out into its own custom hook. The use effect has been added to the nav bar since it's on every page, but in reality, I should only ever be needed on the home page since that's where the verification emails redirect to.
Essentially what it's doing is looking for a hash param that's either a confirmation_token or a recovery_token.
If it's a confirmation token it simply sends that off to gotrue, nothing more to do.
If it's a recover token, it sends to token to gotrue and from there re-directs them to the update password page.
@@ -0,0 +12,4 @@const { client } = useAuth()const onSubmit = ({ email }) => {client.requestPasswordRecovery(email)Send recovery email.
@@ -0,0 +19,4 @@}client.currentUser().update({ password })This update function can be used to update any property on the user. Though, for email (I haven't built email update UI), but if you plan to it's worth knowing there is an undocumented token needed