Skip to content

Commit

Permalink
New registration page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Flaburgan
Flaburgan committed Aug 29, 2021
1 parent 413926b commit 91d411f
Show file tree
Hide file tree
Showing 10 changed files with 304 additions and 54 deletions.
11 changes: 11 additions & 0 deletions app/assets/stylesheets/framework/_framework.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@import "fonts";
@import "variables";
@import "ui";
@import "layout";
@import "form";

// Reset the header and footer to the previous size, because all pages haven't been migrated yet
body > header,
body > footer {
font-size: 13px;
}
20 changes: 20 additions & 0 deletions app/assets/stylesheets/framework/fonts.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local("Open Sans Regular"), local("OpenSans-Regular"), url(/assets/fonts/open-sans-400.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }

@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local("Open Sans Italic"), local("OpenSans-Italic"), url(/assets/fonts/open-sans-400italic.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(/assets/fonts/open-sans-600.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
44 changes: 44 additions & 0 deletions app/assets/stylesheets/framework/form.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// cleaning bootstrap. Can be removed once bootstrap will be stripped out
label {
margin-bottom: 0;
}
// end cleaning bootstrap

button,
input,
select,
textarea {
// Fix dirty box model rendering on inputs
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: solid 1px $input-border;
background-color: $input-bg;
padding: .4rem;
border-radius: $radius;
font-size: 1rem;
}

[type=text],
[type=email],
[type=password] {
width: 320px;
box-shadow: inset 1px 0 1px #ddd;
}

@media screen and (max-width: 700px) {
[type=text],
[type=email],
[type=password] {
width: 100%;
}
}

input:focus {
border-color: $input-border-focus;
}

input::-moz-focus-inner {
border: 0;
outline: 0;
}
20 changes: 20 additions & 0 deletions app/assets/stylesheets/framework/layout.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// This cleans the famous children "margin-top" problem
.small-container::before,
.small-container::after {
display: table;
content: " ";
}

.small-container {
max-width: 800px;
margin: auto;

@media screen and (max-width: 700px) {
padding: 10px;
}
}

.flex-container {
display: flex;
justify-content: space-between;
}
79 changes: 79 additions & 0 deletions app/assets/stylesheets/framework/ui.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
html,
body {
font-size: 16px;
}

main {
font-family: "Open Sans", sans-serif;
}

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

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

section {
margin-bottom: $double-margin;
}

button,
input[type=submit],
input[type=button],
input[type=file] {
font-family: inherit;
-webkit-appearance: none;
}

.bttn {
border: 0;
border-radius: $radius;
cursor: pointer;
display: inline-block;
font-weight: bold;
line-height: 22px;
padding: 8px 20px;
text-decoration: none;

&:disabled,
&:disabled:hover,
&.disabled,
&.disabled:hover {
background-color: #ccc;
color: white;
cursor: wait;
}

&:focus {
outline: none;
}
}

.bttn-big {
padding: 10px 25px;
}

.bttn-primary {
@extend .bttn;

&,
&:visited {
background-color: $primary;
color: $primary-text;
}

&:hover,
&:visited:hover {
background: linear-gradient(-45deg, darken($primary, 4) 0%, $primary 60%);
}
}

.advice {
color: $subtle;
font-style: italic;
font-size: $smaller;
}
23 changes: 23 additions & 0 deletions app/assets/stylesheets/framework/variables.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
$breakpoint: 700px;

$text: #444;
$subtle: #777;

$primary: #ff9a00;
$primary-text: #fff;

$error-color: #da2244;

$input-border: #aaa;
$input-bg: #fcfcfc;
$input-border-focus: #444;
$input-border-invalid: $error-color;
$input-bg-invalid: lighten($error-color, 40%);

$radius: 4px;

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

$default-margin: 1rem;
$double-margin: $default-margin * 2;
74 changes: 34 additions & 40 deletions app/assets/stylesheets/registration.scss
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,48 @@
.page-registrations {
.ball {
background: image-url('branding/ball.png') no-repeat;
background-size: contain;
height: 633px;
max-width: 100%;
}
@import 'framework/framework';

.v-center {
display: table;
height: 633px;
}
.page-registrations {
.fields {
margin: 3rem 0;

@media (max-width: $screen-xs-max) {
.v-center {
height: auto;
@media screen and (max-width: $breakpoint) {
margin: 2rem 0;
flex-direction: column-reverse;
}
}

.content {
display: table-cell;
vertical-align: middle;

h1 {
font-size: 35px;
margin: 12px 0;
section {
border-left: solid 3px $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;

.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;
.captcha-img {
order: 2;
margin-left: 5px;
}
}

.terms > a {
color: inherit;
text-decoration: underline;
.import-instructions {
align-self: flex-start;
background-color: lighten($primary, 40); // #fff3e5;
border: 2px solid lighten($primary, 20); // #ffb866;
border-radius: $radius;
font-size: $smaller;
margin-left: $default-margin;
padding: $default-margin;
width: 240px;

@media screen and (max-width: $breakpoint) {
width: 100%;
margin-left: 0;
margin-bottom: $double-margin;
}
}
}
72 changes: 72 additions & 0 deletions app/views/registrations/new.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<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]" 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]" 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]" 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]" 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" %>
</div>
</section>
<% end %>
<%= invite_hidden_tag(invite) %>
</div>
<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>
<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="bttn-primary bttn-big" 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 91d411f

Please sign in to comment.