Add a new screen where a user can restore the account using a password or SIWE.
The restore screen
The prompt screen after this diff - no changes
Depends on D14066
Details
Details
Checked that this screen looks correctly and clicking the actions navigates to appropriate screens.
Diff Detail
Diff Detail
- Repository
- rCOMM Comm
- Branch
- restore
- Lint
No Lint Coverage - Unit
No Test Coverage
Event Timeline
Comment Actions
- I'm not sure the "OR" thing is necessary anymore now that we only have two buttons instead of three
- Can we replace "Sign in" with "Sign in with password"?
| native/account/restore-prompt-screen.react.js | ||
|---|---|---|
| 35 ↗ | (On Diff #46130) | This is a kind of a hack. We're using PromptButton here and on the logged-out modal. In the modal, we're displaying the buttons inside an absolutely-positioned container that contains more containers with flex-direction row. In order for the buttons to share the space evenly, we specify flex: 1 for them. This doesn't play well with the buttons here, which are displayed in a container that shrinks - the result is that the buttons collapse and take as little space as possible. There are a couple of possible solutions:
I'm not sure whether the solution from this diff is the best. Maybe there are some better alternatives. |
| native/account/restore-prompt-screen.react.js | ||
|---|---|---|
| 55–58 ↗ | (On Diff #46130) | This isn't used |
Comment Actions
Some quick UI requests:
- Would it be possible to have a graphic on this screen? I like this free SVG, but we could also pick something from @expo/vector-icons:
- As compared with similar registration screens, the screenshot here seems to have a lot more margin between the bottom button and the home pill. Can you try to make it look more like the screens in RegistrationNavigator?
- Regarding the copy, I'd like to make some updates. In the screenshot it feels like a lot of text bunched together, so I tried to split it up into multiple paragraphs. Would be curious to see if this looks good in an updated screenshot:
If you've lost access to your primary device, you can try recovering your Comm account.
To proceed, select the same login method that you used during registration.
Note that after completing the recovery flow, you will logged out of all of your other devices.
| native/account/restore-prompt-screen.react.js | ||
|---|---|---|
| 35 ↗ | (On Diff #46130) | I wonder if it would be better to implement a separate set of buttons based on PrimaryButton for this flow (that's what the RegistrationNavigator screens usually use) Potentially we could have some shared inner component that is used by both the LoggedOutModal buttons and these buttons, but they would be wrapped in slightly different ways that work in each use case |
Comment Actions
- Would it be possible to have a graphic on this screen? I like this free SVG, but we could also pick something from @expo/vector-icons:
I spoke to Rahul on our team, and he's interested in helping here a bit. He's going to see if he can find or design a better graphic than the ones that I found.
EDIT: tracked here
Comment Actions
A new revision with a couple of changes:
- Added a placeholder icon. Will update the diff after https://linear.app/comm/issue/OPS-305/mockup-icon-for-restore-account-screen finalizes the design.
- Made sure the margin isn't that big. This issue was caused by the SafeAreaView being rendered twice.
- Updated the copy with the text proposed by @ashoat . The first two paragraphs are almost exactly the same - the only difference is the usage of ’ sign. The third paragraph is a little different - I'm not sure but I think that Note that after completing the recovery flow, you will logged out of all of your other devices. was a bit incorrect.
- Used the updated PromptButton that follows a design from the registration screen, e.g. in terms of the font.
Comment Actions
Added a placeholder icon. Will update the diff after https://linear.app/comm/issue/OPS-305/mockup-icon-for-restore-account-screen finalizes the design.
I think we have something finalized! But it's worth testing it on light / dark mode to make sure it looks good (assuming we need to support both light and dark mode here... not sure if that's true)
Comment Actions
But I don't know how to display this flow in this mode. I modified the colorsSelector so that I can see how it looks like.
The dark mode
I also tested it in the light mode
But I don't know how to display this flow in this mode. I modified the colorsSelector so that I can see how it looks like.
| native/vectors/restore-icon.react.js | ||
|---|---|---|
| 10 ↗ | (On Diff #46261) | Not sure if it makes sense to keep these lines 80 chars long. We don't do that for other SVGs. |
Comment Actions
But I don't know how to display this flow in this mode. I modified the colorsSelector so that I can see how it looks like.
Looks like we force dark mode for the registration screen, which means we don't have to worry about it here :)
The dark mode
Can we make the graphic appear with a bit more contrast (more white)?
| native/vectors/restore-icon.react.js | ||
|---|---|---|
| 10 ↗ | (On Diff #46261) | Yeah, I think it's okay to have these long lines for SVGs |
Comment Actions
We can also consider making it a little less white
Updated the color to match the registration flow
We can also consider making it a little less white
| native/vectors/restore-icon.react.js | ||
|---|---|---|
| 12 ↗ | (On Diff #46299) | I accidentally left this |