From ff10c473e03a1cbd4621206b9b9144c8957e1ef8 Mon Sep 17 00:00:00 2001
From: Max Pozdeev <maxpozdeev@gmail.com>
Date: Tue, 22 Feb 2022 23:38:32 +0300
Subject: [PATCH] * authentication form in not popup anymore

---
 src/content/themes/default/index.php | 24 +++++++++++++-------
 src/content/themes/default/style.css | 25 +++++++++++++--------
 src/includes/mytinytodo.js           | 33 ++++++++++------------------
 3 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/content/themes/default/index.php b/src/content/themes/default/index.php
index bf36eca..efb3e4b 100644
--- a/src/content/themes/default/index.php
+++ b/src/content/themes/default/index.php
@@ -53,8 +53,8 @@ $().ready(function(){
     </span>
     <span id="bar_auth">
       <span id="bar_public" style="display:none"><?php _e('public_tasks');?> |</span>
-      <a href="#login" id="bar_login" class="nodecor"><u><?php _e('a_login');?></u> <span class="arrdown"></span></a>
-      <a href="#logout" id="bar_logout"><?php _e('a_logout');?></a>
+      <a href="#login" id="login_btn"><?php _e('a_login');?></a>
+      <a href="#logout" id="logout_btn"><?php _e('a_logout');?></a>
     </span>
   </div>
   </div>
@@ -180,13 +180,21 @@ $().ready(function(){
 </div>
 
 
-<div id="authform" style="display:none">
-<form id="login_form">
-  <div class="h"><?php _e('password');?></div>
-  <div><input type="password" name="password" id="password" /></div>
-  <div><input type="submit" value="<?php _e('btn_login');?>" /></div>
-</form>
+<!-- Page: Login -->
+<div id="page_login" style="display:none">
+  <div id="authform">
+    <form id="login_form">
+    <div class="h"><?php _e('password');?></div>
+    <div><input type="password" name="password" id="password" /></div>
+    <div class="form-bottom-buttons"><input type="submit" value="<?php _e('btn_login');?>" /></div>
+    </form>
+  </div>
+  <div>
+    <a href="#" class="mtt-back-button"><?php _e('cancel');?></a>
+  </div>
 </div>
+<!-- end of page_login -->
+
 
 <div id="priopopup" style="display:none">
   <span class="prio-neg prio-neg-1">&minus;1</span>
diff --git a/src/content/themes/default/style.css b/src/content/themes/default/style.css
index e303ad8..b4d0884 100644
--- a/src/content/themes/default/style.css
+++ b/src/content/themes/default/style.css
@@ -163,27 +163,34 @@ a { color: var(--color-link); cursor:pointer; text-decoration:underline; }
   text-align:right;
   white-space: nowrap;
 }
-.nodecor { text-decoration:none; }
+
 #bar_auth::before { content:'\00a0| '; } /* &nbsp; = \00a0 */
 #bar_logout { display:none; }
 #mtt_body.no-need-auth #bar_auth { display:none; }
 #mtt_body.readonly .need-owner { display:none; }
 #mtt_body.readonly #bar_auth::before { display:none; }
 
+#page_login {
+  max-width: 250px;
+  margin:0 auto; /* center */
+  margin-top: 100px;
+}
+#page_login > div {
+  padding: 10px;
+}
 #authform {
-  overflow: hidden;
-  z-index:100;
   background-color: var(--color-menu);
-  border:1px solid var(--color-menu-border);
-  border-radius:2px;
-  padding:10px;
-  min-width:160px;
-  box-shadow: var(--color-popup-shadow);
+  border: 1px solid var(--color-menu-border);
+  border-radius: 5px;
 }
 #authform div { padding:2px 0px; }
 #authform div.h { font-weight:bold; }
 #authform input { padding:3px; border:1px solid var(--color-border-default); border-radius:2px; }
+#authform input[type=password] { width: 100%; box-sizing: border-box; }
 #authform input[type="submit"] { padding:4px; border-radius:3px; background-color: var(--color-submit); }
+#authform .form-bottom-buttons {
+  padding-top: 10px;
+}
 
 #msg .msg-text {  font-weight:bold; cursor:pointer; }
 #msg .msg-details {
@@ -911,7 +918,7 @@ li.mtt-item-hidden { display:none; }
     text-overflow: ellipsis; /* min-width of parent flex is required for this */
   }
 
-  #bar_login, #bar_logout { padding-right:1px; }
+  #login_btn, #logout_btn { padding-right:1px; }
 
   .mtt-img-button { padding:4px; }
   .mtt-menu-button { padding:4px; }
diff --git a/src/includes/mytinytodo.js b/src/includes/mytinytodo.js
index ec7bd6f..f8094d0 100644
--- a/src/includes/mytinytodo.js
+++ b/src/includes/mytinytodo.js
@@ -560,13 +560,13 @@ var mytinytodo = window.mytinytodo = _mtt = {
 		});
 
 
-		// Authorization
-		$('#bar_login').click(function(){
-			showAuth(this);
+		// Authentication
+		$('#login_btn').click(function(){
+			showLogin();
 			return false;
 		});
 
-		$('#bar_logout').click(function(){
+		$('#logout_btn').click(function(){
 			logout();
 			return false;
 		});
@@ -2450,10 +2450,10 @@ function updateAccessStatus()
 	if(flag.needAuth)
 	{
 		if (flag.isLogged) {
-			showhide( $("#bar_logout"), $("#bar_login") );
+			showhide( $("#logout_btn"), $("#login_btn") );
 		}
 		else {
-			showhide( $("#bar_login"), $("#bar_logout") );
+			showhide( $("#login_btn"), $("#logout_btn") );
 		}
 	}
 	else {
@@ -2476,23 +2476,13 @@ function updateAccessStatus()
 	$('#page_ajax').hide();
 }
 
-function showAuth(el)
+function showLogin()
 {
-	var w = $('#authform');
-	if(w.css('display') == 'none')
-	{
-		var offset = $(el).offset();
-		w.css({
-			position: 'absolute',
-			top: offset.top + el.offsetHeight + 3,
-			left: offset.left + el.offsetWidth - w.outerWidth()
-		}).show();
-		$('#password').focus();
-	}
-	else {
-		w.hide();
-		el.blur();
+	if (_mtt.pages.current && _mtt.pages.current.page == 'login') {
+		return false;
 	}
+	_mtt.pageSet('login', '');
+	$('#password').val('').focus();
 }
 
 function doAuth(form)
@@ -2509,7 +2499,6 @@ function doAuth(form)
 			$('#password').focus();
 		}
 	}, 'json');
-	$('#authform').hide();
 }
 
 function logout()