wordyallen · March 14, 2016 01:20
diff --git a/Simplest login Possible b/Simplest login Possible
 <!DOCTYPE html>
 <html lang="en">
 <head>

  <title>Sandbox</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css">

 </head>
 <body>
    <div class='column is-5 is-offset-4'>
      <h1 class='title is-text-centered'>A Simple Login</h1>
    <form method="post" onsubmit="return redirect()">
    <p class="control">
      <input id='user'class="input" placeholder="user">
    </p>
    <p class="control">
      <input id='pass' class="input" type="password" placeholder="Password">
    </p>
    <p class="control">
      <button id='login' class="button is-success">
        Login
      </button>
    </p>
  </form>
  </div>
  <div id="msg" class="column is-7 is-offset-3 notification is-danger is-text-centered ">
  <button id='noMsg' class="delete"></button>
    no dice
  </div>
  <script>
    "use strict"

    //create your user account
    const db = {
      user: 'masha',
      pass: 'abc123'
    }

    let givenUser = document.getElementById('user')
    let givenPass = document.getElementById('pass')
    const msg = document.getElementById("msg")
    const msgCloseButton = document.getElementById("noMsg")


    //initial state
    msg.style.visibility = "hidden"

    function redirect() {
      if (db.user === givenUser.value && db.pass === givenPass.value) {
        window.location = "http://google.com"  //welcome.html
        return false
      } else {
        msg.style.visibility = "visible"
        return false
      }
    }

    msgCloseButton.addEventListener("click", closeMsg);

    function closeMsg() {
      msg.style.visibility = "hidden"
    }
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>

	<title>Sandbox</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css">

	</head>
	<body>
	<div class='column is-5 is-offset-4'>
	<h1 class='title is-text-centered'>A Simple Login</h1>
	<form method="post" onsubmit="return redirect()">
	<p class="control">
	<input id='user'class="input" placeholder="user">
	</p>
	<p class="control">
	<input id='pass' class="input" type="password" placeholder="Password">
	</p>
	<p class="control">
	<button id='login' class="button is-success">
	Login
	</button>
	</p>
	</form>
	</div>
	<div id="msg" class="column is-7 is-offset-3 notification is-danger is-text-centered ">
	<button id='noMsg' class="delete"></button>
	no dice
	</div>
	<script>
	"use strict"

	//create your user account
	const db = {
	user: 'masha',
	pass: 'abc123'
	}

	let givenUser = document.getElementById('user')
	let givenPass = document.getElementById('pass')
	const msg = document.getElementById("msg")
	const msgCloseButton = document.getElementById("noMsg")


	//initial state
	msg.style.visibility = "hidden"

	function redirect() {
	if (db.user === givenUser.value && db.pass === givenPass.value) {
	window.location = "http://google.com" //welcome.html
	return false
	} else {
	msg.style.visibility = "visible"
	return false
	}
	}

	msgCloseButton.addEventListener("click", closeMsg);

	function closeMsg() {
	msg.style.visibility = "hidden"
	}
	</script>
	</body>
	</html>