Dashboard Revamp

[neruthes]

Components:

• Dashboard / Initialization
  • ...
• Dashboard / Main
  • Add Persona
    • [PersonaCreation] Modal
      • Procedure:
        • Enter name
        • Get keypair
        • Connect first profile
  • Delete Persona
    • Popup Confirmation
  • Add Profile
    • [ProfileBinding] Modal
      • Procedure:
        • Enter profile URI
        • Get guides to paste public key into profile biography
  • Delete Profile
    • Popup Confirmation
  • Export Persona
  • Import Persona
  • Export Keystore
  • Import Keystore
• Dashboard / Synchronization
  • Add Device
  • Rename Current Device
  • Quit Current Misakanet

[SunriseFox]

As we are going to support multiple identities and multiple providers, some changes we may need to apply to our dashboard:

• Possibly rename current menu item Setup your account to Initialize your Maskbook, in which we could provide an all-in-one setup for all providers (facebook, twitter, etc.).
• Add Identity Management menu item, allowing user to add more keystores, select default keystore for each provider, disable/enable each keystore (e.g. if enabled, we may try using this keystore to decrypt otherwise not), retrieve public keys (create/recreate proof post, [High Priority]Several on boarding problems #79 ) or completely remove them.

As a user may use more than one identity and thus own multiple keystores, cross-device transfer by a QR code which contains full keystore information seems not quite practical. So maybe a (distributed) bridge server is still needed. #77 we create a secure channel, and sync all / user-selected keystore by this channel with trusted pair.

Before that we also have to decide how the user may identify their identities, or rather, keystores. A user with multiple keys may get confused when managing them. We may assign a randomly generated English word to each keystore, or let user 'tag' it manually. Any other better solutions?

Summary in this issue

• New initialization page for more providers
• New setting page for identity management
• New approach for tagging identities

[Tedko]

retrieve public keys, Mentioned in #79

[neruthes]

Preview.

[SunriseFox]

In the new dashboard, where should we put the privacy policy, developer options, etc. ?

[neruthes]

In the new dashboard, where should we put the privacy policy, developer options, etc. ?

We may add these links under the last button.

innerHTML	href
Maskbook.com	https://maskbook.com/
Privacy Policy	https://maskbook.com/privacy-policy/
Source Code	https://github.com/DimensionDev/Maskbook
Software License	https://www.gnu.org/licenses/agpl-3.0.html

font-size: 16px; color: #999999; margin-top: 40px;

That will look like:

They will only appear in Dashboard section. When Synchronization is added, the tab bar will be added.

[neruthes]

Seems that this image was neglected. Close buttons should be added to the images soon.

We will switch to Figma for Maskbook in future to allow non-Mac reading.

[neruthes]

Update

We use a modal header to keep a consistent behavior across different screens. When on mobile where the can be no margin out of the modal, border-radius should be 0px; otherwise, 6px.

• Modal max-width 600px

Header

• Header 44px height
• box-shadow: rgba(0,0,0,0.15) 0 1px 0
• Title font: 17px medium '-apple-system'
• Close button inner size 24px
• Close button outer size 44px

Body

• padding: 40px 0 50px
• Content max-width: 500px

[Jack-Works]

:awsl: it is toooo anti-material design and remind me of antd. I strongly recommend not to do this plz.

[SunriseFox]

Followed by #369.