Добавил регистрацию и вход

index.html

@@ -20,11 +20,11 @@
 			</nav>
 		</div>
 		<div class="right">
-			<nav id="non-login" style="display: none;">
+			<nav id="non-logged" style="display: none;">
 				<a href="signup">Регистрация</a>
 				<a href="login">Вход</a>
 			</nav>
-			<nav id="login" style="display: none;">
+			<nav id="logged" style="display: none;">
 				<a href="add">Добавить</a>
 				<a href="my">Профиль</a>
 			</nav>

js/login.js

@@ -1,10 +1,26 @@
+const form = document.getElementsByTagName('form')[0]
 const login = document.getElementById('login')
 const password = document.getElementById('password')
 const checkbox = document.getElementById('checkbox')
-const submit = document.getElementById('submit')
 
-submit.onclick = () => { alert('Hello world!') }
 
-function check() {
-	fetch(`api/checklogin/${login.value}`)
-}
+form.addEventListener('submit', async function(event) {
+	event.preventDefault()
+	if (!await checkLogin(login.value)) {
+		alert('Нет пользователя с таким логином!')
+	}
+	else if (!await checkPassword(login.value, password.value)) {
+		alert('Пароль неверный!')
+	}
+	else {
+		if (checkbox.checked) {
+			localStorage.login = login.value
+			localStorage.password = password.value
+		}
+		else {
+			sessionStorage.login = login.value
+			sessionStorage.password = password.value
+		}
+		form.submit()
+	}
+})

js/main.js

@@ -1,4 +1,39 @@
-if (localStorage.login)
-	document.getElementById('login').style.display = ''
+if (getUser())
+	document.getElementById('logged').style.display = ''
 else 
-	document.getElementById('non-login').style.display = ''
+	document.getElementById('non-logged').style.display = ''
+
+async function checkStatus(url, data = {}) {
+	try {
+		const response = await fetch(url, data)
+		return response.ok
+	} catch (err) {
+		return false
+	}
+}
+
+async function checkLogin(login) {
+	return await checkStatus(`/api/checklogin/${login}`)
+}
+
+async function checkPassword(login, password) {
+	return await checkStatus('/api/checkpassword', {
+		method: 'POST',
+		body: `login=${login}&password=${password}`
+	})
+}
+
+function getUser() {
+	let user = {}
+	if (sessionStorage.login && sessionStorage.password) {
+		user.login = sessionStorage.login
+		user.password = sessionStorage.password
+	}
+	else if (localStorage.login && localStorage.password) {
+		user.login = localStorage.login
+		user.password = localStorage.password
+	}
+	else
+		return false
+	return user
+}

js/signup.js

@@ -0,0 +1,21 @@
+const form = document.getElementsByTagName('form')[0]
+
+const login = document.getElementsByName('login')[0]
+
+const password = document.getElementsByName('password')[0]
+const password2 = document.getElementsByName('password2')[0]
+
+form.addEventListener('submit', async (e) => {
+	e.preventDefault()
+	if (!form.checkValidity()) {
+		return
+	}
+	if (await checkLogin(login.value)) {
+		alert('Пользователь с таким логином уже существует!')
+	}
+	else if (password.value != password2.value) {
+		alert('Пароли не совпадают!')
+	}
+	else
+		form.submit()
+})

login.html

@@ -20,11 +20,11 @@
 			</nav>
 		</div>
 		<div class="right">
-			<nav id="non-login" style="display: none;">
+			<nav id="non-logged" style="display: none;">
 				<a href="signup">Регистрация</a>
 				<a href="login" class="active">Вход</a>
 			</nav>
-			<nav id="login" style="display: none;">
+			<nav id="logged" style="display: none;">
 				<a href="add">Добавить</a>
 				<a href="my">Профиль</a>
 			</nav>
@@ -34,17 +34,17 @@
 	<main>
 		<div id="form">
 			<div id="label">Вход</div>
-			<form method="post" action="api/login">
+			<form action="/">
 				<label>
 					<p>Логин</p>
-					<input type="text" name="login" class="input" required>
+					<input type="text" id="login" class="input" required>
 				</label>
 				<label>
 					<p>Пароль</p>
-					<input type="password" name="password" class="input" required>
+					<input type="password" id="password" class="input" required>
 				</label>
 				<label>
-					<input type="checkbox" checked>
+					<input type="checkbox" id="checkbox" checked>
 					Запомнить это устройство
 				</label>
 				<input type="submit" value="Войти">

signup.html

@@ -20,11 +20,11 @@
 			</nav>
 		</div>
 		<div class="right">
-			<nav id="non-login" style="display: none;">
+			<nav id="non-logged" style="display: none;">
 				<a href="signup" class="active">Регистрация</a>
 				<a href="login">Вход</a>
 			</nav>
-			<nav id="login" style="display: none;">
+			<nav id="logged" style="display: none;">
 				<a href="add">Добавить</a>
 				<a href="my">Профиль</a>
 			</nav>
@@ -53,7 +53,7 @@
 				</label>
 				<label>
 					<p>Повторите пароль</p>
-					<input type="password" class="input" required>
+					<input type="password" name="password2" class="input" required>
 				</label>
 				<input type="submit" value="Зарегистрироваться">
 			</form>
@@ -67,5 +67,6 @@
 		</div>
 	</footer>
 	<script src="js/main.js"></script>
+	<script src="js/signup.js"></script>
 </body>
 </html>