Merge branch 'master' into docker-travis

11 files changed, 358 insertions, 86 deletions

diff --git a/views/emails/addeventattendee.handlebars b/views/emails/addeventattendee.handlebars
new file mode 100644
index 0000000..f49c790
--- /dev/null
+++ b/views/emails/addeventattendee.handlebars
@@ -0,0 +1,7 @@
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">You just marked yourself as attending an event on {{siteName}}. Thank you! We'll send you another email if there are any updates to the event. Your email will be automatically removed from the database once the event finishes.</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Follow this link to open the event page any time: <a href="https://{{domain}}/{{eventID}}">https://{{domain}}/{{eventID}}</a></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Love,</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">{{siteName}}</p>
+<hr/>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"><strong>Hold up - I have no idea what this email is about!</strong></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">If you didn't mark yourself as attending an event on {{siteName}}, someone may have accidentally typed your email instead of theirs. Don't worry - there isn't anything you need to do. Your email will be removed from the system when the event finishes.</p>
diff --git a/views/emails/addeventcomment.handlebars b/views/emails/addeventcomment.handlebars
new file mode 100644
index 0000000..8ab7ec1
--- /dev/null
+++ b/views/emails/addeventcomment.handlebars
@@ -0,0 +1,7 @@
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"><strong>{{commentAuthor}}</strong> has just posted a comment on an event you're attending on {{siteName}}.</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Click here to see the comment: <a href="https://{{domain}}/{{eventID}}">https://{{domain}}/{{eventID}}</a></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Love,</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">{{siteName}}</p>
+<hr/>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"><strong>Hold up - I have no idea what this email is about!</strong></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">If you didn't mark yourself as attending an event on {{siteName}}, someone may have accidentally typed your email instead of theirs. Don't worry - there isn't anything you need to do. Your email will be removed from the system when the event finishes.</p>
diff --git a/views/emails/createevent.handlebars b/views/emails/createevent.handlebars
new file mode 100644
index 0000000..030ee58
--- /dev/null
+++ b/views/emails/createevent.handlebars
@@ -0,0 +1,19 @@
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Your event has been created!</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Use this link to share it with people: <a href="https://{{domain}}/{{eventID}}">https://{{domain}}/{{eventID}}</a></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Click this button to edit your event. <strong>DO NOT SHARE THIS</strong>, as anyone with this link can edit your event.</p>
+
+<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
+  <tbody>
+    <tr>
+      <td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
+        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
+          <tbody>
+            <tr>
+              <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #28a745; border-radius: 5px; text-align: center;"> <a href="https://{{domain}}/{{eventID}}?e={{editToken}}" target="_blank" style="display: inline-block; color: #ffffff; background-color: #28a745; border: solid 1px #28a745; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #28a745;">Edit Your Event</a> </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/views/emails/createeventgroup.handlebars b/views/emails/createeventgroup.handlebars
new file mode 100644
index 0000000..3f03345
--- /dev/null
+++ b/views/emails/createeventgroup.handlebars
@@ -0,0 +1,27 @@
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">You just created a new event group on {{siteName}}! Thanks a bunch - we're delighted to have you.</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">You can edit your event group by clicking the button below, or just following this link: <a href="https://{{domain}}/group/{{eventGroupID}}?e={{editToken}}">https://{{domain}}/{{eventGroupID}}?e={{editToken}}</a></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">To add events to this group (whether brand new events or ones you've already made), click the 'This event is part of an event group' checkbox. You will need to copy the following two codes into the dark grey box which opens:</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"><strong>Event group ID</strong>: {{eventGroupID}}</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"><strong>Event group secret editing code</strong>: {{editToken}}</p>
+<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
+  <tbody>
+    <tr>
+      <td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
+        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
+          <tbody>
+            <tr>
+              <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #28a745; border-radius: 5px; text-align: center;"> <a href="https://{{domain}}/group/{{eventGroupID}}?e={{editToken}}" target="_blank" style="display: inline-block; color: #ffffff; background-color: #28a745; border: solid 1px #28a745; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #28a745;">Edit event group</a> </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">To let others know about your event group, send them this link: <a href="https://{{domain}}/group/{{eventGroupID}}?e={{editToken}}">https://{{domain}}/{{eventGroupID}}</a></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">And that's it - have a great day!</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Love,</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">{{siteName}}</p>
+<hr/>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"><strong>Hold up - I have no idea what this email is about!</strong></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">If you didn't make an event group on {{siteName}}, someone may have accidentally typed your email instead of theirs when they were making an event. Don't worry - there isn't anything you need to do. Your email will be removed from the system when the event finishes, and if you're still worried, just click on the edit link above and delete that event group, which removes your email from the system as well.</p>
diff --git a/views/emails/deleteevent.handlebars b/views/emails/deleteevent.handlebars
new file mode 100644
index 0000000..5a3670c
--- /dev/null
+++ b/views/emails/deleteevent.handlebars
@@ -0,0 +1,4 @@
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">The {{eventName}} event you're attending on {{siteName}} was just deleted by its creator.</p>
+<hr/>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"><strong>Hold up - I have no idea what this email is about!</strong></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">If you didn't mark yourself as attending an event on {{siteName}}, someone may have accidentally typed your email instead of theirs. Don't worry - that event, and your email, is deleted from the system now.</p>
diff --git a/views/emails/editevent.handlebars b/views/emails/editevent.handlebars
new file mode 100644
index 0000000..ddb9885
--- /dev/null
+++ b/views/emails/editevent.handlebars
@@ -0,0 +1,8 @@
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">An event you're attending on {{siteName}} has just been edited.</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">{{{diffText}}}</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Click here to see the event: <a href="https://{{domain}}/{{eventID}}">https://{{domain}}/{{eventID}}</a></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Love,</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">{{siteName}}</p>
+<hr/>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"><strong>Hold up - I have no idea what this email is about!</strong></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">If you didn't mark yourself as attending an event on {{siteName}}, someone may have accidentally typed your email instead of theirs. Don't worry - there isn't anything you need to do. Your email will be removed from the system when the event finishes.</p>
diff --git a/views/emails/removeeventattendee.handlebars b/views/emails/removeeventattendee.handlebars
new file mode 100644
index 0000000..66ca858
--- /dev/null
+++ b/views/emails/removeeventattendee.handlebars
@@ -0,0 +1,4 @@
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">You have been removed from the event {{eventName}} on {{siteName}} by the organizer of the event.</p>
+<hr/>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"><strong>Hold up - I have no idea what this email is about!</strong></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">If you didn't mark yourself as attending an event on {{siteName}}, someone may have accidentally typed your email instead of theirs. Don't worry - you won't receive any more of these emails for this event, and your email has been removed from the database.</p>
diff --git a/views/emails/unattendevent.handlebars b/views/emails/unattendevent.handlebars
new file mode 100644
index 0000000..62dac8a
--- /dev/null
+++ b/views/emails/unattendevent.handlebars
@@ -0,0 +1,8 @@
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">You just removed yourself from an event on {{siteName}}. You will no longer receive update emails for this event.</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">If you didn't mean to do this, someone else who knows your email removed you from the event.</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Follow this link to open the event page any time: <a href="https://{{domain}}/{{eventID}}">https://{{domain}}/{{eventID}}</a></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Love,</p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">{{siteName}}</p>
+<hr/>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"><strong>Hold up - I have no idea what this email is about!</strong></p>
+<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">If you didn't mark yourself as attending an event on {{siteName}}, someone may have accidentally typed your email instead of theirs, then removed it. Don't worry - you won't receive any more emails linked to this event.</p>
diff --git a/views/event.handlebars b/views/event.handlebars
index 4d0cf28..842239f 100755
--- a/views/event.handlebars
+++ b/views/event.handlebars
@@ -8,82 +8,92 @@
 		<h3 id="eventName">{{eventData.name}}</h3>
 	</div>
 	{{#if editingEnabled}}
-	<div class="col-lg-2 ml-2 edit-buttons">
+	<div class="col-lg-3 ml-2 edit-buttons">
 		<div class="btn-group" role="group" aria-label="Event controls">
-			<button type="button" id="editEvent" class="btn btn-success" data-toggle="modal" data-target="#editModal" {{#if eventHasConcluded}}disabled{{/if}}><i class="fas fa-edit"></i></button>
-			<button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i></button>
+			<button type="button" id="editEvent" class="btn btn-success" data-toggle="modal" data-target="#editModal" {{#if eventHasConcluded}}disabled{{/if}}><i class="fas fa-edit"></i> Edit</button>
+			<button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i> Delete</button>
 		</div>
 	</div>
 	{{/if}}
 </div>
-<div class="card mt-4 mb-4">
-  <div class="card-body">
-  	<ul class="fa-ul eventInformation">
-			<li>
-				<span class="fa-li">
-					<i class="fas fa-map-marker-alt"></i>
-				</span>
-				{{eventData.location}}<br />
-				<a target="_blank" href="http://maps.google.com/?q={{parsedLocation}}" class="eventInformationAction btn btn-outline-secondary btn-sm">
+<div class="container my-4 pr-0">
+	<div class="row">
+		<div class="col-lg-9 card p-0">
+			<div class="card-body">
+				<ul class="fa-ul eventInformation">
+					<li>
+						<span class="fa-li">
+							<i class="fas fa-map-marker-alt"></i>
+						</span>
+						{{eventData.location}}
+					</li>
+					<li>
+						<span class="fa-li">
+							<i class="fas fa-fw fa-calendar-day"></i>
+						</span>
+						{{{displayDate}}}
+						<br>
+						<span class="text-muted">
+							{{#if eventHasBegun}}{{#unless eventHasConcluded}}Started {{else}}Ended {{/unless}}{{/if}}{{fromNow}}
+						</span>
+					</li>
+					{{#if eventHasHost}}
+						<li>
+							<span class="fa-li">
+								<i class="fas fa-fw fa-user-circle"></i>
+							</span>
+							<span class="text-muted">Hosted by</span> {{eventData.hostName}}
+						</li>
+					{{/if}}
+					{{#if eventData.eventGroup}}
+						<li>
+							<span class="fa-li">
+								<i class="fas fa-fw fa-calendar-alt"></i>
+							</span>
+							<span class="text-muted">Part of</span> <a href="/group/{{eventData.eventGroup.id}}">{{eventData.eventGroup.name}}</a>
+						</li>
+					{{/if}}
+					{{#if eventData.url}}
+						<li>
+							<span class="fa-li">
+								<i class="fas fa-fw fa-link"></i>
+							</span>
+							<a href="{{eventData.url}}">
+								{{eventData.url}}
+							</a>
+						</li>
+					{{/if}}
+					<li>
+						<span class="fa-li">
+							<i class="fas fa-fw fa-share-square"></i>
+						</span>
+						<a href="https://gath.io/{{eventData.id}}">gath.io/{{eventData.id}}</a>
+						<button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://gath.io/{{eventData.id}}">
+							<i class="fas fa-copy"></i> Copy
+						</button>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div class="col-lg-3" id="eventActions">
+			<aside class="btn-group-vertical d-flex" role="group" aria-label="Event actions">
+				<a href="http://www.google.com/calendar/event?action=TEMPLATE&dates={{parsedStart}}%2F{{parsedEnd}}&text={{escapedName}}&location={{parsedLocation}}&ctz={{timezone}}" class="btn btn-outline-secondary btn-sm">
+					<i class="far fa-calendar-plus"></i> Add to Google Calendar
+				</a>
+				<button type="button" id="exportICS" class="btn btn-outline-secondary btn-sm" data-event-id="{{eventData.id}}">
+					<i class="fas fa-download"></i> Export as ICS
+				</button>
+				<a target="_blank" href="http://maps.google.com/?q={{parsedLocation}}" class="btn btn-outline-secondary btn-sm">
 					<i class="fas fa-map-marked"></i> Show on Google Maps
 				</a>
-				&nbsp;
-				<a target="_blank" href="https://www.openstreetmap.org/search?query={{parsedLocation}}" class="eventInformationAction btn btn-outline-secondary btn-sm">
+				<a target="_blank" href="https://www.openstreetmap.org/search?query={{parsedLocation}}" class="btn btn-outline-secondary btn-sm">
 					<i class="fas fa-map-marked"></i> Show on OpenStreetMap
 				</a>
-			</li>
-			<li>
-				<span class="fa-li">
-					<i class="fas fa-fw fa-calendar-day"></i>
-				</span>
-				{{{displayDate}}}
-				<br>
-				<span class="text-muted">
-					{{#if eventHasBegun}}{{#unless eventHasConcluded}}Started {{else}}Ended {{/unless}}{{/if}}{{fromNow}}
-				</span>
-				<br />
-				<a href="http://www.google.com/calendar/event?action=TEMPLATE&dates={{parsedStart}}%2F{{parsedEnd}}&text={{escapedName}}&location={{parsedLocation}}&ctz={{timezone}}" class="eventInformationAction btn btn-outline-secondary btn-sm">
-					<i class="far fa-calendar-plus"></i> Add to Google Calendar
-				</a>
-			</li>
-			{{#if eventHasHost}}
-				<li>
-					<span class="fa-li">
-						<i class="fas fa-fw fa-user-circle"></i>
-					</span>
-					<span class="text-muted">Hosted by</span> {{eventData.hostName}}
-				</li>
-			{{/if}}
-			{{#if eventData.eventGroup}}
-				<li>
-					<span class="fa-li">
-						<i class="fas fa-fw fa-calendar-alt"></i>
-					</span>
-					<span class="text-muted">Part of</span> <a href="/group/{{eventData.eventGroup.id}}">{{eventData.eventGroup.name}}</a>
-				</li>
-			{{/if}}
-			{{#if eventData.url}}
-				<li>
-					<span class="fa-li">
-						<i class="fas fa-fw fa-link"></i>
-					</span>
-					<a href="{{eventData.url}}">
-						{{eventData.url}}
-					</a>
-				</li>
-			{{/if}}
-			<li>
-				<span class="fa-li">
-					<i class="fas fa-fw fa-share-square"></i>
-				</span>
-				<a href="https://gath.io/{{eventData.id}}">gath.io/{{eventData.id}}</a>
-				<button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://gath.io/{{eventData.id}}">
-					<i class="fas fa-copy"></i> Copy
-				</button>
-			</li>
-  	</ul>
+			</aside>
+		</div>
 	</div>
 </div>
+
 {{#if eventHasConcluded}}
 <div class="alert alert-warning mb-4" role="alert">
   This event has concluded. It can no longer be edited, and will be automatically deleted <span class="daysToDeletion"></span>.
@@ -144,21 +154,26 @@
         </button>
       </div>
       <form id="attendEventForm" action="/attendevent/{{eventData.id}}" method="post">
-			<div class="modal-body">
-				<div class="form-group row">
-					<label for="attendeeName" class="col-sm-2 col-form-label">Your name</label>
-					<div class="form-group col-sm-10">
-						<input type="text" class="form-control" id="attendeeName" name="attendeeName" placeholder="Or an alias, perhaps..." data-validation="required length" data-validation-length="3-30">
-					</div>
+		<div class="modal-body">
+			<div class="form-group">
+				<label for="attendeeName">Your name</label>
+				<div class="form-group">
+					<input type="text" class="form-control" id="attendeeName" name="attendeeName" placeholder="Or an alias, perhaps..." data-validation="required length" data-validation-length="3-30">
 				</div>
-				<div class="form-group row">
-					<label for="attendeeEmail" class="col-sm-2 col-form-label">Your email</label>
-					<div class="form-group col-sm-10">
-						<input type="email" class="form-control" id="attendeeEmail" name="attendeeEmail" placeholder="We won't spam you <3" data-validation="email">
-						<small class="form-text">We'll only use it to send you updates to the event.</small>
-					</div>
+			</div>
+			<div class="form-group">
+				<label for="attendeeEmail">Your email (optional)</label>
+				<p class="form-text small">If you provide your email, you will receive updates to the event.</p>
+				<div class="form-group">
+					<input type="email" class="form-control" id="attendeeEmail" name="attendeeEmail" placeholder="We won't spam you <3" data-validation="email" data-validation-optional="true">
 				</div>
-      </div>
+			</div>
+			<div class="form-group">
+				<label for="removeAttendancePassword">Deletion password</label>
+				<p class="form-text small">You will need this password if you want to remove yourself from the list of event attendees. Write it down now because it will <strong>not be shown again</strong>.</p>
+				<input type="text" class="form-control" readonly id="removeAttendancePassword" name="removeAttendancePassword">
+			</div>
+		</div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         <button type="submit" class="btn btn-primary">Add myself</button>
@@ -179,12 +194,10 @@
       </div>
       <form id="unattendEventForm" action="/unattendevent/{{eventData.id}}" method="post">
 			<div class="modal-body">
-				<div class="form-group row">
-					<label for="attendeeEmail" class="col-sm-2 col-form-label">Your email</label>
-					<div class="form-group col-sm-10">
-						<input type="email" class="form-control" id="attendeeEmail" name="attendeeEmail" placeholder="name@domain.com" data-validation="email" data-validation-optional="true">
-						<small class="form-text">Enter the email you used when signing up for this event.</small>
-					</div>
+				<div class="form-group">
+					<label for="removeAttendancePassword" class="form-label">Your deletion password</label>
+					<p class="form-text small">Lost your password? Get in touch with the event organiser.</p>
+					<input type="text" class="form-control" id="removeAttendancePassword" name="removeAttendancePassword">
 				</div>
       </div>
       <div class="modal-footer">
@@ -327,6 +340,7 @@
 
 {{#unless eventHasConcluded}}
 <script type="text/javascript" src="/js/generate-timezones.js"></script>
+<script src='/js/niceware.js'></script>
 {{/unless}}
 <script>
 	$.validate({
@@ -362,7 +376,6 @@
 		dateTimeSeparator: ', '
 	});
 	$("#timezone").val('{{eventData.timezone}}').trigger('change');
-	console.log('{{eventData.timezone}}')
 	{{/unless}}
 	{{/if}}
 	$(".commentTimestamp").html(function(){
@@ -375,6 +388,29 @@
 	})
 	$(document).ready(function() {
 
+		// From https://davidwalsh.name/javascript-download
+		function downloadFile(data, fileName, type="text/plain") {
+			// Create an invisible A element
+			const a = document.createElement("a");
+			a.style.display = "none";
+			document.body.appendChild(a);
+
+			// Set the HREF to a Blob representation of the data to be downloaded
+			a.href = window.URL.createObjectURL(
+				new Blob([data], { type })
+			);
+
+			// Use download attribute to set set desired file name
+			a.setAttribute("download", fileName);
+
+			// Trigger the download by simulating click
+			a.click();
+
+			// Cleanup
+			window.URL.revokeObjectURL(a.href);
+			document.body.removeChild(a);
+		}
+
 		$.uploadPreview({
 			input_field: "#image-upload",
 			preview_box: "#image-preview",
@@ -394,6 +430,12 @@
 		{{/if}}
 		new ClipboardJS('#copyEventLink');
 		autosize($('textarea'));
+		$("#exportICS").click(function(){
+			let eventID = $(this).attr('data-event-id');
+			$.get('/exportevent/' + eventID, function(response) {
+				downloadFile(response, eventID + '.ics');
+			})
+		})
 		$("#copyEventLink").click(function(){
 			$(this).html('<i class="fas fa-copy"></i> Copied!');
 			setTimeout(function(){ $("#copyEventLink").html('<i class="fas fa-copy"></i> Copy');}, 5000);
@@ -435,6 +477,11 @@
                 $("#eventGroupEditToken").removeAttr("data-validation").attr("data-validation-optional","true").val("");
             }
         });
+		$('#attendModal').on('show.bs.modal', function (event) {
+			var modal = $(this);
+			const passphrase = window.niceware.generatePassphrase(6).join('-');
+			modal.find('#removeAttendancePassword').val(passphrase);
+		});
 	});
 
 	</script>
diff --git a/views/layouts/email.handlebars b/views/layouts/email.handlebars
new file mode 100644
index 0000000..6158ddb
--- /dev/null
+++ b/views/layouts/email.handlebars
@@ -0,0 +1,126 @@
+<!doctype html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>{{ subject }}</title>
+  <style>
+  /* -------------------------------------
+      INLINED WITH htmlemail.io/inline
+  ------------------------------------- */
+  /* -------------------------------------
+      RESPONSIVE AND MOBILE FRIENDLY STYLES
+  ------------------------------------- */
+  @media only screen and (max-width: 620px) {
+    table[class=body] h1 {
+      font-size: 28px !important;
+      margin-bottom: 10px !important;
+    }
+    table[class=body] p,
+          table[class=body] ul,
+          table[class=body] ol,
+          table[class=body] td,
+          table[class=body] span,
+          table[class=body] a {
+      font-size: 16px !important;
+    }
+    table[class=body] .wrapper,
+          table[class=body] .article {
+      padding: 10px !important;
+    }
+    table[class=body] .content {
+      padding: 0 !important;
+    }
+    table[class=body] .container {
+      padding: 0 !important;
+      width: 100% !important;
+    }
+    table[class=body] .main {
+      border-left-width: 0 !important;
+      border-radius: 0 !important;
+      border-right-width: 0 !important;
+    }
+    table[class=body] .btn table {
+      width: 100% !important;
+    }
+    table[class=body] .btn a {
+      width: 100% !important;
+    }
+    table[class=body] .img-responsive {
+      height: auto !important;
+      max-width: 100% !important;
+      width: auto !important;
+    }
+  }
+  /* -------------------------------------
+      PRESERVE THESE STYLES IN THE HEAD
+  ------------------------------------- */
+  @media all {
+    .ExternalClass {
+      width: 100%;
+    }
+    .ExternalClass,
+          .ExternalClass p,
+          .ExternalClass span,
+          .ExternalClass font,
+          .ExternalClass td,
+          .ExternalClass div {
+      line-height: 100%;
+    }
+    .apple-link a {
+      color: inherit !important;
+      font-family: inherit !important;
+      font-size: inherit !important;
+      font-weight: inherit !important;
+      line-height: inherit !important;
+      text-decoration: none !important;
+    }
+    #MessageViewBody a {
+      color: inherit;
+      text-decoration: none;
+      font-size: inherit;
+      font-family: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+    }
+    .btn-primary table td:hover {
+      background-color: #34495e !important;
+    }
+    .btn-primary a:hover {
+      background-color: #34495e !important;
+      border-color: #34495e !important;
+    }
+  }
+  </style>
+</head>
+<body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
+  <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
+    <tr>
+      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
+      <td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
+        <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
+            <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">
+
+              <!-- START MAIN CONTENT AREA -->
+              <tr>
+                <td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
+                  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
+                    <tr>
+                      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
+                        {{{ body }}}
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+
+            <!-- END MAIN CONTENT AREA -->
+            </table>
+          <!-- END CENTERED WHITE AREA -->
+        </div>
+      </td>
+      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
+    </tr>
+  </table>
+</body>
+</html>
diff --git a/views/partials/editeventmodal.handlebars b/views/partials/editeventmodal.handlebars
index ce3cdcd..2227473 100644
--- a/views/partials/editeventmodal.handlebars
+++ b/views/partials/editeventmodal.handlebars
@@ -62,6 +62,9 @@
 							<input type="file" name="imageUpload" id="image-upload" />
 						</div>
 						<small class="form-text">Recommended dimensions (w x h): 920px by 300px.</small>
+						{{#if eventData.image}}
+							<button type="button" class="btn btn-danger" id="deleteImage">Delete image</button>
+						{{/if}}
 					</div>
 					<div class="form-group">
 						<div class="mb-2">Options</div>
@@ -138,4 +141,16 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
+
+<script>
+$('#deleteImage').click(function() {
+	$.post('/deleteimage/{{eventData.id}}/{{eventData.editToken}}', function(response) {
+		if (response === "Success") {
+			location.reload();
+		} else {
+			alert(response);
+		}
+	});
+})
+</script>
\ No newline at end of file