Log in - Sign with apple is not disable in offline mode

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to login page
2. Go to offline

Expected Result:

Sign with apple should be disable same as continue button in offline mode

Actual Result:

Sign with apple is not disable in offline mode

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.43-2
Reproducible in staging?: y
Reproducible in production?: new feature
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-07-20.at.11.42.15.AM.mov

Expensify/Expensify Issue URL:
Issue reported by: @gadhiyamanan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689833575829169

View all open jobs on GitHub

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @Gonals (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[0xmiros]

As this is new feature, I don't think this is deploy blocker.
We should also discuss apple icon button behavior when offline.
cc: @shawnborton @marcochavezf

[shawnborton]

Curious for @marcochavezf 's thoughts there

[samh-nl]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The Sign in with Apple button is not disabled in offline mode.

What is the root cause of that problem?

No offline-logic is in place to adjust the behavior of this button.

What changes do you think we should make in order to solve the problem?

The button should be disabled, i.e. grayed out and display a not-allowed cursor if the user is offline.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[getusha]

Proposal

Please re-state the problem that we are trying to solve in this issue.

signin with apple is not disabled when offline

What is the root cause of that problem?

the implementation is done for each platform independently. we currently are not handling the offline status to disable the signin method.

What changes do you think we should make in order to solve the problem?

We need to introduce a new prop called isDisabled to the IconButton component. This prop will disable the button and apply a grey style when the user is offline. We will also implement the same prop for the web part.

App/src/components/SignInButtons/AppleSignIn/index.website.js

Lines 97 to 106 in be0b186

	<div
	id="appleid-signin"
	data-mode="logo-only"
	data-type="sign in"
	data-color="white"
	data-border="false"
	data-border-radius="50"
	data-size="40"
	style={{cursor: 'pointer'}}
	/>

However, disabling the div element is not straightforward. To achieve this, we will use the isDisabled prop to apply pointerEvents: 'none' styling. As a result, the button will become non-clickable when offline, based on the value of the prop.

or we can conditionally apply styles.pointerEventsNone if devices is offline. we also will add additional styling to grey the clickable.

<View style={[getSignInWithStyles(), props.network.isOffline ? styles.pointerEventsNone : {}]}>

[marcochavezf]

Apple sign-in PR reverted. About the offline functionality, we can't modify the styles for the Google sign-in button, so modifying only the style Apple sign-in button will be an odd visual solution. Another solution would be to remove both buttons, which would also be odd imo.