Gibrat_Auganov/galikon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v9 — логин и пароль при регистрации и входе

Browse Source
This commit is contained in:
Dauren777 2026-06-01 10:43:02 +00:00
parent d814f28513
commit 6e68eed378
1 changed files with 76 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
index.html
View File

@ -103,7 +103,7 @@ input[type=file]{display:none}
.app-screen{display:none} .app-screen{display:none}
.app-screen.active{display:block} .app-screen.active{display:block}
.profile-screen.hidden{display:none} .profile-screen.hidden,#loginScreen.hidden{display:none}
@media(max-width:480px){ @media(max-width:480px){
.grid2{grid-template-columns:1fr} .grid2{grid-template-columns:1fr}
@ -117,13 +117,33 @@ input[type=file]{display:none}
<body> <body>
<!-- PROFILE SCREEN --> <!-- PROFILE SCREEN -->
<div class="profile-screen" id="profileScreen"> <!-- LOGIN SCREEN -->
<div class="profile-screen" id="loginScreen">
<div style="max-width:400px;margin:auto">
<h2>&#x1F3CA; <span>Галикон</span></h2>
<p class="sub">Войди в свой аккаунт</p>
<div class="card">
<input type="text" id="loginUser" placeholder="Логин">
<input type="password" id="loginPass" placeholder="Пароль">
<div id="loginError" style="color:var(--red);font-size:13px;margin-bottom:8px;display:none"></div>
<button class="btn" onclick="doLogin()" style="width:100%;margin-bottom:8px">&#x1F512; Войти</button>
<button class="btn outline" onclick="showRegister()" style="width:100%">&#x270F; Создать аккаунт</button>
</div>
</div>
</div>
<!-- REGISTER + PROFILE SCREEN -->
<div class="profile-screen hidden" id="profileScreen">
<h2>&#x1F3CA; <span>Галикон</span></h2> <h2>&#x1F3CA; <span>Галикон</span></h2>
<p class="sub">Приложение для спортсменов. Создай свой профиль.</p> <p class="sub">Приложение для спортсменов. Создай свой профиль.</p>
<div class="card" id="regForm"> <div class="card" id="regForm">
<h3>&#x270F; Регистрация</h3> <h3>&#x270F; Регистрация</h3>
<input type="text" id="regName" placeholder="Фамилия Имя Отчество"> <input type="text" id="regName" placeholder="Фамилия Имя Отчество">
<div class="grid2">
<input type="text" id="regLogin" placeholder="Придумай логин">
<input type="password" id="regPass" placeholder="Придумай пароль">
</div>
<div class="grid2"> <div class="grid2">
<select id="regSport"> <select id="regSport">
<option value="">Выбери вид спорта</option> <option value="">Выбери вид спорта</option>
@ -198,6 +218,7 @@ input[type=file]{display:none}
<header> <header>
<h1>&#x1F3CA; <span>Галикон</span></h1> <h1>&#x1F3CA; <span>Галикон</span></h1>
<div class="header-right"> <div class="header-right">
<button class="btn outline small" style="padding:4px 10px;font-size:11px;margin-right:4px" onclick="doLogout()">&#x1F6AA;</button>
<span class="profile-name" id="headerName"></span> <span class="profile-name" id="headerName"></span>
<div class="avatar" id="headerAvatar" onclick="showProfileScreen()"></div> <div class="avatar" id="headerAvatar" onclick="showProfileScreen()"></div>
</div> </div>
@ -373,8 +394,54 @@ function toast(msg) {
} }
// === PROFILE SYSTEM === // === PROFILE SYSTEM ===
function doLogin() {
const login = document.getElementById('loginUser').value.trim().toLowerCase();
const pass = document.getElementById('loginPass').value;
if (!login || !pass) { showLoginError('Введи логин и пароль!'); return; }
const profiles = LS('profiles') || [];
const profile = profiles.find(p => p.login === login && p.pass === pass);
if (!profile) { showLoginError('Неверный логин или пароль'); return; }
document.getElementById('loginScreen').classList.add('hidden');
document.getElementById('profileScreen').classList.add('hidden');
document.getElementById('loginScreen').classList.add('hidden');
document.getElementById('appScreen').classList.add('active');
loginProfile(profile.id);
hideLoginError();
}
function doLogout() {
if (confirm('Выйти из аккаунта?')) {
currentProfileId = null;
document.getElementById('appScreen').classList.remove('active');
document.getElementById('loginScreen').classList.remove('hidden');
document.getElementById('loginUser').value = '';
document.getElementById('loginPass').value = '';
}
}
function showLoginError(msg) {
const el = document.getElementById('loginError');
el.textContent = msg; el.style.display = 'block';
}
function hideLoginError() {
document.getElementById('loginError').style.display = 'none';
}
function showRegister() {
document.getElementById('loginScreen').classList.add('hidden');
document.getElementById('profileScreen').classList.remove('hidden');
document.getElementById('loginScreen').classList.add('hidden');
renderProfileList();
}
function registerProfile() { function registerProfile() {
const name = document.getElementById('regName').value.trim(); const name = document.getElementById('regName').value.trim();
const login = document.getElementById('regLogin').value.trim().toLowerCase();
const pass = document.getElementById('regPass').value;
if (!login) return toast('Придумай логин!');
if (!pass || pass.length < 3) return toast('Пароль — минимум 3 символа!');
const profiles = LS('profiles') || [];
if (profiles.find(p => p.login === login)) return toast('Такой логин уже занят!');
if (!name) return toast('Введи ФИО!'); if (!name) return toast('Введи ФИО!');
const profile = { const profile = {
id: Date.now(), id: Date.now(),
@ -389,14 +456,14 @@ function registerProfile() {
rank: document.getElementById('regRank').value.trim(), rank: document.getElementById('regRank').value.trim(),
goal: document.getElementById('regGoal').value.trim(), goal: document.getElementById('regGoal').value.trim(),
photo: document.getElementById('regPhotoPreview').src || '', photo: document.getElementById('regPhotoPreview').src || '',
created: new Date().toISOString() login, pass, created: new Date().toISOString()
}; };
if (profile.photo === window.location.href) profile.photo = ''; if (profile.photo === window.location.href) profile.photo = '';
const profiles = LS('profiles') || []; const profiles = LS('profiles') || [];
profiles.push(profile); profiles.push(profile);
SS('profiles', profiles); SS('profiles', profiles);
// Clear form // Clear form
['regName','regSport','regAge','regBirth','regCountry','regClub','regCity','regCoach','regRank','regGoal'].forEach(id => document.getElementById(id).value = ''); ['regName','regLogin','regPass','regSport','regAge','regBirth','regCountry','regClub','regCity','regCoach','regRank','regGoal'].forEach(id => document.getElementById(id).value = '');
document.getElementById('regPhotoPreview').style.display = 'none'; document.getElementById('regPhotoPreview').style.display = 'none';
loginProfile(profile.id); loginProfile(profile.id);
} }
@ -459,6 +526,7 @@ function loginProfile(id) {
const p = profiles.find(x => x.id === id); const p = profiles.find(x => x.id === id);
if (!p) return; if (!p) return;
document.getElementById('profileScreen').classList.add('hidden'); document.getElementById('profileScreen').classList.add('hidden');
document.getElementById('loginScreen').classList.add('hidden');
document.getElementById('appScreen').classList.add('active'); document.getElementById('appScreen').classList.add('active');
document.getElementById('headerName').textContent = p.name.split(' ')[0]; document.getElementById('headerName').textContent = p.name.split(' ')[0];
const av = document.getElementById('headerAvatar'); const av = document.getElementById('headerAvatar');
@ -473,6 +541,7 @@ function loginProfile(id) {
function showProfileScreen() { function showProfileScreen() {
document.getElementById('profileScreen').classList.remove('hidden'); document.getElementById('profileScreen').classList.remove('hidden');
document.getElementById('loginScreen').classList.add('hidden');
document.getElementById('appScreen').classList.remove('active'); document.getElementById('appScreen').classList.remove('active');
renderProfileList(); renderProfileList();
} }
@ -871,10 +940,9 @@ function renderAll() {
(function init() { (function init() {
const profiles = LS('profiles') || []; const profiles = LS('profiles') || [];
renderProfileList(); renderProfileList();
if (profiles.length > 0) { // Show login screen - user must enter password
// Auto-login last profile document.getElementById('loginScreen').classList.remove('hidden');
loginProfile(profiles[profiles.length - 1].id); document.getElementById('appScreen').classList.remove('active');
}
document.getElementById('diary-date').value = new Date().toISOString().slice(0,10); document.getElementById('diary-date').value = new Date().toISOString().slice(0,10);
})(); })();
</script> </script>