feature/Allow creation of user from sign up modal

Author: LewisYoul

app/controllers/application_controller.rb

@@ -2,6 +2,7 @@ class ApplicationController < ActionController::Base
   respond_to :html, :json
   serialization_scope :view_context
   before_action :configure_permitted_parameters, if: :devise_controller?
+  before_action :set_toast_message, if: -> { params[:notice].present? || params[:alert].present? }
 
   UNAUTHORIZED = 'You do not have access to this page'.freeze
 
@@ -12,4 +13,10 @@ def configure_permitted_parameters
 
     devise_parameter_sanitizer.permit(:account_update) { |u| u.permit(:name, :email, :bio, :location, :password, :current_password)}
   end
+
+  private
+
+  def set_toast_message
+    flash[:notice] = params[:notice] || params[:alert]
+  end
 end

app/controllers/home_controller.rb

@@ -1,8 +1,9 @@
 class HomeController < ApplicationController
   def index
+    @display_popover = true
+
     if user_signed_in?
       @page_title = 'Feed'
-      @display_popover = true
       @snippets = current_user
         .snippets_for_feed
         .paginate(page: params[:page] || 1, per_page: 6)
@@ -11,7 +12,7 @@ def index
       @snippets = Snippet
         .includes(:user)
         .order(created_at: :desc)
-        .paginate(page: params[:page] || 1)
+        .paginate(page: params[:page] || 1, per_page: 6)
     end
 
     respond_to do |format|

app/controllers/registrations_controller.rb

@@ -1,8 +1,20 @@
 class RegistrationsController < Devise::RegistrationsController
-  # def create
-  #   byebug
-  #   super
-  # end
+  def create
+    respond_to do |format|
+      format.html { super }
+      format.json {
+        user = User.new(user_params)
+    
+        if user.save
+          sign_in(user)
+          render json: { message: 'Thanks for signing up, you are now logged in!' }
+        else
+          render json: { message: 'There was a problem creating your account.' }, status: 400
+        end
+      }
+    end
+
+  end
 
   def update
     current_user.updated_at = Time.now
@@ -14,4 +26,10 @@ def update
     #   render json: { message: "Failed to update profile" }, status: 400
     # end
   end
+
+  private
+
+  def user_params
+    params.require(:user).permit(:email, :name, :password, :password_confirmation)
+  end
 end

app/controllers/users/modals_controller.rb

@@ -8,6 +8,8 @@ def sign_in
   end
 
   def sign_up
+    @user = User.new
+
     render layout: false
   end
 end

app/javascript/controllers/registrations_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+  onSignUpSuccess(event) {
+    const [data, status, xhr] = event.detail;
+    const urlWithToast = encodeURI(`${location.toString()}?notice=${data.message}`)
+  }
+
+  onSignUpError(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

@@ -10,7 +10,7 @@ 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/views/users/modals/sign_up.html.erb

@@ -1,3 +1,34 @@
-<div >
+<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| %>
+    <%# <%= render "devise/shared/error_messages", resource: @user %>
+
+    <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 :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="actions">
+      <%= f.submit "Sign up" %>
+    </div>
+  <% end %>
 </div>

config/routes.rb

@@ -6,7 +6,7 @@
     Rails.application.routes.default_url_options[:host] = 'cryptic-refuge-00081.herokuapp.com'
   end
 
-  devise_for :users
+  devise_for :users, controllers: { registrations: 'registrations' }
   # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
   root to: 'home#index'