Our new Login Page

What I would like to get out of using patternfly:

  1. avoid bikeshedding conversations about how $x should look like since there are always people who prefer $a and those who prefer $b
  2. don’t reinvent the designs for things that fit Foreman project such as list views, cards etc
  3. reuse components that were implemented in patternfly-react so we don’t have to build them from scratch

My hope is that people working on patternfly did the research and have good reasons for some decisions. When there’s something I disagree with, I open issue for patternfly like here or here. If they reject and I still disagree, I think it’s OK to start discussion in Foreman community and if it seems most would prefer the change, we can always adjust the pattern. Like we did with vertical nav, there’s now no delay for menu.

Regarding the login page specifically, I like the new layout. We just need to make it look like Foreman. For that I think we need to change the background (already in progress I think). I also don’t like the dynamic height of the form if there’s validation error or capslock warning, there may be good reasons for that but I’d start with opening issue against patternfly to see the reasoning behind it.

2 Likes

It’s really amazing to see how many from the community truly care about the product,
my thoughts are to keep the original background for this PR
because it isn’t really the issue here,
and later maybe with the help of designers replace it.

As for the margin in the form, for errors not to jump and push everything down,
I had a long discussion about it with Patternfly designers when I built this component for Patternfly,
but now, backed by you guys,
the design can change…
So I am going to open an issue soon to PF, attaching a link into this discussion and try to fix it there,
so the errors won’t be jumpy.

3 Likes

small update.

here’s the original discussion about the space
around inline form errors: https://github.com/patternfly/patternfly-design/issues/671
you can see the two versions, with and without the margins.

Here’s the issue I’ve opened to Patternfly: https://github.com/patternfly/patternfly-react/issues/996

Hey @Roxanne_Hoover can you find the original designer?

The designer who did the Foreman poster (and most likely has source files for the logo) is Jessica Cox. I’ve reached out to her to get said file. We can leverage this for the background.

I’d be inclined to stick with the patternfly recommendations and potentially ask them why they chose to do things this way. I do agree that it’s a little jarring but I also think that consistency with other projects that use patternfly is a good thing.

I agree with this sentiment. There were multiple reasons both for and against a static layout. The good part is that we can have discussions with PF about issues we’re seeing and try to influence the design. Overall I think PatternFly has had a positive influence on the product in terms of consistency.

1 Like

Good news everyone !
Our designer @terezanovotna is starting to work on our background
and after we’ll have few examples to decide from, we’ll make a vote :slight_smile:

3 Likes

Design1

Design2

Design3

Design4

Design5

Design6

  • Design 1
  • Design 2
  • Design 3
  • Design 4
  • Design 5
  • Design 6

0 voters

Thank you all for participating!
Looking forward to hearing more feedback:)

2 Likes

Nice. I think you might get more feedback if you open a new thread. Also @Gwmngilfen or @tbrisker could create a poll in here, so we can have poll and discussion at one place.

I’ve modified the poll and made it all public. Let me know if that’s not desired.

1 Like

I voted for Design 4 but I do miss the Foreman header (and helmet) above the login box. That’s why I was also thinking about Design 2. That is a bit too boring though. Design 3 does have all the elements I like, but I prefer the blue theme over de dark theme.

2 Likes

Awesome work @terezanovotna !!!
I liked the animation in the last one…
I think if it was in the colors of design4 image it would be a winner :wink:

1 Like

Lately I’ve started to use this background in my PR

2 Likes

Thanks for creating better poll!

I think this is my favorite so far :slight_smile:

1 Like

For those who’re working on designs, please also don’t forget there can be custom text specified in settings that should be displayed somewhere on the page :slight_smile: E.g. below the login box.

2 Likes

The custom text such as version and caption
Is added above the form and below the logo, see the picture that I’d uploaded above

Is that the welcome or version info? Or something I’m missing entirely. You know, the message can be pretty long, e.g. “This is a private system operated by XY, every user activity is logged and monitored. By logging in you agree with terms of use”. That’s why I thought it would be better below the form.

1 Like

Wow… okay… I will try to insert such a long line
Thanks for mentioning that !

Looks amazing :slight_smile:

Is there an issue for this work?

https://projects.theforeman.org/issues/24990

1 Like