Javascript-форум - Вызов следующего файла

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Вызов следующего файла (https://javascript.ru/forum/misc/82724-vyzov-sleduyushhego-fajjla.html)

Вызов следующего файла

Добрый день,

После проверки ввода username, email и password и нажатии на кнопку "Enter" должны вызвать следующий файл "new.html", который запомнит имя пользователя при условии правильного ввода почтового адреса и пароля.
В этом у меня проблема, не знаю как записать :(

<button class="button button1">Enter</button>

<form id="form" class="form">	
		<div class="main">		
			<div class="form-control">
				<input class="reg_input" type="text" placeholder="Username" id="username" />
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>			
			<div class="form-control">
				<input class="reg_input" type="email" placeholder="Email" id="email" />
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>	
			<div class="form-control">
				<input class="reg_input" type="password" placeholder="Password" id="password"/>
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>		
		</div>
		<button class="button button1">Enter</button>
	</form>

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

form.addEventListener('submit', e => {
	e.preventDefault();
	
    checkInputs();
    let user = checkInputs()
    if (user.isValid){
        localStorage.setItem("user",JSON.stringify(user))
    }
});

function checkInputs() {
	// trim to remove the whitespaces
	const usernameValue = username.value.trim();
	const emailValue = email.value.trim();
	const passwordValue = password.value.trim();
	const password2Value = password2.value.trim();
    
    let isValid = true
    
	if(usernameValue === '') {
        setErrorFor(username, 'Username cannot be blank');
        isValid = false
	} else {
		setSuccessFor(username);
	}
	
	if(emailValue === '') {
        setErrorFor(email, 'Email cannot be blank');
        isValid = false
	} else if (!isEmail(emailValue)) {
		setErrorFor(email, 'Not a valid email');
        isValid = false
	} else {
		setSuccessFor(email);
	}
	
	if(passwordValue === '') {
		setErrorFor(password, 'Password cannot be blank');
        isValid = false
	} else {
		setSuccessFor(password);
	}
	
	if(password2Value === '') {
		setErrorFor(password2, 'Password2 cannot be blank');
        isValid = false
	} else if(passwordValue !== password2Value) {
		setErrorFor(password2, 'Passwords does not match');
        isValid = false
	} else{
		setSuccessFor(password2);
    }
    
    return {usernameValue,emailValue,passwordValue, isValid}

}

function setErrorFor(input, message) {
	const formControl = input.parentElement;
	const small = formControl.querySelector('small');
	formControl.className = 'form-control error';
	small.innerText = message;
}

function setSuccessFor(input) {
	const formControl = input.parentElement;
	formControl.className = 'form-control success';
}
	
function isEmail(email) {
	return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
// SOCIAL PANEL JS
const floating_btn = document.querySelector('.floating-btn');
const close_btn = document.querySelector('.close-btn');
const social_panel_container = document.querySelector('.social-panel-container');

floating_btn.addEventListener('click', () => {
	social_panel_container.classList.toggle('visible')
});

close_btn.addEventListener('click', () => {
	social_panel_container.classList.remove('visible')
});

Это просто задание такое, нужно просто вызвать другой файл и чтобы он помнил имя пользователя. Использую только html файлы, css и js.

Оказывается немного неверно была поставлена задача. В общем:

index.html
Username (Вводим имя)
Email (Вводим почту)
Password (Вводим пароль)
Registration (Кнопка для вызова следующего файла, где вводится имя и пароль и в этом файле произойдет проверка с данными первого файла)

index.html

<script src="main.js"></script>	
</head>
 <body>
 	<form id="form" class="form">	
		<div class="mtavari">		
			<div class="form-control">
				<input class="reg_input" type="text" placeholder="Username" id="username" />
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>			
			<div class="form-control">
				<input class="reg_input" type="email" placeholder="Email" id="email" />
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>	
			<div class="form-control">
				<input class="reg_input" type="password" placeholder="Password" id="password"/>
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>	
        <div class="form-control">
            <a class="button button1" href="login.html">Registration</a>
        </div>			
		</div>
	</form>

login.html
Username (Вводим имя)
Password (Вводим пароль)
Login (кнопка для проверки имени и пароля с данными index.html и если всё верно, то вызовет следующий файл)

login.html

<script src="main.js"></script>	
<script>
	let user = JSON.parse(localStorage.getItem("user"))	
</script>
</head>
 <body>
 	<form id="form" class="form">	
		<div class="mtavari">		
			<div class="form-control">
				<input class="reg_input" type="text" placeholder="Username" id="username" />
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>			
			<div class="form-control">
				<input class="reg_input" type="password" placeholder="Password" id="password"/>
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>	
        <div class="form-control">
            <a class="button button1" href="watch_1.html">Login</a>
        </div>			
		</div>
	</form>

В login.html должна произойти проверка имени и пароля, чтонепонятно пока как сделать.
В main.js у меня находится сам код, который в первом сообщении был указан.

В login.html добавлен код, но всё равно не работает :(

<script>
let user = JSON.parse(localStorage.getItem("user"))
let password = JSON.parse(localStorage.getItem("password"))

function check() {
	if(username2Value === '') {
		setErrorFor(username2, 'Username cannot be blank');
        isValid = false
	} else if(username2Value !== usernameValue) {
		setErrorFor(username2, 'Username does not match');
        isValid = false
	} else{
		setSuccessFor(username2);
    }

	if(password2Value === '') {
		setErrorFor(password2, 'Password cannot be blank');
        isValid = false
	} else if(passwordValue !== password2Value) {
		setErrorFor(password2, 'Passwords does not match');
        isValid = false
	} else{
		setSuccessFor(password2);
    }
</script>

Janejane,

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
    <a href="signin.html">Sign in</a> | <a href="signup.html">Sign up</a>
</body>
</html>

signup.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sign up</title>
    <script src="signup.js"></script>
</head>
<body>
    <form name="signup">
        <input type="text" name="username" placeholder="Username" required>
        <input type="email" name="email" placeholder="Email" required>
        <input type="password" name="password" placeholder="Password" required>
        <button>Sign up</button>
    </form>
</body>
</html>

signup.js

document.addEventListener('DOMContentLoaded', function() {
    this.signup.addEventListener('submit', function(event) {
        event.preventDefault();
        const database = JSON.parse(localStorage.getItem('database')) || [];
        const newUser = { username: this.username.value, email: this.email.value, password: this.password.value };
        const isUser = database.some(oldUser => newUser.username == oldUser.username);
        if (isUser) return alert('Username is taken');
        database.push(newUser);
        localStorage.setItem('database', JSON.stringify(database));
        location.href = 'signin.html';
    });
});

signin.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sign in</title>
    <script src="signin.js"></script>
</head>
<body>
    <form name="signin">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" placeholder="Password" required>
        <button>Sign in</button>
    </form>
</body>
</html>

signin.js

document.addEventListener('DOMContentLoaded', function() {
    this.signin.addEventListener('submit', function(event) {
        event.preventDefault();
        const database = JSON.parse(localStorage.getItem('database')) || [];
        const newUser = { username: this.username.value, password: this.password.value };
        const isUser = database.some(oldUser => newUser.username == oldUser.username && newUser.password == oldUser.password);
        if (!isUser) return alert('Incorrect username or password');
        location.href = 'content.html';
    });
});

content.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Content</title>
</head>
<body>
    Content
</body>
</html>

Rise,

Огромное спасибо, переделала под свой вариант и по-моему получилось так, как нужно было. Завтра мне уже точнее скажут, так надо было сделать или нет. Но по-моему всё сделано так, как нужно.
В самой логике тоже разобралась и поняла, где и в чем я ошибалась.
Еще раз спасибо!!!