register: move some html out of the code and provide a basic template

4 files changed, 93 insertions, 29 deletions

diff --git a/Zotlabs/Module/Regate.php b/Zotlabs/Module/Regate.php
index 4c7c96284..16b669dfc 100644
--- a/Zotlabs/Module/Regate.php
+++ b/Zotlabs/Module/Regate.php
@@ -252,35 +252,46 @@ class Regate extends \Zotlabs\Web\Controller {
 			return $o;
 		}
 
-		if ( argc() > 1 ) {
-			$did2 = hex2bin( substr( argv(1), 0, -1) );
-			$didx = substr( argv(1), -1 );
-			$deny = argc() > 2 ? argv(2) : '';
-			$deny = preg_match('/^[0-9a-f]{8,8}$/', $deny) ? hex2bin($deny) : false;
-		}
-
-		if ($_SESSION['zar']['msg']) {
-			$o = replace_macros(get_markup_template('plain.tpl'), [
-				'$title'	=> t('Your Registration'),
-				'$now'		=> '',
-				'$infos'	=> $_SESSION['zar']['msg'] . EOL,
+		if ($_SESSION['zar']['delayed']) {
+			$o = replace_macros(get_markup_template('regate_pre.tpl'), [
+				'$title'     => t('Register Verification'),
+				'$id'        => $_SESSION['zar']['id'],
+				'$pin'       => $_SESSION['zar']['pin'],
+				'$regdelay'  => $_SESSION['zar']['regdelay'],
+				'$regexpire' => $_SESSION['zar']['regexpire'],
+				'$desc'      => [
+					t('Please remember your validation token and ID'),
+					t('Your ID'),
+					t('Your token')
+				],
+				'$delay_desc' => [
+					t('Hold on, you can start verification in'),
+					t('Token validity')
+				]
 			]);
-			unset($_SESSION['zar']['msg']);
+			unset($_SESSION['zar']['delayed']);
 			return $o;
 		}
 
-		$now 	= datetime_convert();
-		$ip 	= $_SERVER['REMOTE_ADDR'];
+		if (argc() < 2)
+			return;
+
+		$did2   = hex2bin( substr( argv(1), 0, -1) );
+		$didx   = substr( argv(1), -1 );
+		$deny   = argc() > 2 ? argv(2) : '';
+		$deny   = preg_match('/^[0-9a-f]{8,8}$/', $deny) ? hex2bin($deny) : false;
 
+		$now    = datetime_convert();
+		$ip     = $_SERVER['REMOTE_ADDR'];
 		$isduty = zar_register_dutystate();
 		$nowfmt = $isduty['nowfmt'];
 		$atform = $isduty['atform'];
+		$pin    = '';
 
-		$pin = $_SESSION['zar']['pin'] ?? '';
-		unset($_SESSION['zar']['pin']);
-
-
-		$title = t('Register Verification');
+		if(isset($_SESSION['zar']['pin'])) {
+			$pin = $_SESSION['zar']['pin'];
+			unset($_SESSION['zar']['pin']);
+		}
 
 		// do we have a valid dId2 ?
 		if (($didx == 'a' && substr( $did2 , -2) == substr( base_convert( md5( substr( $did2, 1, -2) ),16 ,10), -2)) || ($didx == 'e') || ($didx == 'i')) {
@@ -342,7 +353,7 @@ class Regate extends \Zotlabs\Web\Controller {
 						if ( $r['reg_startup'] <= $now && $r['reg_expires'] >= $now) {
 							$o = replace_macros(get_markup_template('regate.tpl'), [
 							'$form_security_token' => get_form_security_token("regate"),
-							'$title' 	=> $title,
+							'$title' 	=> t('Register Verification'),
 							'$desc' 	=> $pin ? t('Please enter your validation token') . ' <code class="inline-code">' .  $pin . '</code>' : t('Please enter your validation token'),
 							'$did2' 	=> bin2hex($did2) . $didx,
 							'$now'		=> $nowfmt,
@@ -361,7 +372,7 @@ class Regate extends \Zotlabs\Web\Controller {
 							}
 
 							$o = replace_macros(get_markup_template('plain.tpl'), [
-								'$title'	=> $title,
+								'$title'	=> t('Register Verification'),
 								'$now'		=> $nowf,
 								'$countdown' => datetime_convert('UTC', 'UTC', $r['reg_startup'], 'c'),
 								'$infos'	=> t('Hold on, you can start verification in') . EOL,
diff --git a/Zotlabs/Module/Register.php b/Zotlabs/Module/Register.php
index a08cc6d0d..e96037760 100644
--- a/Zotlabs/Module/Register.php
+++ b/Zotlabs/Module/Register.php
@@ -426,12 +426,11 @@ class Register extends Controller {
 
 						if($reg_delayed) {
 							// this could be removed to make registration harder
+							$_SESSION['zar']['id'] = 'd' . $didnew;
 							$_SESSION['zar']['pin'] = $pass2;
-
-							$_SESSION['zar']['msg'] = t('Your validation token is') . EOL
-							. '<h3>' . $pass2 . '</h3>' . EOL
-							. t('Hold on, you can start verification in')
-							. '<div class="d-none"><code class="inline-code"><span id="register_start" data-utc="' . datetime_convert('UTC', 'UTC', $regdelay, 'c') . '" class="register_date">' . datetime_convert('UTC', 'UTC', $regdelay, 'c') . '</span></code> ' . t('and') . ' <code class="inline-code"><span data-utc="' . datetime_convert('UTC', 'UTC', $regexpire, 'c') . '" class="register_date">' . datetime_convert('UTC', 'UTC', $regexpire, 'c') . '</span></code></div>';
+							$_SESSION['zar']['delayed'] = true;
+							$_SESSION['zar']['regdelay'] = datetime_convert('UTC', 'UTC', $regdelay, 'c');
+							$_SESSION['zar']['regexpire'] = datetime_convert('UTC', 'UTC', $regexpire, 'c');
 						}
 						else {
 							$_SESSION['zar']['pin'] = $pass2;
diff --git a/view/tpl/regate.tpl b/view/tpl/regate.tpl
index 04a9df1de..6eaac1478 100644
--- a/view/tpl/regate.tpl
+++ b/view/tpl/regate.tpl
@@ -1,7 +1,5 @@
 <h2>{{$title}}</h2>
 
-<h3>{{$now}}</h3>
-
 <div class="descriptive-paragraph" style="font-size: 1.2em;"><p>{{$desc}}</p></div>
 
 <form action="regate/{{$did2}}" method="post">
diff --git a/view/tpl/regate_pre.tpl b/view/tpl/regate_pre.tpl
new file mode 100644
index 000000000..adc63b181
--- /dev/null
+++ b/view/tpl/regate_pre.tpl
@@ -0,0 +1,56 @@
+<h2>{{$title}}</h2>
+
+{{$delay_desc.0}}
+<div id="countdown" class="h3"></div>
+
+{{$desc.0}}<br>
+<br>
+{{$desc.1}}<br>
+{{$id}}<br>
+<br>
+{{$desc.2}}<br>
+{{$pin}}<br>
+<br>
+<div class="">
+	{{$delay_desc.1}}<br>
+	<span id="register_start" data-utc="{{$regdelay}}" class="register_date">
+		{{$regdelay}}
+	</span>
+	&nbsp;&dash;&nbsp; 
+	<span data-utc="{{$regexpire}}" class="register_date">
+		{{$regexpire}}
+	</span>
+</div>
+<script>
+	$('.register_date').each( function () {
+		var date = new Date($(this).data('utc'));
+		$(this).html(date.toLocaleString());
+	});
+
+
+	var date = '{{$countdown}}';
+
+	date = date !== '' ? date : $('#register_start').data('utc');
+
+	if(date) {
+		doCountDown(date, 'countdown');
+		var x = setInterval(doCountDown, 1000, date, 'countdown');
+	}
+	function doCountDown(date, id) {
+		var countDownDate = new Date(date).getTime();
+		var now = new Date().getTime();
+		var distance = countDownDate - now;
+		var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+		var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+		var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+		var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+		document.getElementById(id).innerHTML = days + "d " + hours + "h "+ minutes + "m " + seconds + "s ";
+
+		if (distance < 0) {
+			clearInterval(x);
+			document.getElementById(id).innerHTML = 'Reloading...';
+			window.location.reload();
+		}
+	}
+</script>