декор реги, анимация на ошибки, ошибки на все случаи жизни, начало popup окна для кода
This commit is contained in:
parent
22acbaf438
commit
a0275c8776
3 changed files with 413 additions and 264 deletions
|
|
@ -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){
|
||||
console.log(response.status)
|
||||
}
|
||||
else{
|
||||
if(response.status === 201){
|
||||
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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,85 +1,171 @@
|
|||
<script>
|
||||
import Header from './../Header.svelte';
|
||||
import {handleRegister} from '$lib/userFunction.js'
|
||||
let name,mail,password,password2,dateDay,dateMonth,dateYear;
|
||||
|
||||
async function SendData(){
|
||||
let date = `${dateYear}-${dateMonth}-${dateDay}`;
|
||||
console.log("Имя:", name, "Эл. почта:", mail, "Пароль:", password, "Повтор пароля:", password2, "Дата рождения:", date);
|
||||
|
||||
let jopa = await handleRegister(name,password,mail,date)
|
||||
console.log(jopa)
|
||||
}
|
||||
let days = []
|
||||
import { handleRegister, checkName, checkMail } from '$lib/userFunction.js';
|
||||
import { onMount } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
let days = [];
|
||||
for (let i = 1; i <= 31; i++) {
|
||||
let day = i.toString().padStart(2, '0');
|
||||
days.push(day)
|
||||
days.push(day);
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
const legalyear = now.getFullYear();
|
||||
let years = []
|
||||
for(let i = legalyear - 16;i > legalyear - 100;i--)
|
||||
years.push(i);
|
||||
let years = [];
|
||||
for (let i = legalyear - 16; i > legalyear - 100; i--) years.push(i);
|
||||
|
||||
let name, mail, password, password2, dateDay, dateMonth, dateYear;
|
||||
name = '';
|
||||
mail = '';
|
||||
password = '';
|
||||
password2 = '';
|
||||
|
||||
function lisenerName(){
|
||||
let nname = document.getElementById('name');
|
||||
console.log(name)
|
||||
nname.textContent = name;
|
||||
let nameError, mailError, passwordError, password2Error;
|
||||
nameError = '';
|
||||
mailError = '';
|
||||
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(){
|
||||
let eemail = document.getElementById('email');
|
||||
console.log(mail)
|
||||
eemail.textContent = mail;
|
||||
async function lisenerName() {
|
||||
if (name != '') {
|
||||
let error = await checkName(name);
|
||||
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="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>
|
||||
<input on:blur={lisenerName} type="text" maxlength="100" bind:value={name}>
|
||||
{#if nameError && nameError !== ''}
|
||||
<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>
|
||||
<input on:blur={lisenerEmail} type="email" maxlength="100" bind:value={mail}>
|
||||
{#if mailError && mailError !== ''}
|
||||
<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>
|
||||
<input type="password" maxlength="100" bind:value={password}>
|
||||
{#if passwordError && passwordError !== ''}
|
||||
<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>
|
||||
<input type="password" maxlength="100" bind:value={password2}>
|
||||
{#if password2Error && password2Error !== ''}
|
||||
<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,70 +186,75 @@
|
|||
|
||||
<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>
|
||||
|
||||
</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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#name, #email{
|
||||
margin-left: 50px;
|
||||
#name,
|
||||
#mail,
|
||||
#password,
|
||||
#password2 {
|
||||
color: var(--disable);
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.groupname {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.group{
|
||||
margin-top: 0px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
}
|
||||
|
||||
*{
|
||||
margin-top:5px;
|
||||
margin-bottom: 5px;
|
||||
font-family: Comfortaa;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.marginDiv {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 40px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
.birthday {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.jopa1 {
|
||||
|
|
@ -175,53 +266,63 @@ form{
|
|||
}
|
||||
|
||||
.jopa1::before {
|
||||
content: "";
|
||||
background-image: url(../noise.gif); opacity: 0.011;
|
||||
width: 100%; height: 100%;
|
||||
position: absolute; top: 50%; left: 50%;
|
||||
content: '';
|
||||
background-image: url(../noise.gif);
|
||||
opacity: 0.011;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.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.6;
|
||||
height: calc(100% - 100px);
|
||||
aspect-ratio: 1 / 1.4;
|
||||
height: calc(100% - 200px);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
input,select{
|
||||
input,
|
||||
select {
|
||||
border: 1px solid transparent;
|
||||
background: linear-gradient(#101010,#101010) padding-box,
|
||||
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),
|
||||
-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);
|
||||
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){
|
||||
transition: 0.5s ease;
|
||||
box-shadow: 4px 4px 15px rgba($color: #5E2A83, $alpha: 0.38),
|
||||
-4px -4px 15px rgba($color: #3D53FE, $alpha: 0.38);
|
||||
input:not(:focus),
|
||||
select: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);
|
||||
}
|
||||
|
||||
#dayDropDown {
|
||||
|
|
@ -247,41 +348,44 @@ select{
|
|||
|
||||
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%;
|
||||
}
|
||||
.submitDiv{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
button[type=submit],select,option{
|
||||
button[type='submit'],
|
||||
select,
|
||||
option {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6,p,input,select,button[type=submit]{
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
input,
|
||||
select,
|
||||
button[type='submit'] {
|
||||
color: var(--fontColor);
|
||||
}
|
||||
h1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-shadow: 0 0 20px white;
|
||||
font-size: 48px;
|
||||
|
||||
height: 10%;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 100;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Reference in a new issue