From 0dce8d2bf57e3450c9090404727d0cb8eaefee62 Mon Sep 17 00:00:00 2001
From: Josh <josha5@outlook.com>
Date: Fri, 25 May 2018 11:55:48 -0400
Subject: [PATCH] continue front-end work

---
 app/assets/images/placeholder-user.jpg        | Bin 0 -> 10796 bytes
 app/assets/stylesheets/application.scss       |  13 +++
 app/controllers/users_controller.rb           |   7 +-
 app/models/user.rb                            |  19 +++-
 app/views/main/index.html.erb                 |   2 +-
 app/views/rooms/sessions.html.erb             |  40 ++++++++
 app/views/shared/_footer.html.erb             |   2 +-
 app/views/shared/_header.html.erb             |  13 ++-
 app/views/shared/_start_meeting.html.erb      |  14 +--
 .../shared/{ => modals}/_login_modal.html.erb |  14 ++-
 .../modals/_select_client_modal.html.erb      |  32 ++++++
 .../shared/{ => modals}/_video_modal.html.erb |   2 +-
 app/views/users/settings.html.erb             |  93 ++++++++++++++++++
 config/routes.rb                              |   3 +
 db/migrate/20180504131648_create_users.rb     |   1 +
 db/schema.rb                                  |   1 +
 16 files changed, 238 insertions(+), 18 deletions(-)
 create mode 100644 app/assets/images/placeholder-user.jpg
 rename app/views/shared/{ => modals}/_login_modal.html.erb (69%)
 create mode 100644 app/views/shared/modals/_select_client_modal.html.erb
 rename app/views/shared/{ => modals}/_video_modal.html.erb (94%)
 create mode 100644 app/views/users/settings.html.erb

diff --git a/app/assets/images/placeholder-user.jpg b/app/assets/images/placeholder-user.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a1ec342436454258820455483ea79b53dd06bf98
GIT binary patch
literal 10796
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

literal 0
HcmV?d00001

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 0ba8de4b..a212757b 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -68,6 +68,19 @@ html, body {
   background-color: $rule-color;
 }
 
+.thumbnail {
+  height: 60%;
+  width: auto;
+}
+
+.client-icon {
+  height: 100px;
+  width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .container-fluid {
   height: 100%;
 }
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index c33a1c9a..46e3b05b 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -17,9 +17,14 @@ class UsersController < ApplicationController
     end
   end
 
+  # GET /settings
+  def settings
+    redirect_to root_path unless current_user
+  end
+
   private
 
   def user_params
     params.require(:user).permit(:name, :email, :username, :password, :password_confirmation)
   end
-end
\ No newline at end of file
+end
diff --git a/app/models/user.rb b/app/models/user.rb
index 585e8a15..520c43be 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -26,7 +26,7 @@ class User < ApplicationRecord
       user.name = send("#{auth['provider']}_name", auth)
       user.username = send("#{auth['provider']}_username", auth)
       user.email = send("#{auth['provider']}_email", auth)
-      
+      user.image = send("#{auth['provider']}_image", auth)
       user.save!
       user
     end
@@ -51,6 +51,10 @@ class User < ApplicationRecord
       auth['info']['email']
     end
 
+    def twitter_image(auth)
+      auth['info']['image']
+    end
+
     def google_name(auth)
       auth['info']['name']
     end
@@ -62,6 +66,19 @@ class User < ApplicationRecord
     def google_email(auth)
       auth['info']['email']
     end
+
+    def google_image(auth)
+      auth['info']['picture']
+    end
+  end
+
+  def subtitle
+    case provider
+    when "greenlight", "google", "twitter"
+      "User"
+    else
+      "Unknown"
+    end
   end
 
   private
diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb
index a4644d5f..7ed62eb0 100644
--- a/app/views/main/index.html.erb
+++ b/app/views/main/index.html.erb
@@ -9,7 +9,7 @@
   <%= render "shared/features" %>
 </div>
 
-<%= render "shared/video_modal" %>
+<%= render "shared/modals/video_modal" %>
 
 <script>
 $(window).on('load',function(){
diff --git a/app/views/rooms/sessions.html.erb b/app/views/rooms/sessions.html.erb
index 2e1ae635..2179516b 100644
--- a/app/views/rooms/sessions.html.erb
+++ b/app/views/rooms/sessions.html.erb
@@ -1,3 +1,43 @@
+<div class="container">
+  <div class="col-lg-10">
+    <div class="card">
+      <table class="table card-table table-vcenter">
+        <tbody>
+        <% 3.times do %>
+          <tr>
+            <td>
+              <!--<i class="fas fa-users fa-2x"></i>-->
+              <img class="thumbnail" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
+            </td>
+            <td class="text-left">
+              <h4>Introduction to Dinosaurs</h4>
+              <p><i>June 21, 2017 (about 3 hours ago)</i></p>
+            </td>
+            <td class="text-center d-none d-md-table-cell text-nowrap">
+              <h6 class="text-uppercase"><strong>Users</strong></h6>
+              <h5>3</h5>
+            </td>
+            <td class="text-center d-none d-md-table-cell text-nowrap">
+              <h6 class="text-uppercase"><strong>Length</strong></h6>
+              <h5>2 hours</h5>
+            </td>
+            <td class="text-center d-none d-md-table-cell text-nowrap">
+              <h6 class="text-uppercase"><strong>Visbility</strong></h6>
+              <h5>Unlisted</h5>
+            </td>
+            <td>
+              <button type="button" class="btn btn-icon btn-success"><i class="fas fa-video"></i></button>
+              <button type="button" class="btn btn-icon btn-primary"><i class="fas fa-chart-bar"></i></button>          
+              <button type="button" class="btn btn-icon btn-warning"><i class="fas fa-podcast"></i></button>
+            </td>
+          </tr>
+        <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
 Sessions
 <br><br>
 <%= @meeting.recordings %>
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
index 7ca0198d..987f1fef 100644
--- a/app/views/shared/_footer.html.erb
+++ b/app/views/shared/_footer.html.erb
@@ -1,3 +1,3 @@
 <div class="footer">
-  <h5 class="text-center">Powered by BigBlueButton.</h5>
+  <h5 class="text-center">Powered by <a target="_blank" href="http://bigbluebutton.org/">BigBlueButton</a>.</h5>
 </div>
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
index faa8b949..7528dfe2 100644
--- a/app/views/shared/_header.html.erb
+++ b/app/views/shared/_header.html.erb
@@ -9,17 +9,20 @@
 				<% if current_user %>
 					<div class="dropdown">
 						<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
-							<span class="avatar" style="background-image: url({{ site.base }}/{{ user.photo }})"></span>
+							<% if current_user.image.nil? %>
+								<span class="avatar"><%= current_user.name.first %></span>
+							<% else %>
+								<span class="avatar" style="background-image: url(<%= current_user.image %>)"></span>
+							<% end %>
 							<span class="ml-2 d-none d-lg-block">
-								<span class="text-default">{{ user.name }} {{ user.surname }}</span>
-								<small class="text-muted d-block mt-1">Administrator</small>
+								<span class="text-default"><%= current_user.name %></span>
+								<small class="text-muted d-block mt-1"><%= current_user.subtitle %></small>
 							</span>
 						</a>
 					</div>
 				<% else %>
 					<button type="submit" class="btn btn-pill btn-outline-primary ml-auto" data-toggle="modal" data-target="#loginModal">Login</button>
-
-					<%= render "shared/login_modal" %>
+					<%= render "shared/modals/login_modal" %>
 				<% end %>
 			</div>
 		</div>
diff --git a/app/views/shared/_start_meeting.html.erb b/app/views/shared/_start_meeting.html.erb
index 21d583e3..f26803fa 100644
--- a/app/views/shared/_start_meeting.html.erb
+++ b/app/views/shared/_start_meeting.html.erb
@@ -1,12 +1,14 @@
 <div class="card text-center">
   <div class="card-body">
     <div class="col-8 offset-2 form-group">
-      <div class="input-group">
-        <input type="text" class="form-control" placeholder="Enter a meeting name to start!">
-        <span class="input-group-append">
-          <button class="btn btn-primary" type="button">Start Meeting</button>
-        </span>
-      </div>
+      <%= form_for(:meeting, url: create_meeting_path) do |f| %>
+        <div class="input-group">
+          <%= f.text_field :name, class: "form-control", placeholder: "Enter a meeting name to start!" %>
+          <span class="input-group-append">
+            <%= f.submit "Start Meeting", class: "btn btn-primary" %>
+          </span>
+        </div>
+      <% end %>
     </div>
   </div>
   <div class="card-footer">
diff --git a/app/views/shared/_login_modal.html.erb b/app/views/shared/modals/_login_modal.html.erb
similarity index 69%
rename from app/views/shared/_login_modal.html.erb
rename to app/views/shared/modals/_login_modal.html.erb
index a14c9a82..2d417612 100644
--- a/app/views/shared/_login_modal.html.erb
+++ b/app/views/shared/modals/_login_modal.html.erb
@@ -16,10 +16,20 @@
 
           <hr>
           <div class="form-group">
-            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
+            <div class="input-icon">
+              <span class="input-icon-addon">
+                <i class="fas fa-at"></i>
+              </span>
+              <input type="email" class="form-control" placeholder="Email">
+            </div>
           </div>
           <div class="form-group">
-            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+            <div class="input-icon">
+              <span class="input-icon-addon">
+                <i class="fas fa-key"></i>
+              </span>
+              <input type="password" class="form-control" placeholder="Password">
+            </div>
           </div>
           <div class="form-footer">
             <button type="submit" class="btn btn-outline-primary btn-block btn-pill">Login</button>
diff --git a/app/views/shared/modals/_select_client_modal.html.erb b/app/views/shared/modals/_select_client_modal.html.erb
new file mode 100644
index 00000000..7aec9250
--- /dev/null
+++ b/app/views/shared/modals/_select_client_modal.html.erb
@@ -0,0 +1,32 @@
+<div class="modal fade" id="selectClientModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content text-center">
+      <div class="modal-body">
+        <div class="card-body p-6">
+          <div class="card-title text-primary">
+            <h3>Which client would you like to use?</h3>
+          </div>
+
+          <hr class="small-rule">
+          <div class="form-group">
+            <div class="selectgroup selectgroup-pills">
+              <label class="selectgroup-item">
+                <input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
+                <span class="selectgroup-button selectgroup-button-icon client-icon p-2"><i class="fab fa-html5 fa-3x"></i></span>
+                <p>HTML5</p>
+              </label>
+              <label class="selectgroup-item">
+                <input type="radio" name="icon-input" value="2" class="selectgroup-input">
+                <span class="selectgroup-button selectgroup-button-icon client-icon"><i class="fas fa-bolt fa-3x"></i></span>
+                <p>Flash</p>
+              </label>
+            </div>
+         </div>
+          <div class="card-footer">
+            <p>We recommend you use the HTML5 client for the best experience.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/views/shared/_video_modal.html.erb b/app/views/shared/modals/_video_modal.html.erb
similarity index 94%
rename from app/views/shared/_video_modal.html.erb
rename to app/views/shared/modals/_video_modal.html.erb
index c16c8054..649e56c4 100644
--- a/app/views/shared/_video_modal.html.erb
+++ b/app/views/shared/modals/_video_modal.html.erb
@@ -4,7 +4,7 @@
       <div class="modal-body">
         <div class="card-body p-6">
           <div class="card-title text-primary">
-            <h3>Welcome</h3>
+            <h3>Welcome to Greenlight</h3>
           </div>
           <hr class="small-rule">
 
diff --git a/app/views/users/settings.html.erb b/app/views/users/settings.html.erb
new file mode 100644
index 00000000..19188144
--- /dev/null
+++ b/app/views/users/settings.html.erb
@@ -0,0 +1,93 @@
+<div class="container">
+
+  <div class="form-group">
+    <div class="selectgroup selectgroup-pills">
+      <label class="selectgroup-item">
+        <input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
+        <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-user"></i> Account</span>
+      </label>
+      <label class="selectgroup-item">
+        <input type="radio" name="icon-input" value="2" class="selectgroup-input">
+        <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-pencil-alt"></i> Design </span>
+      </label>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label class="form-label">Background</label>
+    <div class="row gutters-xs">
+      <div class="col-auto">
+        <label class="colorinput">
+          <input name="color" type="radio" value="azure" class="colorinput-input">
+          <span class="colorinput-color bg-azure"></span>
+        </label>
+      </div>
+      <div class="col-auto">
+        <label class="colorinput">
+          <input name="color" type="radio" value="indigo" class="colorinput-input" checked="">
+          <span class="colorinput-color bg-indigo"></span>
+        </label>
+      </div>
+      <div class="col-auto">
+        <label class="colorinput">
+          <input name="color" type="radio" value="purple" class="colorinput-input">
+          <span class="colorinput-color bg-purple"></span>
+        </label>
+      </div>
+      <div class="col-auto">
+        <label class="colorinput">
+          <input name="color" type="radio" value="pink" class="colorinput-input">
+          <span class="colorinput-color bg-pink"></span>
+        </label>
+      </div>
+      <div class="col-auto">
+        <label class="colorinput">
+          <input name="color" type="radio" value="red" class="colorinput-input">
+          <span class="colorinput-color bg-red"></span>
+        </label>
+      </div>
+      <div class="col-auto">
+        <label class="colorinput">
+          <input name="color" type="radio" value="orange" class="colorinput-input">
+          <span class="colorinput-color bg-orange"></span>
+        </label>
+      </div>
+      <div class="col-auto">
+        <label class="colorinput">
+          <input name="color" type="radio" value="yellow" class="colorinput-input">
+          <span class="colorinput-color bg-yellow"></span>
+        </label>
+      </div>
+      <div class="col-auto">
+        <label class="colorinput">
+          <input name="color" type="radio" value="lime" class="colorinput-input">
+          <span class="colorinput-color bg-lime"></span>
+        </label>
+      </div>
+      <div class="col-auto">
+        <label class="colorinput">
+          <input name="color" type="radio" value="green" class="colorinput-input">
+          <span class="colorinput-color bg-green"></span>
+        </label>
+      </div>
+      <div class="col-auto">
+        <label class="colorinput">
+          <input name="color" type="radio" value="teal" class="colorinput-input">
+          <span class="colorinput-color bg-teal"></span>
+        </label>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label class="form-label">Name</label>
+    <input type="text" class="form-control" value="<%= current_user.name %>" readonly="">
+
+    <label class="form-label">Email</label>
+    <input type="text" class="form-control" value="<%= current_user.email %>" readonly="">
+
+    <label class="form-label">Account Provider</label>
+    <input type="text" class="form-control" value="<%= current_user.provider.capitalize %>" readonly="">
+  </div>
+  
+</div>
diff --git a/config/routes.rb b/config/routes.rb
index e381b8f7..fa6a0cb4 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -21,6 +21,9 @@ Rails.application.routes.draw do
   get '/signup', to: 'users#new'
   post '/signup', to: 'users#create'
 
+  # User settings.
+  get '/settings', to: 'users#settings'
+
   # Handles login of greenlight provider accounts.
   post '/login',  to: 'sessions#create', as: :create_session
 
diff --git a/db/migrate/20180504131648_create_users.rb b/db/migrate/20180504131648_create_users.rb
index e03d7742..5bcb6b34 100644
--- a/db/migrate/20180504131648_create_users.rb
+++ b/db/migrate/20180504131648_create_users.rb
@@ -6,6 +6,7 @@ class CreateUsers < ActiveRecord::Migration[5.0]
       t.string :name
       t.string :username
       t.string :email
+      t.string :image
       t.string :password_digest, index: { unique: true }
 
       t.timestamps
diff --git a/db/schema.rb b/db/schema.rb
index 2fb5b1f1..433b72d9 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -38,6 +38,7 @@ ActiveRecord::Schema.define(version: 20180504131713) do
     t.string   "name"
     t.string   "username"
     t.string   "email"
+    t.string   "image"
     t.string   "password_digest"
     t.datetime "created_at",      null: false
     t.datetime "updated_at",      null: false