dstrutzenberger
/
ModelingTool


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-expand-lg bg-info">
        <div class="container-fluid">
            <a href="#" class="navbar-brand">
			<h1>Frontend Modeler</h1>
			</a>
			<img src="cdp_logo_sm.png" class="rounded float-end" alt="Responsive image">
        </div>
    </nav>
	<div class="container-sm">
	<br>
	<form class="row g-3">
	  <div class="col-md-6">
		<label for="userlogin" class="form-label">User</label>
		<input type="text" class="form-control" id="userlogin">
	  </div>
	  <div class="col-sm-6">
		<label for="inputPassword0" class="form-label">Password</label>
		<input type="password" class="form-control" id="pwlogin">
	  </div>
	  <div class="col-12">
		<button type="button" id="login" class="btn btn-primary" >Login</button>
	  </div>
	  	<br>
	 <div class="w-25 col-12">
	  <div id="liveAlertPlaceholder0"></div></div>
	</form>
	</div>
	<br>
	<div class="container-sm">
	<form class="row g-3">
	  <div class="col-md-6">
		<label for="userregister" class="form-label">User</label>
		<input type="text" class="form-control" id="userregister">
	  </div>
	  <div class="col-sm-6">
		<label for="inputPassword1" class="form-label">Password</label>
		<input type="password" class="form-control" id="pwregister">
	  </div>
	  <div class="col-12">
		<button type="button" id="register" class="btn btn-primary" >Register</button>
	  </div>
	  	  	<br>
	 <div class="w-25 col-12">
	  <div id="liveAlertPlaceholder1"></div></div>
	</form>
	</div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
	<link rel="stylesheet" href="./jstree/jstree/dist/themes/default/style.min.css" />
	<script src="./js/events_login.js"></script>
	<script>
        document.getElementById("login").addEventListener("click", redirectFunction);
        function redirectFunction(){
		var username = $('#userlogin').val();
		var pwtxt = $('#pwlogin').val();
			$.ajax({
				url: 'http://127.0.0.1:3001/login',
				type: 'GET',
				data: {user:username , pw: pwtxt},
				error: function() {
					console.log("Error");
					},
				success: function(data) {
					console.log(data[0].login);
					if(data[0].login == "OK"){
						var b = username;
						url = "index.html?name=" + encodeURIComponent(b);"index.html?name=" + encodeURIComponent(b);
						window.location.href = url;
					}else{
						const alertPlaceholder = document.getElementById("liveAlertPlaceholder0")
						const wrapper = document.createElement('div')
						wrapper.innerHTML = [
							"<div class='alert alert-danger alert-dismissible fade show' role='alert'>",
							  "Error - Login not possible.",
							  "<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>",
							"</div>"
						].join("")
						alertPlaceholder.append(wrapper)	
						}
					},
				type: 'GET'
				});

        }
    </script>
	<script>
        document.getElementById("register").addEventListener("click", redirectFunction);
        function redirectFunction(){
		var username = $('#userregister').val();
		var pwtxt = $('#pwregister').val();
			$.ajax({
				url: 'http://127.0.0.1:3001/register',
				type: 'GET',
				data: {user:username , pw: pwtxt},
				error: function() {
					console.log("Error");
					},
				success: function(data) {
					console.log(data[0].register);
					const alertPlaceholder = document.getElementById("liveAlertPlaceholder1")
					if(data[0].register == "OK"){
						const wrapper = document.createElement('div')
						wrapper.innerHTML = [
							"<div class='alert alert-success alert-dismissible' role='alert'>",
							  "Registration successful - please login.",
							  "<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>",
							"</div>"
						].join("")
						alertPlaceholder.append(wrapper)
					}else{
						const wrapper = document.createElement('div')
						wrapper.innerHTML = [
							"<div class='alert alert-danger alert-dismissible fade show' role='alert'>",
							   "Error - registration not successful.",
							  "<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>",
							"</div>"
						].join("")
						alertPlaceholder.append(wrapper)	
						}
					},
				type: 'GET'
				});

        }
    </script>

</body>
</html>