nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New registration page, mentionning the import, fixes #8009

Browse source
This commit is contained in:
flaburgan 2021-09-20 09:35:43 +02:00
parent 389b1870d3
commit 7782a32921
13 changed files with 236 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.scss-lint.yml
View file

@ -70,7 +70,7 @@ linters:
enabled: true
IdSelector:
enabled: true
enabled: false
ImportantRule:
enabled: true

10
app/assets/javascripts/app/pages/registration.js
View file

@ -1,10 +0,0 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
app.pages.Registration = Backbone.View.extend({
initialize: function() {
$("input#user_email").popover({
placement: "left",
trigger: "focus"
}).popover("show");
}
});
// @license-end

4
app/assets/javascripts/app/router.js
View file

@ -173,10 +173,6 @@ app.Router = Backbone.Router.extend({
});
},
registration: function() {
app.page = new app.pages.Registration();
},
settings: function() {
app.page = new app.pages.Settings();
},

3
app/assets/stylesheets/_application.scss
View file

@ -24,6 +24,9 @@
// font overrides
@import 'typography';
// New design, can be used adding the .modern-design class to a <div> around the page which is ported
@import 'modern-design';
// layout
@import 'sidebar';

4
app/assets/stylesheets/mobile/mobile.scss
View file

@ -21,6 +21,10 @@
@import 'typography';
// New design, can be used adding the .modern-design class to a <div> around the page which is ported
@import 'modern-design';
@import 'registration';
a {
color: #2489ce;
text-decoration: none;

66
app/assets/stylesheets/modern-design.scss Normal file
View file

@ -0,0 +1,66 @@
$breakpoint: 700px;
$subtle: $text-dark-grey;
$default-size: 16px;
$smaller: .9em;
$default-margin: 16px; // Will be 1rem once the default-size will be set on <html>
$double-margin: $default-margin * 2;
$triple-margin: $default-margin * 3;
$radius: 4px;
.modern-design {
font-size: $default-size;
// Style
h1 {
font-size: 3em;
margin: $double-margin 0;
@media screen and (max-width: $breakpoint) {
font-size: 2em;
margin: $default-margin 0;
}
}
section {
margin-bottom: $double-margin;
}
section:last-child {
margin-bottom: 0;
}
.advice {
color: $subtle;
font-size: $smaller;
font-style: italic;
}
// End of style
// Layout
// This cleans the famous children "margin-top" problem
.small-container::before,
.small-container::after {
content: ' ';
display: table;
}
.small-container {
margin: auto;
max-width: 800px;
@media screen and (max-width: $breakpoint) {
padding: 10px;
}
}
.flex-container {
display: flex;
justify-content: space-between;
}
// End of layout
}

117
app/assets/stylesheets/registration.scss
View file

@ -1,54 +1,79 @@
.page-registrations {
// For the mobile version which doesn't have the same global CSS
background: $body-bg;
#app {
margin: -10px;
margin-bottom: 10px;
}
// End specific mobile
// Overriding bootstrap
.form-control {
display: inline-block;
width: 320px;
}
// End Overriding bootstrap
.fields {
margin: $triple-margin 0;
@media screen and (max-width: $breakpoint) {
flex-direction: column-reverse;
margin: $double-margin 0;
}
section {
border-left: solid 3px $brand-primary;
padding-left: 10px;
}
}
.advice {
max-width: 450px;
}
.captcha {
align-items: center;
display: flex;
.captcha-img {
margin-left: 5px;
order: 2;
}
}
.import-and-ball-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.import-instructions {
align-self: flex-start;
background-color: lighten($brand-primary, 40);
border: 2px solid lighten($brand-primary, 20);
border-radius: $radius;
font-size: $smaller;
margin-left: $default-margin;
padding: $default-margin;
width: 240px;
@media screen and (max-width: $breakpoint) {
margin-bottom: $double-margin;
margin-left: 0;
width: 100%;
}
}
.ball {
background: image-url('branding/ball.png') no-repeat;
background-size: contain;
height: 633px;
max-width: 100%;
}
height: 250px;
width: 250px;
.v-center {
display: table;
height: 633px;
}
@media (max-width: $screen-xs-max) {
.v-center {
height: auto;
@media screen and (max-width: $breakpoint) {
display: none;
}
}
.content {
display: table-cell;
vertical-align: middle;
h1 {
font-size: 35px;
margin: 12px 0;
}
}
form {
max-width: 500px;
}
.captcha-img {
left: 10px;
position: absolute;
top: 169px;
width: 120px;
}
.form-control.captcha-input {
border-bottom: 1px solid $input-border;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-sizing: border-box;
line-height: $line-height-base;
padding-left: 130px;
}
.terms > a {
color: inherit;
text-decoration: underline;
}
}

2
app/views/layouts/application.mobile.haml
View file

@ -17,7 +17,7 @@
%meta{name: "MobileOptimized", content: "320"}/
%meta{"http-equiv" => "cleartype", :content => "on"}/
%body
%body{class: "page-#{controller_name} action-#{action_name}"}
#app
= render "layouts/header"
- if user_signed_in?

81
app/views/registrations/_form.haml
View file

@ -1,81 +0,0 @@
= form_for(resource, url: registration_path(resource_name), html: {class: "form-horizontal block-form", autocomplete: "off"}) do |f|
%fieldset
- if mobile
%legend
= image_tag("branding/logos/header-logo2x.png", height: 40, width: 40)
= AppConfig.settings.pod_name
- if mobile
= f.label :email, t("registrations.new.email"), class: "control-label", id: "emailLabel"
- else
= f.label :email, t("registrations.new.email"), class: "sr-only control-label", id: "emailLabel"
%i.entypo-mail
= f.email_field :email,
autofocus: true,
class: "input-block-level form-control",
data: {content: t("users.edit.your_email_private")},
placeholder: t("registrations.new.email"),
required: true,
title: t("registrations.new.enter_email"),
aria: {labelledby: "emailLabel"}
- if mobile
%label.control-label#usernameLabel{for: "user_username"}
= t("registrations.new.username")
- else
%label.sr-only.control-label#usernameLabel{for: "user_username"}
= t("registrations.new.username")
%i.entypo-user
= f.text_field :username,
class: "input-block-level form-control",
placeholder: t("registrations.new.username"),
title: t("registrations.new.enter_username"),
required: true,
pattern: "[A-Za-z0-9_.\\-]+",
aria: {labelledby: "usernameLabel"}
- if mobile
%label.control-label#passwordLabel{for: "user_password"}
= t("registrations.new.password")
- else
%label.sr-only.control-label#passwordLabel{for: "user_password"}
= t("registrations.new.password")
%i.entypo-lock
= f.password_field :password,
class: "input-block-level form-control",
placeholder: t("registrations.new.password"),
title: t("registrations.new.enter_password"),
required: true,
pattern: "......+",
aria: {labelledby: "passwordLabel"}
- if mobile
%label.control-label#passwordConfirmationLabel{for: "user_password_confirmation"}
= t("registrations.new.password_confirmation")
- else
%label.sr-only.control-label#passwordConfirmationLabel{for: "user_password_confirmation"}
= t("registrations.new.password_confirmation")
%i.entypo-lock
= f.password_field :password_confirmation,
class: "input-block-level form-control",
placeholder: t("registrations.new.password_confirmation"),
title: t("registrations.new.enter_password_again"),
required: true,
pattern: "......+",
aria: {labelledby: "passwordConfirmationLabel"}
- if AppConfig.settings.captcha.enable?
= show_simple_captcha object: "user",
code_type: "numeric",
class: "simple-captcha-image",
input_html: {class: "form-control captcha-input"}
= invite_hidden_tag(invite)
- if AppConfig.settings.terms.enable?
%p.terms.text-center#terms
= t('registrations.new.terms', terms_link: link_to(t('registrations.new.terms_link'), terms_path, target: "_blank")).html_safe
= f.submit t("registrations.new.sign_up"), class: "btn btn-block btn-large btn-primary",
data: {disable_with: t("registrations.new.submitting")}

77
app/views/registrations/_new.erb Normal file
View file

@ -0,0 +1,77 @@
<div class="modern-design">
<main class="small-container">
<header>
<h1><%= t("registrations.new.title") %></h1>
<p><%= t("registrations.new.subtitle", podname: AppConfig.settings.pod_name, tutorials_link: link_to(t('registrations.new.tutorials_link_label'), "https://diasporafoundation.org/getting_started/sign_up", target: "_blank")).html_safe %></p>
</header>
<%= form_for(resource, url: registration_path(resource_name)) do |f| %>
<div class="flex-container fields">
<div>
<section>
<p>
<label for="user_username"><%= t("registrations.new.username") %></label>
</p>
<p>
<input type="text" id="user_username" name="user[username]" value="<%= @user.username %>" class="form-control" pattern="[A-Za-z0-9_.\-]+" required />@<%= AppConfig.pod_uri.host %>
</p>
<p class="advice"><%= t("registrations.new.username_advice") %></p>
</section>
<section>
<p>
<label for="user_email"><%= t("registrations.new.email") %></label>
</p>
<p>
<input type="email" id="user_email" name="user[email]" value="<%= @user.email %>" class="form-control" required />
</p>
<p class="advice"><%= t("registrations.new.email_advice") %></p>
</section>
<section>
<p>
<label for="user_password"><%= t("registrations.new.password") %></label>
</p>
<p>
<input type="password" id="user_password" name="user[password]" class="form-control" minlength="6" pattern=".{6,}" required />
</p>
</section>
<section>
<p>
<label for="user_password_confirmation"><%= t("registrations.new.password_confirmation") %></label>
</p>
<p>
<input type="password" id="user_password_confirmation" name="user[password_confirmation]" class="form-control" minlength="6" pattern=".{6,}" required />
</p>
</section>
<% if AppConfig.settings.captcha.enable? %>
<section>
<p>
<label for="user_captcha"><%= t("simple_captcha.label") %></label>
</p>
<div class="captcha">
<%= show_simple_captcha object: "user", code_type: "numeric", class: "simple-captcha-image", input_html: {class: "form-control captcha-input"} %>
</div>
</section>
<% end %>
<%= invite_hidden_tag(invite) %>
</div>
<div class="import-and-ball-container">
<% if false %>
<div class="import-instructions">
<%= t("registrations.new.import_indication", podname: AppConfig.settings.pod_name) %>
</div>
<% end %>
<div class="ball"></div>
</div>
</div>
<section class="text-center">
<% if AppConfig.settings.terms.enable? %>
<p>
<%= t('registrations.new.terms', terms_link: link_to(t('registrations.new.terms_link'), terms_path, target: "_blank")).html_safe %>
</p>
<% end %>
<p>
<input type="submit" value="<%= t('registrations.new.sign_up') %>" class="btn btn-lg btn-primary" data-disable-with="<%= t('registrations.new.submitting') %>" />
</p>
</section>
<% end %>
</main>
</div>

12
app/views/registrations/new.haml
View file

@ -1,11 +1 @@
#registration
.container
.row
.col-sm-6.hidden-xs
.ball
.col-sm-6.col-xs-12.v-center
.content.text-center
%h1#pod-name
= AppConfig.settings.pod_name
= render partial: "form", locals: {mobile: false}
= render partial: "new"

13
app/views/registrations/new.mobile.haml
View file

@ -2,15 +2,12 @@
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
.stream#main-stream
- flash.each do |name, msg|
.expose#flash-container
.flash-message{class: "message alert alert-#{flash_class name}", role: "alert"}
= msg
- flash.each do |name, msg|
.expose#flash-container
.flash-message{class: "message alert alert-#{flash_class name}", role: "alert"}
= msg
.login-form
.login-container
= render partial: "form", locals: {mobile: true}
= render partial: "new", locals: {mobile: true}
%footer.footer
%ul

12
config/locales/diaspora/en.yml
View file

@ -1099,18 +1099,20 @@ en:
registrations:
new:
enter_email: "Enter your email address"
enter_username: "Pick a username (only letters, numbers, and underscores)"
enter_password: "Enter a password (six character minimum)"
enter_password_again: "Enter the same password as before"
title: "Join the diaspora* community!"
subtitle: "You're about to create an account on %{podname}. A single account is enough to reach the whole diaspora* network. You don't need to create a new account here if you already have one on another pod.<br />Need help? Check %{tutorials_link}."
tutorials_link_label: "the tutorials"
sign_up: "Create account"
email: "Email"
email_advice: "Your e-mail will never be shared with anyone and will only be used to enable you to recover your account and to send notifications."
username: "Username"
username_advice: "Your username is unique and allows others to find you in the network. It can't be changed once set. Only letters, numbers, \".\", \"_\" and \"-\"."
password: "Password"
password_confirmation: "Password confirmation"
submitting: "Submitting..."
terms: "By creating an account you accept the %{terms_link}."
terms_link: "terms of service"
import_indication: "Do you want to migrate an existing diaspora* account to %{podname}? If so, sign up first and then go to the user settings page to import your previous account."
create:
success: "You’ve joined diaspora*!"
closed:
@ -1423,7 +1425,7 @@ en:
simple_captcha:
placeholder: "Enter the image value"
label: "Enter the code in the box:"
label: "Captcha"
message:
default: "The secret code did not match with the image"
user: "The secret image and code were different"