Implement authenticated subscribe/unsubscribe with hotwire

Add subscribe and unsubscribe buttons for logged in users since we know
their email and subscription, if it exists.

The UX is implemented takes advantage of hotwire. We don’t have flash
messages styled nicely yet or working with Hotwire—future improvement
needed.

Author: rossta

app/controllers/users/newsletter_subscriptions_controller.rb

@@ -1,24 +1,25 @@
 class Users::NewsletterSubscriptionsController < ApplicationController
   invisible_captcha only: [:create]
 
-  before_action :authenticate_user_or_not_found!, only: [:index]
+  before_action :authenticate_user_or_not_found!, only: [:index, :subscribe]
+  before_action :authenticate_user!, only: [:subscribe]
+  before_action :redirect_if_authenticated, only: [:create]
 
   def index
     @newsletter_subscription = current_user.newsletter_subscription || current_user.build_newsletter_subscription
 
-    render Users::NewsletterSubscriptions::ShowView.new(newsletter_subscription: @newsletter_subscription)
+    render Users::NewsletterSubscriptions::ShowView.new(newsletter_subscription: @newsletter_subscription, show_unsubscribe: true)
   end
 
   def show
     @newsletter_subscription = NewsletterSubscription.find(params[:id]) or raise ActiveRecord::RecordNotFound
 
-    render Users::NewsletterSubscriptions::ShowView.new(newsletter_subscription: @newsletter_subscription)
+    render Users::NewsletterSubscriptions::ShowView.new(newsletter_subscription: @newsletter_subscription, show_unsubscribe: false)
   end
 
   def new
-    @newsletter_subscription = current_user&.newsletter_subscription || NewsletterSubscription.new do |ns|
-      ns.subscriber = current_user || User.new
-    end
+    user = current_user || User.new
+    @newsletter_subscription = user.newsletter_subscription || user.build_newsletter_subscription
 
     render Users::NewsletterSubscriptions::NewView.new(newsletter_subscription: @newsletter_subscription)
   end
@@ -29,12 +30,9 @@ def create
       u.subscribing = true
     end
 
-    if !@user.subscribed_to_newsletter?
-      @user.build_newsletter_subscription
-      @user.save
-    end
+    @newsletter_subscription = @user.newsletter_subscription || @user.build_newsletter_subscription
 
-    @newsletter_subscription = @user.newsletter_subscription
+    @user.save
 
     if @user.errors.any?
       return render Users::NewsletterSubscriptions::NewView.new(newsletter_subscription: @newsletter_subscription), status: :unprocessable_entity
@@ -50,6 +48,23 @@ def create
       notice: "Welcome to Joy of Rails! Please check your email for confirmation instructions"
   end
 
+  def subscribe
+    if !current_user.subscribed_to_newsletter?
+      current_user.create_newsletter_subscription
+    end
+
+    @newsletter_subscription = current_user.newsletter_subscription
+
+    if current_user.needs_confirmation?
+      EmailConfirmationNotifier.deliver_to(current_user)
+    end
+
+    respond_to do |format|
+      format.html { redirect_to root_path, notice: "Success!" }
+      format.turbo_stream { redirect_to users_newsletter_subscription_path(@newsletter_subscription) }
+    end
+  end
+
   def unsubscribe
     if params[:token]
       subscription = NewsletterSubscription.find_by_token_for(:unsubscribe, params[:token]) or raise ActiveRecord::RecordNotFound
@@ -67,7 +82,13 @@ def unsubscribe
       # could render show action instead
       render plain: "You have been unsubscribed", status: :ok
     else
-      redirect_to root_path, notice: "You have been unsubscribed"
+      respond_to do |format|
+        format.html { redirect_to root_path, notice: "You have been unsubscribed" }
+        format.turbo_stream {
+          redirect_path = current_user ? users_newsletter_subscriptions_path : new_users_newsletter_subscription_path
+          redirect_to redirect_path
+        }
+      end
     end
   end
 end

app/javascript/css/components/button.css

@@ -11,6 +11,10 @@
   color: rgb(255 255 255 / var(--tw-text-opacity));
   line-height: inherit;
 
+  &:is(a) {
+    text-decoration: none;
+  }
+
   &:hover {
     cursor: pointer;
     --tw-text-opacity: 1;
@@ -30,6 +34,9 @@
   &.warn {
     background-color: var(--joy-button-warn);
   }
+  &.danger {
+    background-color: var(--joy-button-warn);
+  }
 
   fieldset[disabled] &,
   &[disabled] {

app/models/user.rb

@@ -59,7 +59,7 @@ def confirmed?
 
   def unconfirmed? = !confirmed?
 
-  def subscribed_to_newsletter? = newsletter_subscription.present?
+  def subscribed_to_newsletter? = !!newsletter_subscription&.persisted?
 
   # We want built-in validations provided by has_secure_password but to make
   # room for users who are only subscribing for newsletter content, we need to

app/views/users/newsletter_subscriptions/form.rb

@@ -11,7 +11,7 @@ def initialize(newsletter_subscription:)
   end
 
   def view_template
-    form_with model: @newsletter_subscription.subscriber, url: form_url, class: "lg:w-1/2" do |f|
+    form_with model: @newsletter_subscription.subscriber, url: form_url, method: :post, class: "lg:w-1/2" do |f|
       invisible_captcha
       div(class: "flex flex-row items-center mt-2") do
         div(class: "flex-grow mr-2") do

app/views/users/newsletter_subscriptions/new_view.rb

@@ -10,7 +10,13 @@ def initialize(newsletter_subscription:)
   def view_template
     render Users::NewsletterSubscriptions::Banner.new do
       turbo_frame_tag :newsletter_subscription do
-        render Users::NewsletterSubscriptions::Form.new(newsletter_subscription: @newsletter_subscription)
+        if helpers.user_signed_in?
+          div do
+            render Users::NewsletterSubscriptions::SubscribeButton.new
+          end
+        else
+          render Users::NewsletterSubscriptions::Form.new(newsletter_subscription: @newsletter_subscription)
+        end
       end
     end
   end

app/views/users/newsletter_subscriptions/show_view.rb

@@ -3,26 +3,41 @@
 class Users::NewsletterSubscriptions::ShowView < ApplicationView
   include Phlex::Rails::Helpers::TurboFrameTag
 
-  def initialize(newsletter_subscription:)
+  def initialize(newsletter_subscription:, show_unsubscribe: false)
     @newsletter_subscription = newsletter_subscription
+    @show_unsubscribe = show_unsubscribe
   end
 
   def view_template
     render Users::NewsletterSubscriptions::Banner.new do
       turbo_frame_tag :newsletter_subscription do
-        div(class: "bg-success callout flex flex-row items-center mt-2") do
-          div(class: "flex-grow mr-2") do
-            plain "You are subscribed to the Joy of Rails newsletter!"
-            if @newsletter_subscription.subscriber.needs_confirmation?
-              whitespace
-              plain "Please check your email for a confirmation link."
-              # TODO:
-              # Didn't receive it?
-              # = button_to "Resend confirmation email", users_confirmations_path, params: { user: { email: newsletter_subscription.subscriber.email }}, class: "button primary"
+        if @newsletter_subscription.persisted?
+          div(class: "bg-success callout flex flex-row items-center mt-2") do
+            div(class: "flex-grow mr-2") do
+              subscribed_message
             end
+
+            if @show_unsubscribe && helpers.user_signed_in?
+              render Users::NewsletterSubscriptions::UnsubscribeButton.new
+            end
+          end
+        elsif helpers.user_signed_in?
+          div do
+            render Users::NewsletterSubscriptions::SubscribeButton.new
           end
         end
       end
     end
   end
+
+  def subscribed_message
+    plain "You are subscribed to the Joy of Rails newsletter!"
+    if @newsletter_subscription.subscriber.needs_confirmation?
+      whitespace
+      plain "Please check your email for a confirmation link."
+      # TODO:
+      # Didn't receive it?
+      # = button_to "Resend confirmation email", users_confirmations_path, params: { user: { email: newsletter_subscription.subscriber.email }}, class: "button primary"
+    end
+  end
 end

app/views/users/newsletter_subscriptions/subscribe_button.rb

@@ -0,0 +1,14 @@
+class Users::NewsletterSubscriptions::SubscribeButton < ApplicationComponent
+  include Phlex::Rails::Helpers::LinkTo
+  include Phlex::Rails::Helpers::ButtonTo
+
+  def view_template
+    return plain "" unless helpers.user_signed_in?
+
+    if helpers.current_user.subscribed_to_newsletter?
+      link_to "Manage subscription", users_newsletter_subscriptions_path, class: "button secondary"
+    else
+      button_to "Subscribe", subscribe_users_newsletter_subscriptions_path, class: "button primary"
+    end
+  end
+end

app/views/users/newsletter_subscriptions/unsubscribe_button.rb

@@ -0,0 +1,9 @@
+class Users::NewsletterSubscriptions::UnsubscribeButton < ApplicationComponent
+  include Phlex::Rails::Helpers::ButtonTo
+
+  # TODO: Make this button work for users who are not signed in—first we need to figure out when to show it for them
+  def view_template
+    button_to "Unsubscribe", unsubscribe_users_newsletter_subscriptions_path, class: "button secondary",
+      form: {data: {turbo_confirm: "Just confirming: Are you sure you want to unsubscribe?"}}
+  end
+end

config/routes.rb

@@ -37,7 +37,12 @@
     resources :confirmations, only: [:new, :create, :edit, :update], param: :token
     resources :passwords, only: [:new, :create, :edit, :update], param: :token
 
-    resources :newsletter_subscriptions, only: [:new, :create, :index, :show]
+    resources :newsletter_subscriptions, only: [:new, :create, :index, :show] do
+      collection do
+        post :subscribe
+      end
+    end
+
     resources :newsletter_subscriptions, only: [], param: :token do
       match :unsubscribe, on: :collection, via: [:get, :post, :delete]
       match :unsubscribe, on: :member, via: [:get, :post, :delete]

spec/requests/users/newsletter_subscriptions_spec.rb

@@ -81,7 +81,7 @@
       expect(mail.subject).to eq "Confirm your email address"
     end
 
-    it "quietly succeeds for a user subscribing with an already subscribed email" do
+    it "disallows for a subscribing with an already subscribed email" do
       user = FactoryBot.create(:user, :subscribed)
 
       expect {
@@ -131,6 +131,63 @@
     end
   end
 
+  describe "POST subscribe" do
+    it "subscribes unsubscribed, logged-in user" do
+      user = FactoryBot.create(:user, :unsubscribed)
+      login_user user
+
+      expect(user.newsletter_subscription).to be_nil
+
+      expect {
+        post subscribe_users_newsletter_subscriptions_path
+      }.to change(NewsletterSubscription, :count).by(1)
+
+      expect(response).to redirect_to(root_path)
+      expect(flash[:notice]).to eq("Success!")
+
+      expect(user.reload.newsletter_subscription).to be_present
+    end
+
+    it "sends confirmation email" do
+      user = FactoryBot.create(:user, :unconfirmed, :unsubscribed)
+      login_user user
+
+      post subscribe_users_newsletter_subscriptions_path
+
+      expect(user.reload.newsletter_subscription).to be_present
+
+      perform_enqueued_jobs_and_subsequently_enqueued_jobs
+
+      mail = find_mail_to(user.email)
+
+      expect(mail.subject).to eq "Confirm your email address"
+    end
+
+    it "quietly succeeds for already subscribed user" do
+      user = FactoryBot.create(:user, :subscribed)
+      login_user user
+
+      expect(user.newsletter_subscription).to be_present
+
+      expect {
+        post subscribe_users_newsletter_subscriptions_path
+      }.not_to change(NewsletterSubscription, :count)
+
+      expect(response).to redirect_to(root_path)
+      expect(flash[:notice]).to eq("Success!")
+
+      expect(user.reload.newsletter_subscription).to be_present
+    end
+
+    it "disallows for unauthenticated user" do
+      expect {
+        post subscribe_users_newsletter_subscriptions_path
+      }.not_to change(NewsletterSubscription, :count)
+
+      expect(response).to have_http_status(:not_found)
+    end
+  end
+
   describe "POST unsubscribe" do
     it "unsubscribes a user with an existing subscription and unsubscribe token via GET" do
       user = FactoryBot.create(:user, :subscribed)