source: src/main/resources/templates/registerEmpl_form.html@ 850b344

Last change on this file since 850b344 was 850b344, checked in by Tamara Simikj <tamara.simic12@…>, 2 years ago

Initial commit
  • Property mode set to 100644
File size: 5.5 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Register Employee</title>
6 <link href="https://bootswatch.com/5/journal/bootstrap.css" rel="stylesheet">
7 <script src="https://bootswatch.com/_assets/css/custom.min.css"></script>
8 <script src="https://bootswatch.com/_vendor/prismjs/themes/prism-okaidia.css" ></script>
9 <script src="https://bootswatch.com/_vendor/font-awesome/css/font-awesome.min.css"></script>
10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
11
12</head>
13<body>
14<div th:replace="layout.html ::header"></div>
15
16<form method="POST" th:action="@{'/registerEmployee'}">
17 <fieldset style="margin-top: 5%;">
18 <div class="container justify-content-center bg-light bg-gradient rounded" style="width: 50%; margin:auto;
19 padding:5%; box-shadow: 5px 10px 8px #888888">
20
21 <h3 class="text-center">Register</h3>
22 <div class="form-group">
23 <label for="username" class="form-label mt-4">Username:</label>
24 <input type="text" id="username" name="username" class="form-control">
25 </div>
26 <div class="form-group">
27 <label for="name" class="form-label mt-4">Name:</label>
28 <input type="text" id="name" name="name" class="form-control">
29 </div>
30 <div class="form-group">
31 <label for="middleName" class="form-label mt-4">Middle Name:</label>
32 <input type="text" id="middleName" name="middleName" class="form-control">
33 </div>
34 <div class="form-group">
35 <label for="surname" class="form-label mt-4">Surname:</label>
36 <input type="text" id="surname" name="surname" class="form-control">
37 </div>
38
39 <div class="form-group">
40 <label for="telbr" class="form-label mt-4">Phone number:</label>
41 <input type="text" id="telbr" name="telbr" class="form-control" placeholder="07x-xxx-xxx">
42 </div>
43
44 <div class="right">
45 <div class="form-group">
46 <label for="email" class="form-label mt-4">Email address:</label>
47 <input type="email" id="email" name="email"
48 class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
49
50 </div>
51
52 <div class="form-group">
53 <label for="password" class="form-label mt-4" style="font-weight: bold">Password:</label>
54 <input type="password" class="form-control" id="password" name="password">
55 </div>
56
57 <div class="form-group">
58 <label for="confirm_password" class="form-label mt-4" style="font-weight: bold">Repeat Password:</label>
59 <input type="password" id="confirm_password" name="confirm_password"
60 class="form-control">
61 </div>
62 <br>
63 <span id='message'></span>
64 </div>
65 <div class="form-group">
66 <label for="rabIskustvo" class="form-label mt-4">Work Experience in years:</label>
67 <input type="number" id="rabIskustvo" name="rabIskustvo" class="form-control">
68 </div>
69 <div class="form-group">
70 <label class="form-label mt-4" for="rabotiOd" >Raboti od:</label>
71 <input id="rabotiOd" name="rabotiOd" type="text"
72 class="form-control"
73 placeholder="yyyy-MM-ddThh:mm:00Z"
74 required>
75 </div>
76 <p><span id="messageTime" class="text-warning hidden">Please Enter a time format - yyyy-MM-ddThh:mm:00Z</span></p>
77
78 <label for="beautyCenterId" class="form-label mt-4 col-sm-4">Select Beauty Center</label>
79 <select class="form-select " name="beautyCenterId" id="beautyCenterId" >
80 <option value="" disabled>All</option>
81 <option th:each="salon :${beautyCentres}"
82 th:value="${salon.getId()}"
83 th:text="${salon.getAdresa()}"> </option>
84 </select>
85 <hr>
86
87 <p class="text-center" >By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
88 <div class="justify-content-center text-center">
89 <button type="submit" id="submit" class="btn btn-primary btn-lg" >Register</button>
90 </div>
91 <p class="text-center">If you already have an account ,<a href="/login">Log In</a></p>
92 </div>
93 </fieldset>
94</form>
95<div th:replace="layout.html ::footer"></div>
96</body>
97
98<script>
99
100 $(document).ready(function(){
101 var $regexname=/^[0-9]{4}\-[0-9]{2}\-[0-9]{2}T[0-9]{2}\:[0-9]{2}\:[0-9]{2}Z$/;
102 $('#rabotiOd').on('keypress keydown keyup',function(){
103 if (!$(this).val().match($regexname)) {
104 // there is a mismatch, hence show the error message
105 $('#messageTime').removeClass('hidden');
106 $('#messageTime').show();
107 }
108 else{
109 // else, do not display message
110 $('#messageTime').hide();
111 $('#rabotiOd').addClass('is-valid');
112 }
113 });
114 });
115
116
117 $('#password, #confirm_password').on('keyup', function () {
118 if ($('#password').val() == $('#confirm_password').val() && $('#password').val().length>1 ) {
119 $('#message').html('Matching').css('color', 'green');
120 } else
121 $('#message').html('Not Matching').css('color', 'red');
122 });
123</script>
124</html>
Note: See TracBrowser for help on using the repository browser.