security-old.html 4.39 KB
Newer Older
Rosanny Sihombing's avatar
Rosanny Sihombing committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
	<head>
	    <title>User Profile</title>
	    <meta charset="UTF-8"/>
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	    <link rel="stylesheet" type="text/css" href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css" />
	    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
	    <style>
			.collapse {
				display: none;
			}
			.collapse.in {
				display: block;
			}
			.collapsing {
				position: relative;
				height: 0;
				overflow: hidden;
				-webkit-transition-timing-function: ease;
				-o-transition-timing-function: ease;
				transition-timing-function: ease;
				-webkit-transition-duration: .35s;
				-o-transition-duration: .35s;
				transition-duration: .35s;
				-webkit-transition-property: height,visibility;
				-o-transition-property: height,visibility;
				transition-property: height,visibility;
			}	    
		</style>
	</head>
	
	<body>
		
		<!-- CONTENT -->
		<div class="container-fluid">
		  <div class="row">
		    <!-- https://getbootstrap.com/docs/4.3/components/navs/ -->
		    <div class="col-3">
		    	<h5>
			    	<span id="fullname"></span>
			    </h5>
			    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
			      <a class="nav-link" href="/profile" aria-selected="true">Profile</a>
			      <a class="nav-link" href="#" aria-selected="false">Security</a>
			      <a class="nav-link" href="#" aria-selected="false">Services</a>
			    </div>
			</div>
		
		    <div class="col-sm-9">
				<form method="post" class="needs-validation" action="/changePwd" novalidate>
					<div class="form-group row">
						<label for="currPwd">Current Password</label>
						<input type="password" class="form-control" id="inputCurrPwd" name="inputCurrPwd" required>
						<div class="invalid-feedback">Please fill in this field.</div>
					</div>
					<div class="form-group row">
						<label for="newPwd">New Password</label>
						<input type="password" class="form-control" id="inputNewPwd" name="inputNewPwd" required>
						<div class="invalid-feedback">Please fill in this field.</div>
					</div>
					<div class="form-group row">
						<label for="retype">Re-type New Password</label>
						<input type="password" class="form-control" id="inputRetype" name="inputRetype" required>
						<div class="invalid-feedback">Please fill in this field.</div>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>	      
		    </div>
		  </div>
		</div>

		<!-- jQuery -->
		<!-- script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script -->
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
		<!-- Bootstrap -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
		<!-- M4_LAB -->
		<script src="/js/account.js"></script>
		<script src="https://transfer.hft-stuttgart.de/js/headfoot.js"></script>
		<script>
		/*	$( document ).ready(function() {
				console.log( "ready!" );
				$.get( "/api/v1/profile", function(data) {
					alert( "success: "+data );
				})
			}); */
			$(function(){
				$("#header").load("fragment/header.html"); 
				$("#footer").load("fragment/footer.html"); 
			});
			// check input fields
			'use strict';
			window.addEventListener('load', function() {
				// Fetch all the forms we want to apply custom Bootstrap validation styles to
				var forms = document.getElementsByClassName('needs-validation');
				// Loop over them and prevent submission
				var validation = Array.prototype.filter.call(forms, function(form) {
				form.addEventListener('submit', function(event) {
					if (form.checkValidity() === false) {
					event.preventDefault();
					event.stopPropagation();
					}
					form.classList.add('was-validated');
				}, false);
				});
			}, false);
		</script> 
	</body>
</html>