From 697204fe7befb9581cab4b67cfc9f72a416e34e7 Mon Sep 17 00:00:00 2001
From: Bastard Operator <bofh@nogafam.es>
Date: Sun, 28 Nov 2021 19:25:28 +0100
Subject: [PATCH] Added logout button on profile menu

---
 public/css/custom.css    |  2 +-
 public/img/sv-logout.svg |  5 +++++
 src/views/web/modal.php  | 23 +++++++++++++++++++++--
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 public/img/sv-logout.svg

diff --git a/public/css/custom.css b/public/css/custom.css
index 73e7e8b..6bbae33 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -42,7 +42,7 @@ a.btn-img .img {
   position: relative;
   top: -2px;
 }
-@media (max-width: 370px) {
+@media (max-width: 400px) {
   a.btn-img .img { margin: 0px !important; }
   a.btn-img .text { display: none !important; }
 }
diff --git a/public/img/sv-logout.svg b/public/img/sv-logout.svg
new file mode 100644
index 0000000..1b3c68d
--- /dev/null
+++ b/public/img/sv-logout.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#7e7e7e" d="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z" />
+</svg>
diff --git a/src/views/web/modal.php b/src/views/web/modal.php
index 01871d5..9669f1c 100644
--- a/src/views/web/modal.php
+++ b/src/views/web/modal.php
@@ -12,9 +12,14 @@
   margin: auto;
   background: #fff;
   border-radius: 2px;
-  padding: 1em;
+  padding: 2em;
   height: max-content;
 }
+@media (max-width: 350px) {
+  #modals > div {
+    padding: 2em 1em !important;
+  }
+}
 </style>
 
 <div id="modals" onclick="MODAL.hide(this)"
@@ -45,6 +50,20 @@
 				<div class="img"><img src="/img/sv-account-circle.svg"/></div>
 				<span class="text"><?php l('modals.profile', 'Profile') ?></span>
 			</a>
+			<a class="btn-img" href="javascript:MODAL.show('logout')">
+				<div class="img" style="margin:0">
+					<img src="/img/sv-logout.svg"/></div>
+			</a>
+		</div>
+	</div>
+	<div id="logout">
+		<p><?php l('modals.logout_confirm', 'Are you sure you want to end your current session?') ?></p>
+		<div style="display:flex">
+			<a class="button button-primary u-full-width" href="javascript:MODAL.hide()">
+				<?php l('modals.cancel', 'Cancel') ?></a>
+			<div style="width:1em"></div>
+			<a class="button u-full-width" href="/logout/">
+				<?php l('modals.yes', 'Yes') ?></a>
 		</div>
 	</div>
 
@@ -67,7 +86,7 @@ const MODAL = {
 				anchors[i].setAttribute('onclick', 'event.stopPropagation();');
 		}
 	},
-	hide: function(el) {
+	hide: function() {
 		document.querySelector('#modals').style = 'display:none';
 		document.querySelector('#modals').className = '';
 	}