Added per-component subscriptions. Closes #734

resources/assets/js/app.js

@@ -376,6 +376,23 @@ $(function() {
             }
         });
     }
+
+    // Open a modal.
+    $('#subscribe-modal')
+        .on('show.bs.modal', function (event) {
+            var $button = $(event.relatedTarget);
+            var $modal = $(this);
+            $modal.find('#subscribe-modal-id').val($button.data('component-id'));
+        })
+        .on('hidden.bs.modal', function (event) {
+            var $modal = $(this);
+            $modal.find('#subscribe-modal-id').val('');
+        });
+
+    // Focus on any modals.
+    $('.modal').on('shown.bs.modal', function () {
+        $(this).find('input[type=text]').focus();
+    });
 });
 
 function askConfirmation(callback) {

resources/lang/en/cachet.php

@@ -86,6 +86,13 @@ return [
                 'html-preheader' => 'New incident has been reported on :app_name.',
                 'html'           => '<p>New incident has been reported on :app_name.</p><p>Thank you, :app_name</p>',
             ],
+            'component' => [
+                'subject'        => 'Component Status Update',
+                'text'           => 'The component :component_name has seen a status change. The component is now at :component_human_status.\nThank you, :app_name',
+                'html-preheader' => 'Component Update from :app_name',
+                'html'           => '<p>The component :component_name has seen a status change. The component is now at :component_human_status.</p><p>Thank you, :app_name</p>',
+                'tooltip-title'  => 'Subscribe to notifications for :component_name.',
+            ],
         ],
     ],
 
@@ -112,6 +119,16 @@ return [
         'update' => 'There is a newer version of Cachet available. You can learn how to update <a href="https://docs.cachethq.io/docs/updating-cachet">here</a>!',
     ],
 
+    // Modal
+    'modal' => [
+        'close'     => 'Close',
+        'subscribe' => [
+            'title'  => 'Subscribe to component updates?',
+            'body'   => 'Enter your email address to subscribe to updates for this component. If you\'re already subscribed, you\'ll receive emails for this component too.',
+            'button' => 'Subscribe',
+        ],
+    ],
+
     // Other
     'powered_by'      => ':app Status Page is powered by <a href="https://cachethq.io" class="links">Cachet</a>.',
     'about_this_site' => 'About This Site',

resources/views/emails/components/update-html.blade.php

@@ -0,0 +1,16 @@
+@extends('layout.emails')
+
+@section('preheader')
+{!! trans('cachet.subscriber.email.component.html-preheader', ['app_name' => $app_name]) !!}
+@stop
+
+@section('content')
+{!! trans('cachet.subscriber.email.component.html', ['component_name' => $component_name, 'component_human_status' => $component_human_status, 'app_name' => $app_name]) !!}
+
+@if($show_support)
+<p>{!! trans('cachet.powered_by', ['app' => $app_name]) !!}</p>
+@endif
+<p>
+    <small><a href="{{ $unsubscribe_link }}">{!! trans('cachet.subscriber.email.unsubscribe') !!}</a></small>
+</p>
+@stop

resources/views/emails/components/update-text.blade.php

@@ -0,0 +1,7 @@
+{!! trans('cachet.subscriber.email.component.text', ['component_name' => $component_name, 'component_human_status' => $component_human_status, 'app_name' => $app_name]) !!}
+
+@if($show_support)
+{!! trans('cachet.powered_by', ['app' => $app_name]) !!}
+@endif
+
+{!! trans('cachet.subscriber.email.unsubscribe') !!} {{ $unsubscribe_link }}

resources/views/index.blade.php

@@ -56,4 +56,6 @@
     </ul>
 </nav>
 @endif
+
+@include('partials.modals.subscribe')
 @stop

resources/views/partials/component.blade.php

@@ -9,6 +9,10 @@
     <i class="ion-ios-help-outline help-icon" data-toggle="tooltip" data-title="{{ $component->description }}"></i>
     @endif
 
+    @if(subscribers_enabled())
+    <a href="#" data-toggle="modal" data-target="#subscribe-modal" data-component-id="{{ $component->id }}"><i class="ion-ios-email-outline" data-toggle="tooltip" data-title="{{ trans('cachet.subscriber.email.component.tooltip-title', ['component_name' => $component->name]) }}"></i></a>
+    @endif
+
     <div class="pull-right">
         <small class="text-component-{{ $component->status }} {{ $component->status_color }}">{{ $component->human_status }}</small>
     </div>

resources/views/partials/modals/subscribe.blade.php

@@ -0,0 +1,25 @@
+<div class="modal fade" tabindex="-1" role="dialog" id="subscribe-modal">
+    <div class="modal-dialog">
+        <form action="{{ route("subscribe.subscribe", [], false) }}" method="post" class="form">
+            <input type="hidden" name="_token" value="{{ csrf_token() }}">
+            <input type="hidden" name="subscriptions[component_id]" id="subscribe-modal-id" value="">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">{{ trans("cachet.modal.subscribe.title") }}</h4>
+                </div>
+                <div class="modal-body">
+                        <p>{{ trans("cachet.modal.subscribe.body") }}</p>
+                        <div class="form-group">
+                            <input class="form-control" type="email" name="email" placeholder="hello@alt-three.com">
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ trans("cachet.modal.close") }}</button>
+                    <button type="submit" class="btn btn-success">{{ trans("cachet.modal.subscribe.button") }}</button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>