Let's design app's pages.
Included pictures below are basically ugly mockups with some missing component states where some parts are just copy & pasted from Bulma's docs. However it should be enough to guide us during implementation.
- It will be used only as a crossroad. There could be simple button "Go to Time Tracker" as a CTA / shortcut.
- No item in the main menu is active.
- If the user isn't logged in, show buttons "Sign up" and "Log in".
- If the user is logged in, show buttons "[user_name]" and "Log out". The former navigates to the page
Settings and the latter one redirects to the identity provider.
Bulma logo will be replaced.
seed-rs.org should be a link.
- Themes / colors may be changed later.
Login / Registration
It will be also handled by our identity provider.
Note: I didn't find a way how to delete user's data automatically when the user is deleted through
Auth0 user dashboard (by a trigger, rule, webhook, ..). You'll probably need to delete it manually. (Am I wrong? Write me!)
Clients & Projects
- User can add, remove and rename his clients and projects.
- All removing operations should be confirmed by a simple modal dialog box. We'll use ugly browser native one for the sake of simplicity.
- Client and project names are in-place editable.
- A trash icon would be probably more appropriate than a standard Bulma's delete button with the "X" icon.
- Note: SPA frameworks usually don't like font libraries very much because those libraries often changes DOM elements by themselves. We'll leverage custom elements to eliminate this problem while we will be integrating Font Awesome.
- User can create new Time Entries through "Start/Stop" button.
- When the Time Entry is active, its background is highlighted and its "end" time is updated each second to match the current time.
- User can add and modify Time Blocks.
- All statistics are automatically recomputed and read-only.
- It'll communicate only with our identity provider. (An exception could be deleting an account.)
- We don't need it at all if our IDP offers its own user settings.
Architecture and UI are designed, the next step is the frontend