Auth flow

[marcoow]

In order to manage network, first step is to log-in to Ucentral app where users will be able to manage their devices.

https://share.goabstract.com/c7f8eb13-f97c-43f7-9a9c-9cc7a2a0f3fe

https://share.goabstract.com/0f36291b-4463-49c0-a18d-96dc8ec66d5a

https://share.goabstract.com/801b353c-8e8f-48e9-a096-cb9c6924d6ba

Auth process is a multi-step form where users need to provide device ip address and password.
It has only a logo, header and section description text as well as inputs with labels and eventual error messages and a button to either proceed to next step or login once the multi-step process is finished.

✅ Given all data was correct and login process succeeded, two behaviours may occur.

• 🥇 Given user is setting up network for the first time, then
  Then they're redirected to a "NewSetup" wizard #6

• 👍 Given user has already existing network
  Then they're redirected to a "dashboard" #5

🛑 Given some data was incorrect
Then an input highlights and shows an error message under it.

Notes

'Forgot password' and 'Where is my IP Address' features have been removed, and won't be implemented.

Questions

• Does logo in header link to anywhere?
• How should the button look like in disabled state?
  
• How should the button look when in pending state (e.g. while the request is being processed)?
• How do we go back to IP address screen in case both credentials are wrong, not just password?

TODOS

• setup css libriaries
  tailwind - requires to be initialised with a configuration file, it can be generated with tailwind init app/tailwind/config.js --full command. We're passing 'full' flag because we want the whole default configuration provided.
  Tailwind setup guide: https://dev.to/jamesbyrne/using-tailwindcss-with-ember-41el
• Configure tailwind theme to match the designs.
• ember-css-modules
  We will be using ember-css-modules addon together with tailwind classes used in css rather than html.
  We'll be using all linting rules provided by:
  https://github.com/simplabs/ember-template-lint-plugin-css-modules
• create 'auth' route
  • Auth component
    If the field is empty, then we should put it in error state.
    When authentication request is rejected it should put inputs in error state and show a failure message.
• Layout
  • page Header component
    Should include a logo, configurable title and description.
  • Button component
    • Pending state
    • Disabled state
      ember-concurrency(?)
  • Input component
    • label
    • error state
    • error message
  • PasswordInput component
    • Visibility feature - need icon asset
• auth service (async login() just always returns true for now)
  login method returns a promise that returns a boolean when authentication succeeds or fails, but will return an error in case e.g. connection issue.

Dependencies

depends on #1

ember-concurrency
ember-concurrency-decorators
We'll be using all linting rules provided by:
https://github.com/simplabs/eslint-plugin-ember-concurrency

[marcoow]

How do we go back to IP address screen in case both credentials are wrong, not just password?

I think in the case of any error other than a 403 (or whatever mechanism the router API uses to indicate wrong credentials) we could go back to the IP entry?

[marcoow]

@Paarmita can you have a look at the open questions above and update the design if necessary?

[marcoow]

@BobrImperator I just realized I think we do want to use ember-simple-auth. After all we'll also want to have features like enforcing authentication for particular routes (e.g. the dashboard – #5) etc. which we'd simply have to re-implement when not using ember-simple-auth.

[BobrImperator]

@marcoow Yeah that's probably a good idea, then we'd only need to take care of an authenticator.