feature/Add remote log in form

Author: LewisYoul

app/controllers/registrations_controller.rb

@@ -2,7 +2,7 @@ class RegistrationsController < Devise::RegistrationsController
   def create
     respond_to do |format|
       format.html { super }
-      format.json {
+      format.json do
         user = User.new(user_params)
 
         if user.save
@@ -11,9 +11,8 @@ def create
         else
           render json: { message: 'There was a problem creating your account.' }, status: 400
         end
-      }
+      end
     end
-
   end
 
   def update

app/controllers/sessions_controller.rb

@@ -0,0 +1,23 @@
+class SessionsController < Devise::SessionsController
+  def create
+    respond_to do |format|
+      format.html { super }
+      format.json do
+        user = User.authenticate(user_params)
+
+        if user
+          sign_in(user)
+          render json: { message: 'You are now logged in!' }
+        else
+          render json: { message: 'Invalid credentials.' }, status: 400
+        end
+      end
+    end
+  end
+
+  private
+
+  def user_params
+    params.require(:user).permit(:email, :password)
+  end
+end

app/controllers/users/modals_controller.rb

@@ -1,15 +1,13 @@
 class Users::ModalsController < ApplicationController
-  def sign_in_sign_up
-    render layout: false
-  end
+  layout false
+
+  def sign_in_sign_up; end
 
   def sign_in
-    render layout: false
+    @user = User.new
   end
 
   def sign_up
     @user = User.new
-
-    render layout: false
   end
 end

app/javascript/controllers/sessions_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+
+  onSignInSuccess(event) {
+    const [data, status, xhr] = event.detail;
+    const urlWithToast = encodeURI(`${location.toString()}?notice=${data.message}`)
+  }
+
+  onSignInError(event) {
+    const [data, status, xhr] = event.detail;
+    this.toast.display(data.message)
+  }
+
+  get toast() {
+    return document.getElementById('toast').toast
+  }
+}

app/javascript/controllers/users_controller.js

@@ -12,7 +12,6 @@ export default class extends Controller {
   presentModal(event) {
     event.stopPropagation()
     const target = event.currentTarget || event.target
-    console.log('e', target.dataset)
     this.modal.present(target.dataset.modalUrl)
   }
 

app/models/user.rb

@@ -113,6 +113,11 @@ def snippets_for_feed
     Snippet.where(id: snippet_ids).order(created_at: :desc)
   end
 
+  def self.authenticate(params)
+    user = find_for_authentication(email: params[:email])
+    user&.valid_password?(params[:password]) ? user : nil
+  end
+
   private
 
   def create_default_folder

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

@@ -1,28 +1,26 @@
-<card>
-  <h2 style="margin-top: 0px;">Log in</h2>
+<h2 style="margin-top: 0px;">Log in</h2>
 
-  <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-    <div class="field">
-      <%= f.label :email %><br />
-      <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-    </div>
+<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+  <div class="field">
+    <%= f.label :email %><br />
+    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+  </div>
 
-    <div class="field">
-      <%= f.label :password %><br />
-      <%= f.password_field :password, autocomplete: "current-password" %>
-    </div>
+  <div class="field">
+    <%= f.label :password %><br />
+    <%= f.password_field :password, autocomplete: "current-password" %>
+  </div>
 
-    <% if devise_mapping.rememberable? %>
-      <div class="field">
-        <%= f.check_box :remember_me %>
-        <%= f.label :remember_me %>
-      </div>
-    <% end %>
-
-    <div class="actions">
-      <%= f.submit "Log in" %>
+  <% if devise_mapping.rememberable? %>
+    <div class="field">
+      <%= f.check_box :remember_me %>
+      <%= f.label :remember_me %>
     </div>
   <% end %>
 
+  <div class="actions">
+    <%= f.submit "Log in" %>
+  </div>
+<% end %>
+
   <%= render "devise/shared/links" %>
-</card>

app/views/snippets/show.html.erb

@@ -8,7 +8,7 @@
         <div>
           <div style="display: flex; flex-direction: column;">
             <div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
-              <% if comment.created_by?(current_user) %>
+              <% if user_signed_in? && comment.created_by?(current_user) %>
                 <%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_comment_path(comment) } %>
               <% end %>
             </div>

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

@@ -1,3 +1,19 @@
-<div >
+<div data-controller="sessions">
   <h2 class="text-center">Sign in to your account</h2>
+
+  <%= form_for @user, url: user_session_path, remote: true, html: { data: { type: "json", action: "ajax:success->sessions#onSignInSuccess ajax:error->sessions#onSignInError" } } do |f| %>
+    <div class="field">
+      <%= f.label :email %><br />
+      <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+    </div>
+
+    <div class="field">
+      <%= f.label :password %><br />
+      <%= f.password_field :password, autocomplete: "current-password" %>
+    </div>
+
+    <div class="actions">
+      <%= f.submit "Log in" %>
+    </div>
+  <% end %>
 </div>

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

@@ -1,7 +1,7 @@
 <div data-controller="registrations">
   <h2 class="text-center">Create an Account</h2>
 
-  <%= form_for@user, url: user_registration_path, remote: true, html: { data: { type: "html", action: "ajax:success->registrations#onSignUpSuccess ajax:error->registrations#onSignUpError" } } do |f| %>
+  <%= form_for @user, url: user_registration_path, remote: true, html: { data: { type: "json", action: "ajax:success->registrations#onSignUpSuccess ajax:error->registrations#onSignUpError" } } do |f| %>
     <%# <%= render "devise/shared/error_messages", resource: @user %>
 
     <div class="field">