Signup-Page/index.html at master · mr-zero0/Signup-Page · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sign Up Form</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Graduate">
	<script src="app.js"></script>
  </head>

<body style="background-image: url(bg.png);">
	<div ng-app="myApp" class="container">
	  <div style="text-align:center; color:#ffffff; font-family:Graduate">
		<h2><b>User Signup Form</b></h2>
	  </div>
		<div ng-controller="ContactController">
		  <div align="right">
			<a href="#" style="color:#ffffff" ng-click="searchUser()">{{title}}</a>
		  </div>
		  <form role="form" class="well" ng-hide="ifSearchUser" style="background-image: url(bg.png); border-width: 5px;">
			<div class="form-group" style="padding: 9px 18px">
				<label for="fname" style="color: #ffffff ">First Name:</label>
				<input type="text" id="fname" class="form-control" placeholder="Enter First Name" ng-model="newcontact.fname">
			</div>
			<div class="form-group" style="padding: 9px 18px">
				<label for="lname" style="color: #ffffff">Last Name: </label>
				<input type="text" id="lname" class="form-control" placeholder="Enter Last Name" ng-model="newcontact.lname">
			</div>
			<div class="form-group" style="padding: 9px 18px">
				<label for="uname" style="color: #ffffff">Username: </label>
				<input type="text" id="uname" class="form-control" placeholder="Enter Username" ng-model="newcontact.uname">
			</div>
				<div class="form-group" style="padding: 9px 18px">
				<label for="password" style="color: #ffffff">Password: </label>
				<input type="password" id="password" class="form-control" placeholder="Enter Password" ng-model="newcontact.password">
			</div>
			  <div class="form-group" style="padding: 9px 18px">
				<label for="country" style="color: #ffffff"> Country: </label>
				<input type="text" id="country" class="form-control" placeholder="Enter Country" ng-model = "newcontact.country">
			</div>
			<div class="form-group" style="padding: 9px 18px">
				<label for="country" style="color: #ffffff"> Country: </label>
				<input type="text" id="country" class="form-control" placeholder="Enter Country" ng-model = "newcontact.country">
			</div>
			<div class="form-group" style="padding: 9px 18px">
				<label for="dob" style="color: #ffffff">Date of Birth: </label>
				<input type="date" id="dob" min="1990-01-01" max="2020-06-28 class="form-control" placeholder="Enter DoB" ng-model="newcontact.dob" >
			</div>
			<br>
			<input type="hidden" ng-model="newcontact.id">
			<input type="button" style="width:100%; font-size: 20px;  border-color: red; background-color: white; color: black; "; class="btn btn-primary" ng-click="saveContact()" value="Submit">
		  </form>

		  <div style="text-align:left; color:#ffffff">
		<h3><b>Registered Users</b></h3>
	  		</div>
			<table ng-if="contacts.length" class="table table-striped table-bordered table-hover" >
			  <thead>
				<tr class="info">
					<th>Name</th>
					<th>Username</th>
					<th>DoB(yyyy-mm-dd) </th>
					<th>Country</th>
					<th ng-if="!ifSearchUser">Action</th>
				</tr>
				</thead>
				<tbody>
				<tr ng-repeat="contact in contacts">
					 <td>{{contact.fname + contact.lname}}</td>
					 <td>{{contact.uname}}</td>
					 <td>{{contact.dob}}</td>
					 <td>{{contact.country}}</td>

					 <td ng-if="!ifSearchUser">
						<a href="#" ng-click="delete(contact.id)" role="button" class="btn btn-danger">delete</a>
					</td>
				</tr>
				</tbody>
			</table>
		  <div ng-hide="contacts.length>0">No Registered User Found</div>
		  </div>
		</div>
</body>
</html>