Agregando estilo a las vista de login y registrase

Gemfile

@@ -80,3 +80,4 @@ gem 'rqrcode'
 gem 'geocoder'
 gem 'icalendar'
 gem 'leaflet-rails'
+gem "font-awesome-rails"

README.md

@@ -60,15 +60,15 @@ Things you may want to cover:
   ```
   ```ruby
     # Creat user 
-    User.create!({:name=>"name",:email => "you_email@.com", :password => "111111", :password_confirmation => "111111" }) 
+    User.create!({:name=>"name",:email => "you_email@gmail.com", :password => "111111", :password_confirmation => "111111" }) 
     u=User.first    
   ```
   ```ruby
    # Creat role
     r=Role.new
     r.name="Admin"
     r.save
-    a=u.assingnments.new 
+    a=u.assignments.new 
     a.role_id=1
     a.save   
   ```

app/assets/stylesheets/application.css.scss

@@ -18,3 +18,14 @@
 @import "leaflet";
 
 @import "events";
+
+/* Import font awesome*/
+@import "font-awesome";
+
+.social-login {
+  padding-right: 20px;
+  & .btn {
+    border-radius: 10%;
+    width: 80px;
+  }
+}

app/views/devise/registrations/new.html.slim

@@ -1,50 +1,46 @@
 div class="container"
   div class="row"
-    div class="bs-docs-section clearfix"
+    div class="jumbotron"
       div class="row"
-        div class="page-header"
-          div class="jumbotron"
-            div class="row"
-              h2 class="display-3"
-                = t(:sign_up_with)
-
-              = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
-
-                  = devise_error_messages!
-                  div class="form-group row"
-                    = link_to "<i class='fa fa-facebook'></i>".html_safe + t(:facebook), user_facebook_omniauth_authorize_path, :class => "btn btn-primary btn-lg btn-block"
-
-                    = link_to "<i class='fa fa-twitter'></i>".html_safe + t(:github), user_github_omniauth_authorize_path, :class => "btn btn-primary btn-lg btn-block"
-                  div class="form-group row"
-                    h2 class="display-3"
-                      = t(:sign_up_with)
-                      | &nbsp;
-                      = t(:email)
-                  div class="form-group row"
-                    = f.label t(:name), class: "form-input-label"
-                    = f.text_field :name, required: true, minlength: "8", maxlength: "50", class: "form-control"
-                  div class="form-group row"
-                    = f.label t(:photo), class: "form-input-label"
-                    = f.file_field :avatar, class: "form-control-file"
-                  div class="form-group row"
-                    = f.label t(:email), class: "form-input-label"
-                    = f.email_field :email, autofocus: true, autocomplete: "email", required: true, "data-parsley-type": "email",class: "form-control"
-
-                  div class="form-group row"
-                    = f.label t(:password), class: "form-input-label"
-                    - if @minimum_password_length
-                       em
-                         = @minimum_password_length
-                         | &nbsp;
-                         = t(:characters_minimum)
-                    = f.password_field :password, autocomplete: "off", required: true, minlength: "8", maxlength: "50", "data-parsley-type": "alphanum", class: "form-control"
-
-                  div class="form-group row"
-                    = f.label t(:password_confirmation), required: true, "data-parsley-equalto": "#user_password", class: "form-input-label"
-                    = f.password_field :password_confirmation, autocomplete: "off", class: "form-control"
-
-                  div class="form-group row"
-                    = f.submit t(:sign_up), class: "btn btn-primary"
-
-              hr class="my-4"
-              = render "devise/shared/links"
+        div class="col-md-4"
+          h2 class="display-3 text-center"
+            = t(:sign_up_with)
+          div class="form-group"
+            span class="social-login"
+              = link_to "<i class='fa fa-facebook fa-4x'></i>".html_safe, user_facebook_omniauth_authorize_path, :class => "btn btn-primary"
+            span class="social-login"
+              = link_to "<i class='fa fa-github fa-4x'></i>".html_safe, user_github_omniauth_authorize_path, :class => "btn btn-default"
+        div class="col-md-7 col-md-offset-1"
+          = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
+            = devise_error_messages!
+            h2 class="display-3 text-center"
+              = t(:sign_up_with)
+              | &nbsp;
+              = t(:email)
+            div class="form-group"
+              = f.label t(:name), for: "name"
+              = f.text_field :name, required: true, minlength: "8", maxlength: "50", class: "form-control", id: "name", placeholder: t(:name)
+            div class="form-group"
+              = f.label t(:email), for: "email"
+              = f.email_field :email, autofocus: true, autocomplete: "email", required: true, "data-parsley-type": "email", class: "form-control", id: "email", placeholder: t(:email)
+
+            div class="form-group"
+              = f.label t(:photo), for: "avatar"
+              = f.file_field :avatar, class: "form-control-file", id: "avatar"
+            div class="form-group"
+              = f.label t(:password), for: "password"
+              - if @minimum_password_length
+                em
+                  = @minimum_password_length
+                  | &nbsp;
+                  = t(:characters_minimum)
+              = f.password_field :password, autocomplete: "off", required: true, minlength: "8", maxlength: "50", "data-parsley-type": "alphanum", class: "form-control", id: "password", placeholder: t(:password)
+
+            div class="form-group"
+              = f.label t(:password_confirmation), "data-parsley-equalto": "#user_password", for: "confirmation"
+              = f.password_field :password_confirmation, required: true, autocomplete: "off", class: "form-control", id: "confirmation", placeholder: t(:password_confirmation)
+
+            = f.submit t(:sign_up), class: "btn btn-primary "
+
+      hr class="my-4"
+        = render "devise/shared/links"

app/views/devise/sessions/new.html.slim

@@ -1,34 +1,36 @@
 div class="container"
   div class="row"
-     div class="jumbotron"
-          h2 class="display-3"
-            = t(:log_in_with)
-          = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
-            div class="from-group row"
-              = link_to "<i class='fa fa-facebook'></i>".html_safe + t(:facebook), user_facebook_omniauth_authorize_path, :class => "btn btn-primary btn-lg btn-block"
-              = link_to "<i class='fa fa-twitter'></i>".html_safe + t(:github), user_github_omniauth_authorize_path, :class => "btn btn-primary btn-lg btn-block"
-              hr class="my-4"
-
-            div class="form-group row"
-              h3 class="display-3"
-                = t(:log_in_with_email)
-
-            div class="form-group row"
-              = f.label t(:email), class: "form-input-label"
-              = f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control"
-
-            div class="form-group row"
-              = f.label :password, class: "form-input-label"
-              = f.password_field :password, autocomplete: "off", class: "form-control"
-
-            - if devise_mapping.rememberable?
-              div class="form-group row"
-                div class="form-check-lable"
-                  = f.check_box :remember_me, class: "form-check-input"
-                  |&nbsp; 
-                  = f.label t(:remember_me)
-
-            div class="form-group row"
-              = f.submit t(:sign_in), class: "btn btn-primary"
-          hr class="my-4"
-          = render "devise/shared/links"
+   div class="jumbotron"
+    div class="row col-md-offset-2"
+      div class="col-md-4"
+        h2 class="display-3  text-center"
+          = t(:log_in_with)
+        span class="social-login"
+          = link_to "<i class='fa fa-facebook fa-4x'></i>".html_safe, user_facebook_omniauth_authorize_path, :class => "btn btn-primary"
+        span class="social-login"
+          = link_to "<i class='fa fa-github fa-4x'></i>".html_safe, user_github_omniauth_authorize_path, :class => "btn btn-default"
+        hr class="my-4"
+      div class="col-md-5 col-md-offset-1"
+        h2 class="display-3 text-center"
+          = t(:log_in)
+        = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
+
+          div class="form-group"
+            = f.label t(:email), for: "email"
+            = f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control", id: "email", placeholder: t(:email)
+
+          div class="form-group"
+            = f.label t(:password), for: "password"
+            = f.password_field :password, autocomplete: "off", class: "form-control", id: "password", placeholder: t(:password)
+
+          - if devise_mapping.rememberable?
+            div class="form-group"
+              div class="form-check-lable"
+                = f.check_box :remember_me, class: "form-check-input", id: "check"
+                |&nbsp;
+                = f.label t(:remember_me), for: "check"
+
+          div class="text-center"
+            = f.submit t(:sign_in), class: "btn btn-primary btn-lg"
+    hr class="my-4"
+    = render "devise/shared/links"

config/locales/en.yml

@@ -152,3 +152,11 @@ en:
   required: "Required"
   location_instruction: "You can write the address or drag the marker on the map to get more acurate address"
   tickets_info: "Add the URL of the ticket system you use, if you are using Floss-pa tickets, the system will add the url for your"
+  sign_up_with: "Sign up with"
+  sign_up: "Sign up"
+  log_in: "Log In"
+  log_in_with: "Log In with"
+  log_in_with_email: "Log In"
+  forgot_your_password: "Forgot your password"
+  didnt_receive_confirmation_instructions: "Didn't receive confirmation_instructions?"
+  didnt_receive_unlock_instructions: "Didn't receive unlock instructions?"

config/locales/es.yml

@@ -357,3 +357,10 @@ es:
   required: "Campo Requerido"
   location_instruction: 'Puedes escribir la dirección o arrastrar el marcador en el map, esto agrega la dirección exacta al campo de "Dirección"'
   tickets_info: "Ingresa la dirección web del sistema de tickets externo, dejalo en blanco si usas nuestros tickets, el sistema ingresa la dirección por usted"
+  sign_up_with: "Registrarse con"
+  sign_up: "Registrarse"
+  log_in: "Iniciar sesión"
+  log_in_with: "Iniciar sesión con"
+  forgot_your_password: "Restablecer contraseña"
+  didnt_receive_confirmation_instructions: "¿No recibió instrucciones de confirmación?"
+  didnt_receive_unlock_instructions: "¿No recibió instrucciones de desbloqueo?"