source: KernelRecordsMVC.Web/Views/Account/Register.cshtml

main
Last change on this file was d89d25b, checked in by mmilevski <markomilevski3@…>, 4 weeks ago

Added few implementaions, minor UI changes.
  • Property mode set to 100644
File size: 7.6 KB
RevLine 
[08aefc6]1@model KernelRecordsMVC.Application.ViewModels.RegisterViewModel
2
[d89d25b]3@{
4 ViewData["Title"] = "Register";
5}
[08aefc6]6
[d89d25b]7<div class="auth-page">
[08aefc6]8
[d89d25b]9 <div class="auth-shell auth-shell-register">
[08aefc6]10
[d89d25b]11 <div class="auth-brand-panel">
[08aefc6]12
[d89d25b]13 <a asp-controller="Home"
14 asp-action="Index"
15 class="auth-logo-link">
[08aefc6]16
[d89d25b]17 <img src="~/images/logo.png"
18 asp-append-version="true"
19 alt="Kernel Records"
20 class="auth-logo" />
[08aefc6]21
[d89d25b]22 </a>
[08aefc6]23
[d89d25b]24 <div class="auth-brand-copy">
[08aefc6]25
[d89d25b]26 <span class="auth-eyebrow">
27 KERNEL RECORDS
28 </span>
[08aefc6]29
[d89d25b]30 <h1>
31 Start your collection.
32 </h1>
[08aefc6]33
[d89d25b]34 <p>
35 Create an account to save releases,
36 build your wishlist and place orders.
37 </p>
[08aefc6]38
[d89d25b]39 </div>
[08aefc6]40
[d89d25b]41 </div>
[08aefc6]42
43
[d89d25b]44 <div class="auth-form-panel">
[08aefc6]45
[d89d25b]46 <div class="auth-form-header">
[08aefc6]47
[d89d25b]48 <span class="auth-eyebrow">
49 NEW ACCOUNT
50 </span>
[08aefc6]51
[d89d25b]52 <h2>Register</h2>
[08aefc6]53
[d89d25b]54 <p>
55 Create your Kernel Records account.
56 </p>
[08aefc6]57
[d89d25b]58 </div>
[08aefc6]59
60
[d89d25b]61 <form asp-action="Register"
62 method="post"
63 class="auth-form">
[08aefc6]64
[d89d25b]65 @Html.AntiForgeryToken()
[08aefc6]66
67
[d89d25b]68 <div asp-validation-summary="ModelOnly"
69 class="auth-validation-summary">
70 </div>
[08aefc6]71
72
[d89d25b]73 <!-- EMAIL -->
74
75 <div class="auth-field">
76
77 <label asp-for="Email">
78 Email
79 </label>
80
81 <input asp-for="Email"
82 autocomplete="email"
83 placeholder="mila@gmail.com" />
84
85 <span asp-validation-for="Email"
86 class="auth-field-error">
87 </span>
88
89 </div>
90
91
92 <!-- USERNAME -->
93
94 <div class="auth-field">
95
96 <label asp-for="Username">
97 Username
98 </label>
99
100 <input asp-for="Username"
101 autocomplete="username"
102 placeholder="Choose a username" />
103
104 <span asp-validation-for="Username"
105 class="auth-field-error">
106 </span>
107
108 </div>
109
110
111 <!-- PASSWORD ROW -->
112
113 <div class="auth-form-row">
114
115 <div class="auth-field">
116
117 <label asp-for="Password">
118 Password
119 </label>
120
121 <div class="auth-password-field">
122
123 <input asp-for="Password"
124 autocomplete="new-password"
125 placeholder="Create password"
126 id="registerPassword" />
127
128 <button type="button"
129 class="auth-password-toggle"
130 data-password-toggle="registerPassword"
131 aria-label="Show password">
132
133 Show
134
135 </button>
136
137 </div>
138
139 <span asp-validation-for="Password"
140 class="auth-field-error">
141 </span>
142
143 </div>
[08aefc6]144
145
[d89d25b]146 <div class="auth-field">
[08aefc6]147
[d89d25b]148 <label asp-for="ConfirmPassword">
149 Confirm Password
150 </label>
[08aefc6]151
[d89d25b]152 <div class="auth-password-field">
[08aefc6]153
[d89d25b]154 <input asp-for="ConfirmPassword"
155 autocomplete="new-password"
156 placeholder="Repeat password"
157 id="confirmPassword" />
[08aefc6]158
[d89d25b]159 <button type="button"
160 class="auth-password-toggle"
161 data-password-toggle="confirmPassword"
162 aria-label="Show password">
[08aefc6]163
[d89d25b]164 Show
[08aefc6]165
[d89d25b]166 </button>
167
168 </div>
169
170 <span asp-validation-for="ConfirmPassword"
171 class="auth-field-error">
172 </span>
173
174 </div>
175
176 </div>
177
178
179 <!-- SHIPPING ADDRESS -->
180
181 <div class="auth-field">
182
183 <label asp-for="ShippingAddress">
184 Shipping Address
185 <span class="auth-optional">
186 Optional
187 </span>
188 </label>
189
190 <input asp-for="ShippingAddress"
191 autocomplete="street-address"
192 placeholder="Shipping address" />
193
194 <span asp-validation-for="ShippingAddress"
195 class="auth-field-error">
196 </span>
197
198 </div>
199
200
201 <!-- TELEPHONE -->
202
203 <div class="auth-field">
204
205 <label asp-for="TelephoneNumber">
206 Telephone Number
207 <span class="auth-optional">
208 Optional
209 </span>
210 </label>
211
212 <input asp-for="TelephoneNumber"
213 type="tel"
214 autocomplete="tel"
215 placeholder="+389..." />
216
217 <span asp-validation-for="TelephoneNumber"
218 class="auth-field-error">
219 </span>
220
221 </div>
222
223
224 <button type="submit"
225 class="auth-submit">
226
227 Create Account
228
229 </button>
230
231 </form>
232
233
234 <div class="auth-switch">
235
236 <span>
237 Already have an account?
238 </span>
239
240 <a asp-action="Login">
241 Login →
242 </a>
243
244 </div>
245
246 </div>
247
248 </div>
[08aefc6]249
250</div>
251
[d89d25b]252
[08aefc6]253@section Scripts
254{
[d89d25b]255 <partial name="_ValidationScriptsPartial" />
256
257 <script>
258
259 document
260 .querySelectorAll("[data-password-toggle]")
261 .forEach(function (button)
262 {
263 button.addEventListener(
264 "click",
265 function ()
266 {
267 const input =
268 document.getElementById(
269 button.dataset.passwordToggle);
270
271
272 if (input.type === "password")
273 {
274 input.type = "text";
275 button.textContent = "Hide";
276 button.setAttribute(
277 "aria-label",
278 "Hide password");
279 }
280 else
281 {
282 input.type = "password";
283 button.textContent = "Show";
284 button.setAttribute(
285 "aria-label",
286 "Show password");
287 }
288 });
289 });
290
291 </script>
[08aefc6]292}
Note: See TracBrowser for help on using the repository browser.