188 lines
6.1 KiB
HTML
188 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html></html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Register New Account</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<style>
|
|
:root {
|
|
--gh-bg: #0d1117;
|
|
--gh-panel: #161b22;
|
|
--gh-border: #30363d;
|
|
--gh-text: #c9d1d9;
|
|
--gh-muted: #8b949e;
|
|
--gh-accent: #58a6ff;
|
|
--gh-green: #238636;
|
|
--gh-red: #f85149;
|
|
--gh-radius: 8px;
|
|
--gh-shadow: 0 4px 32px #01040960;
|
|
}
|
|
body {
|
|
background: var(--gh-bg);
|
|
color: var(--gh-text);
|
|
font-family: "Segoe UI", "Liberation Sans", Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
h1 {
|
|
color: var(--gh-accent);
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
margin: 40px 0 32px 0;
|
|
letter-spacing: -1px;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: var(--gh-muted);
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
}
|
|
input, button {
|
|
background: #0d1117;
|
|
color: var(--gh-text);
|
|
border: 1px solid var(--gh-border);
|
|
border-radius: var(--gh-radius);
|
|
padding: 10px 12px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-size: 1.05em;
|
|
outline: none;
|
|
transition: border 0.2s, box-shadow 0.2s;
|
|
}
|
|
input:focus {
|
|
border: 1.5px solid var(--gh-accent);
|
|
box-shadow: 0 0 0 3px #1f6feb33;
|
|
}
|
|
button {
|
|
background: var(--gh-accent);
|
|
color: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
margin-top: 20px;
|
|
font-weight: 600;
|
|
font-size: 1.1em;
|
|
box-shadow: var(--gh-shadow);
|
|
transition: background 0.2s, box-shadow 0.2s;
|
|
}
|
|
button:hover, button:focus {
|
|
background: #1f6feb;
|
|
box-shadow: 0 2px 8px #1f6feb33;
|
|
}
|
|
form {
|
|
background: var(--gh-panel);
|
|
border: 1px solid var(--gh-border);
|
|
border-radius: var(--gh-radius);
|
|
padding: 32px;
|
|
box-shadow: var(--gh-shadow);
|
|
max-width: 480px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
#msg {
|
|
margin-top: 24px;
|
|
font-size: 1.1em;
|
|
color: var(--gh-green);
|
|
text-align: center;
|
|
}
|
|
#msg.error {
|
|
color: var(--gh-red);
|
|
}
|
|
small {
|
|
color: var(--gh-muted);
|
|
font-size: 0.9em;
|
|
display: block;
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Register New Account</h1>
|
|
<form id="regForm" autocomplete="off">
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input id="username" name="username" type="text" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input id="password" name="password" type="password" required minlength="6" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="addresses">Addresses (comma-separated)</label>
|
|
<input id="addresses" name="addresses" type="text" placeholder="e.g. home,work" />
|
|
<small>You can pin multiple addresses to your account.</small>
|
|
</div>
|
|
<button type="submit">Register</button>
|
|
</form>
|
|
<div id="msg"></div>
|
|
<script>
|
|
// SHA-256 hashing function using Web Crypto API
|
|
async function hashPassword(password) {
|
|
const encoder = new TextEncoder();
|
|
const data = encoder.encode(password);
|
|
const hashBuffer = await crypto.subtle.digest('SHA-256', data);
|
|
// Convert buffer to hex string
|
|
return Array.from(new Uint8Array(hashBuffer))
|
|
.map(b => b.toString(16).padStart(2, '0'))
|
|
.join('');
|
|
}
|
|
|
|
const form = document.getElementById('regForm');
|
|
const msgEl = document.getElementById('msg');
|
|
form.onsubmit = async function(e) {
|
|
e.preventDefault();
|
|
msgEl.textContent = '';
|
|
msgEl.className = '';
|
|
const username = form.username.value.trim();
|
|
const password = form.password.value;
|
|
const addressesRaw = form.addresses.value.trim();
|
|
const adresses = addressesRaw
|
|
? addressesRaw.split(',').map(s => s.trim()).filter(s => s.length > 0)
|
|
: [];
|
|
if (!username || !password) {
|
|
msgEl.textContent = 'Please fill all required fields.';
|
|
msgEl.className = 'error';
|
|
return;
|
|
}
|
|
let hashedPassword;
|
|
try {
|
|
hashedPassword = await hashPassword(password);
|
|
} catch (err) {
|
|
msgEl.textContent = 'Error hashing password.';
|
|
msgEl.className = 'error';
|
|
return;
|
|
}
|
|
const payload = {
|
|
username,
|
|
password: hashedPassword,
|
|
adresses
|
|
};
|
|
try {
|
|
const res = await fetch('/api/users', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
const data = await res.json();
|
|
if (data.ok) {
|
|
window.location.href = "/";
|
|
} else {
|
|
msgEl.textContent = 'Error: ' + (data.error || 'Unknown error');
|
|
msgEl.className = 'error';
|
|
}
|
|
} catch (err) {
|
|
msgEl.textContent = 'Network error: ' + err.message;
|
|
msgEl.className = 'error';
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|