api - login/out possible

.gitignore

@@ -1,2 +1,3 @@
 server/config.php
+api/config.php
 .htaccess

api/.htaccess_example

@@ -0,0 +1,8 @@
+RewriteEngine on
+# root directory:
+RewriteBase /projects/RegattenApp/api/
+
+
+
+# Show site
+RewriteRule ^(.*)$ index.php?request=$1 [QSA]

api/config_example.php

@@ -0,0 +1,44 @@
+<?php
+	
+	// DATABASE Credentials
+	define('DB_USER', 'regattenwebsite');
+	define('DB_PASS', 'RBpOv4YYtZKWIGcN');
+	define('DB_HOST', 'localhost');
+	define('DB_DATABASE', 'regattenwebsite');
+	
+	define('DB_CHANGE_TIME', true);
+	define('DB_USE_UTF8', true);  // use utf-8 in DB requests
+	
+	// DATABASE Table names
+	define('DB_TABLE_USERS', 'users');
+	define('DB_TABLE_LOGINS', 'logins');
+	define('DB_TABLE_KEEPLOGGEDIN', 'keeploggedin');
+	define('DB_TABLE_RESET', 'rstpw');
+	
+	define('DB_TABLE_CLUBS', 'regatta_clubs');
+	define('DB_TABLE_SUFFIX_BOATS', '_boats');
+	define('DB_TABLE_SUFFIX_SAILORS', '_sailors');
+	define('DB_TABLE_SUFFIX_PLANNING', '_planning');
+	define('DB_TABLE_SUFFIX_REGATTAS', '_regattas');
+	define('DB_TABLE_SUFFIX_RESULTS', '_results');
+	define('DB_TABLE_TRIM_BOATS', 'trim_boats');
+	define('DB_TABLE_TRIM_USERS', 'trim_users');
+	define('DB_TABLE_TRIM_TRIMS', 'trim_trims');
+	define('DB_TABLE_NEWS', 'news');
+	define('DB_TABLE_UPDATETIMES', '_updatetimes');
+	
+	// PERMISSIONS
+	define('PERM_ALL', 0);
+	define('PERM_REGISTERED', 1);
+	define('PERM_READ', 2);
+	define('PERM_WRITE', 4);
+	define('PERM_ADMIN', 8);
+	
+	// OUTGOING MAILS - Credentials for outgoing mails
+	define('MAIL_SMTP_HOST', 'ssl://ostertun.net');               // SMTP Server address
+	define('MAIL_SMTP_PORT', 465);                       // port to use
+	define('MAIL_FROM_ADDRESS', 'no-reply@regatten.net');  // address to send mails from
+	define('MAIL_USERNAME', MAIL_FROM_ADDRESS);             // if true: username
+	define('MAIL_PASSWORD', 'pVc05j_3');                    //  & password
+	
+?>

api/database.php

@@ -0,0 +1,157 @@
+<?php
+	
+	/*
+		
+		Mysql Database Support
+		----------------------
+		
+		Required defines:
+		- DB_HOST (STRING)
+		- DB_USER (STRING)
+		- DB_PASS (STRING)
+		- DB_DATABASE (STRING)
+		- DB_USE_UTF8 (BOOL)
+		- DB_CHANGE_TIME (BOOL)
+		
+		Required functions:
+		- logE (in /_global/log.php)
+		
+	*/
+	
+	$mysqli = mysqli_connect(DB_HOST, DB_USER, DB_PASS);
+	
+	if ($mysqli === false) {
+		logE("database", "Could not connect to database\n" . mysqli_connect_error);
+		die('Error: Could not connect to database');
+	}
+	
+	mysqli_select_db($mysqli, DB_DATABASE);
+	if (DB_USE_UTF8) {
+		mysqli_set_charset($mysqli, 'utf8');
+	}
+	
+	function db_get_data($mysqli, $table, $fields = '*', $where = false, $limit = false) {
+		$rest = '';
+		if ($where != false) {
+			$rest .= ' WHERE ' . $where;
+		}
+		if ($limit != false) {
+			$rest .= sprintf(' LIMIT %d', $limit);
+		}
+		$query = 'SELECT ' . $fields . ' FROM ' . mysqli_real_escape_string($mysqli, $table) . $rest . ';';
+		$response = mysqli_query($mysqli, $query);
+		
+		if ($response !== false) {
+			$result = array();
+			if ($response->num_rows > 0) {
+				$i = 0;
+				while ($row = $response->fetch_assoc()) {
+					if (isset($row['id'])) {
+						$id = $row['id'];
+					} else {
+						$id = $i;
+						$i ++;
+					}
+					foreach ($row as $key => $value) {
+						$result[$id][$key] = $value;
+					}
+				}
+			}
+			return $result;
+		} else {
+			logE("database", "get_data\nInvalid request\n" . $query . "\n" . mysqli_error($mysqli));
+			return false;
+		}
+	}
+	
+	function db_update_data($mysqli, $table, $data, $where, $limit = false) {
+		$rest = '';
+		if ($where != false) {
+			$rest .= ' WHERE ' . $where;
+		}
+		if ($limit != false) {
+			$rest .= sprintf(' LIMIT %d', $limit);
+		}
+		$set = '';
+		$first = true;
+		foreach ($data as $key => $value) {
+			if ($first) {
+				$first = false;
+			} else {
+				$set .= ', ';
+			}
+			if ($value === null) {
+				$set .= '`' . mysqli_real_escape_string($mysqli, $key) . '`=NULL';
+			} else {
+				$set .= '`' . mysqli_real_escape_string($mysqli, $key) . '`="' . mysqli_real_escape_string($mysqli, $value) . '"';
+			}
+		}
+		if (defined('DB_CHANGE_TIME')) $set .= ', `changed`=NOW()';
+		$query = 'UPDATE ' . mysqli_real_escape_string($mysqli, $table) . ' SET ' . $set . $rest . ';';
+		$response = mysqli_query($mysqli, $query);
+		
+		if ($response === false) {
+			logE("database", "update_data\nInvalid request\n" . $query . "\n" . mysqli_error($mysqli));
+		} elseif (defined('DB_CHANGE_TIME')) {
+			mysqli_query($mysqli, 'UPDATE `_updatetimes` SET `update`=NOW() WHERE `table`="' . mysqli_real_escape_string($mysqli, $table) . '";');
+		}
+		
+		return $response;
+	}
+	
+	function db_insert_data($mysqli, $table, $data) {
+		$fields = '';
+		$values = '';
+		$first = true;
+		foreach ($data as $key => $value) {
+			if ($first) {
+				$first = false;
+			} else {
+				$fields .= ', ';
+				$values .= ', ';
+			}
+			$fields .= '`' . mysqli_real_escape_string($mysqli, $key) . '`';
+			if ($value === null) {
+				$values .= 'NULL';
+			} else {
+				$values .= '"' . mysqli_real_escape_string($mysqli, $value) . '"';
+			}
+		}
+		if (defined('DB_CHANGE_TIME')) {
+			$fields .= ', `changed`';
+			$values .= ', NOW()';
+		}
+		$query = 'INSERT INTO `' . mysqli_real_escape_string($mysqli, $table) . '` (' . $fields . ') VALUES (' . $values . ');';
+		$response = mysqli_query($mysqli, $query);
+		if ($response === false) {
+			logE("database", "insert_data\nInvalid request\n" . $query . "\n" . mysqli_error($mysqli));
+		} else {
+			$response = mysqli_insert_id($mysqli);
+			if (defined('DB_CHANGE_TIME')) {
+				mysqli_query($mysqli, 'UPDATE `_updatetimes` SET `update`=NOW() WHERE `table`="' . mysqli_real_escape_string($mysqli, $table) . '";');
+			}
+		}
+		
+		return $response;
+	}
+	
+	function db_delete_data($mysqli, $table, $where, $limit = false) {
+		$rest = '';
+		if ($where != false) {
+			$rest .= ' WHERE ' . $where;
+		}
+		if ($limit != false) {
+			$rest .= sprintf(' LIMIT %d', $limit);
+		}
+		$query = 'DELETE FROM `' . mysqli_real_escape_string($mysqli, $table) . '`' . $rest . ';';
+		$response = mysqli_query($mysqli, $query);
+		if ($response === false) {
+			logE("database", "delete_data\nInvalid request\n" . $query . "\n" . mysqli_error($mysqli));
+		} elseif (defined('DB_CHANGE_TIME')) {
+			mysqli_query($mysqli, 'UPDATE `_updatetimes` SET `update`=NOW() WHERE `table`="' . mysqli_real_escape_string($mysqli, $table) . '";');
+		}
+		
+		return $response;
+	}
+	
+?>

api/index.php

@@ -0,0 +1,123 @@
+<?php
+	
+	require_once(__DIR__ . '/../server/config.php');
+	require_once(__DIR__ . '/config.php');
+	require_once(__DIR__ . '/../server/log.php');
+	require_once(__DIR__ . '/database.php');
+	require_once(__DIR__ . '/login.php');
+	
+	$request = false;
+	if (isset($_GET['request'])) {
+		$request = explode('/', $_GET['request']);
+	}
+	if ($request === false) {
+		$request = array();
+	}
+	if (count($request) >= 1) {
+		$action = array_shift($request);
+	} else {
+		$action = '';
+	}
+	
+	define('DONE_OKAY', 0);
+	define('DONE_EMPTY', 1);
+	define('DONE_DATABASE', 2);
+	define('DONE_UNAUTHORIZED', 3);
+	define('DONE_BAD_REQUEST', 4);
+	define('DONE_CONFLICT', 5);
+	define('DONE_SERVER_ERROR', 6);
+	function done($donecode, $content = null) {
+		switch ($donecode) {
+			case DONE_OKAY:
+				header('HTTP/1.0 200 OK');
+				break;
+			case DONE_EMPTY:
+				header('HTTP/1.0 204 No Content');
+				break;
+			case DONE_DATABASE:
+				header('HTTP/1.0 500 Internal Server Error');
+				if ($content === null) {
+					$content = array('error' => 'database error');
+				}
+				break;
+			case DONE_UNAUTHORIZED:
+				header('HTTP/1.0 401 Unauthorized');
+				if ($content === null) {
+					$content = array('error' => 'unauthorized');
+				}
+				break;
+			case DONE_BAD_REQUEST:
+				header('HTTP/1.0 400 Bad Request');
+				if ($content === null) {
+					$content = array('error' => 'bad request');
+				}
+				break;
+			case DONE_CONFLICT:
+				header('HTTP/1.0 409 Conflict');
+				break;
+			case DONE_SERVER_ERROR:
+				header('HTTP/1.0 500 Internal Server Error');
+				break;
+			default:
+				header('HTTP/1.0 500 Internal Server Error');
+				break;
+		}
+		header('Content-Type: application/json');
+		if ($content !== null) {
+			echo json_encode($content);
+		} else {
+			echo '{  }';
+		}
+		exit;
+	}
+	
+	if (isset($_REQUEST['auth']['id'], $_REQUEST['auth']['hash'])) {
+		$user_id = auth_check($mysqli, $_REQUEST['auth']['id'], $_REQUEST['auth']['hash']);
+	} else {
+		$user_id = false;
+	}
+	$perm = get_perm($mysqli, $user_id);
+	
+	function has_perm($permission) {
+		global $perm;
+		return ($perm & $permission) == $permission;
+	}
+	
+	function checkPermission($perm) {
+		if (!has_perm($perm)) done(DONE_UNAUTHORIZED, ['error' => 'permission denied']);
+	}
+	
+	function checkRequest($param) {
+		if (!isset($_REQUEST[$param])) done(DONE_BAD_REQUEST, ['error' => 'missing parameter: ' . $param]);
+	}
+	
+	function replaceChanged($array) {
+		return array_map(function ($entry) {
+			unset($entry['changed']);
+			return $entry;
+		}, $array);
+	}
+	
+	switch ($action) {
+		
+		case 'login':
+			checkRequest('username');
+			checkRequest('password');
+			checkRequest('device');
+			$auth = auth_login($mysqli, $_REQUEST['username'], $_REQUEST['password'], $_REQUEST['device']);
+			if ($auth === false) done(DONE_UNAUTHORIZED);
+			done(DONE_OKAY, $auth);
+			break;
+		
+		case 'logout':
+			checkPermission(PERM_REGISTERED);
+			auth_logout($mysqli, $_REQUEST['auth']['id']);
+			done(DONE_OKAY);
+			break;
+		
+		default:
+			done(DONE_BAD_REQUEST, ['error' => 'action invalid']);
+		
+	}
+	
+?>

api/login.php

@@ -0,0 +1,107 @@
+<?php
+	
+	function get_user($mysqli, $username = null) {
+		if ($username === null) {
+			return db_get_data($mysqli, DB_TABLE_USERS);
+		} else {
+			$user = db_get_data($mysqli, DB_TABLE_USERS, '*', '`username` = "' . mysqli_real_escape_string($mysqli, $username) . '"', 1);
+			if (($user === false) or (count($user) != 1)) return false;
+			return array_values($user)[0];
+		}
+	}
+	
+	function get_user_by_id($mysqli, $user_id) {
+		$res = db_get_data($mysqli, DB_TABLE_USERS, '*', '`id` = "' . mysqli_real_escape_string($mysqli, $user_id) . '"', 1);
+		if (($res !== false) and (count($res) == 1)) {
+			return array_values($res)[0];
+		}
+		return false;
+	}
+	
+	//function signup($mysqli, $username, $email, $password) {
+	//	if (($username == '') or ($email == '') or ($password == '')) {
+	//		return 1;
+	//	}
+	//	if (get_user($mysqli, $username) !== false) {
+	//		return 1;
+	//	}
+	//	$salt = hash('sha512', uniqid(openssl_random_pseudo_bytes(16), true));
+	//	$hashpassword = hash('sha512', $password . $salt);
+	//	
+	//	$user = array();
+	//	$user['username'] = $username;
+	//	$user['email'] = $email;
+	//	$user['password'] = $hashpassword;
+	//	$user['salt'] = $salt;
+	//	if (db_insert_data($mysqli, DB_TABLE_USERS, $user) !== false) {
+	//		$values = array();
+	//		$values['USERNAME'] = $username;
+	//		$message = createMail('signup', STRING_SIGNUP_EMAIL_SUBJECT, $values);
+	//		smtp_send_mail(['Regatten.net', MAIL_FROM_ADDRESS], [[$username, $email]], [], [], STRING_SIGNUP_EMAIL_SUBJECT, $message, [['Content-Type', 'text/html; charset="UTF-8"']]);
+	//		// Analytics
+	//		matomo_event('Login', 'SignUp', $username);
+	//		return true;
+	//	} else {
+	//		return 2;
+	//	}
+	//}
+	
+	function get_perm($mysqli, $user_id) {
+		if ($user_id !== false) {
+			$result = get_user_by_id($mysqli, $user_id);
+			if ($result !== false) {
+				return $result[DB_FIELD_PERM];
+			} else {
+				return 0;
+			}
+		} else {
+			return 0;
+		}
+	}
+	
+	// ### NEW LOGIN ####################################
+	
+	function auth_login($mysqli, $username, $password, $device) {
+		$user = get_user($mysqli, $username);
+		if ($user === false) {
+			// User does not exist
+			return false;
+		}
+		$hashpassword = hash('sha512', $password . $user['salt']);
+		if ($hashpassword !== $user['password']) {
+			// Password incorrect
+			return false;
+		}
+		// All correct
+		$auth = [];
+		$auth['user'] = $user['id'];
+		$auth['username'] = $user['username'];
+		$auth['auth'] = str_replace('/', '-', str_replace('+', '_', base64_encode(openssl_random_pseudo_bytes(24))));
+		$salt = base64_encode(openssl_random_pseudo_bytes(24));
+		$hash = hash('sha512', $auth['auth'] . $salt);
+		$data = [
+			'user' => $user['id'],
+			'salt' => $salt,
+			'authhash' => $hash,
+			'device' => $device
+		];
+		$auth['id'] = db_insert_data($mysqli, DB_TABLE_LOGINS, $data);
+		return $auth;
+	}
+	
+	function auth_logout($mysqli, $id) {
+		db_delete_data($mysqli, DB_TABLE_LOGINS, 'id = "' . mysqli_real_escape_string($mysqli, $id) . '"', 1);
+		return true;
+	}
+	
+	function auth_check($mysqli, $id, $hash) {
+		$auth = db_get_data($mysqli, DB_TABLE_LOGINS, '*', 'id="' . mysqli_real_escape_string($mysqli, $id) . '"', 1);
+		if (($auth === false) or (count($auth) != 1)) return false;
+		$auth = array_values($auth)[0];
+		$hash = hash('sha512', $hash . $auth['salt']);
+		if ($hash != $auth['authhash']) return false;
+		db_update_data($mysqli, DB_TABLE_LOGINS, ['id' => $auth['id']], 'id="' . $auth['id'] . '"', 1); // update changed field => last login
+		return $auth['user'];
+	}
+	
+?>

client/scripts/custom.js.php

@@ -31,7 +31,7 @@ $(document).ready(function(){
 	'use strict'
 	
 	var isAJAX = true; //Enables or disable AJAX page transitions and loading.
-	var isDevelopment = true; // Enables development mode. Clean cache & Stops BG & Highlights from changing defaults.
+	var isDevelopment = false; // Enables development mode. Clean cache & Stops BG & Highlights from changing defaults.
 	
 	function init_template(){
 		

client/scripts/pwa.js.php

@@ -18,7 +18,7 @@ $(document).ready(function(){
     
     var pwaVersion = '<?php echo PWA_VERSION; ?>'; //must be identical to _manifest.json version. If not it will create update window loop
     var pwaCookie = true; // if set to false, the PWA prompt will appear even if the user selects "maybe later"
-    var pwaNoCache = true; // always keep the cache clear to serve the freshest possible content
+    var pwaNoCache = false; // always keep the cache clear to serve the freshest possible content
     
     
     $('[data-pwa-version]').data('pwa-version', pwaVersion);
@@ -132,7 +132,7 @@ $(document).ready(function(){
         caches.delete('workbox-runtime').then(function() { 
           console.log('Content Updated - Cache Removed!'); 
         });
-        localStorage.clear();
+        //localStorage.clear();
         sessionStorage.clear()
         caches.keys().then(cacheNames => {
           cacheNames.forEach(cacheName => {

client/scripts/regatten.js.php

@@ -6,6 +6,8 @@
 	
 ?>
 
+const apiUrl = '<?php echo SERVER_ADDR; ?>/api/';
+
 var randomId = function() { return '_' + Math.random().toString(36).substr(2, 9); }
 
 var badges = {
@@ -96,8 +98,115 @@ var toastWarn  = function (text, time = 3000) { return makeToast('bg-yellow1-dar
 var toastInfo  = function (text, time = 3000) { return makeToast('bg-blue2-dark', 'fa-info', text, time); }
 var toastError = function (text, time = 3000) { return makeToast('bg-red2-dark', 'fa-times', text, time); }
 
+var login = function() {
+	showLoader();
+	var username = $('#input-login-username').val();
+	var password = $('#input-login-password').val();
+	$('#input-login-username').val('');
+	$('#input-login-password').val('');
+	$.ajax({
+		url: apiUrl + 'login',
+		method: 'POST',
+		data: {
+			username: username,
+			password: password,
+			device: navigator.userAgent
+		},
+		error: function (xhr, status, error) {
+			if (xhr.status == 401) {
+				toastError('Benutzername oder Passwort falsch');
+				$('#input-login-username').val(username);
+			} else if (xhr.status == 0) {
+				toastError('Du bist momentan offline.<br>Stelle eine Internetverbindung her, um Dich anzumelden');
+				$('#menu-login').hideMenu();
+			} else {
+				console.log('Login: unbekannter Fehler', status, error);
+				console.log(xhr);
+				toastError('Ein unbekannter Fehler ist aufgetreten. Bitte versuche es noch einmal', 5000);
+			}
+			hideLoader();
+		},
+		success: function (data, status, xhr) {
+			localStorage.setItem('auth_id', data.id);
+			localStorage.setItem('auth_hash', data.auth);
+			localStorage.setItem('auth_user', data.user);
+			localStorage.setItem('auth_username', data.username);
+			location.reload();
+		}
+	});
+}
+
+var logoutClearStorage = function() {
+	localStorage.removeItem('auth_id');
+	localStorage.removeItem('auth_hash');
+	localStorage.removeItem('auth_user');
+	localStorage.removeItem('auth_username');
+	location.reload();
+}
+
+var logout = function() {
+	showLoader();
+	var auth = {
+		id: localStorage.getItem('auth_id'),
+		hash: localStorage.getItem('auth_hash')
+	}
+	if ((auth.id === null) || (auth.hash === null)) {
+		console.log('Not logged in');
+		logoutClearStorage();
+		return;
+	}
+	$.ajax({
+		url: apiUrl + 'logout',
+		method: 'POST',
+		data: {
+			auth: auth
+		},
+		error: function (xhr, status, error) {
+			if (xhr.status == 401) {
+				console.log('Not logged in');
+				logoutClearStorage();
+			} else if (xhr.status == 0) {
+				console.log('Could not delete auth from server');
+				logoutClearStorage();
+			} else {
+				console.log('Logout: unbekannter Fehler', status, error);
+				console.log(xhr);
+				toastError('Ein unbekannter Fehler ist aufgetreten. Bitte versuche es noch einmal', 5000);
+				hideLoader();
+			}
+		},
+		success: function (data, status, xhr) {
+			logoutClearStorage();
+		}
+	});
+}
+
 var initRegatten = function() {
-	loggedin = true;
+	loggedin = (localStorage.getItem('auth_id') !== null);
+	
+	if (loggedin) {
+		var auth = {
+			id: localStorage.getItem('auth_id'),
+			hash: localStorage.getItem('auth_hash')
+		}
+		var user = {
+			id: localStorage.getItem('auth_user'),
+			name: localStorage.getItem('auth_username')
+		}
+		if ((auth.hash === null) || (user.id === null) || (user.name === null)) {
+			logoutClearStorage();
+			return;
+		}
+	}
+	
+	if (loggedin) {
+		$('.show-notloggedin').css('display', 'none');
+		$('.replace-userid-href').attr('href', $('.replace-userid-href').attr('href').replace('%USERID%', user.id));
+		$('.replace-username').html(user.name);
+	} else {
+		$('.show-loggedin').css('display', 'none');
+	}
+	
 	if (typeof siteScript !== 'undefined') {
 		siteScript();
 	}

content/index.php

@@ -35,11 +35,14 @@
 	$sp['output'] .= $tpl->load('card', [$content, 'html-id' => 'card-last']);
 	
 	// Calendar
-	$content = "<h2>Regatta-Kalender</h2>";
-	$content .= "<p>Du willst alle Regatta-Termine in deinem Kalender, aber nicht alles abtippen?<br>Kein Problem! Abonniere einfach unseren ics-Kalender.</p>";
-	$content .= "<p><b>Nur die Regatten, zu denen Du gehst?</b><br>Auch kein Problem! Erstelle einfach eine <a href=\"#\">Saison-Planung</a> und abonniere Deinen persönlichen Kalender.</p>";
-	$content .= $tpl->load('button', ['Regatta-Kalender', '#', 'css-class' => 'mb-2']);
-	$content .= $tpl->load('button', ['Kalender f&uuml;r Timon', '#']);
+	$content = '<h2>Regatta-Kalender</h2>';
+	$content .= '<p>Du willst alle Regatta-Termine in deinem Kalender, aber nicht alles abtippen?<br>Kein Problem! Abonniere einfach unseren ics-Kalender.</p>';
+	$content .= '<p><b>Nur die Regatten, zu denen Du gehst?</b><br>Auch kein Problem! ';
+	$content .= '<span class="show-loggedin">Erstelle einfach eine <a href="' . LINK_PRE . 'planning">Saison-Planung</a> und abonniere Deinen persönlichen Kalender.</span>';
+	$content .= '<span class="show-notloggedin"><a href="#" data-menu="menu-signup">Registriere Dich einfach kostenlos</a>, erstelle eine Saison-Planung und wir erstellen Dir einen pers&ouml;nlichen Kalender.</span>';
+	$content .= '</p>';
+	$content .= $tpl->load('button', ['<i class="fas fa-calendar-alt"></i> Regatta-Kalender', 'https://regatten.net/client/calendar/' . BOATCLASS . '/everything.ics', 'css-class' => 'mb-2']);
+	$content .= $tpl->load('button', ['<i class="fas fa-calendar-alt"></i> Kalender f&uuml;r <span class="replace-username"></span>', 'https://regatten.net/client/calendar/' . BOATCLASS . '/user_%USERID%.ics', 'css-class' => 'show-loggedin replace-userid-href']);
 	
 	$sp['output'] .= $tpl->load('card', [$content]);
 	

server/page/menus.php

@@ -105,20 +105,59 @@
 					<label class="custom-control-label" for="switch-dark"></label>
 				</div>
 			</a>
-			<a href="<?php echo LINK_PRE; ?>login">
+			<a href="#" data-menu="menu-login" class="show-notloggedin">
 				<i class="fa font-14 fa-sign-in-alt rounded-s bg-highlight color-white"></i>
 				<span>Login</span>
 				<i class="fa fa-angle-right"></i>
 			</a>
-			<a href="<?php echo LINK_PRE; ?>signup" class="border-0">
+			<a href="#" data-menu="menu-signup" class="show-notloggedin border-0">
 				<i class="fa font-14 fa-user-plus rounded-s bg-highlight color-white"></i>
 				<span>Registrieren</span>
 				<span class="badge bg-red2-dark color-white">FREE</span>
 			</a>
+			<a href="<?php echo LINK_PRE; ?>account" class="show-loggedin">
+				<i class="fa font-14 fa-user rounded-s bg-highlight color-white"></i>
+				<span>Account</span>
+				<i class="fa fa-angle-right"></i>
+			</a>
+			<a href="#" onclick="logout();" class="show-loggedin border-0">
+				<i class="fa font-14 fa-sign-out-alt rounded-s bg-highlight color-white"></i>
+				<span>Logout</span>
+				<i class="fa fa-angle-right"></i>
+			</a>
 		</div>
 	</div>
 </div>
 
+<div id="menu-login" class="menu menu-box-top menu-box-detached rounded-m" data-menu-height="270">
+	<div class="content bottom-0">
+		<h1 class="text-center mt-5 font-900">Login</h1>
+		<div class="input-style input-style-1 has-icon input-required">
+			<i class="input-icon fa fa-user color-theme"></i>
+			<span class="color-highlight">Benutzername</span>
+			<input id="input-login-username" class="form-control" type="name" placeholder="Benutzername" />
+		</div>
+		<div class="input-style input-style-1 has-icon input-required">
+			<i class="input-icon fa fa-lock color-theme"></i>
+			<span class="color-highlight">Passwort</span>
+			<input id="input-login-password" class="form-control" type="password" placeholder="Passwort" />
+		</div>
+		<a class="btn btn-m mt-2 mb-2 btn-full bg-green2-dark text-uppercase font-900" href="#" onclick="login();">Login</a>
+	</div>
+</div>
+
+<div id="menu-signup" class="menu menu-box-modal menu-box-detached rounded-m" data-menu-height="300">
+	<div class="content bottom-0">
+		<h1 class="text-center mt-5 font-900">Registrieren</h1>
+		<p class="text-center">
+			Momentan kannst Du Dich leider nicht in der App registrieren.<br>
+			Das ist aber kein Problem, registriere Dich einfach kostenlos auf unserer Website!
+		</p>        
+		<a href="https://regatten.net/de/signup" class="btn btn-center-xl btn-m shadow-xl rounded-s bg-highlight font-900 text-center">Registrieren</a>
+		<p class="text-center font-10 bottom-0">Du kannst Dich danach in dieser App anmelden.</p>
+	</div>
+</div>
+
 <div id="menu-update">
 	<div class="content bottom-0">
 		<p class="text-center mt-5"><i class="fa fa-sync-alt fa-7x color-highlight fa-spin"></i></p>