Added a copy access code button (#2161)

app/assets/javascripts/room.js

@@ -25,25 +25,6 @@ $(document).on('turbolinks:load', function(){
 
   // Only run on room pages.
   if (controller == "rooms" && action == "show"){
-    var copy = $('#copy');
-
-    // Handle copy button.
-    copy.on('click', function(){
-      var inviteURL = $('#invite-url');
-      inviteURL.select();
-
-      var success = document.execCommand("copy");
-      if (success) {
-        inviteURL.blur();
-        copy.addClass('btn-success');
-        copy.html("<i class='fas fa-check'></i>" + getLocalizedString("copied"))
-        setTimeout(function(){
-          copy.removeClass('btn-success');
-          copy.html("<i class='fas fa-copy'></i>" + getLocalizedString("copy"))
-        }, 2000)
-      }
-    });
-
     // Display and update all fields related to creating a room in the createRoomModal
     $("#create-room-block").click(function(){
       showCreateRoom(this)
@@ -164,6 +145,35 @@ $(document).on('turbolinks:load', function(){
   }
 });
 
+function copyInvite() {
+  $('#invite-url').select()
+  if (document.execCommand("copy")) {
+    $('#invite-url').blur();
+    copy = $("#copy-invite")
+    copy.addClass('btn-success');
+    copy.html("<i class='fas fa-check mr-1'></i>" + getLocalizedString("copied"))
+    setTimeout(function(){
+      copy.removeClass('btn-success');
+      copy.html("<i class='fas fa-copy mr-1'></i>" + getLocalizedString("copy"))
+    }, 1000)
+  }
+}
+
+function copyAccess() {
+  $('#copy-code').attr("type", "text")
+  $('#copy-code').select()
+  if (document.execCommand("copy")) {
+    $('#copy-code').attr("type", "hidden")
+    copy = $("#copy-access")
+    copy.addClass('btn-success');
+    copy.html("<i class='fas fa-check mr-1'></i>" + getLocalizedString("copied"))
+    setTimeout(function(){
+      copy.removeClass('btn-success');
+      copy.html("<i class='fas fa-copy mr-1'></i>" + getLocalizedString("room.copy_access"))
+    }, 1000)
+  }
+}
+
 function showCreateRoom(target) {
   $("#create-room-name").val("")
   $("#create-room-access-code").text(getLocalizedString("modal.create_room.access_code_placeholder"))

app/views/rooms/show.html.erb

@@ -22,7 +22,7 @@
 <div class="background pb-1">
   <div class="container">
     <div class="row pt-7 pt-sm-9">
-      <div class="col-lg-8 col-sm-12">
+      <div class="col-lg-9 col-sm-12">
         <div id="room-title" class="display-3 form-inline <%= 'edit_hover_class' if current_user.main_room != @room %>" data-path="<%= update_settings_path(@room) %>">
            <h1 contenteditable=false id="user-text" class="display-3 text-left mb-3 font-weight-400"><%= title(@room.name) %></h1>
           <% if current_user.main_room == @room %>
@@ -35,7 +35,7 @@
         <% unless exceeds_limit %>
           <label class="form-label"><%= t("room.invite_participants") %></label>
           <div class="row">
-            <div class="col-lg-7 col-md-12 mt-2">
+            <div class="col-lg-6 col-md-12 mt-2">
               <div class="input-icon invite-link-input">
                 <span class="input-icon-addon">
                   <i class="fas fa-link"></i>
@@ -43,15 +43,22 @@
                 <input id="invite-url" type="text" class="form-control w-100" value="<%= request.base_url + @room.invite_path %>" readonly="">
               </div>
             </div>
-            <div class="col-lg-5 col-md-12">
+            <div class="col-lg-6 pr-lg-7 col-md-12 pl-lg-0">
               <div class="row">
-                <div class="col-sm-6">
-                  <a id="copy" class="btn btn-primary btn-block mt-2">
-                    <i class="fas fa-copy"></i>
+                <div class="col-sm-6 mt-2">
+                  <button id="copy-invite" class="btn btn-primary btn-block" onclick="copyInvite()">
+                    <i class="fas fa-copy mr-1"></i>
                     <%= t("copy") %>
-                  </a>
+                  </button>
                 </div>
-                <div class="col-sm-6 pl-0">
+                <div class="col-sm-6 pl-0 mt-2">
+                  <% if @room.access_code.present? %>
+                    <input id="copy-code" value="<%= @room.access_code %>" type="hidden">
+                    <button id="copy-access" class="btn btn-secondary btn-block" onclick="copyAccess()">
+                      <i class="fas fa-copy mr-1"></i>
+                      <%= t("room.copy_access") %>
+                    </button>
+                  <% end %>
                   <% if Rails.configuration.enable_google_calendar_button %>
                     <a href="<%= google_calendar_path %>" target="__blank" id="schedule" class="btn btn-primary btn-block mt-2">
                       <i class="fas fa-calendar-plus"></i>
@@ -64,7 +71,7 @@
           </div>
         <% end %>
       </div>
-      <div class="offset-lg-1 col-lg-3 col-sm-12 force-bottom mt-5">
+      <div class="col-lg-3 col-sm-12 force-bottom mt-5">
         <% if @room_running %>
           <%= button_to t("room.join"), room_path(@room), class: "btn btn-primary btn-block px-7 start-button float-right", "data-disable": "" %>
         <% else %>

config/locales/en.yml

@@ -531,6 +531,7 @@ en:
   room:
     access_code_required: Please enter a valid access code to join the room
     add_presentation: Add Presentation
+    copy_access: Copy Access Code
     create_room: Create a Room
     create_room_error: There was an error creating the room
     create_room_success: Room created successfully

lib/assets/_primary_themes.scss

@@ -215,3 +215,10 @@ input:focus, select:focus {
     box-shadow: 0 0 10px $primary-color-lighten;
   }
 }
+
+.btn-secondary {
+  color: $primary-color;
+  & i {
+    color: $primary-color;
+  }
+}