/usr/share/glewlwyd/webapp/login.html

<!--
 * 
 * Glewlwyd OAuth2 Authorization Server
 *
 * Login/Logout page
 *
 * Copyright 2017 Nicolas Mora <mail@babelouest.org>
 * 
 * The front-end application is under MIT Licence (MIT)
 * 
 * The MIT License (MIT)
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * 
 -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Glewlwyd login page</title>
    <link href="favicon.ico" rel="icon" type="image/x-icon" />
		<meta name="description" content="Glewlwyd OAuth2 Authorization Server">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<style>
		body {
		  padding-top: 40px;
		  padding-bottom: 40px;
		  background-color: #eee;
		}

		.form-signin {
		  max-width: 330px;
		  padding: 15px;
		  margin: 0 auto;
		}
		.form-signin .form-signin-heading,
		.form-signin .checkbox {
		  margin-bottom: 10px;
		}
		.form-signin .checkbox {
		  font-weight: normal;
		}
		.form-signin .form-control {
		  position: relative;
		  height: auto;
		  -webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
				  box-sizing: border-box;
		  padding: 10px;
		  font-size: 16px;
		}
		.form-signin .form-control:focus {
		  z-index: 2;
		}
		.form-signin input[type="email"] {
		  margin-bottom: -1px;
		  border-bottom-right-radius: 0;
		  border-bottom-left-radius: 0;
		}
		.form-signin input[type="password"] {
		  margin-bottom: 10px;
		  border-top-left-radius: 0;
		  border-top-right-radius: 0;
		}
		</style>
	</head>
	<body>
		<div class="container" id="loginDiv" style="display: none;">
			<form class="form-signin" action="#" id="loginForm">
				<h2 class="form-signin-heading">Please sign in</h2>
				<label class="sr-only" for="inputLogin">Login</label>
				<input type="text" class="form-control" name="username" id="username" autofocus="" required="" placeholder="user name">
				<label class="sr-only" for="inputPassword">Password</label>
				<input type="password" class="form-control" name="password" id="password" required="" placeholder="password">
        <button type="submit" name="loginbut" id="loginbut" class="btn btn-lg btn-primary btn-block">Sign in</button>
        <div class="checkbox">
          <center><label for="remember"><input type="checkbox" name="remember" id="remember" value="1"><span class="label label-info">Remember me</span></label></center>
        </div>
        <center><strong><a href="reset.html" class="">Forgot password</a></strong></center>
        <center><h4><label class="label label-warning" id="loginInvalid" style="display: none;">Error invalid user/password</label></h4></center>
        <center><h4><label class="label label-info" id="loading" style="display: none;"><span class="glyphicon glyphicon-repeat normal-right-spinner"></span>Connecting...</label></h4></center>
			</form>
		</div>
    <div class="container" id="userDiv" style="display: none;">
      <div class="form-signin">
        <h2>You are connected as <span id="currentUsername"></span></h2>
        <label>What do you wish for?</label>
        <button type="button" name="currentUsernameValid" id="currentUsernameValid" class="btn btn-lg btn-primary btn-block">Continue</button>
        <button type="button" name="profile" id="profile" class="btn btn-lg btn-primary btn-block">Update profile</button>
        <button type="button" name="logoutbut" id="logoutbut" class="btn btn-lg btn-primary btn-block">Log out</button>
      </div>
    </div>
	</body>
	
<script>
  var params;
  var api_prefix = "";

	function getQueryParams(qs) {
		qs = qs.split('+').join(' ');

		var params = {},
			tokens,
			re = /[?&]?([^=]+)=([^&]*)/g;

		while (tokens = re.exec(qs)) {
			params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
		}

		return params;
	}
	
	window.onload = function () {
		params = getQueryParams(location.search);
    $.get("../config/", function (result) {
      api_prefix = result.api_prefix;
      checkUser();
    });
	};
  
  function checkUser () {
    $.get("../" + api_prefix + "/profile/", function (user) {
      $("#currentUsername").text(user.name);
      $("#loginDiv").hide();
      $("#loginInvalid").hide();
      $("#userDiv").show();
      if (params.redirect_uri) {
        $("#currentUsernameValid").click(function () {
          var redirect = "../" + api_prefix + "/auth" + location.search + "&login_validated=true";
          window.location = redirect;
        });
      } else {
        $("#currentUsernameValid").hide();
      }
    })
    .fail(function (error) {
      $("#loginDiv").show();
      $("#loginInvalid").hide();
      $("#userDiv").hide();
    });
  }
  
  function loginAction() {
    $("#loginInvalid").hide();
    $("#loading").show();
    $.post("../" + api_prefix + "/auth/user", {username: $("#username").val(), password: $("#password").val(), remember: $("#remember").prop("checked")}, function (data) {
      checkUser();
    })
    .fail(function (error) {
      $("#loginInvalid").show();
    })
    .always(function () {
      $("#loading").hide();
    });
  }
  
  $("#loginForm").submit(function (e) {
    e.preventDefault();
    loginAction();
  });
  
  $("#logoutbut").click(function () {
    $.ajax({
        url: "../" + api_prefix + "/auth/user/",
        type: "DELETE",
        success: function() {
            checkUser();
        }
    });
  });
  
  $("#profile").click(function () {
    if (window.location.search) {
      document.location = "profile.html" + window.location.search;
    } else {
      document.location = "profile.html";
    }
  });

</script>
</html>
glewlwyd-common 1.3.1-1 / usr / share / glewlwyd / webapp / login.html
