From 53271390491cabe98d7ac26e36e0d02ce5cf16f0 Mon Sep 17 00:00:00 2001
From: UNIKNOW <000-drakon@mail.ru>
Date: Fri, 5 Apr 2024 21:25:48 +0400
Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BD=D0=B0.=20=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D1=8F=20onmount.=20=D1=80=D0=B5?=
 =?UTF-8?q?=D1=84=D0=B0=D0=BA=D1=82=D0=BE=D1=80=20=D0=BE=D1=88=D0=B8=D0=B1?=
 =?UTF-8?q?=D0=BE=D0=BA=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BD=D0=B0=20=D0=B8=20?=
 =?UTF-8?q?=D0=BF=D0=B0=D1=80=D0=BE=D0=BB=D1=8C.=20=D0=BE=D1=88=D0=B8?=
 =?UTF-8?q?=D0=B1=D0=BA=D0=B8=20=D0=B2=20placeholder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/userFunction.js          |   2 +-
 src/routes/login/+page.svelte    | 386 +++++++++++++++++++------------
 src/routes/register/+page.svelte |   9 +-
 3 files changed, 237 insertions(+), 160 deletions(-)

diff --git a/src/lib/userFunction.js b/src/lib/userFunction.js
index a1233e6..f0af798 100644
--- a/src/lib/userFunction.js
+++ b/src/lib/userFunction.js
@@ -135,7 +135,7 @@ export async function VerificationEmail(Code){
     }
     else if(response.status === 401)
     {
-      return "Неправильный логин или парль"
+      return "Неправильный логин или пароль"
     }
     else{
     console.log(response.status)
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index da2b5b5..5c84269 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,195 +1,279 @@
 <script>
-    import Header from '../Header.svelte';
-    import {handleLogin} from '$lib/userFunction'
+	import { dictionary } from './../../../.svelte-kit/generated/client/app.js';
+	import Header from '../Header.svelte';
+	import { handleLogin } from '$lib/userFunction';
 	import { onMount } from 'svelte';
-	import { fly } from 'svelte/transition';
+	import { fly, blur } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
+	import { backInOut } from 'svelte/easing';
 
-    let username = ""; let usernameError = "";
-	let password = ""; let passwordError = "";
+	async function listener(event){
 
-    async function login(){
-
-		console.log(usernameError.length,passwordError.length)
-		console.log(usernameError,passwordError)
-		if((username.length ==  0) && (password.length !=  0)){
-			usernameError = ""
-			usernameError = "ничего не забыл?"
-			passwordError = ""
-			console.log("ЖОПА1")
+		if(enterError.length !== 0){
+			enterError = ""
 		}
-		
-		else if((username.length !=  0)&& (password.length ==  0)){
-			usernameError = ""
-			passwordError = ""
-			passwordError = "ничего не забыл?"
-			console.log("ЖОПА2")
+	}
+
+	let username = '';
+	let password = '';
+	let enterError = '';
+	let passwordError = "длжо";
+	async function login() {
+		switch (true) {
+			case username.length === 0 && password.length !== 0:
+				document.getElementById('username').placeholder = 'ничего не забыл?';
+				document.getElementById('password').placeholder = '';
+
+				console.log('ЖОПА1');
+				break;
+
+			case username.length !== 0 && password.length === 0:
+				document.getElementById('username').placeholder = '';
+				document.getElementById('password').placeholder = 'ничего не забыл?';
+				console.log('ЖОПА2');
+
+				break;
+
+			case username.length === 0 && password.length === 0:
+				document.getElementById('password').placeholder = 'ничего не забыл?';
+				document.getElementById('username').placeholder = 'ничего не забыл?';
+				console.log('ЖОПА3');
+				break;
+
+			default:
+				document.getElementById('password').placeholder = '';
+				document.getElementById('username').placeholder = '';
+				enterError = await handleLogin(username, password);
+				break;
 		}
+	}
 
+	let hi = ' ';
+	let greeting = ' ';
 
-		else if((username == "") && (password == "")){
-			usernameError = "ничего не забыл?"
-			passwordError = "ничего не забыл?"
-			console.log("ЖОПА3")
-		}
-		else if((username != "") && (password != ""))
-		{
-     	 usernameError = await handleLogin(username,password)
-		}
-}
+	let greetings = [
+		'Опять ты? Ну давай, заходи',
+		'Рад видеть тебя снова',
+		'Как прошел день?',
+		'Как настроение?',
+		'Come in'
+	];
+	greeting = greetings[Math.floor(Math.random() * greetings.length)];
 
-	let greeting
-	//список приветствований. TODO: пополнить пул
-	let greetings = ["опять ты? ну давай, заходи",];
-onMount(() => {
-	greeting = greetings[Math.floor(Math.random() * greetings.length)]
-	
-})
+	let His = ['Привет!', 'Дарова!', 'Хай!', 'Приветствую!'];
+	hi = His[Math.floor(Math.random() * (His.length - 0))];
 
+	let loadingPage = false;
+
+	onMount(() => {
+		loadingPage = !loadingPage;
+	});
 </script>
 
-<body>
-	
-<div class="loginField">
+{#if loadingPage === true}
+	<body>
+		<div class="loginField">
+			<div class="loginMainDiv">
+				<div class="loginDiv" transition:fly={{ y: -1920, duration: 1000, backInOut }}>
+					<div class="jopa1">
+						<div class="marginDiv">
+							<div class="greetingsDiv">
+								<h1 id="hi" transition:blur={{
+									y: -30, duration: 1900, easing: cubicOut }}>{hi}</h1>
+								<h2 id="greetings" transition:blur={{
+									 y: -30, duration: 2000, easing: cubicOut }}>
+									{greeting}</h2>
+							</div>
+							<div class="bigGroup">
+								<div class="group">
+									<h3>никнейм или почта</h3>
+									<input placeholder=" " type="text" id="username" on:input={listener} bind:value={username} />
+								</div>
 
-<div class="loginMainDiv">
-	 <div class="loginDiv">
-		<div class="jopa1">
-			<div class="marginDiv">
-				<h1>Дарова</h1>
-				<h2>{greeting}</h2>
-				  <div>
-					<div class="group">
-						<h3>никнейм или почта</h3>
-						{#if usernameError && usernameError !== ''}
-						<h3 id="usernameError" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}
-						>{usernameError}</h3>
-						{/if}
+								<div class="group">
+									<h3>пароль</h3>
+									<input placeholder=" " type="password" id="password" on:input={listener} bind:value={password} />
+									
+								</div>
+							</div>
+
+							<div class="enterDiv">
+								<button class="enterButt" on:click={login}>Войти</button>
+								{#if enterError !== ''}
+									<h3 class="enterError"
+									transition:fly={{ y: 200, duration: 300, backInOut }}>{enterError}</h3>
+								{/if}
+							</div>
+							
+						</div>
+					</div>
+				</div>
+				<div class="regDiv" transition:fly={{ y: -1920, duration: 800, backInOut }}>
+					<div class="jopa1">
+						<div class="regregDiv">
+							<h2 class="reg1">Нет аккаунта? Лох!</h2>
+							<button class="reg2" on:click={() => (window.location.href = '/register')}
+								>Перестать был лохом</button>
+						</div>
 					</div>
-					
-					<input type="text" id="username" bind:value={username} />
-				
-					<div class="group">
-						<h3>пароль</h3>
-						{#if usernameError && usernameError !== ''}
-						<h3 id="passwordError" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}
-						>{passwordError}</h3>
-						{/if}
-				  </div>
-					<input type="password" id="password" bind:value={password} />
 				</div>
-					<button on:click={login}>Войти</button>
-				  
 			</div>
 		</div>
-	 </div> 
-	 <div class="regDiv">
-		<div class="jopa1">
-			<div class="regregDiv">
-				<h2>Нет аккаунта? Лох!</h2>
-				<button on:click={() => window.location.href = '/register'}>Перестать был лохом</button>
-			</div>
+
+		<div class="previewField">
+			<h3>не жопа</h3>
 		</div>
-	 </div> 
-</div>
-
-</div>
-
-<div class="previewField">
-	<h3>не жопа</h3>
-</div>
-
-</body>
+	</body>
+{/if}
 
 <style lang="scss">
 
-.group > *{
-	margin-top: 1%;
-	margin-bottom: 1%;
-}
+	// .passwordError{
+	// 	z-index: 1;
+	// 	position: absolute;
+	// 	color: var(--disable);
+	// 	border: 1px solid white;
+	// 	bottom: 29.5%;
+	// }
+	// не рабоая хуйня. переделать как нибудь <h3 class="passwordError">{passwordError}</h3>
 
-.group{
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	
-}
+	.greetingsDiv{
+		height: 30%;
+		display: flex;
+		flex-direction: column;
+		gap: 35px;
+		justify-content: center;
 
-.regregDiv{
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-around;
-	align-items: center;
+	}
 
-}
+	.enterDiv{
+		display: flex;
+		flex-direction: column;
+		height: 20%;
 
-	.loginMainDiv{
+	}
+	.enterButt{
+		height: 60%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.enterError{
+		margin-bottom: 1%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.reg1,
+	.reg2{
+		height: 40%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	input::placeholder {
+		color: var(--disable);
+		transition: opacity 1s ease;
+		opacity: 1;
+	}
+
+	#greetings,
+	#hi {
+		transition: opacity 1s ease;
+	}
+
+	.group > * {
+		margin-top: 1%;
+		margin-bottom: 1%;
+		
+	}
+
+	.group {
+		display: flex;
+		flex-direction: column;
+		
+	}
+	.bigGroup{
+		height: 40%;
+	}
+
+	.regregDiv {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.loginMainDiv {
 		width: 60%;
 		height: 90%;
 
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
-		
 	}
-  .regDiv{
-	width: 100%;
-	height: 32%;
-		
-  }	
-  .loginDiv{
+	.regDiv {
+		width: 100%;
+		height: 32%;
+	}
+	.loginDiv {
 		width: 100%;
 		height: 66%;
-		
-  }
+	}
 
-  .loginDiv,
-  .regDiv{
+	.loginDiv,
+	.regDiv {
 		border: 1px solid transparent;
 		background:
 			linear-gradient(#101010, #101010) padding-box,
 			var(--gradient) border-box;
 		border-radius: 15px;
 		background-repeat: no-repeat;
-  		background-attachment: fixed;
-  }
-
-  .previewField{
-	height: 100%;
-	width: 50%;
-  	}
-
-	.loginField{
-	height: 100%;
-	width: 50%;
-	outline: 1px dotted red;
-	
-	display: flex;
-	justify-content: center;
-	align-items: center;
+		background-attachment: fixed;
 	}
 
-	#usernameError,
-  	#passwordError {
+	.previewField {
+		height: 100%;
+		width: 50%;
+	}
+
+	.loginField {
+		height: 100%;
+		width: 50%;
+		outline: 1px dotted red;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.enterError {
 		color: var(--disable);
 		font-weight: 700;
 	}
 
 	.marginDiv {
+		position: relative;
 		display: flex;
 		flex-direction: column;
-		justify-content: space-around;
+		justify-content: space-between;
 		width: 90%;
 		height: 100%;
 		padding-left: 5%;
 		padding-right: 5%;
+		
+	}
+
+	.marginDiv > * {
+		//border: 1px solid white;
 	}
 
 	.jopa1 {
-		position: relative; 
-   		overflow: hidden; 
+		position: relative;
+		overflow: hidden;
 
 		width: 100%;
 		height: 100%;
@@ -197,18 +281,17 @@ onMount(() => {
 		border-radius: 15px;
 	}
 
-	.jopa1::after{
-		content: "";
+	.jopa1::after {
+		content: '';
 		background-image: url(../noise.gif);
 		opacity: 0.011;
-  		position: absolute; 
-		top:0;
-		left:0;  
+		position: absolute;
+		top: 0;
+		left: 0;
 		width: 100%;
 		height: 100%;
 		pointer-events: none;
 		border-radius: 15px;
-		
 	}
 
 	input {
@@ -227,15 +310,15 @@ onMount(() => {
 		outline: none;
 	}
 
-	input:focus{
+	input:focus {
 		transition: 0.5s ease-in;
 		box-shadow: 0 0 transparent;
 	}
 	input:not(:focus) {
 		transition: 0.5s ease-in-out;
 		box-shadow:
-			4px  4px 15px rgba($color: #5e2a83, $alpha: 0.38),
-		   -4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
+			4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
+			-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
 	}
 
 	button {
@@ -255,12 +338,11 @@ onMount(() => {
 	h2,
 	h3,
 	input,
-	select,
-	button{
+	button {
 		color: var(--fontColor);
 	}
 
-	h1{
+	h1 {
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -268,7 +350,7 @@ onMount(() => {
 		font-size: 5vh;
 	}
 
-	h2{
+	h2 {
 		width: 100%;
 		display: flex;
 		justify-content: center;
@@ -282,13 +364,13 @@ onMount(() => {
 	}
 
 	body {
-	display: flex;
-	flex-direction: row;
-  	}
+		overflow: hidden;
+		display: flex;
+		flex-direction: row;
+	}
 
 	* {
 		font-family: Comfortaa;
 		margin: 0;
 	}
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index fb50826..c562515 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -1,7 +1,5 @@
 <script>
-	import Header from './../Header.svelte';
 	import { handleRegister, checkName, checkMail, VerificationEmail } from '$lib/userFunction.js';
-	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 
@@ -22,7 +20,6 @@
 	let code = ''; let codeError = ''; 
 
 	async function SendData() {
-console.log(`name=${nameError} mail=${mailError} password=${passwordError} password2=${password2Error}`)
 		if ((name === '' )|| (name === undefined))
 			nameError = 'пустой ник';
 
@@ -45,7 +42,6 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 			let date = `${dateYear}-${dateMonth}-${dateDay}`;
 
 			let reg = await handleRegister(name, password, mail, date);
-			console.log(reg);
 			rotate();
       console.log("отправлено")
 		}
@@ -116,14 +112,13 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 	<div class="mainDivFront">
 		<div class="jopa1">
 			<div class="marginDiv">
-
 				<form on:submit|preventDefault={SendData}>
 					<h1>Регистрация</h1>
 
 					<div class="group">
 						<div class="groupname">
 							<h3>имя</h3>
-							{#if nameError && nameError !== ''}
+							{#if nameError !== ''}
 								<h3 id="name" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
 									{nameError}
 								</h3>
@@ -135,7 +130,7 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 					<div class="group">
 						<div class="groupname">
 							<h3>эл почта</h3>
-							{#if mailError && mailError !== ''}
+							{#if mailError !== ''}
 								<h3 id="mail" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
 									{mailError}
 								</h3>