redesigned meeting and room page

app/assets/javascripts/landing.js

@@ -1,10 +1,12 @@
 (function() {
-  var initIndex = function() {
-    $('#join_form_button').click (function (event) {
+  var init = function() {
+
+    $('.meeting-join').click (function (event) {
+      var url = $('.meeting-url').val();
+      var name = $('.meeting-user-name').val();
       $.ajax({
-        url : $(this).data ('url') + "?name=" + $('#join_form_name').val(),
+        url : url + "/join?name=" + name,
         dataType : "json",
-        async : true,
         type : 'GET',
         success : function(data) {
           $(location).attr("href", data.response.join_url);
@@ -16,30 +18,50 @@
       });
     });
 
-    $('#url_form_button').click (function (event) {
-      $.ajax({
-        url : $(this).data ('url'),
-        dataType : "json",
-        async : true,
-        type : 'GET',
-        success : function(data) {
-          $('#meeting_url').html(data.response.meeting_url);
-          $('#text_meeting_url').attr("href", data.response.meeting_url);
-          $('#text_meeting_url').text(data.response.meeting_url);
-        },
-        error : function(xhr, status, error) {
-        },
-        complete : function(xhr, status) {
-        }
-      });
+    $('.meeting-url-copy').click (function (e) {
+      meetingURL = $('.meeting-url');
+      meetingURL.select();
+      document.execCommand("copy");
+      meetingURL.blur();
     });
   };
 
+  var initIndex = function() {
+
+    $('.generate-link').click (function (e) {
+      e.preventDefault();
+      var link = window.location.protocol +
+        '//' +
+        window.location.hostname +
+        '/' +
+        'meetings/' +
+        Math.trunc(Math.random() * 1000000000);
+
+      $('.meeting-url').val(link);
+    });
+
+
+    $('.meeting-url').val('');
+    $('.generate-link').click();
+  };
+
+  var initRooms = function() {
+    meetingURL = $('.meeting-url');
+    var link = window.location.protocol +
+      '//' +
+      window.location.hostname +
+      meetingURL.data('path');
+    meetingURL.val(link);
+  };
+
   $(document).on("turbolinks:load", function() {
+    init();
     if ($("body[data-controller=landing]").get(0)) {
-      if ($("body[data-action=meeting]").get(0) || $("body[data-action=room]").get(0)) {
+      if ($("body[data-action=meetings]").get(0)) {
         initIndex();
+      } else if ($("body[data-action=rooms]").get(0)) {
+        initRooms();
       }
     }
   });
-}).call(this);
+}).call(this);

app/models/user.rb

@@ -19,6 +19,14 @@ class User < ApplicationRecord
     auth_hash['info']['nickname']
   end
 
+  def ownership_name
+    if username.end_with? 's'
+      "#{username}'"
+    else
+      "#{username}'s"
+    end
+  end
+
   def room_url
     "/rooms/#{username}"
   end

app/views/landing/meeting.html.erb

@@ -1,28 +1,33 @@
-<!-- Body -->
-<div class='body'>
 
-  <div class="page-wrapper room">
-    <div class="row">
-      <div class="col-sm-2 col-sm-offset-10">
-        <% if !current_user.nil? %>
-          <span class="user">Hello <%= current_user.name %></span>
-          <%= link_to "Logout", user_logout_url() %>
-          <% if current_user.username %>
-            <div><%= link_to 'Personal Room', current_user.room_url %></div>
-          <% else %>
-            <div><%= link_to 'Set Username', edit_user_path(current_user) %></div>
-          <% end %>
-        <% end %>
-      </div>
+
+<% content_for :title do %>
+  <div class="title">
+    Hi Everyone
+  </div>
+  <small>
+    The session will be taking place using the following URL
+  </small>
+<% end %>
+
+<% content_for :footer do %>
+  <div class="panel-footer">
+    <div class="text-center">
+      <a href="#" class="generate-link">Click refresh</a> to generate a new meeting URL
     </div>
   </div>
+<% end %>
 
-  <div class="container">
-    <%= render 'landing/join_form' %>
+<div class="page-wrapper meeting">
+  <div class='container-fluid'>
 
-    <%= render 'landing/footer_message' %>
+  <%= render 'shared/title', title: 'Start A New Session' %>
+
+    <%= render layout: 'shared/center_panel' do %>
+      <div class="center-block col-sm-8">
+        <%= render 'shared/meeting_url', hidden: false %>
+        <%= render 'shared/join_form', user: current_user %>
+      </div>
+    <% end %>
 
-    <%= render 'landing/footer_oauth_append' %>
   </div>
-
 </div>

app/views/landing/room.html.erb

@@ -1,23 +1,36 @@
-<!-- Body -->
-<div class='body'>
+<% if current_user %>
+  <% page_title = "Welcome, #{current_user.name.split(' ').first}" %>
+<% else %>
+  <% page_title = "Welcome to #{@user.ownership_name} Meeting Space" %>
+<% end %>
 
-  <div class="page-wrapper room">
-    <div class="row">
-      <div class="col-sm-2 col-sm-offset-10">
-        <% if admin? %>
-          <span class="user">Hello <%= current_user.name %></span>
-          <%= link_to "Logout", user_logout_url() %>
+<% content_for :title do %>
+  <div class="title">
+    <% if current_user == @user %>
+      Start a new session
+    <% elsif current_user && current_user != @user %>
+      <%= "Join #{@user.ownership_name} session" %>
+    <% else %>
+      Join the current session
+    <% end %>
+  </div>
+<% end %>
+
+<div class="page-wrapper room">
+  <div class="container-fluid">
+
+    <%= render 'shared/title', title: page_title %>
+
+    <%= render layout: 'shared/center_panel' do %>
+      <div class="center-block col-sm-8">
+        <% if current_user == @user %>
+          <%= render 'shared/meeting_url', hidden: false %>
         <% else %>
-          <%= link_to "Login", "/auth/#{@user.provider}" %>
+          <%= render 'shared/meeting_url', hidden: true %>
         <% end %>
+        <%= render 'shared/join_form', user: current_user %>
       </div>
-    </div>
+    <% end %>
+
   </div>
-
-  <div class="container">
-    <%= render 'landing/join_form' %>
-
-    <%= render 'landing/footer_message' %>
-  </div>
-
 </div>