/usr/share/glewlwyd/webapp/reset.html

<!--
 * 
 * Glewlwyd OAuth2 Authorization Server
 *
 * Reset password 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 reset password</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;
		}
    label {
      white-space: normal !important;
    }
		</style>
  </head>
  <body>
	<div class="container form-signin" id="sendResetDiv" style="display: none;">
      <form action="#" id="forgotPasswordForm">
        <center><h2 class="form-signin-heading">Forgot password</h2></center>
        <h3 class="form-signin-heading">Please enter your login</h3>
        <label class="sr-only" for="inputLogin">Login</label>
        <div class="input-group">
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-user color-blue"></i>
          </span>
          <input type="text" class="form-control" name="username" id="username" autofocus="" required="" placeholder="user name">
        </div>
        <button type="submit" name="sendresetbut" id="sendresetbut" class="btn btn-lg btn-primary btn-block">Send reset password email</button>
        <center><strong><a href="login.html" class="">Go to log in page</a></strong></center>
        <center><h4><label class="label label-info" id="emailSentOk" style="display: none;">Email sent</label></h4></center>
        <center><h4><label class="label label-warning" id="emailSentError" style="display: none;">Error while sending reset email</label></h4></center>
      </form>
    </div>
    <div class="container form-signin" id="resetDiv" style="display: none;">
      <form action="#" id="resetPasswordForm">
        <h2 class="form-signin-heading">Please enter your new password</h2>
        <input type="hidden" name="code" id="code" value="">
        <input type="hidden" name="user" id="user" value="">
        <input type="password" class="form-control" name="new_password" id="new_password" value="" placeholder="New password">
        <input type="password" class="form-control" name="confirm_password" id="confirm_password" value="" placeholder="Confirm new password">
        <button type="submit" name="resetbut" id="resetbut" class="btn btn-lg btn-primary btn-block">Reset password</button>
        <center><h4><label class="label label-info" id="resetOk" style="display: none;">Password changed, you can now <a href="login.html">log in</a></label></h4></center>
        <center><h4><label class="label label-warning" id="resetError" style="display: none;"></label></h4></center>
      </form>
    </div>
  </body>
</html>
<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);
    
    if (params.code) {
      $("#sendResetDiv").hide();
      $("#resetDiv").show();
      $("#code").val(params.code);
      $("#user").val(params.user);
    } else {
      $("#sendResetDiv").show();
      $("#resetDiv").hide();
    }
    
    $.get("../config/", function (result) {
      api_prefix = result.api_prefix;
    });
  }
  
  $("#forgotPasswordForm").submit(function(event) {
    event.preventDefault();
    sendReset();
  });
  
  $("#resetPasswordForm").submit(function(event) {
    event.preventDefault();
    resetPassword();
  });
  
  function sendReset () {
    if ($("#username").val()) {
      $.post("../" + api_prefix + "/profile/reset_password/" + $("#username").val(), null, 
        function (result, status, request) {
          $("#emailSentOk").show();
          $("#emailSentError").hide();
        })
        .fail(function (error) {
          $("#emailSentOk").hide();
          $("#emailSentError").show();
        });
    }
  }
  
  function resetPassword () {;
    $("#resetOk").hide();
    $("#resetError").hide();
    if ($("#new_password").text() === $("#confirm_password").val()) {
      $("#resetError").show();
      $("#resetError").text("Error, password don't match");
    } else if ($("#new_password").val().length < 8) {
      $("#resetError").show();
      $("#resetError").text("Error, password must be at least 8 characters");
    } else {
      $.ajax
      ({
        type: "PUT",
        url: "../" + api_prefix + "/profile/reset_password/" + $("#user").val(),
        async: false,
        data: {token: $("#code").val(), password: $("#new_password").val()},
        success: function (result, status, request) {
          $("#resetOk").show();
        },
        error: function (error) {
          $("#resetError").show();
          $("#resetError").text("Error while changing password");
        }
      });
    }
  }
</script>
glewlwyd-common 1.3.1-1 / usr / share / glewlwyd / webapp / reset.html
