@include('./util/header')
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">{{ $pageTitle }}</h1>
          
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-7">
                    <form method="post" action="{{ route('password-change-request') }}" id="editForm" name="editForm" class="form-horizontal">
                        @csrf
                
                        <input type="hidden" name="accountType" value="{{ $accountType }}">
                        <input type="hidden" name="activeRecord" value="{{ $activeRecord }}">

                        <div class="form-group">
                            <label class="col-sm-3 control-label">New Password</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-sm-3 control-label">Confirm Password</label>
                            <div class="col-sm-5">
                                <input type="password" name="newPasswordConfirm" id="newPasswordConfirm" class="form-control" placeholder="">
                            </div>
                        </div>

                        <div class="text-center">
                            <button name="Generate Random Password" onClick="generatePassword()" class="btn btn-default btn-sm" type="button">Generate Random Strong Password</button>
                            <button name="Show Password" id="viewPassword" type="button" onClick="togglePasswordDisplay()" class="btn btn-default btn-sm">Show Password</button>
                        </div>
                        <hr>
                        <p>This password is used to access the CLI Certified Associates' Resource Center. It is different than the password used by participants using an online Assessment.</p>
                        <p><em>Never share your password with anyone. CLI staff will never ask you for your password.</em></p>
                        <hr>
                        <div class="text-center">
                            <input type="hidden" id="requirementsMetNewPass">
                            <button onClick="submitForm()" class='btn btn-primary' value='Save Information' id='submit1' name='submit1'>Save Password</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type='button' class='btn btn-default' onClick="window.location.href='account_edit'" value='Exit Without Saving' id='button2' name='button2'>
                        </div>
                        <script type="text/javascript">
                            function submitForm() {
                                var requirementsMetNewPass = $('#requirementsMetNewPass').val();
                                var newPasswordConfirm1 = $("#newPasswordConfirm").val();
                                var newPasswordConfirm2 = $("#newPassword").val();

                                // validate both password fields match
                                if (newPasswordConfirm1 == newPasswordConfirm2) {
                                    requirement5 = 1;
                                } else {
                                    requirement5 = 0;
                                }

                                if (requirement5 == 1 && requirementsMetNewPass == 4) {
                                    $("#editForm").submit();
                                } else {
                                    alert("There is a problem with your password.  Please fix it and try again.");
                                }
                            };
                        </script>
                    </form>
                </div>

                <div class="col-lg-3">
                    <div id="pswd_info">
                        <h4>New password must contain:</h4>
                        <ul>
                            <li id="length" class="invalid"><strong>8 - 32 characters</strong></li>
                            <li id="capital" class="invalid"><strong>One uppercase letter</strong></li>
                            <li id="letter" class="invalid"><strong>One lowercase letter</strong></li>
                            <li id="number" class="invalid"><strong>One number</strong></li>
                        </ul>
                    </div>

                    <div id="pswd_info2">
                        <h4><b>Confirm password</b> must meet the following requirements:</h4>
                        <ul>
                            <li id="match" class="invalid">Passwords <strong>must match</strong></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    $(document).ready(function() {
        
        // initial state of the submit button is hidden on page load
    //	$( "#submit1" ).hide();
        
        // set initial state of counter variable so we know how many of the requirements have been met,
        // so that we can make submit button appear at that time
        var requirementsMet = 0;
            
        // set variable for total number of new password requirements
        var passNewRequirements = 4;
        
        // set variable for total number of confirm password requirements
        var passConfirmRequirements = 1;
        
        // set variable for total number of password requirements
        var passTotalRequirements = 5;
            
        var requirementsMetConfirmPass;
        
        //you have to use keyup, because keydown will not catch the currently entered value
        $('input[name=newPassword]').keyup(function() { 
            
            // set password variable
            var newPassword = $("#newPassword").val();
            
            //validate the length
            if ( newPassword.length < 8 || newPassword.length > 32 ) {
                $('#length').removeClass('valid').addClass('invalid');
                requirement1 = 0;			
            } else {
                $('#length').removeClass('invalid').addClass('valid');
                requirement1 = 1;			
            }
            
            //validate letter
            if ( newPassword.match(/[A-z]/) ) {
                $('#letter').removeClass('invalid').addClass('valid');
                requirement2 = 1;			
            } else {
                $('#letter').removeClass('valid').addClass('invalid');
                requirement2 = 0;			
            }
            
            //validate uppercase letter
            if ( newPassword.match(/[A-Z]/) ) {
                $('#capital').removeClass('invalid').addClass('valid');
                requirement3 = 1;			
            } else {
                $('#capital').removeClass('valid').addClass('invalid');
                requirement3 = 0;			
            }
            
            //validate number
            if ( newPassword.match(/\d/) ) {
                $('#number').removeClass('invalid').addClass('valid');
                requirement4 = 1;			
            } else {
                $('#number').removeClass('valid').addClass('invalid');
                requirement4 = 0;			
            }
            
            requirementsMetNewPass = (requirement1 + requirement2 + requirement3 + requirement4);
            
    //		if ( requirementsMetNewPass == passNewRequirements ) {
    //			$( "#pswd_info" ).fadeOut(0);
    //		} else {
    //			$( "#pswd_info" ).fadeIn(300);			
    //		}

            var newPasswordConfirm3 = $("#newPasswordConfirm").val();
            var newPasswordConfirm4 = $("#newPassword").val();
    /*
            if ( requirementsMetNewPass + requirementsMetConfirmPass == passTotalRequirements) {
                if ( (newPasswordConfirm3 == newPasswordConfirm4) && (newPasswordConfirm3 !="") && (newPasswordConfirm4 !="") ){
                    $( "#submit1" ).show(500);
                } else {
                    $( "#submit1" ).hide(200);			
                }
            }
    */	
        });

        $("#newPassword").focus(function(){
            $('#pswd_info2').fadeOut(0);
            $('#pswd_info').fadeIn(300);
        
        });	

        $("#newPasswordConfirm").focus(function(){
            $('#pswd_info').fadeOut(0);
            $('#pswd_info2').fadeIn(300);
            // set password variable
            var newPasswordConfirm1 = $("#newPasswordConfirm").val();
            var newPasswordConfirm2 = $("#newPassword").val();
            
            //validate the both password fields match
            if ( newPasswordConfirm1 ==  newPasswordConfirm2 ) {
                $('#match').removeClass('invalid').addClass('valid');
                requirement5 = 1;			
            } else {
                $('#match').removeClass('valid').addClass('invalid');
                requirement5 = 0;			
            }
            
        });	

        //you have to use keyup, because keydown will not catch the currently entered value
        $('input[name=newPasswordConfirm]').keyup(function() { 
            
            // set password variable
            var newPasswordConfirm1 = $("#newPasswordConfirm").val();
            var newPasswordConfirm2 = $("#newPassword").val();
            
            //validate the both password fields match
            if ( newPasswordConfirm1 ==  newPasswordConfirm2 ) {
                $('#match').removeClass('invalid').addClass('valid');
                $('#requirementsMetNewPass').val(4);
                requirement5 = 1;			
            } else {
                $('#match').removeClass('valid').addClass('invalid');
                $('#requirementsMetNewPass').val(0);
                requirement5 = 0;			
            }
                    
            requirementsMetConfirmPass = requirement5;
            
        });
        
    });

    function generatePassword() {
	var requirementsMetNewPass = 0;
	while (requirementsMetNewPass < 4) {
		var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz#().&*";
		var l =  Math.floor(Math.random() * (28 - 10 + 1)) + 10;  //generate random password length between 10-32 characters
		var string_length = l;
		var randomstring = '';
		for (var i=0; i<string_length; i++) {
			var rnum = Math.floor(Math.random() * chars.length);
			randomstring += chars.substring(rnum,rnum+1);
		}
		
		// set password variable
		var newPassword = randomstring;
		//validate the length
		if ( newPassword.length < 8 || newPassword.length > 32 ) {
			$('#length').removeClass('valid').addClass('invalid');
			requirement1 = 0;			
		} else {
			$('#length').removeClass('invalid').addClass('valid');
			requirement1 = 1;			
		}
		//validate letter
		if ( newPassword.match(/[A-z]/) ) {
			$('#letter').removeClass('invalid').addClass('valid');
			requirement2 = 1;			
		} else {
			$('#letter').removeClass('valid').addClass('invalid');
			requirement2 = 0;			
		}
		//validate uppercase letter
		if ( newPassword.match(/[A-Z]/) ) {
			$('#capital').removeClass('invalid').addClass('valid');
			requirement3 = 1;			
		} else {
			$('#capital').removeClass('valid').addClass('invalid');
			requirement3 = 0;			
		}
		//validate number
		if ( newPassword.match(/\d/) ) {
			$('#number').removeClass('invalid').addClass('valid');
			requirement4 = 1;			
		} else {
			$('#number').removeClass('valid').addClass('invalid');
			requirement4 = 0;			
		}
		requirementsMetNewPass = (requirement1 + requirement2 + requirement3 + requirement4);
	}

		$('#newPassword').val(randomstring);
		$('#newPasswordConfirm').val(randomstring);
		$('#requirementsMetNewPass').val(requirementsMetNewPass);

		var newPasswordConfirm1 = $("#newPasswordConfirm").val();
		var newPasswordConfirm2 = $("#newPassword").val();	
//		$("#newPassword").focus();
}

function togglePasswordDisplay() {
	var passwordInputType = $('#newPassword').attr('type');
	
	if (passwordInputType == "text") {
       $('#newPassword').prop('type', 'password');		
       $('#viewPassword').val('Show Password');		
       $('#newPasswordConfirm').prop('type', 'password');		
	} else {
       $('#newPassword').prop('type', 'text');		
       $('#viewPassword').val('Hide Password');		
       $('#newPasswordConfirm').prop('type', 'text');
	}	
}

</script>

@include('./util/footer')