Passwordless | Move sign in with password instead option #3058
Conversation
coldlink
force-pushed
the
mm/move-password-option
branch
from
1f4084a to
d01ed27
Compare
coldlink
requested review from
guardian-ci
and removed request for
guardian-ci
coldlink
added
the
passwordless
coldlink
force-pushed
the
mm/move-password-option
branch
from
d01ed27 to
026e812
Compare
Identity have changed the way that password sign in works in guardian/gateway#3058, so update the test behaviour to reflect that.
coldlink
force-pushed
the
mm/move-password-option
branch
from
026e812 to
3ccc95f
Compare
coldlink
force-pushed
the
mm/move-password-option
branch
from
3ccc95f to
341ddac
Compare
coldlink
force-pushed
the
mm/move-password-option
branch
from
341ddac to
b416b0f
Compare
| @@ -89,12 +91,20 @@ export const EmailSentInformationBox = ({ | |||
| )} | |||
| {changeEmailPage && ( | |||
| <> | |||
| , or{' '} | |||
| ,{!showSignInWithPasswordOption ? <> or </> : <> </>} | |||
There was a problem hiding this comment.
sorry I'm having a bit of trouble understanding the intent (or maybe the syntax) here:
is the intention that if it has to show both links it would say
try another address or sign in with a password instead
but if it only has to one it would just say or try another address / or sign in with a password instead ?
There was a problem hiding this comment.
you can see in storybook on how it behaves: https://60929d168594f80039336501-dlorewwtdy.chromatic.com/?path=/story/components-emailsentinformationbox--with-show-sign-in-with-password-option&globals=viewport:mobile
There was a problem hiding this comment.
is a comma before 'or' correct ?
It looks weird to me but sadly I don't have an english degree to know this kind of things for sure.
edit: I mean in cases like this:
There was a problem hiding this comment.
In generally I've always used a comma before the or in the last item in a list, so it separated from the other items in the same way, like an array.
See Oxford comma in the Guardian style guide: https://www.theguardian.com/guardian-observer-style-guide-o#:~:text=what%20we%20use-,Oxford%20comma,-a%20comma%20before
src/client/pages/SignIn.tsx
Outdated
| useEffect(() => { | ||
| if (typeof window !== 'undefined' && focusPasswordField && email) { | ||
| const passwordInput: HTMLInputElement | null = | ||
| window.document.querySelector('input[name="password"]'); | ||
|
|
||
| if (passwordInput) { | ||
| passwordInput.focus(); | ||
| } | ||
| } | ||
| }, [focusPasswordField, email]); |
There was a problem hiding this comment.
Would autofocus work here?
For some reason my screen reader isn't announcing the "password" field when its getting Its my Voiceover..focus()ed, not sure if thats a side effect from it being called by useEffect or if im just using the screen reader wrong, but I wonder if using the browsers built in autofocus it might work better.
There was a problem hiding this comment.
I'll refactor to use autofocus anyway!
As it avoids a useEffect and any client side code, as the autofocus attribute can be applied on the server side render of the page!
coldlink
force-pushed
the
mm/move-password-option
branch
from
3489cbd to
4123b82
Compare
What does this change?
Recently we deployed sign in with passcodes to all users.
While we noticed that overall sign in numbers remained consistent, we did get a few user complaints saying that they did not like how the "sign in with password" option was only available after getting the one time code sent to their email. Other users complained that they thought they could input a password into the passcode field box and sign in with a password directly.
To improve the UX, we've made some minor adjustments to the sign in flow.
Firstly we added a "sign in with a password instead" link to the sign in landing page, which takes the email from the email input, and redirects the user to
/signin/passwordwith the email option prefilled, or directly to the page if there is no email. We also moved the "sign in with a password instead" option on the passcode input page to the information box, as an additional option if a user is having trouble with passcodes.We belive that this should alleviate some of the issues users are having, even as we're prioritising sign in with passcodes.
We also rename the passcode CTA from "Continue with email" to Sign in with email" instead.
Screen.Recording.2025-02-10.at.15.11.03.mov
Screen.Recording.2025-02-10.at.15.11.25.mov
Tested