<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport"
	content="width=device-width, initial-scale=1">
<title>LabApp</title>

<link rel="stylesheet" href="styleLogin.css"></link>
<link rel="icon" type="image/x-icon" href="Logo_blomes_fl_2.png">

<meta name="referrer" content="no-referrer" />

</head>

<body>
	<table>
		<tr>
			<th><img src="gus_lab_logo_genii_1.png" onclick="window.open('https://blomesystem.com/', '_blank');" style="width: 200px; height: auto;"></th>
			<th><h1 style="text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); margin-left: 15px; color: rgb(41, 148, 171);">LabConnector</h1></th>
		</tr>
	</table>

	<h1 style="font-family: verdana; font-size: 150%; font-weight: bold; color: rgb(41, 148, 171);">Login</h1>



	<!-- Login -->

	<div id="login">
	
		<p id="loginnachricht">Geben Sie Namen und Passwort ein um sich
		anzumelden.</p>
		
		<p>
			Name: <input type="text" placeholder="Benutzername" id="name"
				onkeypress="clickPress(event)" />
		</p>
		<p>
			Passwort: <input type="password" placeholder="Passwort" id="password"
				onkeypress="clickPress(event)" />
		</p>
		

		<p>
			<button type="button" id="loginButton" onclick="login()">Login</button>
		</p>
	</div>
<br>

	<!-- Erstanmeldung -->

	<!-- Test Button -->
	<p id="infoErstanmeldung">Sie melden sich das erste Mal an? Dann klicken Sie auf Erstanmeldung.</p>
	<button id="buttonErstanmeldung" type="button" onclick="zeigePasswortVergabe()">Erstanmeldung</button>



	<div id="passwortVergabe" style="display: none">
		<div class="container">

			<p>Bei der Erstanmeldung geben Sie bitte Namen und
				Aktivierungscode aus der E-Mail ein. Vergeben Sie ein Passwort für zukünftige Anmeldungen. Merken Sie sich Ihr Passwort gut, der Login mit Aktivierungscode funktioniert nur bei der ersten Anmeldung am System.</p>

			<p>
				Name: <input type="text" placeholder="Benutzername" id="nameErstanmeldung" />
			</p>
			
			<p>
				Aktivierungscode: <input type="password"
					placeholder="Aktivierungscode" id="aktivierungscode" />
			</p>

			<label for="psw">Ihr Passwort:</label> <input type="password"
				id="psw" name="psw" maxlength="15" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
				title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
				required>
				<br>
				<p>
			<button id="userPaswortSpeichern" onclick="login()">erster Login</button>
			</p>
					<div id="message">
			<h3>Das Passwort muss folgendes beinhalten:</h3>
			<p id="letter" class="invalid">
				Ein <b>Kleinbuchstaben</b>
			</p>
			<p id="capital" class="invalid">
				Ein <b>Großbuchstaben</b>
			</p>
			<p id="number" class="invalid">
				Eine <b>Zahl</b>
			</p>
			<p id="length" class="invalid">
				Mindestens <b>8 Zeichen</b>
			</p>

		</div>
		</div>



	</div>


	<script src="script.js"></script>
</body>

</html>