source: src/main/resources/static/UserLogin.html@ 9868304

Last change on this file since 9868304 was 9868304, checked in by ste08 <sjovanoska@…>, 4 months ago

Frontend + some backend changes
  • Property mode set to 100644
File size: 2.4 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Login</title>
7 <link rel="stylesheet" href="/css/main.css">
8 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
9</head>
10<body>
11
12<div id="app" class="login-container">
13 <h1>Login</h1>
14 <form @submit.prevent="loginUser">
15 <div class="form-group">
16 <label for="email">Email</label>
17 <input type="email" id="email" v-model="email" required placeholder="Enter your email" />
18 </div>
19
20 <div class="form-group">
21 <label for="password">Password</label>
22 <input type="password" id="password" v-model="password" required placeholder="Enter your password" />
23 </div>
24
25 <button type="submit">Login</button>
26 </form>
27 <p>
28 Don't have an account? <a href="/signup">Sign up here</a>
29 </p>
30</div>
31
32<script>
33 new Vue({
34 el: '#app',
35 data: {
36 email: '',
37 password: '',
38 userId:''
39 },
40 methods: {
41 async loginUser() {
42 if (this.email && this.password) {
43 try{
44 const response = await fetch('/api/user/login', {
45 method:'POST',
46 headers: {
47 'Content-Type':'application/json'
48 },
49 body: JSON.stringify({
50 email:this.email,
51 password:this.password
52 })
53 });
54 if(!response.ok){
55 throw new Error('Login failed');
56 }
57 const data = await response.json();
58 console.log(data);
59 if(data.userId){
60 console.log('Success');
61 window.location.href = `/flights?userId=${encodeURIComponent(data.userId)}`;
62 }else {
63 alert('Invalid login credentials');
64 }
65 } catch (error){
66 console.error(error);
67 alert('Login failed. Please try again.');
68 }
69 }
70 }
71 }
72 });
73</script>
74
75</body>
76</html>
Note: See TracBrowser for help on using the repository browser.