декор реги, анимация на ошибки, ошибки на все случаи жизни, начало popup окна для кода

src/lib/userFunction.js

@@ -16,6 +16,53 @@ export async function UserCheck(){
     }
   }
 
+  export async function checkName(username) {
+    const response = await fetch('http://localhost:8000/api/users/check_existing_username', {
+      method:'POST',
+      credentials:"include",
+      headers:{
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        "username": username
+      })
+    })
+    if(response.status === 200){
+    }
+    else if(response.status === 409){
+      let data = "ник занят"
+      return data
+    }
+    else if(response.status === 422){
+      let data = await response.json();
+      return data
+    }
+}
+
+export async function checkMail(mail) {
+  const response = await fetch('http://localhost:8000/api/users/check_existing_email', {
+    method:'POST',
+    credentials:"include",
+    headers:{
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      "email": mail
+    })
+  })
+  if(response.status === 200){
+  }
+  else if(response.status === 409){
+    let data = "почта занята"
+    return data
+  }
+  else if(response.status === 422){
+    let data = "не похоже на почту"
+    return data
+  }
+}
+
+
   export async function handleRegister(username,password,email,date_of_birth){
     const response = await fetch('http://localhost:8000/api/users/register',{
       method:'POST',
@@ -31,13 +78,16 @@ export async function UserCheck(){
       })
     })
 
-    if(!response.ok){
+    if(response.status === 201){
-      console.log(response.status)
-    }
-    else{
       const data = await response.json();
+      console.log(data)
       return data;
     }
+    else if(response.status === 422){
+      console.log(response.status)
+      let data = "Validation Error"
+      return data
+    }
     
   }
 

src/routes/Header.svelte

@@ -49,11 +49,9 @@
 		display: flex;
 		justify-content: space-around;
 		align-items: center;
-
     	background-color: rgba(255, 255, 255, 0.3);
     	border: 0;
     
-    
 	}
 
 	.ListLine {
@@ -78,10 +76,7 @@
 		cursor: pointer;
 	}
 
-	div, h3 {
+	
-		font-weight: 600;
-		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-	}
 	.headerClass > * {
 		margin-bottom: 0;
 	}

src/routes/register/+page.svelte

@@ -1,85 +1,171 @@
 <script>
 	import Header from './../Header.svelte';
-  import {handleRegister} from '$lib/userFunction.js'
+	import { handleRegister, checkName, checkMail } from '$lib/userFunction.js';
-  let name,mail,password,password2,dateDay,dateMonth,dateYear;
+	import { onMount } from 'svelte';
-  
+	import { fly } from 'svelte/transition';
-      async function SendData(){
+	import { cubicOut } from 'svelte/easing';
-        let date = `${dateYear}-${dateMonth}-${dateDay}`;
+	let days = [];
-        console.log("Имя:", name, "Эл. почта:", mail, "Пароль:", password, "Повтор пароля:", password2, "Дата рождения:", date);
+	for (let i = 1; i <= 31; i++) {
-
+		let day = i.toString().padStart(2, '0');
-        let jopa = await handleRegister(name,password,mail,date)
+		days.push(day);
-        console.log(jopa)
-      }
-      let days = []
-      for(let i = 1;i <= 31;i++){
-      let day = i.toString().padStart(2,'0');
-      days.push(day)
 	}
 
 	const now = new Date();
 	const legalyear = now.getFullYear();
-      let years = []
+	let years = [];
-      for(let i = legalyear - 16;i > legalyear - 100;i--)
+	for (let i = legalyear - 16; i > legalyear - 100; i--) years.push(i);
-      years.push(i);
 
+	let name, mail, password, password2, dateDay, dateMonth, dateYear;
+	name = '';
+	mail = '';
+	password = '';
+	password2 = '';
 
-      function lisenerName(){
+	let nameError, mailError, passwordError, password2Error;
-        let nname = document.getElementById('name');
+	nameError = '';
-        console.log(name)
+	mailError = '';
-        nname.textContent = name;
+	passwordError = '';
+	password2Error = '';
+
+	async function SendData() {
+console.log(`name=${nameError} mail=${mailError} password=${passwordError} password2=${password2Error}`)
+		if ((name === '' )|| (name === undefined))
+			nameError = 'пустой ник';
+		
+		if ((mail === '') || (mail === undefined))
+			mailError = 'введи почту';
+		
+		if ((password === '') || (password2 === '') 
+    && (password === undefined) || (password2 === undefined))
+			passwordError = 'акк без пароля?';
+		
+		if ((password.length <= 8) || (passwordError === undefined))
+			passwordError = 'минимум 8 символов';
+		
+    if ((password != "") && (password2 == ""))
+      password2Error = "забыл повторить"
+      if ((password2 != "") && (password == ""))
+      passwordError = "забыл повторить"
+
+		if ((nameError === '' )|| (nameError === undefined) &&
+        (mailError === '' )|| (mailError === undefined) && 
+        (passwordError === '' )|| (passwordError === undefined) && 
+        (password2Error === '') ||( password2Error === undefined)) {
+			let date = `${dateYear}-${dateMonth}-${dateDay}`;
+			let reg = await handleRegister(name, password, mail, date);
+			console.log(reg);
+      console.log("отправлено")
+		}
 	}
 
-      function lisenerEmail(){
+	async function lisenerName() {
-        let eemail = document.getElementById('email');
+		if (name != '') {
-        console.log(mail)
+			let error = await checkName(name);
-        eemail.textContent = mail;
+			console.log(error);
+			nameError = error;
+		}
+	}
+
+	async function lisenerEmail() {
+		if (mail == '') {
+			mailError = '';
+		} else {
+			let error = await checkMail(mail);
+			console.log(error);
+			mailError = error;
+		}
+	}
+
+	async function lisenerPassword() {
+		if((password === "") && (password2 != ""))
+      { passwordError = ""; password2Error = "" }
+    else if((password2 === "") && (password != ""))
+      { passwordError = ""; password2Error = "" }
+	  else if (password != password2)
+      passwordError = 'пароли не совпадают';
+
+		else passwordError = '';
+	}
+
+	let VisiblePopUp = false;
+	function toggleVisibility() {
+		VisiblePopUp = !VisiblePopUp;
+		console.log('переключил');
 	}
 </script>
 
+<button on:click={toggleVisibility}>Показать модальное окно</button>
+{#if VisiblePopUp}
+	<div class="codeDiv"></div>
+{/if}
 <body>
-<div class="mainDiv">
+	<div class="mainDiv">
 		<div class="jopa1">
 			<div class="marginDiv">
-      <h1>Регистрация</h1>
-
 				<form on:submit|preventDefault={SendData}>
-       
+					<h1>Регистрация</h1>
 					<div class="group">
 						<div class="groupname">
 							<h3>имя</h3>
-          <h3 id="name"></h3></div>
+							{#if nameError && nameError !== ''}
-        <input on:blur={lisenerName} type="text" maxlength="100" bind:value={name}>
+								<h3 id="name" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
+									{nameError}
+								</h3>
+							{/if}
+						</div>
+						<input on:blur={lisenerName} type="text" maxlength="100" bind:value={name} />
 					</div>
 
 					<div class="group">
 						<div class="groupname">
 							<h3>эл почта</h3>
-              <h3 id="email"></h3></div>
+							{#if mailError && mailError !== ''}
-        <input on:blur={lisenerEmail} type="email" maxlength="100" bind:value={mail}>
+								<h3 id="mail" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
+									{mailError}
+								</h3>
+							{/if}
+						</div>
+						<input on:blur={lisenerEmail} type="email" maxlength="100" bind:value={mail} />
 					</div>
-         
 
 					<div class="group">
 						<div class="groupname">
 							<h3>пароль</h3>
-            <h3 id="password"></h3></div>
+							{#if passwordError && passwordError !== ''}
-        <input type="password" maxlength="100" bind:value={password}>
+								<h3 id="password" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
+									{passwordError}
+								</h3>
+							{/if}
+						</div>
+						<input
+							type="password"
+							maxlength="100"
+							bind:value={password}
+							on:blur={lisenerPassword}
+						/>
 					</div>
 
 					<div class="group">
 						<div class="groupname">
 							<h3>повтори пароль</h3>
-            <h3 id="password2"></h3></div>
+							{#if password2Error && password2Error !== ''}
-        <input type="password" maxlength="100" bind:value={password2}>
+								<h3 id="password2">{password2Error}</h3>
+							{/if}
+						</div>
+						<input
+							type="password"
+							maxlength="100"
+							bind:value={password2}
+							on:blur={lisenerPassword}
+						/>
 					</div>
 
 					<div class="group">
 						<h3>Дата рождения</h3>
 						<div class="birthday">
-          
 							<select id="dayDropDown" bind:value={dateDay}>
 								{#each days as day}
-              <option value="{day}">{day}</option>
+									<option value={day}>{day}</option>
 								{/each}
 							</select>
 
@@ -100,141 +186,156 @@
 
 							<select id="yearDropDown" bind:value={dateYear}>
 								{#each years as year}
-              <option value="{year}">{year}</option>
+									<option value={year}>{year}</option>
 								{/each}
 							</select>
-
 						</div>
 					</div>
 
-        <div class="submitDiv">
 					<button type="submit">Зарегаться</button>
-       </div>
 				</form>
-      
 			</div>
 		</div>
-</div>
+	</div>
-
 </body>
 
 <style lang="scss">
+	.codeDiv {
+		width: 30vw;
+		aspect-ratio: 1/1.3;
+		background: #3d53fe;
+		position: absolute;
+		top: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
+	* {
+		font-family: Comfortaa;
+		margin: 0;
+	}
 
-
+	form {
-form{
 		display: flex;
 		flex-direction: column;
+		justify-content: space-around;
 		height: 100%;
 		justify-content: space-around;
-}
+	}
 
-#name, #email{
+	#name,
-  margin-left: 50px;
+	#mail,
+	#password,
+  #password2 {
 		color: var(--disable);
 		font-weight: 700;
-}
+		font-size: 20px;
-.groupname{
+	}
+
+	.animate-slide-up {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.groupname {
 		display: flex;
 		flex-direction: row;
-}
+		align-items: center;
-
+		justify-content: space-between;
-.group{
+	}
-  margin-top: 0px;
-  margin-bottom: 5px;
-  
-}
-
-*{
-  margin-top:5px;
-  margin-bottom: 5px;
-  font-family: Comfortaa;
-}
-
-.marginDiv{
 
+	.marginDiv {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
- margin: 40px;
+		margin: 0 30px;
-}
+	}
-
+	.birthday {
-.birthday{
 		display: flex;
-  flex-direction:row;
+		flex-direction: row;
-  justify-content: space-around;
+		justify-content: space-between;
+	}
 
-}
+	.jopa1 {
-
-.jopa1{
 		width: 100%;
 		height: 100%;
 		display: flex;
 		box-shadow: 4px 4px 11px rgba($color: #000000, $alpha: 0.4);
 		border-radius: 15px;
-}
+	}
 
-.jopa1::before{
+	.jopa1::before {
-  content: "";
+		content: '';
-  background-image: url(../noise.gif); opacity: 0.011;
+		background-image: url(../noise.gif);
-  width: 100%; height: 100%;
+		opacity: 0.011;
-  position: absolute; top: 50%; left: 50%;
+		width: 100%;
-  transform: translate(-50%,-50%);
+		height: 100%;
-  pointer-events: none;
-  border-radius: 15px;
-  
-}
-
-
-.mainDiv{ 
-  border: 1px solid transparent;
-  background: linear-gradient(#101010,#101010) padding-box,
-  var(--gradient) border-box;
-  border-radius: 15px;
-
-  aspect-ratio: 1 / 1.6;
-  height: calc(100% - 100px);
 		position: absolute;
 		top: 50%;
 		left: 50%;
-  transform: translate(-50%,-50%);
+		transform: translate(-50%, -50%);
-}
+		pointer-events: none;
+		border-radius: 15px;
+	}
 
-input,select{
+	.mainDiv {
 		border: 1px solid transparent;
-  background: linear-gradient(#101010,#101010) padding-box,
+		background:
+			linear-gradient(#101010, #101010) padding-box,
+			var(--gradient) border-box;
+		border-radius: 15px;
+
+		aspect-ratio: 1 / 1.4;
+		height: calc(100% - 200px);
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	input,
+	select {
+		border: 1px solid transparent;
+		background:
+			linear-gradient(#101010, #101010) padding-box,
 			var(--gradient) border-box;
 		border-radius: 10px;
 		width: 100%;
 		height: 1.8em;
 		font-size: 24px;
 		font-weight: 600;
-  box-shadow:  4px 4px 15px rgba($color: #5E2A83, $alpha: 0.38),
+		box-shadow:
-              -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);
 		outline: none;
-}
+		margin-top: 5px;
+	}
 
-input:focus, select:focus{
+	input:focus,
+	select:focus {
 		transition: 0.5s ease-in;
 		box-shadow: 0 0 transparent;
-}
+	}
-input:not(:focus),select:not(:focus){
+	input:not(:focus),
-  transition: 0.5s ease;
+	select:not(:focus) {
-  box-shadow:  4px 4px 15px rgba($color: #5E2A83, $alpha: 0.38),
+		transition: 0.5s ease-in-out;
-              -4px -4px 15px rgba($color: #3D53FE, $alpha: 0.38);
+		box-shadow:
-}
+			4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
+			-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
+	}
 
-#dayDropDown{
+	#dayDropDown {
 		width: 2.5em;
-}
+	}
-#monthDropDown{
+	#monthDropDown {
 		width: 8em;
-}
+	}
-#yearDropDown{
+	#yearDropDown {
 		width: 4em;
-}
+	}
 
-select{
+	select {
 		min-width: 50px;
 		width: 8rem;
 		display: flex;
@@ -243,45 +344,48 @@ select{
 		font-size: 24px;
 		font-weight: 300;
 		overflow: auto;
-}
+	}
 
-option{
+	option {
 		background-color: var(--bg);
-  border: 15px;
+		border: 0;
-}
+	}
 
-
+	button[type='submit'] {
-
-button[type=submit]{
 		text-shadow: 0 0 20px white;
 		font-size: 36px;
 		background: transparent;
 		border: 0;
+		height: 10%;
+	}
+	button[type='submit'],
+	select,
+	option {
+		cursor: pointer;
+	}
 
-
+	h1,
-}
+	h2,
-.submitDiv{
+	h3,
+	h4,
+	h5,
+	h6,
+	p,
+	input,
+	select,
+	button[type='submit'] {
+		color: var(--fontColor);
+	}
+	h1 {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-}
-button[type=submit],select,option{
-  cursor: pointer;
-}
-
-  h1,h2,h3,h4,h5,h6,p,input,select,button[type=submit]{
-    color: var(--fontColor);
-}
-h1{
-  display: flex;
-  justify-content: center;
 		text-shadow: 0 0 20px white;
 		font-size: 48px;
-   
+		height: 10%;
-}
+	}
-h3{
+	h3 {
 		font-weight: 100;
 		font-size: 24px;
-}
+	}
-
 </style>