source: src/main/resources/templates/register_customer.html@ 763289e

Last change on this file since 763289e was 204464d, checked in by Gjoko <goko_kostadinov@…>, 2 years ago

Adding register customer functionality
  • Property mode set to 100644
File size: 5.3 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Register customer</title>
6
7 <!-- Font Awesome -->
8 <link
9 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
10 rel="stylesheet"
11 />
12 <!-- Google Fonts -->
13 <link
14 href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
15 rel="stylesheet"
16 />
17 <!-- MDB -->
18 <link
19 href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.css"
20 rel="stylesheet"
21 />
22 <link rel="stylesheet" href="css/register.css">
23</head>
24<body>
25<!-- Jumbotron -->
26<div class="px-4 py-5 px-md-5 text-center text-lg-start" style="background-color: hsl(0, 0%, 96%); height: 100vh;">
27 <div class="container">
28 <div class="row gx-lg-5 align-items-center">
29 <div class="col-lg-6 mb-5 mb-lg-0">
30 <h1 class="my-5 display-3 fw-bold ls-tight">
31 Register as <br />
32 <span class="text-primary">a customer</span>
33 </h1>
34 <p style="color: hsl(217, 10%, 50.8%)">
35 Find the best deals in town.
36 </p>
37 </div>
38
39 <div class="col-lg-6 mb-5 mb-lg-0">
40 <div class="card">
41 <div class="card-body py-5 px-md-5">
42 <form action="#" th:action="@{/register_customer}" th:object="${stakeholder}" method="post">
43 <!-- 2 column grid layout with text inputs for the first and last names -->
44 <div class="row">
45 <div class="col-md-6 mb-4">
46 <div class="form-outline">
47 <input type="text" id="firstname" class="form-control" required th:field="*{firstName}" />
48 <label class="form-label" for="firstname">First name</label>
49 </div>
50 </div>
51 <div class="col-md-6 mb-4">
52 <div class="form-outline">
53 <input type="text" id="lastname" class="form-control" required th:field="*{lastName}" />
54 <label class="form-label" for="lastname">Last name</label>
55 </div>
56 </div>
57 </div>
58
59 <!-- Username input -->
60 <div class="form-outline mb-4">
61 <input type="text" id="username" class="form-control" required th:field="*{username}" />
62 <label class="form-label" for="username">Username</label>
63 </div>
64
65 <!-- Email input -->
66 <div class="form-outline mb-4">
67 <input type="email" id="email" class="form-control" required th:field="*{email}" />
68 <label class="form-label" for="email">Email address</label>
69 </div>
70
71 <!-- Password input -->
72 <div class="form-outline mb-4">
73 <input type="password" id="password" class="form-control" required th:field="*{password}" />
74 <label class="form-label" for="password">Password</label>
75 </div>
76
77 <!-- Submit button -->
78 <button type="submit" class="btn btn-primary btn-block mb-4">
79 Register
80 </button>
81
82 <div class="text-center">
83 <p>Already have an account? <a href="/login" class="link-primary">Login</a></p>
84 </div>
85
86 <!-- Register buttons -->
87 <div class="text-center">
88 <p>or sign up with:</p>
89 <button type="button" class="btn btn-link btn-floating mx-1">
90 <i class="fab fa-facebook-f"></i>
91 </button>
92
93 <button type="button" class="btn btn-link btn-floating mx-1">
94 <i class="fab fa-google"></i>
95 </button>
96
97 <button type="button" class="btn btn-link btn-floating mx-1">
98 <i class="fab fa-twitter"></i>
99 </button>
100
101 <button type="button" class="btn btn-link btn-floating mx-1">
102 <i class="fab fa-github"></i>
103 </button>
104 </div>
105 </form>
106 </div>
107 </div>
108 </div>
109 </div>
110 </div>
111</div>
112<!-- Jumbotron -->
113<!-- MDB -->
114<script
115 type="text/javascript"
116 src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js"
117></script>
118</body>
119</html>
Note: See TracBrowser for help on using the repository browser.