Use modal dialogs for confirmations

sstreasury/jinja2/sstreasury/budget_view.html

@@ -28,20 +28,20 @@
 		
 		{% if is_latest %}
 			{% if revision.can_submit(request.user) %}
-				<button class="ui mini labeled primary icon button" type="submit" name="action" value="Submit" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to submit this budget for Treasury approval? You will not be able to make any additional changes without withdrawing the budget.');"><i class="paper plane icon"></i> Submit</button>
+				<button class="ui mini labeled primary icon button" data-action="Submit" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="paper plane icon"></i> Submit</button>
 			{% endif %}
 			{% if revision.can_endorse(request.user) %}
-				<button class="ui mini labeled positive icon button" type="submit" name="action" value="Endorse" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to give this budget Treasury endorsement?');"><i class="check icon"></i> Endorse</button>
+				<button class="ui mini labeled positive icon button" data-action="Endorse" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="check icon"></i> Endorse</button>
 				
-				<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="Return" onclick="return confirm('Are you sure you want to refuse this budget Treasury endorsement and return it for re-drafting?');"><i class="undo icon"></i> Return for re-drafting</button>
+				<button class="ui mini labeled basic negative icon button" data-action="Return" onclick="return uiConfirm(this);"><i class="undo icon"></i> Return for re-drafting</button>
 			{% endif %}
 			{% if revision.can_approve(request.user) %}
-				<button class="ui mini labeled positive icon button" type="submit" name="action" value="Approve" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to mark this budget as committee-approved?');"><i class="check icon"></i> Approve</button>
+				<button class="ui mini labeled positive icon button" data-action="Approve" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="check icon"></i> Approve</button>
 				
-				<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="CmteReturn" onclick="return confirm('Are you sure you want to refuse this budget committee approval and return it for re-drafting?');"><i class="undo icon"></i> Return for re-drafting</button>
+				<button class="ui mini labeled basic negative icon button" data-action="CmteReturn" onclick="return uiConfirm(this);"><i class="undo icon"></i> Return for re-drafting</button>
 			{% endif %}
 			{% if revision.can_withdraw(request.user) %}
-				<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="Withdraw" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to withdraw this budget from being considered for approval? The budget will be reverted to a draft.');"><i class="undo icon"></i> Withdraw</button>
+				<button class="ui mini labeled basic negative icon button" data-action="Withdraw" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="undo icon"></i> Withdraw</button>
 			{% endif %}
 			
 			{% if revision.can_edit(request.user) %}
@@ -56,6 +56,7 @@
 				</div>
 			{% endif %}
 			
+			<input type="hidden" name="action" value="">
 			<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
 		{% else %}
 			<a class="ui mini labeled right floated icon button" href="{{ url('budget_print', kwargs={'id': revision.budget.id}) }}?revision={{ revision.id }}" target="_blank"><i class="print icon"></i> Print</a>
@@ -148,17 +149,18 @@
 			<div class="required field">
 				<textarea rows="4" name="comment"></textarea>
 			</div>
+			<input type="hidden" name="action">
 			<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
-			<input class="ui primary button" type="submit" name="action" value="Comment">
+			<button class="ui primary button" data-action="Comment" onclick="return uiSubmit(this);">Comment</button>
 			
 			{% if revision.state == import('sstreasury.models').BudgetState.AWAIT_REVIEW.value and request.user.groups.filter(name='Treasury').exists() %}
-				<button class="ui right floated labeled basic negative icon button" type="submit" name="action" value="Comment,Return" onclick="return confirm('Are you sure you want to refuse this budget Treasury endorsement and return it for re-drafting?');"><i class="undo icon"></i> Comment and return for re-drafting</button>
+				<button class="ui right floated labeled basic negative icon button" data-action="Comment,Return" onclick="return uiConfirm(this);"><i class="undo icon"></i> Comment and return for re-drafting</button>
 				
-				<button class="ui right floated labeled positive icon button" type="submit" name="action" value="Comment,Endorse" onclick="return confirm('Are you sure you want to give this budget Treasury endorsement?');"><i class="check icon"></i> Comment and endorse</button>
+				<button class="ui right floated labeled positive icon button" data-action="Comment,Endorse" onclick="return uiConfirm(this);"><i class="check icon"></i> Comment and endorse</button>
 			{% elif revision.state != import('sstreasury.models').BudgetState.APPROVED.value and request.user.groups.filter(name='Secretary').exists() %}
-				<button class="ui right floated labeled basic negative icon button" type="submit" name="action" value="Comment,CmteReturn" onclick="return confirm('Are you sure you want to refuse this budget committee approval and return it for re-drafting?');"><i class="undo icon"></i> Comment and return for re-drafting</button>
+				<button class="ui right floated labeled basic negative icon button" data-action="Comment,CmteReturn" onclick="return uiConfirm(this);"><i class="undo icon"></i> Comment and return for re-drafting</button>
 				
-				<button class="ui right floated labeled positive icon button" type="submit" name="action" value="Comment,Approve" onclick="return confirm('Are you sure you want to mark this budget as committee-approved?');"><i class="check icon"></i> Comment and approve</button>
+				<button class="ui right floated labeled positive icon button" data-action="Comment,Approve" onclick="return uiConfirm(this);"><i class="check icon"></i> Comment and approve</button>
 			{% endif %}
 		</form>
 		
@@ -209,6 +211,43 @@
 			{% endfor %}
 		</div>
 	{% endif %}
+	
+	<div class="ui modal">
+		<div class="content" data-action="Submit">
+			<p>Are you sure you want to submit this budget for Treasury review? You will not be able to make any additional changes without withdrawing the budget.</p>
+		</div>
+		<div class="content" data-action="Endorse">
+			<p>Are you sure you want to give this budget Treasury endorsement?</p>
+		</div>
+		<div class="content" data-action="Comment,Endorse">
+			<p>Are you sure you want to give this budget Treasury endorsement?</p>
+		</div>
+		<div class="content" data-action="Return">
+			<p>Are you sure you want to refuse this budget Treasury endorsement and return it for re-drafting?</p>
+		</div>
+		<div class="content" data-action="Comment,Return">
+			<p>Are you sure you want to refuse this budget Treasury endorsement and return it for re-drafting?</p>
+		</div>
+		<div class="content" data-action="Approve">
+			<p>Are you sure you want to mark this budget as committee-approved?</p>
+		</div>
+		<div class="content" data-action="Comment,Approve">
+			<p>Are you sure you want to mark this budget as committee-approved?</p>
+		</div>
+		<div class="content" data-action="CmteReturn">
+			<p>Are you sure you want to refuse this budget committee approval and return it for re-drafting?</p>
+		</div>
+		<div class="content" data-action="Comment,CmteReturn">
+			<p>Are you sure you want to refuse this budget committee approval and return it for re-drafting?</p>
+		</div>
+		<div class="content" data-action="Withdraw">
+			<p>Are you sure you want to withdraw this budget from being considered for approval? The budget will be reverted to a draft.</p>
+		</div>
+		<div class="actions">
+			<div class="ui primary approve button">Continue</div>
+			<div class="ui cancel button">Cancel</div>
+		</div>
+	</div>
 {% endblock %}
 
 {% block head %}
@@ -241,6 +280,27 @@
 {% block script %}
 	{{ super() }}
 	
+	<script>
+		function uiSubmit(button) {
+			button.form.elements['action'].value = button.dataset['action'];
+			button.form.submit();
+			return false;
+		}
+		
+		function uiConfirm(button) {
+			$('.ui.modal .content').hide();
+			$('.ui.modal .content').filter('[data-action="' + button.dataset['action'] + '"]').show();
+			$('.ui.modal').modal({
+				closable: false,
+				onApprove: function() {
+					uiSubmit(button);
+				}
+			}).modal('show');
+			
+			return false;
+		}
+	</script>
+	
 	<script src="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.js" integrity="sha256-lzjMTpg04xOdI+MJdjBst98bVI6qHToLyVodu3EywFU=" crossorigin="anonymous"></script>
 	
 	<script src="{{ static('sstreasury/budget.js') }}"></script>

sstreasury/jinja2/sstreasury/claim_edit.html

@@ -105,12 +105,6 @@
 		<input type="hidden" name="items" id="items_input">
 		<div class="ui divider"></div>
 		<div class="ui error message"></div>
-		<div>
-			<h2 class="ui header">Declaration</h2>
-			<p>By submitting this form for processing with my MUMUS account, I agree that MUMUS Inc. will accept this communication as containing my signature for the purposes of the Electronic Transactions Acts. I certify that the information on this form is true and accurate. I acknowledge that incorrect information may result in the forfeiture of this reimbursement.</p>
-			<p>Under the Pay As You Go legislation and guidelines produced by the Australian Taxation Office, I state that the supply to MUMUS Inc. described on this form is wholly of a private or domestic nature for me, I have no reasonable expectation of profit or gain from the activity undertaken, and I consider that I do not meet the definition of enterprise for tax purposes. Therefore, I do not need to quote an Australian Business Number and MUMUS Inc. is not required to withhold tax from my payment.</p>
-		</div>
-		<div class="ui divider"></div>
 		<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
 		<input class="ui primary button" type="submit" name='submit' value="Save">
 		<input class="ui button" type="submit" name='submit' value="Save and continue editing">

sstreasury/jinja2/sstreasury/claim_view.html

@@ -27,15 +27,15 @@
 		<span class="ui header">Status: {{ claim.get_state_display() }}</span>
 		
 		{% if claim.can_submit(request.user) %}
-			<button class="ui mini labeled primary icon button" type="submit" name="action" value="Submit" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to submit this claim for Treasury approval? You will not be able to make any additional changes without withdrawing the claim.');"><i class="paper plane icon"></i> Submit</button>
+			<button class="ui mini labeled primary icon button" data-action="Submit" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="paper plane icon"></i> Submit</button>
 		{% endif %}
 		{% if claim.can_approve(request.user) %}
-			<button class="ui mini labeled positive icon button" type="submit" name="action" value="Approve" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to approve this claim?');"><i class="check icon"></i> Approve</button>
+			<button class="ui mini labeled positive icon button" data-action="Approve" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="check icon"></i> Approve</button>
 			
-			<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="Return" onclick="return confirm('Are you sure you want to refuse this claim and return it for re-drafting?');"><i class="undo icon"></i> Return for re-drafting</button>
+			<button class="ui mini labeled basic negative icon button" data-action="Return" onclick="return uiConfirm(this);"><i class="undo icon"></i> Return for re-drafting</button>
 		{% endif %}
 		{% if claim.can_withdraw(request.user) %}
-			<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="Withdraw" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to withdraw this budget from being considered for approval? The budget will be reverted to a draft.');"><i class="undo icon"></i> Withdraw</button>
+			<button class="ui mini labeled basic negative icon button" data-action="Withdraw" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="undo icon"></i> Withdraw</button>
 		{% endif %}
 		
 		{% if claim.can_edit(request.user) %}
@@ -50,6 +50,7 @@
 			</div>
 		{% endif %}
 		
+		<input type="hidden" name="action" value="">
 		<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
 	</form>
 	
@@ -147,13 +148,14 @@
 		<div class="required field">
 			<textarea rows="4" name="comment"></textarea>
 		</div>
+		<input type="hidden" name="action" value="">
 		<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
-		<input class="ui primary button" type="submit" name="action" value="Comment">
+		<button class="ui primary button" data-action="Comment" onclick="return uiSubmit(this);">Comment</button>
 		
 		{% if claim.can_approve(request.user) %}
-			<button class="ui right floated labeled basic negative icon button" type="submit" name="action" value="Comment,Return" onclick="return confirm('Are you sure you want to refuse this claim and return it for re-drafting?');"><i class="undo icon"></i> Comment and return for re-drafting</button>
+			<button class="ui right floated labeled basic negative icon button" data-action="Comment,Return" onclick="return uiConfirm(this);"><i class="undo icon"></i> Comment and return for re-drafting</button>
 			
-			<button class="ui right floated labeled positive icon button" type="submit" name="action" value="Comment,Approve" onclick="return confirm('Are you sure you want to approve this claim?');"><i class="check icon"></i> Comment and approve</button>
+			<button class="ui right floated labeled positive icon button" data-action="Comment,Approve" onclick="return uiConfirm(this);"><i class="check icon"></i> Comment and approve</button>
 		{% endif %}
 	</form>
 	
@@ -203,6 +205,37 @@
 			{% endif %}
 		{% endfor %}
 	</div>
+	
+	<div class="ui modal">
+		<div class="content" data-action="Submit">
+			<p>Are you sure you want to submit this claim for Treasury approval? You will not be able to make any additional changes without withdrawing the claim.</p>
+			
+			<div class="ui segment">
+				<h2 class="ui header">Declaration</h2>
+				<p>By submitting this form for processing with my MUMUS account, I agree that MUMUS Inc. will accept this communication as containing my signature for the purposes of the Electronic Transactions Acts. I certify that the information on this form is true and accurate. I acknowledge that incorrect information may result in the forfeiture of this reimbursement.</p>
+				<p>Under the Pay As You Go legislation and guidelines produced by the Australian Taxation Office, I state that the supply to MUMUS Inc. described on this form is wholly of a private or domestic nature for me, I have no reasonable expectation of profit or gain from the activity undertaken, and I consider that I do not meet the definition of enterprise for tax purposes. Therefore, I do not need to quote an Australian Business Number and MUMUS Inc. is not required to withhold tax from my payment.</p>
+			</div>
+		</div>
+		<div class="content" data-action="Approve">
+			<p>Are you sure you want to approve this claim?</p>
+		</div>
+		<div class="content" data-action="Comment,Approve">
+			<p>Are you sure you want to approve this claim?</p>
+		</div>
+		<div class="content" data-action="Return">
+			<p>Are you sure you want to refuse this claim and return it for re-drafting?</p>
+		</div>
+		<div class="content" data-action="Comment,Return">
+			<p>Are you sure you want to refuse this claim and return it for re-drafting?</p>
+		</div>
+		<div class="content" data-action="Withdraw">
+			<p>Are you sure you want to withdraw this claim from being considered for approval? The budget will be reverted to a draft.</p>
+		</div>
+		<div class="actions">
+			<div class="ui primary approve button">Continue</div>
+			<div class="ui cancel button">Cancel</div>
+		</div>
+	</div>
 {% endblock %}
 
 {% block head %}
@@ -235,6 +268,27 @@
 {% block script %}
 	{{ super() }}
 	
+	<script>
+		function uiSubmit(button) {
+			button.form.elements['action'].value = button.dataset['action'];
+			button.form.submit();
+			return false;
+		}
+		
+		function uiConfirm(button) {
+			$('.ui.modal .content').hide();
+			$('.ui.modal .content').filter('[data-action="' + button.dataset['action'] + '"]').show();
+			$('.ui.modal').modal({
+				closable: false,
+				onApprove: function() {
+					uiSubmit(button);
+				}
+			}).modal('show');
+			
+			return false;
+		}
+	</script>
+	
 	<script src="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.js" integrity="sha256-lzjMTpg04xOdI+MJdjBst98bVI6qHToLyVodu3EywFU=" crossorigin="anonymous"></script>
 	
 	<script src="{{ static('sstreasury/claim.js') }}"></script>