What could be a useful UI for /hoodie/account?

[gr2m]

This is a starter issue.

🤔 What you will need to know

Hoodie is a generic backend for your application, but also provides a few UIs (html pages) out of the box. There is /hoodie/account, /hoodie/store and /hoodie/admin at this point.

🎯 The goal

What could we show at /hoodie/account? Every Hoodie Server will have this page. Maybe something like the Account Page of our Tracker Example app?

The current placeholder page is at https://github.com/hoodiehq/hoodie-account/blob/master/public/index.html. But we can also implement more sophisticated UIs with a single page application. Everything is possible right now :)

This is not really a bug that needs to be fixed or a feature that needs to be implement, but an invite for a discussion. Please ask all your questions here, we are looking forward for your thoughts! Ping us in the Hoodie Chat or on Twitter if you have any questions :)

[mbad0la]

@gr2m I would love to work on this. Although, I am a bit confused at the moment.
Where can I find all the specifics and functionalities related to /hoodie/account?

[gr2m]

Hey @mbad0la.

I’d suggest setup the Hoodie Account repository first:

git clone https://github.com/hoodiehq/hoodie-account.git
cd hoodie-account
npm install

Then start the demo server with

npm start

This will serve all assets from this folder: https://github.com/hoodiehq/hoodie-account/blob/master/public/index.html

In terms of scope, check out Hoodie Client’s Account API:
https://github.com/hoodiehq/hoodie-account-client

The idea is pretty much to create a generic visual interface for these APIs. For example, on page load check if the user is signed in, if yes, show the username an profile data. If not, show a login form and a password reset form. When signed in, let the user change their username & password, and edit their profile.

The cool thing about Hoodie being a complete server is that we can inject this UI into every app that is using Hoodie as its backend, so people could build applications that wouldn’t even need to provide a login, they could simply redirect to /hoodie/account.

Another idea (out of scope for this issue, but maybe a follow up) is to create reusable web components that applications could directly use in their apps. For example we could provide a widget like remotestorage.io does, see this app for an example: https://litewrite.net/#!(19CD72A9-FEFC-4EF9-B931-68EA9171E3BF)-litewrite (the widget on the top right)

[mbad0la]

@gr2m thanks for this extensive help! I'll setup the project locally and hack around a bit. Will keep you posted on the progress.
By the way, any frontend framework you'd recommend here?
React came to my mind when I read re-usable components. What do you think?

[gr2m]

I’d suggest do use good old HTML, JavaScript and CSS only. But it’s okay to rely on newer browser versions only for now.

I think it makes sense to keep things simple for now, create a base of discussion, and then see where we are heading? Another reason is that we try to keep the Hoodie code as contributor-friendly as possible, and HTML/CSS/JS is a great common denominator.

You can have a look at our example Hoodie APP: https://github.com/hoodiehq/hoodie-app-tracker. The public assets are all in the public/ folder. It intentionally is not using any framework, but I think for simple things it’s good enough, and everybody can understand how it works without the necessity to learn a JS framework first.

Does that make sense?

[mbad0la]

Yes it does... I get your point. I guess things will be more clearer once we have some code to review.

[mbad0la]

Hey @gr2m what do you think about this load screen component?

Might help in improving UX, if we need some time to compute something.

[gr2m]

this looks nice :)

We have a group of people that work together on #8, #19, #20, #21 and this issue, they are all related. Want to join the Hoodie Chat and ping me there @gregor? We created a channel where we discuss the different Hoodie UIs and the fallback UI if the app has no public/ folder

[mbad0la]

Sure @gr2m :)

[gr2m]

that’s done via hoodiehq-archive/hoodie-account#75 :)