Skip to content

@W-17526051 - Add a "Back" button for Standard Login #2208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jeremy-jung1 merged 12 commits into from
Jan 21, 2025
Merged

@W-17526051 - Add a "Back" button for Standard Login #2208

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4a60961
add back button
jeremy-jung1 Jan 16, 2025
fd37b12
changelog
jeremy-jung1 Jan 16, 2025
3ec8af6
linting
jeremy-jung1 Jan 16, 2025
868bfb3
Add test
jeremy-jung1 Jan 17, 2025
0d5e884
translations
jeremy-jung1 Jan 17, 2025
76664e1
Change text
jeremy-jung1 Jan 17, 2025
a2133ec
Update index.test.js
jeremy-jung1 Jan 17, 2025
9aecbd6
Add condition
jeremy-jung1 Jan 17, 2025
5e2b100
linting
jeremy-jung1 Jan 17, 2025
751e58c
Update spacing
jeremy-jung1 Jan 17, 2025
0c08ccf
Remove changelog for later and spacing
jeremy-jung1 Jan 21, 2025
37e78d1
Account for spacing above and below stack
jeremy-jung1 Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/template-retail-react-app/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## v6.0.0 (TBD)
(Passwordless/Social PRs that will be unified when merging to develop)
- Add a "Back" button for Standard Login https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2208

## v5.1.0-dev (TBD)

- [BUG] Fixed "getCheckboxProps is not a function" when rendering checkout page in generated app.[#2140](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2140)
Expand Down
1 change: 1 addition & 0 deletions packages/template-retail-react-app/app/components/passwordless-login/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ const PasswordlessLogin = ({
<StandardLogin
form={form}
handleForgotPasswordClick={handleForgotPasswordClick}
setShowPasswordView={setShowPasswordView}
hideEmail={true}
/>
)}
Expand Down
12 changes: 11 additions & 1 deletion packages/template-retail-react-app/app/components/standard-login/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const StandardLogin = ({
handleForgotPasswordClick,
hideEmail = false,
isSocialEnabled = false,
setShowPasswordView,
idps = []
}) => {
return (
Expand All @@ -28,7 +29,7 @@ const StandardLogin = ({
handleForgotPasswordClick={handleForgotPasswordClick}
/>
</Stack>
<Stack spacing={6}>
<Stack spacing={2}>
Copy link
Collaborator

@hajinsuha1 hajinsuha1 Jan 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this might affect the spacing for when social is enabled and passwordless is disabled and makes the Or Login With text + buttons closer than the figma design

spacing={2}:
Screenshot 2025-01-17 at 3 02 47 PM

I also actually think there's a bug in the spacing where spacing={6} makes the buttons too far:
Screenshot 2025-01-17 at 3 08 08 PM

Would you be able sneak in a spacing fix to ensure the buttons have a spacing of 4 but the "or Login With" keeps a spacing of 6

<Button
type="submit"
onClick={() => {
Expand All @@ -50,6 +51,14 @@ const StandardLogin = ({
<SocialLogin form={form} idps={idps} />
</>
)}
<Button
onClick={() => setShowPasswordView(false)}
borderColor="gray.500"
color="blue.600"
variant="outline"
>
<FormattedMessage defaultMessage="Back to Sign In Options" id="login_form.button.back" />
Copy link
Collaborator

@hajinsuha1 hajinsuha1 Jan 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry testing this again and I realized that this StandardLogin component is rendered differently for each of the 4 passwordless/social combination.

In the case where passwordless is disabled, the password field is shown so there's no need to display the back button.
Screenshot 2025-01-17 at 3 02 47 PM

I think we can simply make this button display when hideEmail is true

</Button>
</Stack>
</Stack>
)
Expand All @@ -60,6 +69,7 @@ StandardLogin.propTypes = {
handleForgotPasswordClick: PropTypes.func,
hideEmail: PropTypes.bool,
isSocialEnabled: PropTypes.bool,
setShowPasswordView: PropTypes.func,
idps: PropTypes.arrayOf(PropTypes.string)
}

Expand Down
1 change: 1 addition & 0 deletions packages/template-retail-react-app/app/components/standard-login/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ describe('StandardLogin component', () => {
expect(screen.getByLabelText('Email')).toBeInTheDocument()
expect(screen.queryByLabelText('Password')).toBeInTheDocument()
expect(screen.getByRole('button', {name: 'Sign In'})).toBeInTheDocument()
expect(screen.getByRole('button', {name: 'Back to Sign In Options'})).toBeInTheDocument()
})

test('renders properly when hideEmail is true', async () => {
Expand Down
6 changes: 6 additions & 0 deletions packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2233,6 +2233,12 @@
"value": "Apple"
}
],
"login_form.button.back": [
{
"type": 0,
"value": "Back to Sign In Options"
}
],
"login_form.button.continue_securely": [
{
"type": 0,
Expand Down
6 changes: 6 additions & 0 deletions packages/template-retail-react-app/app/static/translations/compiled/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2233,6 +2233,12 @@
"value": "Apple"
}
],
"login_form.button.back": [
{
"type": 0,
"value": "Back to Sign In Options"
}
],
"login_form.button.continue_securely": [
{
"type": 0,
Expand Down
14 changes: 14 additions & 0 deletions packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4761,6 +4761,20 @@
"value": "]"
}
],
"login_form.button.back": [
{
"type": 0,
"value": "["
},
{
"type": 0,
"value": "Ɓȧȧƈķ ŧǿǿ Şīɠƞ Īƞ Ǿƥŧīǿǿƞş"
},
{
"type": 0,
"value": "]"
}
],
"login_form.button.continue_securely": [
{
"type": 0,
Expand Down
3 changes: 3 additions & 0 deletions packages/template-retail-react-app/translations/en-GB.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -954,6 +954,9 @@
"login_form.button.apple": {
"defaultMessage": "Apple"
},
"login_form.button.back": {
"defaultMessage": "Back to Sign In Options"
},
"login_form.button.continue_securely": {
"defaultMessage": "Continue Securely"
},
Expand Down
3 changes: 3 additions & 0 deletions packages/template-retail-react-app/translations/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -954,6 +954,9 @@
"login_form.button.apple": {
"defaultMessage": "Apple"
},
"login_form.button.back": {
"defaultMessage": "Back to Sign In Options"
},
"login_form.button.continue_securely": {
"defaultMessage": "Continue Securely"
},
Expand Down
Loading