-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSignUp.html
More file actions
157 lines (138 loc) · 8.58 KB
/
Copy pathSignUp.html
File metadata and controls
157 lines (138 loc) · 8.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Communication - Sign Up</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link rel="stylesheet" href="/SignUp.css">
</head>
<body>
<div>
<header>
<h1 class="logo">SpaceX</h1>
<nav>
<ul>
<li><a href="/SignIn.html">Sign In</a></li>
<li><a href="/SignUp.html">Sign Up</a></li>
</ul>
</nav>
</header>
<main>
<div class="left-container"> <!-- Left Container -->
<h1>SpaceX Communication App</h1>
<p class="info-text">Welcome to SpaceX Communication App. Please sign up to access all features.</p>
<img src="/image of earth.jpeg" alt="A picture of a Earth-Space">
</div>
<div class="right-container"> <!-- Right Container -->
<h2>Create Account</h2>
<form id="sign-up-form" method="POST" action="/signup">
<label for="name">Name</label>
<input type="text" name="name" id="sign-up-name" placeholder="Name" required />
<label for="email">Email</label>
<input type="email" name="email" id="sign-up-email" placeholder="Email" required />
<label for="password">Password</label>
<input type="password" name="password" id="sign-up-password" placeholder="Password" required />
<i id="toggle-password-icon" class="fas fa-lock"></i>
<div id="Button">
<button type="button" id="login"><a href="/SignIn.html">Login</a></button>
<button type="submit" id="sign-in-button">Register</button>
</div>
<div id="sign-up-responds"></div>
</form>
</div>
</main>
<footer>
<div class="container">
<div class="flex flex-wrap justify-center">
<div class="w-full lg:w-1/2">
<h3 class="text -lg font-bold">About Us</h3>
<p class="text -sm">We are dedicated to advancing communications in space exploration.</p>
</div>
</div>
<div class="w-full lg:w-1/2">
<h3 class="text -lg font-bold">Follow Us</h3>
<ul class="flex justify-center">
<li><a href="https://twitter.com/mathew" target="_blank" rel="noopener noreferrer" class="icon-link">
<svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M22.46 6c-.77.35-1.6.58-2.46.68a4.29 4.29 0 001.88-2.36 8.58 8.58 0 01-2.73 1.04 4.29 4.29 0 00-7.3 3.91 12.16 12.16 0 01-8.84-4.48c-.33.57-.52 1.23-.52 1.93 0 1.34.68 2.52 1.71 3.21a4.28 4.28 0 01-1.94-.54v.05c0 1.85 1.32 3.4 3.07 3.76-.32.09-.66.14-1.01.14-.24 0-.47-.02-.7-.06.48 1.48 1.88 2.56 3.54 2.59a8.59 8.59 0 01-5.31 1.83c-.35 0-.69-.02-1.03-.06a12.12 12.12 0 006.57 1.93c7.88 0 12.2-6.54 12.2-12.2 0-.18 0-.37-.01-.55A8.76 8.76 0 0024 6.3a8.63 8.63 0 01-2.54.7 4.32 4.32 0 001.8-2.4z"></path>
</svg>
</a></li>
<li><a href="https://facebook.com/mathewoloyedepage" target="_blank" rel="noopener noreferrer" class="icon-link">
<svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M22.68 0H1.32C.593 0 0 .593 0 1.32v21.36C0 23.407.593 24 1.32 24h11.5v-9.293H9.297V11.25h3.513V8.825c0-3.375 1.964-5.25 4.898-5.25 1.5 0 2.784.111 3.153.162v3.637l-2.156.001c-1.688 0-2.007.802-2.007 1.976v2.586h4.016l-.524 3.457h-3.492V24h6.854c.727 0 1.32-.593 1.32-1.32V1.32C24 .593 23.407 0 22.68 0z"></path>
</svg>
</a></li>
<li>
<a href="https://linkedin.com/in/mathewoloyede" target="_blank" rel="noopener noreferrer" class="icon-link">
<svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M24 0v24H0V0h24zm-6 20h-3.5v-5.5c0-1.3-.025-3-1.825-3-1.835 0-2.125 1.43-2.125 2.903V20h-3.5V9h3.5v1.5h.05c.49-.934 1.695-1.917 3.5-1.917 3.13 0 4.125 2.272 4.125 5.27V20zM5 8H3.5V20H5V8zm-1.25-6.5C2.41 1.5 1 2.91 1 4.5S2.4 7 4.25 7c1.84 0 3.25-1.5 3.25-2.5S6.09 1.5 4.25 1.5z"></path>
</svg>
</a>
</li>
<li>
<a href="https://youtube.com/c/Mathewoloyede" target="_blank" rel="noopener noreferrer" class="icon-link">
<svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M23.498 6.186a3.004 3.004 0 0 0-2.11-2.11C19.338 3.998 12 3.998 12 3.998s-7.338 0-9.388.078a3.004 3.004 0 0 0-2.11 2.11C0 8.237 0 12 0 12s0 3.763.502 5.814a3.004 3.004 0 0 0 2.11 2.11C4.662 20.002 12 20.002 12 20.002s7.338 0 9.388-.078a3.004 3.004 0 0 0 2.11-2.11C24 15.763 24 12 24 12s0-3.763-.502-5.814zm-13.998 8.578V9.236l6.716 3.264-6.716 3.264z"></path>
</svg>
</a>
</li>
</ul>
</div>
<div>
<p>© 2024 Earth-Space Communication App</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// Sign Up functionality
const signUpForm = document.getElementById('sign-up-form');
const signUpNameInput = document.getElementById('sign-up-name');
const signUpEmailInput = document.getElementById('sign-up-email');
const signUpPasswordInput = document.getElementById('sign-up-password');
const signupresponds = document.getElementById('sign-up-responds');
signUpForm.addEventListener('submit', async (e) => {
e.preventDefault();
const signUpname = signUpNameInput.value.trim();
const signUpemail = signUpEmailInput.value.trim();
const signUppassword = signUpPasswordInput.value.trim();
if (signUpname && signUpemail && signUppassword) {
try {
const response = await axios.post('/signup', { signUpname, signUpemail, signUppassword }, { timeout: 15000 });
console.log('Response received:', response);
signupresponds.textContent = response.data.message || 'Signed up successfully';
} catch (error) {
if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
signupresponds.textContent = 'The request timed out. Please try again later.';
} else if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.error('Error during sign up:', error.response.data);
signupresponds.textContent = `An error occurred: ${error.response.data.error}`;
} else {
// Something else happened in making the request that triggered an Error
console.error('Axios error:', error);
signupresponds.textContent = `An error occurred: ${error.message}`;
}
}
}
});
// toggle-password-icon
document.getElementById('toggle-password-icon').addEventListener('click', function() {
const togglePasswordIcon = document.getElementById('toggle-password-icon');
// Toggle password visibility
if (signUpPasswordInput.type === 'password') {
signUpPasswordInput.type = 'text';
togglePasswordIcon.classList.remove('fa-lock');
togglePasswordIcon.classList.add('fa-unlock');
} else {
signUpPasswordInput.type = 'password'; // Hide Password
togglePasswordIcon.classList.remove('fa-unlock');
togglePasswordIcon.classList.add('fa-lock');
}
});
</script>
<script></script>
</body>
</html>