463 lines
10 KiB
Svelte
463 lines
10 KiB
Svelte
<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';
|
|
|
|
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 = [];
|
|
for (let i = legalyear - 16; i > legalyear - 100; i--) years.push(i);
|
|
|
|
let name = ''; let mail; let password = ''; let password2 = ''; let dateDay = ''; let dateMonth = ''; let dateYear = '';
|
|
|
|
let nameError = ''; let mailError = ''; let passwordError = ''; let password2Error = '';
|
|
let code = ''; let codeError = '';
|
|
|
|
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 != "") && (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);
|
|
rotate();
|
|
console.log("отправлено")
|
|
}
|
|
}
|
|
|
|
async function lisenerName() {
|
|
|
|
if(name.length == 0){
|
|
nameError = "";
|
|
}
|
|
else if (name.length < 2){
|
|
nameError = "ник от двух символов";
|
|
}
|
|
else if (name != '') {
|
|
let error = await checkName(name);
|
|
console.log(error);
|
|
nameError = error;
|
|
}
|
|
}
|
|
|
|
async function lisenerEmail() {
|
|
if (mail.length == 0) {
|
|
mailError = '';
|
|
} else {
|
|
let error = await checkMail(mail);
|
|
console.log(error);
|
|
mailError = error;
|
|
}
|
|
}
|
|
|
|
async function lisenerPassword() {
|
|
if(password.length == 0)
|
|
{ passwordError = ""; password2Error = "" }
|
|
|
|
else if((password2 === "") && (password != ""))
|
|
{ passwordError = ""; password2Error = "" }
|
|
|
|
else if (password != password2)
|
|
{ passwordError = 'пароли не совпадают';}
|
|
|
|
else if ((password.length < 8) || (passwordError === undefined))
|
|
{ passwordError = 'минимум 8 символов'; }
|
|
|
|
else passwordError = '';
|
|
}
|
|
|
|
async function lisenerCode(event){
|
|
|
|
code = event.target.value
|
|
|
|
|
|
if(code.length == 6){
|
|
codeError = await VerificationEmail(code)
|
|
}
|
|
|
|
}
|
|
|
|
let rotated = false;
|
|
function rotate() {
|
|
rotated = !rotated;
|
|
}
|
|
</script>
|
|
|
|
<body>
|
|
|
|
<div class="mainDiv {rotated ? 'rotated' : ''}">
|
|
<div class="mainDivInner">
|
|
|
|
<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 !== ''}
|
|
<h3 id="name" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
|
|
{nameError}
|
|
</h3>
|
|
{/if}
|
|
</div>
|
|
<input on:blur={lisenerName} type="text" maxlength="30" bind:value={name} />
|
|
</div>
|
|
|
|
<div class="group">
|
|
<div class="groupname">
|
|
<h3>эл почта</h3>
|
|
{#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>
|
|
{#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>
|
|
{#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>
|
|
{/each}
|
|
</select>
|
|
|
|
<select id="monthDropDown" bind:value={dateMonth}>
|
|
<option value="01">Январь</option>
|
|
<option value="02">Февраль</option>
|
|
<option value="03">Март</option>
|
|
<option value="04">Апрель</option>
|
|
<option value="05">Май</option>
|
|
<option value="06">Июнь</option>
|
|
<option value="07">Июль</option>
|
|
<option value="08">Август</option>
|
|
<option value="09">Сентябрь</option>
|
|
<option value="10">Октябрь</option>
|
|
<option value="11">Ноябрь</option>
|
|
<option value="12">Декабрь</option>
|
|
</select>
|
|
|
|
<select id="yearDropDown" bind:value={dateYear}>
|
|
{#each years as year}
|
|
<option value={year}>{year}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="submitReg" type="submit">Зарегаться</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mainDivBack">
|
|
<div class="jopa1">
|
|
<div class="marginDivBack">
|
|
|
|
<h1>Подтверди</h1>
|
|
<h1>почту</h1>
|
|
|
|
<form class="codeForm" on:submit|preventDefault={VerificationEmail}>
|
|
<h3 id="codeError">{codeError}</h3>
|
|
<input maxlength="6" type="text" name="code" id="code" on:input={lisenerCode}>
|
|
<button id="resendButt" type="submit">отправить код еще раз</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<style lang="scss">
|
|
|
|
#code{
|
|
text-align: center;
|
|
}
|
|
|
|
#resendButt{
|
|
font-size: 16px;
|
|
}
|
|
|
|
.codeForm{
|
|
display: flex;
|
|
justify-content:flex-end;
|
|
height: 50%;
|
|
}
|
|
|
|
body{
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.mainDiv{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
aspect-ratio: 1 / 1.44;
|
|
height: calc(100% - 100px);
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.mainDivInner{
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.6s;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.mainDivFront,
|
|
.mainDivBack {
|
|
position: absolute;
|
|
border: 1px solid transparent;
|
|
background:
|
|
linear-gradient(#101010, #101010) padding-box,
|
|
var(--gradient) border-box;
|
|
border-radius: 15px;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.rotated
|
|
.mainDivInner,
|
|
.mainDivBack{
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
* {
|
|
font-family: Comfortaa;
|
|
margin: 0;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
height: 100%;
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
#name,
|
|
#mail,
|
|
#password,
|
|
#password2,
|
|
#codeError {
|
|
color: var(--disable);
|
|
font-weight: 700;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.groupname {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.marginDivBack{
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 70%;
|
|
height: 80%;
|
|
margin: 15px 0 0 0;
|
|
}
|
|
|
|
.marginDiv {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 30px;
|
|
}
|
|
.birthday {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.jopa1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
box-shadow: 4px 4px 11px rgba($color: #000000, $alpha: 0.4);
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.jopa1::before {
|
|
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;
|
|
}
|
|
|
|
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),
|
|
-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
|
|
outline: none;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
input:focus,
|
|
select:focus {
|
|
transition: 0.5s ease-in;
|
|
box-shadow: 0 0 transparent;
|
|
}
|
|
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 {
|
|
width: 2.5em;
|
|
}
|
|
#monthDropDown {
|
|
width: 8em;
|
|
}
|
|
#yearDropDown {
|
|
width: 4em;
|
|
}
|
|
|
|
select {
|
|
min-width: 50px;
|
|
width: 8rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
overflow: auto;
|
|
}
|
|
|
|
option {
|
|
background-color: var(--bg);
|
|
border: 0;
|
|
}
|
|
|
|
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,
|
|
h3,
|
|
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>
|