рабочая рега + почти окончательный дизайн. можно в продакшн
This commit is contained in:
parent
856c60c270
commit
71e4b2e311
4 changed files with 149 additions and 71 deletions
|
|
@ -7,12 +7,13 @@ export async function UserCheck(){
|
|||
})
|
||||
|
||||
if(!response.ok){
|
||||
window.location.href = '/info'
|
||||
return(response.status)
|
||||
}
|
||||
|
||||
else{
|
||||
const data = await response.json();
|
||||
return data
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,6 +63,27 @@ export async function checkMail(mail) {
|
|||
}
|
||||
}
|
||||
|
||||
export async function VerificationEmail(Code){
|
||||
const response = await fetch('http://localhost:8000/api/users/email_verification',{
|
||||
method:'POST',
|
||||
credentials:'include',
|
||||
headers:{
|
||||
'Content-Type' : 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"user_code": Code
|
||||
})
|
||||
})
|
||||
|
||||
if(response.status === 200){
|
||||
window.location.href = '/'
|
||||
return ""
|
||||
}
|
||||
else if(response.status === 422){
|
||||
return "Неправильный код"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export async function handleRegister(username,password,email,date_of_birth){
|
||||
const response = await fetch('http://localhost:8000/api/users/register',{
|
||||
|
|
|
|||
|
|
@ -3,14 +3,6 @@
|
|||
import { onMount } from 'svelte';
|
||||
import {UserCheck} from '$lib/userFunction.js';
|
||||
|
||||
onMount(async () => {
|
||||
const userData = await UserCheck();
|
||||
|
||||
let userId = userData.id;
|
||||
let chatId = 2;
|
||||
if(userId === undefined)
|
||||
window.location.href = '/login'
|
||||
})
|
||||
</script>
|
||||
|
||||
<Header />
|
||||
|
|
|
|||
0
src/routes/info/+page.svelte
Normal file
0
src/routes/info/+page.svelte
Normal file
|
|
@ -1,9 +1,10 @@
|
|||
<script>
|
||||
import Header from './../Header.svelte';
|
||||
import { handleRegister, checkName, checkMail } from '$lib/userFunction.js';
|
||||
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');
|
||||
|
|
@ -15,17 +16,10 @@
|
|||
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 = '';
|
||||
let name = ''; let mail; let password = ''; let password2 = ''; let dateDay = ''; let dateMonth = ''; let dateYear = '';
|
||||
|
||||
let nameError, mailError, passwordError, password2Error;
|
||||
nameError = '';
|
||||
mailError = '';
|
||||
passwordError = '';
|
||||
password2Error = '';
|
||||
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}`)
|
||||
|
|
@ -36,11 +30,9 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
|||
mailError = 'введи почту';
|
||||
|
||||
if ((password === '') || (password2 === '')
|
||||
&& (password === undefined) || (password2 === undefined))
|
||||
&& (password === undefined) || (password2 === undefined))
|
||||
passwordError = 'акк без пароля?';
|
||||
|
||||
|
||||
|
||||
if ((password != "") && (password2 == ""))
|
||||
password2Error = "забыл повторить"
|
||||
if ((password2 != "") && (password == ""))
|
||||
|
|
@ -51,15 +43,20 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
|||
(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 < 2){
|
||||
if(name.length == 0){
|
||||
nameError = "";
|
||||
}
|
||||
else if (name.length < 2){
|
||||
nameError = "ник от двух символов";
|
||||
}
|
||||
else if (name != '') {
|
||||
|
|
@ -70,7 +67,7 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
|||
}
|
||||
|
||||
async function lisenerEmail() {
|
||||
if (mail == '') {
|
||||
if (mail.length == 0) {
|
||||
mailError = '';
|
||||
} else {
|
||||
let error = await checkMail(mail);
|
||||
|
|
@ -80,12 +77,12 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
|||
}
|
||||
|
||||
async function lisenerPassword() {
|
||||
if((password === "") && (password2 != ""))
|
||||
if(password.length == 0)
|
||||
{ passwordError = ""; password2Error = "" }
|
||||
|
||||
else if((password2 === "") && (password != ""))
|
||||
{ passwordError = ""; password2Error = "" }
|
||||
|
||||
|
||||
else if (password != password2)
|
||||
{ passwordError = 'пароли не совпадают';}
|
||||
|
||||
|
|
@ -95,23 +92,35 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
|||
else passwordError = '';
|
||||
}
|
||||
|
||||
let VisiblePopUp = false;
|
||||
function toggleVisibility() {
|
||||
VisiblePopUp = !VisiblePopUp;
|
||||
console.log('переключил');
|
||||
async function lisenerCode(event){
|
||||
|
||||
code = event.target.value
|
||||
|
||||
|
||||
if(code.length == 6){
|
||||
codeError = await VerificationEmail(code)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let rotated = false;
|
||||
function rotate() {
|
||||
rotated = !rotated;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button on:click={toggleVisibility}>Показать модальное окно</button>
|
||||
{#if VisiblePopUp}
|
||||
<div class="codeDiv"></div>
|
||||
{/if}
|
||||
<body>
|
||||
<div class="mainDiv">
|
||||
|
||||
<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>
|
||||
|
|
@ -200,23 +209,88 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit">Зарегаться</button>
|
||||
<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">
|
||||
.codeDiv {
|
||||
width: 30vw;
|
||||
aspect-ratio: 1/1.3;
|
||||
background: #3d53fe;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
#code{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#resendButt{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.codeForm{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -229,23 +303,20 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
|||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#name,
|
||||
#mail,
|
||||
#password,
|
||||
#password2 {
|
||||
#password2,
|
||||
#codeError {
|
||||
color: var(--disable);
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.groupname {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -253,10 +324,23 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
|||
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 {
|
||||
|
|
@ -287,21 +371,6 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
|||
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.4;
|
||||
height: calc(100% - 200px);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
border: 1px solid transparent;
|
||||
|
|
@ -373,12 +442,7 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
|||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
input,
|
||||
select,
|
||||
button[type='submit'] {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue