feature/Add basic login modal flow

Author: LewisYoul

app/controllers/users/modals_controller.rb

@@ -0,0 +1,13 @@
+class Users::ModalsController < ApplicationController
+  def sign_in_sign_up
+    render layout: false
+  end
+
+  def sign_in
+    render layout: false
+  end
+
+  def sign_up
+    render layout: false
+  end
+end

app/javascript/controllers/modal_controller.js

@@ -8,9 +8,10 @@ export default class extends Controller {
     this.element[this.identifier] = this
   }
 
-  present(url) {
+  present(url, header) {
     axios.get(url)
       .then(res => {
+        this.close()
         this.bodyTarget.insertAdjacentHTML('afterbegin', res.data);
         this.modalTarget.classList.remove('hidden')
       })

app/javascript/controllers/users_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from 'stimulus';
+import axios from 'axios';
+
+export default class extends Controller {
+  static targets = [];
+
+  initialize() {
+    const csrfToken = document.querySelector("meta[name=csrf-token]").content
+    axios.defaults.headers.common['X-CSRF-Token'] = csrfToken
+  }
+
+  presentModal(event) {
+    
+    const target = event.currentTarget || event.target
+    console.log('e', target.dataset)
+    this.modal.present(target.dataset.modalUrl)
+  }
+
+  get modal() {
+    return document.getElementById('modal').modal
+  }
+}

app/models/snippet.rb

@@ -11,7 +11,7 @@ class Snippet < ApplicationRecord
   attr_accessor :folder_id
 
   def folder_for_user(user)
-    folders.find_by(user_id: user.id)
+    folders.find_by(user_id: user&.id)
   end
 
   # TODO: Don't call serializers from model - just instantiate in controller

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

@@ -1,36 +1,34 @@
-<card>
-  <h2 style="margin-top: 0px;">Sign up</h2>
+<h2 style="margin-top: 0px;">Sign ds</h2>
 
-  <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
-    <%= render "devise/shared/error_messages", resource: resource %>
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
 
-    <div class="field">
-      <%= f.label :name %><br />
-      <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
-    </div>
+  <div class="field">
+    <%= f.label :name %><br />
+    <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
+  </div>
 
-    <div class="field">
-      <%= f.label :email %><br />
-      <%= f.email_field :email, autocomplete: "email" %>
-    </div>
+  <div class="field">
+    <%= f.label :email %><br />
+    <%= f.email_field :email, autocomplete: "email" %>
+  </div>
 
-    <div class="field">
-      <%= f.label :password %>
-      <% if @minimum_password_length %>
-      <em>(<%= @minimum_password_length %> characters minimum)</em>
-      <% end %><br />
-      <%= f.password_field :password, autocomplete: "new-password" %>
-    </div>
+  <div class="field">
+    <%= f.label :password %>
+    <% if @minimum_password_length %>
+    <em>(<%= @minimum_password_length %> characters minimum)</em>
+    <% end %><br />
+    <%= f.password_field :password, autocomplete: "new-password" %>
+  </div>
 
-    <div class="field">
-      <%= f.label :password_confirmation %><br />
-      <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-    </div>
+  <div class="field">
+    <%= f.label :password_confirmation %><br />
+    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+  </div>
 
-    <div class="actions">
-      <%= f.submit "Sign up" %>
-    </div>
-  <% end %>
+  <div class="actions">
+    <%= f.submit "Sign up" %>
+  </div>
+<% end %>
 
-  <%= render "devise/shared/links" %>
-</card>
+<%= render "devise/shared/links" %>

app/views/shared/_popover_trigger.html.erb

@@ -1,11 +1,23 @@
-<%# rename to more ubtton or something %>
-<div
-  data-controller="popover"
-  data-action="click->popover#display click@window->popover#hide"
-  data-popover-url="<%= popover_path %>"
-  class="position-<%= defined?(position) ? position : 'relative' %>"
->
-  <div class="more-button">
-    <%= image_tag "/icons/more.svg", width: 12 %>
+<% if user_signed_in? %>
+  <div
+    data-controller="popover"
+    data-action="click->popover#display click@window->popover#hide"
+    data-popover-url="<%= popover_path %>"
+    class="position-<%= defined?(position) ? position : 'relative' %>"
+  >
+    <div class="more-button">
+      <%= image_tag "/icons/more.svg", width: 12 %>
+    </div>
   </div>
-</div>
+<% else %>
+  <div
+    data-controller="users"
+    data-modal-url="<%= users_modals_sign_in_sign_up_path %>"
+    data-action="click->users#presentModal"
+    class="position-<%= defined?(position) ? position : 'relative' %>"
+  >
+    <div class="more-button">
+      <%= image_tag "/icons/more.svg", width: 12 %>
+    </div>
+  </div>
+<% end %>

app/views/snippets/show.html.erb

@@ -20,4 +20,6 @@
   <% end %>
 </div>
 
-<%= render partial: 'comments/new', locals: { snippet: @snippet, comment: @comment } %>
+<% if user_signed_in? %>
+  <%= render partial: 'comments/new', locals: { snippet: @snippet, comment: @comment } %>
+<% end %>

app/views/users/modals/sign_in.html.erb

@@ -0,0 +1,3 @@
+<div >
+  <h2 class="text-center">Sign in to your account</h2>
+</div>

app/views/users/modals/sign_in_sign_up.html.erb

@@ -0,0 +1,11 @@
+<div >
+  <h2 class="text-center">You need to sign in to do that</h2>
+  <p class="text-center">Create an account to stay in the loop!</p>
+
+  <div class="flex h-center">
+    <div style="width: 50%;" data-controller="users">
+      <button data-modal-url="<%= users_modals_sign_in_path %>" data-action="click->users#presentModal" style="width: 100%;" class="button--cta-blue">Log In</button>
+      <button data-modal-url="<%= users_modals_sign_up_path %>" data-action="click->users#presentModal" style="width: 100%;" class="button--cta-transparent margin-top">Sign Up</button>
+    </div>
+  </div>
+</div>

app/views/users/modals/sign_up.html.erb

@@ -0,0 +1,3 @@
+<div >
+  <h2 class="text-center">Create an Account</h2>
+</div>