New registration page

[Flaburgan]

Following the discussions about the import feature, here is a new registration pages, revamped, responsive, and stating to the users that they will be able to import once registered.

Do you like it better with the ball?

This PR introduces the basis of a very simple CSS framework. I feel like we don't need bootstrap anymore, it looks old and was mainly used for its grid which is obsolete now with flexboxes.

[tclaus]

$: pronto run --unstaged -c upstream/develop

One of my favorites..

[SuperTux88]

First: I like the screenshots, and I also like it with the ball (since there is space).

But I don't like the color. We don't really use this color anywhere else (except for this one place which you see once and never again), and the orange looks really strange and also looks a bit like a warning (first I thought that all fields are orange because they are empty). I would use the primary color (of the existing themes, which on the default theme is blue, on the colored themes it's the corresponding color). That way it doesn't look as warnings anymore.

The code comments aren't a full review yet, it's only what I noticed when having a quick look on it. I think if you just want to have a new registration page (which I don't have anything against it), it should work with the existing styles/themes. But the code looks more like you started to create a completely new style/theme/frontend, which I think shouldn't be done as a drive-by with a new registration page. There was a plan to create a new frontend, but I think this needs more discussion first, for example here: https://discourse.diasporafoundation.org/t/choosing-new-frontend-framework/1070 But I think that's a completely different topic/discussion.

[Flaburgan]

But I don't like the color. We don't really use this color anywhere else (except for this one place which you see once and never again), and the orange looks really strange and also looks a bit like a warning (first I thought that all fields are orange because they are empty). I would use the primary color (of the existing themes, which on the default theme is blue, on the colored themes it's the corresponding color). That way it doesn't look as warnings anymore.

Yeah totally agree on this, I picked that color a bit randomly, we can stay with the primary blue at the moment, that is fine.

I think if you just want to have a new registration page (which I don't have anything against it), it should work with the existing styles/themes. But the code looks more like you started to create a completely new style/theme/frontend, which I think shouldn't be done as a drive-by with a new registration page. There was a plan to create a new frontend, but I think this needs more discussion first, for example here: https://discourse.diasporafoundation.org/t/choosing-new-frontend-framework/1070 But I think that's a completely different topic/discussion.

Indeed, my idea here is to introduce a new design with an homemade minimalist CSS framework. Bootstrap is heavy, old, outdated and not needed anymore (we have flexboxes now, no need for a grid). Please note that this isn't about a new JS framework though, so IMO it is unrelated to the discourse discussion you linked.

I went with this idea of slowly introducing that new framework page per page instead of trying to rewrite everything, but maybe now (and here?) isn't the time to do that?

[goobertron]

Thanks for doing this. I'm happy with the design, and it's good that it's responsive. I also question the orange, which I think is only used elsewhere for the 'getting started' banner. And if we're going to change the UI, I think it makes sense to do it in a single release for the whole UI, so I'd prefer not to introduce new typefaces just for this page. It should blend with the rest of the UI.

I only have the screen-shots to refer to, not being able to test this. Do the vertical lines to the left of the input fields disappear when valid data are entered into the fields? If not, what are they for? Their presences suggests some function, so they could be confusing if they're mere decoration.

Let me know when the text has been moved into a locale file, and I'll edit it/polish the English then.

[Flaburgan]

Okay so no more orange, and no new font:

[Flaburgan]

How do you want to proceed with this idea of a custom minimalist CSS framework then? Can I start it in that PR?

[SuperTux88]

Do the vertical lines to the left of the input fields disappear when valid data are entered into the fields? If not, what are they for? Their presences suggests some function, so they could be confusing if they're mere decoration.

I thought the same first, because the orange looked like a warning/error because it's not valid yet. But they are purely decoration, which I don't mind, as long as it's not in a warning-color (well, if a podmin creates a orange theme they might as well be orange if the whole page is orange, but not if it's the only color on the page).

Okay so no more orange, and no new font

👍

How do you want to proceed with this idea of a custom minimalist CSS framework then? Can I start it in that PR?

We have bootstrap already anyway, so there is no harm of using it for all pages. As said, rewriting the complete frontend is a bigger task, and probably should have a bit more discussions than just as a drive-by of a new registration page.

Also as goob said "And if we're going to change the UI, I think it makes sense to do it in a single release for the whole UI, so I'd prefer not to introduce new typefaces just for this page. It should blend with the rest of the UI." it should at least be somewhat consistent, so redoing the UI is probably more something that we should start working on for 0.9. It doesn't need to be completely done for ALL the pages, and we can do it page by page on the develop branch for 0.9 once we start working on the new UI. But at least most pages should then be done before the release, so not releasing a half done new UI, and for 0.8 I think we should focus on the migration and then release and not start another big topic.

Also even if you only talk about the styles, it's probably still affected by how we are doing the new frontend, if a new frontend is done using a separate project and then only using the API, it's probably also changing how it's built. And I for example also would like to use CSS-variables instead of SCSS so color themes can be done without pre-compiling the whole styles x times.

So all that needs a bit more thinking and planning and not just start doing something as drive-by.

[goobertron]

How do you want to proceed with this idea of a custom minimalist CSS framework then?

I think a Discourse discussion would be the best place to start.

[Flaburgan]

We have bootstrap already anyway, so there is no harm of using it for all pages. As said, rewriting the complete frontend is a bigger task, and probably should have a bit more discussions than just as a drive-by of a new registration page.

Hm okay I will wait then. So I will also revert the button and the form fields style. Can I still use flexboxes instead of the bootstrap grid please? This is so much easier.

[SuperTux88]

Can I still use flexboxes instead of the bootstrap grid please? This is so much easier.

Sure, why not 👍

[Flaburgan]

New code using Bootstrap for fields and buttons:

I kept the larger font, it really was too small otherwise, and this is a complain I'm hearing a lot about diaspora* already (stuck in 13px while minimum screens are 1920px now).

[Flaburgan]

Okay, I kept the bare minimum CSS to have a design OK, new translations are added and tests are green (without having to touch them \o/). So this looks ready to review.

[goobertron]

With apologies for taking a long time, here are my suggestions for rewording the text.

[Flaburgan]

Here is the last rendering with goob's changes:

[Flaburgan]

I personally feel like the labels are too verbose, should I change them even if that's going to break existing translations? Or maybe that's not going to break it as the key wouldn't change...

[goobertron]

I personally feel like the labels are too verbose, should I change them even if that's going to break existing translations? Or maybe that's not going to break it as the key wouldn't change...

I would be inclined to change them to:

Username
Email address
Password (or Create password)
Confirm password

If indeed we even need these labels, as more or less the same text is in the boxes as place-holders. They're not there in the existing design and only appear as tool-tips. (The notes about 'only letters, numerals, _ and -' and 'six characters minimum' can be moved to the notes underneath the text field.)

As to breaking translations, it appears from your screenshots earlier in this discussion that the French locale at least doesn't follow the verbose English text.

Does that help?

[tclaus]

Looks good -
Do we need today still a "password confirmation" field?

Passwords can be changed easily if forgot or wrong entered. (as long you did not lie with your mail address). It may clean up the UI even more.

What is here still missing? I like it.

[Flaburgan]

Here is how it looks now.

[goobertron]

Looks good. Just one thing – was it intentional to remove the note about 'six characters minimum' from the Password field? I think that would work best as a note in italics under the field. What do you think?

[Flaburgan]

Yeah removed it as it felt useless to me, if someone is still doing this, they will have an error explaining it while submitting the form.

[goobertron]

if someone is still doing this, they will have an error explaining it while submitting the form.

Oh, in that case, it's not needed. Thanks for explaining it.

[Flaburgan]

This is closing #8009 btw.

[SuperTux88]

You can add fixes #8009 on a separate line in the commit message and it will auto-close it when it's merged

[Flaburgan]

This is rebased now.

[Flaburgan]

I would like this to be merged because I think it really improves the registration process, explaining what is a diaspora* id etc.
If we're not sure about the migration, maybe I could strip the panel talking about it, so we can merge this MR without the migration part, and add it in a separate PR? @SuperTux88

[Flaburgan]

I removed the migration indication and rebased, this could be integrated to the next release.

[Flaburgan]

I fixed the tests. minlength is not fully supported for input type="password" I had to put back the pattern attribute as it was done before. I also added a link to the tutorials.

Here is how it looks now:

[SuperTux88]

The page itself looks good, but I'm still not really happy with the CSS changes.

If you want to create a new CSS framework that can also be used by other pages, then the generic variables and selectors (like body and h1) shouldn't be defined in a file called registration.scss.

Then the new CSS framework should be built in a way that it only affects new pages, and doesn't change font sizes and other stuff elsewhere.

And it should still work with color themes, so best use existing color variables, or if new variables are required, at least define them in a way that they can be overwritten by themes.

I'm still not really sure if all of this should be done in this PR, or be moved to a different PR. I have nothing against using flexboxes here (instead of bootstrap grid), since that's a local thing to only this page. But stuff like introducing new default styles is probably better done with a few pages directly (not necessarily all of them at once), to see what should be shared and what not. I like the idea of having a more lightweight CSS framework than using bootstrap, but I think this PR would be easier with using existing styles.

[Flaburgan]

@SuperTux88 I reworked my changes, is it better like that?

[SuperTux88]

Thanks, yes this looks already a lot better. 👍 But I still found a few small things.

By the way, you don't need to respond to each of my comments, it's enough if you write a comment if you are done with everything and I also receive emails when you push new stuff. If you really want to react to the specific comments to mark that you have done them, you can maybe just react with a 👍 to the comment, this doesn't send a separate email for each comment to all the watchers of the repo.

[Flaburgan]

Ready for review again ;)