Sign in - Offline message on password page is not friendly

[isagoico]

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

---

Expected Result:

Let's use the following message:
Looks like you're offline. Please check your connection and try again.

Actual Result:

API is offline is displayed which might be confusing for regular users.

Action Performed:

1. Launch the app
2. In Log in screen put email witch with has 2FA enabled
3. Proceed in password screen
4. Turn off internet connection and try to enter a password.

Workaround:

Unknown

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App
Mobile Web

Version Number: 1.0.56-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @Christinadobrzyn (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[Christinadobrzyn]

Don't see any other GH e.cash issues related to this sending to eng to get a second opinion!

[MelvinBot]

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

[Julesssss]

This is an easy one to pass over to external contributors, but first, we need to choose better messaging. Perhaps something like:

Please check your connection and try again.

@Expensify/design any thoughts?

[isagoico]

Issue reproducible today during KI retests

[Julesssss]

Hey @isagoico, would you mind reminding me what makes this issue be retested? I think it doesn't need to be because this isn't a regression but will be a new change. Please let me know if you disagree :)

[isagoico]

For our weekly KI we retest all open issues that were raised by our team on regression runs, that's why it was retested. I agree with you that we can exclude this one from the restests, let me know if there are any change of plans

[Julesssss]

Ah, that makes sense. Thanks :)

[MelvinBot]

Triggered auto assignment to @mallenexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[dklymenk]

Hello, I initially assumed this one is as simple as replacing a string in CONST.js, but since the app has support for multiple languages, the user facing errors should be translated as well.

I also noticed that there already is a similar string in the app that is used on the first login step form (email):

    session: {
        offlineMessage: 'Looks like you\'re not connected to internet. Can you check your connection and try again?',
    },

It is very similar to the one mentioned in the OP : "Looks like you're offline. Please check your connection and try again.".

In my opinion there is no reason these errors should be different. Like why would offline message on 1st step form be different from 2nd step form one?

Anyway, after that I wanted to replace every reference to CONST.ERROR.API_OFFLINE in the codebase with translate('', 'session.offlineMessage'). This would have worked, but that causes a require cycle since src/libs/API.js would import src/libs/translate.js that imports src/libs/Log.js that imports src/libs/API.js. Anyway, it's not a good time. So I propose the following:

I will replace this line with the following:

Onyx.merge(ONYXKEYS.ACCOUNT, {error: translate(error.message), loading: false});

I will then make sure that all the potential errors that might be caught there have translatable strings as their message:

1. https://github.com/Expensify/Expensify.cash/blob/main/src/libs/API.js#L222-L239 I will move all these to translations en.js, create new translation keys for them and add es translations too. Then replace the error strings in API.js file with translation keys.
2. For API is offline I can do similar thing - just replace the value for ERROR.API_OFFLINE in CONST.js with a translation key session.offlineMessage.

Overall, this solution not only replaces the text for the particular error message the issue is about, but also allows to translate it and all the other potentials errors one can get on that form, while avoiding any app breaking imports that cause require cycles.

[MelvinBot]

Triggered auto assignment to @roryabraham (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[mallenexpensify]

Posted. https://www.upwork.com/jobs/~017ce3cd40c288a83f
@roryabraham can you review @dklymenk 's proposal above?

[roryabraham]

@dklymenk Looks good to me 👍

Feel free to submit a PR as soon as you've been hired on Upwork

[mallenexpensify]

Hired @dklymenk in Upwork

[dklymenk]

Great. I will need a few more things from you:

1. What about the offline message? Do I use the one that is already in the app (used one the 1st step login form, where you enter the email)? Do I use 2 separate ones as suggested by the OP? Or do I use new message, but on both 1st and 2nd step forms?
2. I will need Spanish translations for the following strings:
   • "Incorrect login or password. Please try again."
   • "You have 2FA enabled on this account. Please sign in using your email or phone number."
   • "Invalid login or password. Please try again or reset your password."
   • " We were unable to change your password. This is likely due to an expired password reset link in an old password reset email. We have emailed you a new link so you can try again. Check your Inbox and your Spam folder; it should arrive in just a few minutes."
   • "You do not have access to this application. Please add your GitHub username for access."
   • "Your account has been locked after too many unsuccessful attempts. Please try again after 1 hour."
   • "Something went wrong. Please try again later."
   • and if the answer to my first question is to use the string from OP at least once, I will also need a translation for "Looks like you're offline. Please check your connection and try again."

[parasharrajat]

I will need Spanish translations for the following strings:

Google translate.

[roryabraham]

"Incorrect login or password. Please try again."

Usuario o clave incorrectos. Por favor inténtalo de nuevo

You have 2FA enabled on this account. Please sign in using your email or phone number.

Tienes autenticación de 2 factores activada en esta cuenta. Por favor conéctate usando su email o número de teléfono

Invalid login or password. Please try again or reset your password.

Usuario o clave incorrectos. Por favor inténtalo de nuevo o resetea tu clave

We were unable to change your password. This is likely due to an expired password reset link in an old password reset email. We have emailed you a new link so you can try again. Check your Inbox and your Spam folder; it should arrive in just a few minutes.

No pudimos cambiar tu clave. Probablemente porque el enlace para resetear la clave ha expirado. Te hemos enviado un nuevo enlace. Chequea tu bandeja de entrada y tu carpeta de Spam

You do not have access to this application. Please add your GitHub username for access.

No tienes acceso a esta aplicación. Por favor agrega tu usuario de GitHub para acceder

Your account has been locked after too many unsuccessful attempts. Please try again after 1 hour.

Tu cuenta ha sido bloqueada tras varios intentos fallidos. Por favor inténtalo otra vez dentro de 1 hora

Something went wrong. Please try again later.

Ha ocurrido un error. Por favor inténtalo mas tarde

Looks like you're offline. Please check your connection and try again.

Parece que estás desconectado. Por favor chequea tu conexión e inténtalo otra vez

[dklymenk]

Hello, I submitted a PR #3769 for this issue.

FYI since I haven't gotten a response my question of whether or not replace the original offline message in code with new one or to use two different ones, I have replaced the original message with a new one.

[roryabraham]

Thanks @dklymenk, that seems like a good idea to me 👍🏼

[mallenexpensify]

@roryabraham to confirm... seems like a good idea to me 👍🏼 means I should hire @dklymenk in Upwork?

[roryabraham]

Hmmm @mallenexpensify I thought he was already hired? #3195 (comment)

[mallenexpensify]

D'oh, my bad. I think I forgot to assign the issue earlier so didn't see @dklymenk when I glanced earlier. Assigned now

[sketchydroide]

I've look into the code in the PR, it looks good, @dklymenk raised a concern that I'll investigate into, but I don't think it should affect this GH and PR, it will most likely be resolved internaly by us.

[MelvinBot]

Triggered auto assignment to @trjExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[mallenexpensify]

@trjExpensify added you via External label for buddy check next week while I'm OOO, thanks

[roryabraham]

@mallenexpensify This has been done for a while now. Can we confirm that @dklymenk has been paid on Upwork then close this out?

[mallenexpensify]

Paid in Upwork, it was weird cuz it showed @dklymenk twice for being hired, but neither showed being paid yet. Sorry for the delay