New registration page, mentionning the import, fixes #8009

.scss-lint.yml

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

app/assets/stylesheets/mobile/mobile.scss

@@ -21,6 +21,8 @@
 
 @import 'typography';
 
+@import 'registration';
+
 a {
   color: #2489ce;
   text-decoration: none;

app/assets/stylesheets/registration.scss

@@ -1,54 +1,154 @@
-.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;
   }
+}
+
+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;
+}
 
-  .v-center {
-    display: table;
-    height: 633px;
+.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
+
+
+// For the mobile version which doesn't have the same global CSS
+#app .page-registrations {
+  background: $framed-background;
+  margin: -10px;
+  margin-bottom: 10px;
+}
+// End specific mobile
+
+.page-registrations {
+
+  // Overriding bootstrap
+  .form-control {
+    display: inline-block;
+    width: 320px;
   }
+  // End Overriding bootstrap
+
+  .fields {
+    margin: 3rem 0;
 
-  .content {
-    display: table-cell;
-    vertical-align: middle;
+    @media screen and (max-width: $breakpoint) {
+      flex-direction: column-reverse;
+      margin: 2rem 0;
+    }
 
-    h1 {
-      font-size: 35px;
-      margin: 12px 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;
+    }
   }
 }

app/views/registrations/_new.erb

@@ -0,0 +1,75 @@
+<main class="small-container">
+  <header>
+    <h1><%= t("registrations.new.title") %></h1>
+    <p><%= t("registrations.new.subtitle", podname: AppConfig.settings.pod_name) %></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" 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" 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>

app/views/registrations/new.haml

@@ -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"

app/views/registrations/new.mobile.haml

@@ -2,15 +2,13 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-.stream#main-stream
+.page-registrations
   - 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