search

authsio / core

And idea that never worked but was fun while it lasted
https://authsio.com
GNU Affero General Public License v3.0
12 stars 6 forks source link

First draft for login form #10

Closed cedpoilly closed 2 years ago

cedpoilly commented 2 years ago

First draft for login form. This PR is a conversation starter only.

hkd987 commented 2 years ago

I think overall this is probably a good start, that should definitely give us a starting place.

Question...

How does this handle resizing, mobile etc..

cedpoilly commented 2 years ago

I think overall this is probably a good start, that should definitely give us a starting place.

Question...

How does this handle resizing, mobile etc..

For faster prototyping, I tired Bulma as a light CSS framework. In hindsight, not the best for handling responsiveness.

Questions: Do we write the CSS from scratch or with a CSS framework? Other recommendations?

hkd987 commented 2 years ago

I’m open here but maybe we should use something that has tree shaking built into the build like a tailwind but we could go fully custom if your feeling up to it.

I know we definitely do not want a heavy i frame

hkd987 commented 2 years ago

The other thought I just had is since this iframe will be placed on users websites we probably want to allow some data properties that allow minor customizations.

cedpoilly commented 2 years ago

I’m open here but maybe we should use something that has tree shaking built into the build like a tailwind but we could go fully custom if your feeling up to it.

I know we definitely do not want a heavy i frame

Working on that update

cedpoilly commented 2 years ago

The other thought I just had is since this iframe will be placed on users websites we probably want to allow some data properties that allow minor customizations.

Good point. Let's define the main customisation elements. From there we can define how to structure the customisation API.

cedpoilly commented 2 years ago

I’m open here but maybe we should use something that has tree shaking built into the build like a tailwind but we could go fully custom if your feeling up to it.

I know we definitely do not want a heavy i frame

Tailwind CSS works. I just noticed a slight issue with the peer-* validation helpers. When I mark an input field as required there is an eager evaluation. I plan to drop the peer-invalid pattern for showing the error message and use JavaScript to do so instead. @hkd987 let me know your thoughts. :)

image

hkd987 commented 2 years ago

Small nit pick, we need higher contrast on the "Login" button, other than that it looks great,

I assume the top Authsio - Login section can/will be customized with the end users name?

hkd987 commented 2 years ago

Do you have the mobile view as well to post here, just for record keeping.

cedpoilly commented 2 years ago

I assume the top Authsio - Login section can/will be customized with the end users name?

Yes, that's the plan. Is there any other information we want to add to the screen and make it customisable?

hkd987 commented 2 years ago

@cedpoilly You feel good enough that we can merge this? I think its a good baseline to go with.

cedpoilly commented 2 years ago

@hkd987 Should we make the code into an iFrame first? Or do we keep it as is? It is currently an HTML page.

hkd987 commented 2 years ago

I think we can do that as a follow up, I assume the build step will publish the iframe.

hkd987 commented 2 years ago

https://app.bountysource.com/issues/104978539-iframe-design-build-static-user-login-iframe

You can submit the url here and I can release the bug bounty on this to you.

Also, I think this https://github.com/authsio/core/issues/4 might be the next static design ticket that can be worked on.