From 2cb5598b85dc975e9104c6a87bf67438b5f46a88 Mon Sep 17 00:00:00 2001
From: UNIKNOW <000-drakon@mail.ru>
Date: Sun, 31 Mar 2024 03:10:16 +0400
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD=20=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=B3=D0=B8=D0=BD=D0=B0,=20=D0=BF=D0=BE=D0=BB=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=BD=D0=B0=20=D1=81=20=D1=81=D0=B0=D0=BC=D0=B8?=
 =?UTF-8?q?=D0=BC=20=D0=BF=D1=80=D0=BE=D1=86=D0=B5=D1=81=D1=81=D0=BE=D0=BC?=
 =?UTF-8?q?=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BD=D0=B0=20=D1=81=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=BB=D0=B0=D0=BD.=20=D0=BE=D1=81=D1=82=D0=B0=D0=BB=D1=81?=
 =?UTF-8?q?=D1=8F=20=D0=B7=D0=B0=D0=B1=D0=B0=D0=B3=D0=BE=D0=B2=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20passwordError?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.html                     |  15 +-
 src/lib/userFunction.js          |  17 +-
 src/routes/login/+page.svelte    | 305 ++++++++++++++++++++++++++++---
 src/routes/register/+page.svelte |   3 +-
 4 files changed, 301 insertions(+), 39 deletions(-)

diff --git a/src/app.html b/src/app.html
index a1123df..724a781 100644
--- a/src/app.html
+++ b/src/app.html
@@ -10,11 +10,6 @@
 		<div style="display: contents">%sveltekit.body%</div>
 
 		<style>
-			html,body{
-				margin: 0;
-				padding: 0;
-				background-color: #101010;
-			}
 			:root{
 				--bg: #101010;
 				--gradient: linear-gradient(to bottom, #3C53FF, #7734AA);
@@ -25,6 +20,16 @@
 				font-family: Comfortaa;
 				
 			  }
+			  
+			  html,body{
+				height: 100%;
+				width: 100%;
+
+				margin: 0;
+				padding: 0;
+				background-color: var(--bg);
+			}
+			
 		</style>
 	</body>
 </html>
diff --git a/src/lib/userFunction.js b/src/lib/userFunction.js
index af58320..a1233e6 100644
--- a/src/lib/userFunction.js
+++ b/src/lib/userFunction.js
@@ -128,16 +128,19 @@ export async function VerificationEmail(Code){
       })
       
     })
-    if(!response.ok)
+    
+    if(response.status === 200)
     {
-      console.log(response.status)
-    }
-    else
-    {
-      console.log('лох залогинен!');
       window.location.href = '/chatPage'
     }
-}
+    else if(response.status === 401)
+    {
+      return "Неправильный логин или парль"
+    }
+    else{
+    console.log(response.status)
+    }
+  }
 
   export async function handleLogout() {
     try{
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 6585b46..da2b5b5 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,39 +1,294 @@
 <script>
-    import { onMount } from 'svelte';
     import Header from '../Header.svelte';
-    import {navigate} from 'svelte-routing'
-    import {handleLogin, handleLogout} from '$lib/userFunction'
+    import {handleLogin} from '$lib/userFunction'
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
 
-    let username = "";
-    let password = "";
+    let username = ""; let usernameError = "";
+	let password = ""; let passwordError = "";
 
-    function login(){
-      handleLogin(username,password)
-    }
+    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")
+		}
+		
+		else if((username.length !=  0)&& (password.length ==  0)){
+			usernameError = ""
+			passwordError = ""
+			passwordError = "ничего не забыл?"
+			console.log("ЖОПА2")
+		}
+
+
+		else if((username == "") && (password == "")){
+			usernameError = "ничего не забыл?"
+			passwordError = "ничего не забыл?"
+			console.log("ЖОПА3")
+		}
+		else if((username != "") && (password != ""))
+		{
+     	 usernameError = await handleLogin(username,password)
+		}
+}
+
+	let greeting
+	//список приветствований. TODO: пополнить пул
+	let greetings = ["опять ты? ну давай, заходи",];
+onMount(() => {
+	greeting = greetings[Math.floor(Math.random() * greetings.length)]
+	
+})
 
 </script>
 
+<body>
+	
+<div class="loginField">
 
+<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>
+					
+					<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>
+	 </div> 
+</div>
 
-<form on:submit|preventDefault={login}>
-    <label for="username">Username:</label>
-    <input type="text" id="username" bind:value={username} />
+</div>
 
-    <label for="password">Password:</label>
-    <input type="password" id="password" bind:value={password} />
+<div class="previewField">
+	<h3>не жопа</h3>
+</div>
 
-    <button type="submit">Login</button>
-  </form>
+</body>
 
-  <button on:click={handleLogout}>Выход</button>
+<style lang="scss">
+
+.group > *{
+	margin-top: 1%;
+	margin-bottom: 1%;
+}
+
+.group{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	
+}
+
+.regregDiv{
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: center;
+
+}
+
+	.loginMainDiv{
+		width: 60%;
+		height: 90%;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		
+	}
+  .regDiv{
+	width: 100%;
+	height: 32%;
+		
+  }	
+  .loginDiv{
+		width: 100%;
+		height: 66%;
+		
+  }
+
+  .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;
+	}
+
+	#usernameError,
+  	#passwordError {
+		color: var(--disable);
+		font-weight: 700;
+	}
+
+	.marginDiv {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		width: 90%;
+		height: 100%;
+		padding-left: 5%;
+		padding-right: 5%;
+	}
+
+	.jopa1 {
+		position: relative; 
+   		overflow: hidden; 
+
+		width: 100%;
+		height: 100%;
+		box-shadow: 4px 4px 11px rgba($color: #000000, $alpha: 0.4);
+		border-radius: 15px;
+	}
+
+	.jopa1::after{
+		content: "";
+		background-image: url(../noise.gif);
+		opacity: 0.011;
+  		position: absolute; 
+		top:0;
+		left:0;  
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		border-radius: 15px;
+		
+	}
+
+	input {
+		border: 1px solid transparent;
+		background:
+			linear-gradient(#101010, #101010) padding-box,
+			var(--gradient) border-box;
+		border-radius: 10px;
+		width: 100%;
+		height: 2em;
+		font-size: 24px;
+		font-weight: 600;
+		box-shadow:
+			4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
+			-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
+		outline: none;
+	}
+
+	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);
+	}
+
+	button {
+		text-shadow: 0 0 20px white;
+		font-size: 36px;
+		background: transparent;
+		border: 0;
+		height: 10%;
+		margin-bottom: 1%;
+	}
+
+	button {
+		cursor: pointer;
+	}
+
+	h1,
+	h2,
+	h3,
+	input,
+	select,
+	button{
+		color: var(--fontColor);
+	}
+
+	h1{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		text-shadow: 0 0 20px white;
+		font-size: 5vh;
+	}
+
+	h2{
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		text-shadow: 0 0 20px white;
+		font-weight: 500;
+		font-size: 3.5vh;
+	}
+	h3 {
+		font-weight: 100;
+		font-size: 3vh;
+	}
+
+	body {
+	display: flex;
+	flex-direction: row;
+  	}
+
+	* {
+		font-family: Comfortaa;
+		margin: 0;
+	}
 
-<style>
-    *{
-        font-weight: 600;
-        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    }
-     
-    
-    
-    
 </style>
\ No newline at end of file
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 1cdfe66..fb50826 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -110,7 +110,6 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 </script>
 
 <body>
-
 	<div class="mainDiv {rotated ? 'rotated' : ''}">
 		<div class="mainDivInner">
 
@@ -379,7 +378,7 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 			var(--gradient) border-box;
 		border-radius: 10px;
 		width: 100%;
-		height: 1.8em;
+		height: 2em;
 		font-size: 24px;
 		font-weight: 600;
 		box-shadow: