style devise views with materialize to match admin. Update devise con…

…trollers and omniauth to work with the new admin
kevinhughes27 · Nov 24, 2018 · b5df29f · b5df29f
1 parent 433aff3
commit b5df29f
Show file tree

Hide file tree

Showing 21 changed files with 308 additions and 104 deletions.
diff --git a/app/assets/stylesheets/brochure/bootstrap-social.scss b/app/assets/stylesheets/brochure/bootstrap-social.scss
@@ -91,25 +91,4 @@ $bs-height-xs:   (floor($font-size-small * 1.2) + $padding-small-vertical + 1);
   @include button-variant($color, $color-bg, rgba(0,0,0,.2));
 }
 
-
-.btn-adn           { @include btn-social(#d87a68); }
-.btn-bitbucket     { @include btn-social(#205081); }
-.btn-dropbox       { @include btn-social(#1087dd); }
-.btn-facebook      { @include btn-social(#3b5998); }
-.btn-flickr        { @include btn-social(#ff0084); }
-.btn-foursquare    { @include btn-social(#f94877); }
-.btn-github        { @include btn-social(#444444); }
 .btn-google        { @include btn-social(#dd4b39); }
-.btn-instagram     { @include btn-social(#3f729b); }
-.btn-linkedin      { @include btn-social(#007bb6); }
-.btn-microsoft     { @include btn-social(#2672ec); }
-.btn-odnoklassniki { @include btn-social(#f4731c); }
-.btn-openid        { @include btn-social(#f7931e); }
-.btn-pinterest     { @include btn-social(#cb2027); }
-.btn-reddit        { @include btn-social(#eff7ff, #000); }
-.btn-soundcloud    { @include btn-social(#ff5500); }
-.btn-tumblr        { @include btn-social(#2c4762); }
-.btn-twitter       { @include btn-social(#55acee); }
-.btn-vimeo         { @include btn-social(#1ab7ea); }
-.btn-vk            { @include btn-social(#587ea3); }
-.btn-yahoo         { @include btn-social(#720e9e); }
diff --git a/app/assets/stylesheets/login.scss b/app/assets/stylesheets/login.scss
@@ -0,0 +1,59 @@
+@import 'login/materialize-social';
+
+.nav-wrapper {
+  background-color: #009688;
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
+.title {
+  padding-left: 24px;
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: 0.15px;
+}
+
+.login-container {
+  display: flex;
+  height: 75vh;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-panel {
+  width: 380px;
+  max-width: 380px;
+}
+
+.login-form-copy {
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.00938em;
+}
+
+.input-field label {
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.btn-login {
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  background-color: rgb(0, 150, 136);
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
+  &:hover {
+    background-color: #00796b;
+  }
+}
+
+.btn-flat {
+  background-color: white;
+  box-shadow: none;
+  &:hover {
+    background-color: #eeeeee;
+  }
+}
diff --git a/app/assets/stylesheets/login/materialize-social.css b/app/assets/stylesheets/login/materialize-social.css
@@ -0,0 +1,49 @@
+/*  https://github.com/TerryMooreII/materialize-social */
+
+.btn.social > :first-child,
+.btn-large.social > :first-child,
+.col.social > :first-child {
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+}
+.btn.social,
+.btn-large.social,
+.col.social {
+  padding: 0 2rem 0 0;
+}
+.btn.social i,
+.btn-large.social i,
+.col.social i {
+  padding: 0 1rem;
+  margin-right: 1rem;
+}
+.btn.social-icon,
+.btn-large.social-icon,
+.col.social-icon {
+  padding: 0;
+}
+.btn.social-icon i,
+.btn-large.social-icon i,
+.col.social-icon i {
+  padding: 0 1rem;
+  margin-right: 0;
+}
+.btn-large.social-icon {
+  padding: 0 1rem;
+}
+.col.social {
+  width: 100%;
+  text-align: left;
+}
+.col.social i.fa-fw {
+  width: 3.2rem;
+}
+.google {
+  background-color: #dd4b39;
+  color: #fff !important;
+}
+.google i {
+  color: #fff !important;
+}
+.google:hover {
+  background-color: #e47365 !important;
+}
diff --git a/app/controllers/login_controller.rb b/app/controllers/login_controller.rb
@@ -9,6 +9,7 @@ class LoginController < Devise::SessionsController
   def self.controller_path
     'login'
   end
+
   layout 'login'
 
   def choose_tournament
@@ -20,7 +21,7 @@ def choose_tournament
 
   def create
     user = warden.authenticate!(auth_options)
-    return redirect_to setup_path if (!user.staff? && user.tournaments.blank?)
+    return redirect_to setup_path if user_has_no_tournaments?(user)
 
     if @tournament.nil?
       login_no_tournament_id(user)
@@ -39,8 +40,13 @@ def destroy
 
   private
 
+  def user_has_no_tournaments?(user)
+    !user.staff? && user.tournaments.blank?
+  end
+
   def login_no_tournament_id(user)
     if user_has_multiple_tournaments?(user)
+      set_jwt_cookie(user)
       redirect_to choose_tournament_path
     else
       @tournament = user.tournaments.first
@@ -53,16 +59,27 @@ def user_has_multiple_tournaments?(user)
   end
 
   def login(user)
+    set_jwt_cookie(user)
     redirect_to after_login_in_path
   end
 
+  def set_jwt_cookie(user)
+    token = Knock::AuthToken.new(payload: { sub: user.id }).token
+    cookies['jwt'] = {
+      value: token,
+      domain: :all,
+      tld_length: 2
+    }
+  end
+
   def sign_out_user
     return unless current_user
+    cookies.delete('jwt', domain: :all, tld_length: 2)
     sign_out(current_user)
   end
 
   def load_tournament
-    return unless request.subdomain.present?
+    return unless request.subdomain.present? && request.subdomain != 'www'
     @tournament = Tournament.find_by!(handle: request.subdomain)
   rescue ActiveRecord::RecordNotFound
     nil

diff --git a/app/controllers/omniauth_callbacks_controller.rb b/app/controllers/omniauth_callbacks_controller.rb
@@ -3,6 +3,7 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
   def google_oauth2
     user = User.from_omniauth(auth_hash)
     sign_in(:user, user)
+    set_jwt_cookie(user)
 
     if for_internal_area?
       sign_in(:internal_user, user)
@@ -18,6 +19,15 @@ def google_oauth2
 
   private
 
+  def set_jwt_cookie(user)
+    token = Knock::AuthToken.new(payload: { sub: user.id }).token
+    cookies['jwt'] = {
+      value: token,
+      domain: :all,
+      tld_length: 2
+    }
+  end
+
   def after_sign_in_path(user)
     if for_tournament_subdomain?
       return admin_url(subdomain: subdomain) + stored_path

diff --git a/app/views/layouts/login.html.erb b/app/views/layouts/login.html.erb
@@ -4,18 +4,26 @@
   <title>Ultimate Tournament</title>
   <meta charset="utf-8">
   <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
-  <%= stylesheet_link_tag 'admin', media: 'all', 'data-turbolinks-track' => 'reload' %>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+  <%= stylesheet_link_tag 'login', media: 'all' %>
   <%= render 'shared/rollbar' %>
   <%= csrf_meta_tags %>
 </head>
 
-<body class="register-page">
-  <div id="closebt-container">
-    <%= link_to root_url(subdomain: 'www') do %>
-      <%= image_tag "brochure/closebt.svg", class: "closebt" %>
-    <% end %>
-  </div>
+<body>
+  <nav>
+    <div class="nav-wrapper">
+      <span class="title">
+        Ultimate Tournament
+      </span>
+    </div>
+  </nav>
 
   <%= yield %>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 </body>
 </html>
diff --git a/app/views/login/_errors.html.erb b/app/views/login/_errors.html.erb
diff --git a/app/views/login/choose_tournament.html.erb b/app/views/login/choose_tournament.html.erb
@@ -1,18 +1,16 @@
-<div class="register-box animated <%= login_animation %>">
-  <div class="register-logo">
-    Ultimate Tournament
-  </div>
-
-  <div class="register-subtext">
-    <p>Choose tournament</p>
-  </div>
+<div class="login-container">
+  <div class="card-panel">
+    <span class="login-form-copy">
+      Choose tournament:
+    </span>
 
-  <div class="register-box-body" style="padding-bottom: 5px;">
-    <% current_user.tournaments.each do |tournament| %>
-      <%= form_tag choose_tournament_path, class: 'form-group' do |f| %>
-        <%= hidden_field_tag :tournament, tournament.handle %>
-        <%= submit_tag tournament.name, class: 'btn btn-block' %>
+    <div style="padding-top: 10px">
+      <% current_user.tournaments.each do |tournament| %>
+        <%= form_tag choose_tournament_path do |f| %>
+          <%= hidden_field_tag :tournament, tournament.handle %>
+          <%= submit_tag tournament.name, class: 'btn btn-flat' %>
+        <% end %>
       <% end %>
-    <% end %>
+    </div>
   </div>
 </div>
diff --git a/app/views/login/new.html.erb b/app/views/login/new.html.erb
@@ -1,51 +1,37 @@
-<div class="register-box animated <%= login_animation %>">
-
-  <% if @tournament %>
-    <div class="register-logo">
-      <%= @tournament.name %>
-    </div>
-  <% end %>
-
-  <div class="register-subtext">
-    <p>Log in to manage your tournament</p>
-  </div>
-
-  <%= render 'errors' %>
-  <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-    <div class="register-box-body">
-      <div class="form-group">
-        <div class="input-group">
-          <span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
-          <%= f.text_field :email, placeholder: 'Email', class: 'form-control', autofocus: true %>
-        </div>
+<div class="login-container">
+  <div class="card-panel">
+    <span class="login-form-copy">
+      Log in to manage your tournament
+    </span>
+
+    <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+      <div class="input-field">
+        <%= f.text_field :email, autocomplete: 'off' %>
+        <label for="user_email">Username</label>
+        <% if flash[:alert].present? %>
+          <span class="helper-text">
+            <%= flash[:alert] %>
+          </span>
+        <% end %>
       </div>
 
-      <div class="form-group">
-        <div class="input-group">
-          <span class="input-group-addon"><i class="fa fa-fw fa-lock"></i></span>
-          <%= f.password_field :password, placeholder: '********', class: 'form-control', autocomplete: 'off' %>
-        </div>
+      <div class="input-field">
+        <%= f.password_field :password, autocomplete: 'off' %>
+        <label for="user_password">Password</label>
       </div>
 
       <%= f.hidden_field :remember_me, value: true %>
 
-      <div class="form-group text-center" style="margin-bottom: 0px">
-        <%= f.submit "Log in", class: 'btn btn-lg btn-block btn-primary' %>
+      <div class="row">
+        <%= link_to "Forgot your password?", new_user_password_path %>
       </div>
-    </div>
-  <% end %>
 
-  <br>
-  <div class="text-center">
-    <p style="margin-bottom: 15px;">or</p>
-  </div>
+      <%= f.submit "Log in", class: 'btn btn-login right' %>
+    <% end %>
 
-  <div class="social-auth-links text-center">
-    <div style="width: 55%; margin: auto;">
-      <%= link_to user_google_oauth2_omniauth_authorize_url(subdomain: 'www'),
-            class: "btn btn-block btn-social btn-google btn-flat", style: 'margin-bottom: 10px;' do %>
-        <span class="fa fa-google"></span> Sign in with Google
-      <% end %>
-    </div>
+    <%= link_to user_google_oauth2_omniauth_authorize_url(subdomain: 'www'),
+      class: "waves-effect waves-light btn social google" do %>
+      <i class="fa fa-google"></i> Sign in with Google
+    <% end %>
   </div>
 </div>
diff --git a/app/views/tournaments/new.html.erb b/app/views/tournaments/new.html.erb
@@ -26,8 +26,7 @@
     <%= form.hidden_field :handle %>
 
     <div class="builder-next-btn">
-      <%= form.submit "Next", class: 'btn btn-lg btn-primary',
-          "track-click" => "{category: 'Signup.NewTournament', action: 'next'}" %>
+      <%= form.submit "Next", class: 'btn btn-lg btn-primary' %>
     </div>
 
   <% end %>