source: src/main/resources/templates/register_form.html

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

Initial commit

  • Property mode set to 100644
File size: 3.7 KB
RevLine 
[850b344]1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Register</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
17<a class="btn btn-primary btn-lg" style="margin-top: 2%; margin-left: 45%" href="/registerEmployee">Register as employee </a>
18<form method="POST" th:action="@{'/register'}">
19 <fieldset style="margin-top: 5%;">
20 <div class="container justify-content-center bg-light bg-gradient rounded" style="width: 50%; margin:auto;
21 padding:5%; box-shadow: 5px 10px 8px #888888">
22
23 <h3 class="text-center">Register</h3>
24 <div class="form-group">
25 <label for="username" class="form-label mt-4">Username:</label>
26 <input type="text" id="username" name="username" class="form-control">
27 </div>
28 <div class="form-group">
29 <label for="name" class="form-label mt-4">Name:</label>
30 <input type="text" id="name" name="name" class="form-control">
31 </div>
32
33 <div class="form-group">
34 <label for="surname" class="form-label mt-4">Surname:</label>
35 <input type="text" id="surname" name="surname" class="form-control">
36 </div>
37
38 <div class="form-group">
39 <label for="telbr" class="form-label mt-4">Phone number:</label>
40 <input type="text" id="telbr" name="telbr" class="form-control" placeholder="07x-xxx-xxx">
41 </div>
42
43 <div class="right">
44 <div class="form-group">
45 <label for="email" class="form-label mt-4">Email address:</label>
46 <input type="email" id="email" name="email"
47 class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
48
49 </div>
50
51 <div class="form-group">
52 <label for="password" class="form-label mt-4" style="font-weight: bold">Password:</label>
53 <input type="password" class="form-control" id="password" name="password">
54 </div>
55
56 <div class="form-group">
57 <label for="confirm_password" class="form-label mt-4" style="font-weight: bold">Repeat Password:</label>
58 <input type="password" id="confirm_password" name="confirm_password"
59 class="form-control">
60 </div>
61 <br>
62 <span id='message'></span>
63 </div>
64
65 <hr>
66
67 <p class="text-center" >By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
68 <div class="justify-content-center text-center">
69 <button type="submit" id="submit" class="btn btn-primary btn-lg" >Register</button>
70 </div>
71 <p class="text-center">If you already have an account ,<a href="/login">Log In</a></p>
72 </div>
73 </fieldset>
74</form>
75<div th:replace="layout.html ::footer"></div>
76</body>
77
78<script>
79 $('#password, #confirm_password').on('keyup', function () {
80 if ($('#password').val() == $('#confirm_password').val() && $('#password').val().length>1 ) {
81 $('#message').html('Matching').css('color', 'green');
82 } else
83 $('#message').html('Not Matching').css('color', 'red');
84 });
85</script>
86</html>
87
Note: See TracBrowser for help on using the repository browser.