Skip to content

Commit

Permalink
New registration page, mentionning the import
Browse files Browse the repository at this point in the history
  • Loading branch information
@Flaburgan
Flaburgan committed Sep 20, 2021
1 parent 274edf7 commit 257e547
Show file tree
Hide file tree
Showing 5 changed files with 202 additions and 131 deletions.
162 changes: 126 additions & 36 deletions app/assets/stylesheets/registration.scss
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,144 @@
.page-registrations {
.ball {
background: image-url('branding/ball.png') no-repeat;
background-size: contain;
height: 633px;
max-width: 100%;
$breakpoint: 700px;

$subtle: #777;

$default-size: 16px;
$smaller: .9rem;

$default-margin: 1rem;
$double-margin: $default-margin * 2;

$radius: 4px;

// UI, maybe extracted to be shared with other pages later
// New default fontsize the page
html,
body {
font-size: 16px;
}
// Reset the header and footer to the previous size
body > header,
body > footer {
font-size: 13px;
}

h1 {
font-size: 3rem;
margin: $double-margin 0;

@media screen and (max-width: $breakpoint) {
font-size: 2rem;
margin: $default-margin 0;
}
}

.v-center {
display: table;
height: 633px;
section {
margin-bottom: $double-margin;
}

section:last-child {
margin-bottom: 0;
}

.advice {
color: $subtle;
font-size: $smaller;
font-style: italic;
}
// End UI

// Layout, maybe extracted to be shared with other pages later

// 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;
}
}

@media (max-width: $screen-xs-max) {
.v-center {
height: auto;
}
.flex-container {
display: flex;
justify-content: space-between;
}
// end of layout

.page-registrations {

// Overriding bootstrap
.form-control {
display: inline-block;
width: 320px;
}
// End Overriding bootstrap

.content {
display: table-cell;
vertical-align: middle;
.fields {
margin: 3rem 0;

h1 {
font-size: 35px;
margin: 12px 0;
@media screen and (max-width: $breakpoint) {
flex-direction: column-reverse;
margin: 2rem 0;
}

section {
border-left: solid 3px $brand-primary;
padding-left: 10px;
}
}

form {
max-width: 500px;
.advice {
max-width: 450px;
}

.captcha-img {
left: 10px;
position: absolute;
top: 169px;
width: 120px;
.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;
}

.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;
.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%;
}
}

.terms > a {
color: inherit;
text-decoration: underline;
.ball {
background: image-url('branding/ball.png') no-repeat;
background-size: contain;
height: 250px;
width: 250px;

@media screen and (max-width: $breakpoint) {
display: none;
}
}
}
81 changes: 0 additions & 81 deletions app/views/registrations/_form.haml
View file

This file was deleted.

75 changes: 75 additions & 0 deletions app/views/registrations/new.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<main class="small-container">
<header>
<h1>Join the community!</h1>
<p>You're about to create an account on <%= AppConfig.settings.pod_name %>.
One diaspora* account is enough to reach the whole network, you don't need to create a new account here if you already have one on another pod.</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]" class="form-control" required />@<%= AppConfig.pod_uri.host %>
</p>
<p class="advice">Your username is unique and can't be changed. It allows others to find you in the network.</p>
</section>
<section>
<p>
<label for="user_email"><%= t("registrations.new.email") %></label>
</p>
<p>
<input type="email" id="user_email" name="user[email]" class="form-control" required />
</p>
<p class="advice">Your e-mail will never be shared with anyone and will only be used to allow you to recover your account or send notifications.</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" 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" 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">
<div class="import-instructions">
You already have a diaspora* account and you want to migrate it on <%= AppConfig.settings.pod_name %>?
Please sign up first and then import your previous account from the settings.
</div>
<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>
11 changes: 0 additions & 11 deletions app/views/registrations/new.haml
View file

This file was deleted.

4 changes: 1 addition & 3 deletions app/views/registrations/new.mobile.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@
.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
Expand Down

0 comments on commit 257e547

Please sign in to comment.