source: Scripts/Sign.js@ 75f74d9

main
Last change on this file since 75f74d9 was 75f74d9, checked in by Vlado 222039 <vlado.popovski@…>, 6 weeks ago

Initial commit: Adding Book Tracker code
  • Property mode set to 100644
File size: 6.9 KB
RevLine 
[75f74d9]1const signUpButton = document.getElementById('signUp');
2 const signInButton = document.getElementById('signIn');
3 const container = document.getElementById('container');
4
5 signUpButton.addEventListener('click', () => {
6 container.classList.add('right-panel-active');
7 });
8
9 signInButton.addEventListener('click', () => {
10 container.classList.remove('right-panel-active');
11 });
12
13 // URL parameter parsing
14 function getUrlParams() {
15 const params = new URLSearchParams(window.location.search);
16 return {
17 error: params.get('error'),
18 email: params.get('email'),
19 username: params.get('username')
20 };
21 }
22
23 // Error handling
24 function showError(elementId, message) {
25 const errorElement = document.getElementById(elementId);
26 if (errorElement) {
27 errorElement.textContent = message;
28 errorElement.classList.add('show');
29 // Add error class to the corresponding input
30 const inputId = elementId.replace('_error', '');
31 const inputElement = document.getElementById(inputId);
32 if (inputElement) {
33 inputElement.classList.add('error');
34 }
35 }
36 }
37
38 function clearErrors() {
39 const errorElements = document.querySelectorAll('.error-message');
40 const inputs = document.querySelectorAll('input');
41 errorElements.forEach(element => {
42 element.classList.remove('show');
43 element.textContent = '';
44 });
45 inputs.forEach(input => {
46 input.classList.remove('error');
47 });
48 }
49
50 // Form validation
51 document.getElementById('signupForm').addEventListener('submit', function(e) {
52 clearErrors();
53 let isValid = true;
54
55 const username = document.getElementById('signup_username').value;
56 const email = document.getElementById('signup_email').value;
57 const password = document.getElementById('signup_password').value;
58
59 if (!username) {
60 showError('signup_username_error', 'Username is required');
61 isValid = false;
62 }
63
64 if (!email) {
65 showError('signup_email_error', 'Email is required');
66 isValid = false;
67 } else if (!/\S+@\S+\.\S+/.test(email)) {
68 showError('signup_email_error', 'Please enter a valid email address');
69 isValid = false;
70 }
71
72 if (!password) {
73 showError('signup_password_error', 'Password is required');
74 isValid = false;
75 }
76
77 if (!isValid) {
78 e.preventDefault();
79 }
80 });
81
82 document.getElementById('loginForm').addEventListener('submit', function(e) {
83 clearErrors();
84 let isValid = true;
85
86 const username = document.getElementById('login_username').value;
87 const password = document.getElementById('login_password').value;
88
89 if (!username) {
90 showError('login_username_error', 'Username is required');
91 isValid = false;
92 }
93
94 if (!password) {
95 showError('login_password_error', 'Password is required');
96 isValid = false;
97 }
98
99 if (!isValid) {
100 e.preventDefault();
101 }
102 });
103
104 // Handle URL parameters on page load
105 window.addEventListener('load', function() {
106 const params = getUrlParams();
107
108 if (params.error) {
109 switch(params.error) {
110 case 'INVALID_EMAIL':
111 container.classList.add('right-panel-active');
112 showError('signup_email_error', 'Please enter a valid email address');
113 break;
114 case 'INVALID_USERNAME':
115 if (params.email) {
116 container.classList.add('right-panel-active');
117 showError('signup_username_error', 'Username is required');
118 document.getElementById('signup_email').value = params.email;
119 } else {
120 showError('login_username_error', 'Invalid username');
121 }
122 break;
123 case 'INVALID_PASSWORD':
124 if (params.email) {
125 container.classList.add('right-panel-active');
126 showError('signup_password_error', 'Password is required');
127 document.getElementById('signup_email').value = params.email;
128 document.getElementById('signup_username').value = params.username;
129 }
130 break;
131 case 'USERNAME_TAKEN':
132 container.classList.add('right-panel-active');
133 showError('signup_username_error', 'Username is already taken');
134 document.getElementById('signup_email').value = params.email;
135 break;
136 case 'EMAIL_TAKEN':
137 container.classList.add('right-panel-active');
138 showError('signup_email_error', 'Email is already registered');
139 document.getElementById('signup_username').value = params.username;
140 break;
141 case 'INVALID_CREDENTIALS':
142 showError('login_general_error', 'Invalid username or password');
143 break;
144 case 'TOO_MANY_ATTEMPTS':
145 showError('login_general_error', 'Too many login attempts. Please try again later.');
146 break;
147 case 'WEAK_PASSWORD':
148 container.classList.add('right-panel-active');
149 showError('signup_password_error', 'Password must be at least 8 characters long');
150 document.getElementById('signup_email').value = params.email;
151 document.getElementById('signup_username').value = params.username;
152 break;
153 case 'INVALID_USERNAME_FORMAT':
154 container.classList.add('right-panel-active');
155 showError('signup_username_error', 'Username can only contain letters, numbers, and underscores');
156 document.getElementById('signup_email').value = params.email;
157 break;
158 case 'SERVER_ERROR':
159 showError('login_general_error', 'A server error occurred. Please try again later.');
160 break;
161 }
162 }
163 });
Note: See TracBrowser for help on using the repository browser.