Initial implementation #1
Conversation
We don't want the user to be able to navigate from step to step by clicking on the sidebar links. But we want to keep the "active" feature from react-router links. So we just disable pointer events on it.
It will be enabled again when we have all required tokens
| [twitter]: https://twitter.com/cozycloud | ||
| [nvm]: https://github.com/creationix/nvm | ||
| [ndenv]: https://github.com/riywo/ndenv | ||
| [jest]: https://facebook.github.io/jest/ |
There was a problem hiding this comment.
Nit: I would advise to remove completely this file, it is always an out of date copy paste of other files.
| @@ -33,6 +33,7 @@ | |||
| data-cozy-app-slug="{{.AppSlug}}" | |||
| data-cozy-app-name-prefix="{{.AppNamePrefix}}" | |||
| data-cozy-app-editor="{{.AppEditor}}" | |||
| data-cozy-subdomain-type="{{.SubDomain}}" | |||
| data-cozy-icon-path="{{.IconPath}}" | |||
There was a problem hiding this comment.
Nit: We have a new template attribute available from the stack, containing all the data, we might as well use it. See cozy/cozy-stack#2270. I hope this is deployed ;)
| const { className, ...rest } = props | ||
| return <div className={cx('Wrapper', className)} {...rest} /> | ||
| } | ||
|
|
There was a problem hiding this comment.
Should this thing be moved to cozy-ui ? Wrapper is too generic a name for me here.
There was a problem hiding this comment.
Actually it's like the existing NarrowContent, but a little less narrow, since it's max 768px wide, where NarrowContent is max 512px wide. Maybe a variant of NarrowContent?
src/components/SecurityPage.jsx
Outdated
| <ListItem> | ||
| <Bold tag="strong">Privilégiez un mot de passe fort :</Bold> | ||
| Un mot de passe long avec des chiffres et des caractères | ||
| spéciaux sera impossible à casser. |
src/components/InstallationPage.jsx
Outdated
| const DumbInstallationPage = props => { | ||
| const { t, client } = props | ||
|
|
||
| const cozyURL = new URL(client.getStackClient().uri) |
There was a problem hiding this comment.
Nit: We should a helper for this directly on the client. client.getURL() ?
There was a problem hiding this comment.
That would save a few keystrokes and make code easier to read, yes 👍
| html, | ||
| body { | ||
| height: 100%; | ||
| } |
There was a problem hiding this comment.
Should it be only on mobile ?
There was a problem hiding this comment.
It's mainly here for mobile purpose, but it doesn't affect desktop. Do you have any issue in mind?
| "descriptionStart": "Add", | ||
| "descriptionEnd": "to your browser to automatically fill and save your passwords while browsing", | ||
| "descriptionStart": "Add the", | ||
| "descriptionEnd": "to your browser. This installation is necessary to allow you to automatically fill in and save your passwords while browsing.", |
There was a problem hiding this comment.
Nit: AMHA, when we need to fill some part of a sentence, we should not have several parts in the translation files, but a single one, here "description" with a %{variable} in it.
There was a problem hiding this comment.
The problem here is that we want to insert a react component in the middle of the sentence.
This allows us to drop custom CSS
This is the initial implementation of cozy-passwords, as an onboarding app for the passwords extension.
When the user lands on the app, we introduce him this passwords thing:
If his browser doesn't support the extension, we tell him:
On next step, we ask him to improve his current password, with some advices:
If he accepts, he is redirected to cozy-settings. Then redirected back to cozy-passwords after updating his password (as implemented in cozy/cozy-settings#269). If he denies, we ask him to at least set a password hint:
Then we suggest him to install the browser extension:
And when the extension has been installed, we show a success page (the extension should add an attribute on the app's root node, which is not currently implemented):
Illustrations are chrome-based even if we are in Firefox. We will fix it soon to have Firefox illustrations in Firefox, and Chrome illustrations in Chrome.