рефактор логина. анимация onmount. рефактор ошибок логина и пароль. ошибки в placeholder
This commit is contained in:
parent
2cb5598b85
commit
5327139049
3 changed files with 237 additions and 160 deletions
|
|
@ -135,7 +135,7 @@ export async function VerificationEmail(Code){
|
||||||
}
|
}
|
||||||
else if(response.status === 401)
|
else if(response.status === 401)
|
||||||
{
|
{
|
||||||
return "Неправильный логин или парль"
|
return "Неправильный логин или пароль"
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
console.log(response.status)
|
console.log(response.status)
|
||||||
|
|
|
||||||
|
|
@ -1,195 +1,279 @@
|
||||||
<script>
|
<script>
|
||||||
import Header from '../Header.svelte';
|
import { dictionary } from './../../../.svelte-kit/generated/client/app.js';
|
||||||
import {handleLogin} from '$lib/userFunction'
|
import Header from '../Header.svelte';
|
||||||
|
import { handleLogin } from '$lib/userFunction';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { fly } from 'svelte/transition';
|
import { fly, blur } from 'svelte/transition';
|
||||||
import { cubicOut } from 'svelte/easing';
|
import { cubicOut } from 'svelte/easing';
|
||||||
|
import { backInOut } from 'svelte/easing';
|
||||||
|
|
||||||
let username = ""; let usernameError = "";
|
async function listener(event){
|
||||||
let password = ""; let passwordError = "";
|
|
||||||
|
|
||||||
async function login(){
|
if(enterError.length !== 0){
|
||||||
|
enterError = ""
|
||||||
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 = ""
|
let username = '';
|
||||||
passwordError = ""
|
let password = '';
|
||||||
passwordError = "ничего не забыл?"
|
let enterError = '';
|
||||||
console.log("ЖОПА2")
|
let passwordError = "длжо";
|
||||||
|
async function login() {
|
||||||
|
switch (true) {
|
||||||
|
case username.length === 0 && password.length !== 0:
|
||||||
|
document.getElementById('username').placeholder = 'ничего не забыл?';
|
||||||
|
document.getElementById('password').placeholder = '';
|
||||||
|
|
||||||
|
console.log('ЖОПА1');
|
||||||
|
break;
|
||||||
|
|
||||||
|
case username.length !== 0 && password.length === 0:
|
||||||
|
document.getElementById('username').placeholder = '';
|
||||||
|
document.getElementById('password').placeholder = 'ничего не забыл?';
|
||||||
|
console.log('ЖОПА2');
|
||||||
|
|
||||||
|
break;
|
||||||
|
|
||||||
|
case username.length === 0 && password.length === 0:
|
||||||
|
document.getElementById('password').placeholder = 'ничего не забыл?';
|
||||||
|
document.getElementById('username').placeholder = 'ничего не забыл?';
|
||||||
|
console.log('ЖОПА3');
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
document.getElementById('password').placeholder = '';
|
||||||
|
document.getElementById('username').placeholder = '';
|
||||||
|
enterError = await handleLogin(username, password);
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let hi = ' ';
|
||||||
|
let greeting = ' ';
|
||||||
|
|
||||||
else if((username == "") && (password == "")){
|
let greetings = [
|
||||||
usernameError = "ничего не забыл?"
|
'Опять ты? Ну давай, заходи',
|
||||||
passwordError = "ничего не забыл?"
|
'Рад видеть тебя снова',
|
||||||
console.log("ЖОПА3")
|
'Как прошел день?',
|
||||||
}
|
'Как настроение?',
|
||||||
else if((username != "") && (password != ""))
|
'Come in'
|
||||||
{
|
];
|
||||||
usernameError = await handleLogin(username,password)
|
greeting = greetings[Math.floor(Math.random() * greetings.length)];
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let greeting
|
let His = ['Привет!', 'Дарова!', 'Хай!', 'Приветствую!'];
|
||||||
//список приветствований. TODO: пополнить пул
|
hi = His[Math.floor(Math.random() * (His.length - 0))];
|
||||||
let greetings = ["опять ты? ну давай, заходи",];
|
|
||||||
onMount(() => {
|
|
||||||
greeting = greetings[Math.floor(Math.random() * greetings.length)]
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
let loadingPage = false;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
loadingPage = !loadingPage;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<body>
|
{#if loadingPage === true}
|
||||||
|
<body>
|
||||||
<div class="loginField">
|
<div class="loginField">
|
||||||
|
<div class="loginMainDiv">
|
||||||
|
<div class="loginDiv" transition:fly={{ y: -1920, duration: 1000, backInOut }}>
|
||||||
|
<div class="jopa1">
|
||||||
|
<div class="marginDiv">
|
||||||
|
<div class="greetingsDiv">
|
||||||
|
<h1 id="hi" transition:blur={{
|
||||||
|
y: -30, duration: 1900, easing: cubicOut }}>{hi}</h1>
|
||||||
|
<h2 id="greetings" transition:blur={{
|
||||||
|
y: -30, duration: 2000, easing: cubicOut }}>
|
||||||
|
{greeting}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="bigGroup">
|
||||||
|
<div class="group">
|
||||||
|
<h3>никнейм или почта</h3>
|
||||||
|
<input placeholder=" " type="text" id="username" on:input={listener} bind:value={username} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="loginMainDiv">
|
<div class="group">
|
||||||
<div class="loginDiv">
|
<h3>пароль</h3>
|
||||||
<div class="jopa1">
|
<input placeholder=" " type="password" id="password" on:input={listener} bind:value={password} />
|
||||||
<div class="marginDiv">
|
|
||||||
<h1>Дарова</h1>
|
</div>
|
||||||
<h2>{greeting}</h2>
|
</div>
|
||||||
<div>
|
|
||||||
<div class="group">
|
<div class="enterDiv">
|
||||||
<h3>никнейм или почта</h3>
|
<button class="enterButt" on:click={login}>Войти</button>
|
||||||
{#if usernameError && usernameError !== ''}
|
{#if enterError !== ''}
|
||||||
<h3 id="usernameError" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}
|
<h3 class="enterError"
|
||||||
>{usernameError}</h3>
|
transition:fly={{ y: 200, duration: 300, backInOut }}>{enterError}</h3>
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="regDiv" transition:fly={{ y: -1920, duration: 800, backInOut }}>
|
||||||
|
<div class="jopa1">
|
||||||
|
<div class="regregDiv">
|
||||||
|
<h2 class="reg1">Нет аккаунта? Лох!</h2>
|
||||||
|
<button class="reg2" on:click={() => (window.location.href = '/register')}
|
||||||
|
>Перестать был лохом</button>
|
||||||
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<button on:click={login}>Войти</button>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="regDiv">
|
<div class="previewField">
|
||||||
<div class="jopa1">
|
<h3>не жопа</h3>
|
||||||
<div class="regregDiv">
|
|
||||||
<h2>Нет аккаунта? Лох!</h2>
|
|
||||||
<button on:click={() => window.location.href = '/register'}>Перестать был лохом</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</body>
|
||||||
</div>
|
{/if}
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="previewField">
|
|
||||||
<h3>не жопа</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
||||||
.group > *{
|
// .passwordError{
|
||||||
margin-top: 1%;
|
// z-index: 1;
|
||||||
margin-bottom: 1%;
|
// position: absolute;
|
||||||
}
|
// color: var(--disable);
|
||||||
|
// border: 1px solid white;
|
||||||
|
// bottom: 29.5%;
|
||||||
|
// }
|
||||||
|
// не рабоая хуйня. переделать как нибудь <h3 class="passwordError">{passwordError}</h3>
|
||||||
|
|
||||||
.group{
|
.greetingsDiv{
|
||||||
display: flex;
|
height: 30%;
|
||||||
flex-direction: row;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
|
gap: 35px;
|
||||||
}
|
justify-content: center;
|
||||||
|
|
||||||
.regregDiv{
|
}
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
}
|
.enterDiv{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 20%;
|
||||||
|
|
||||||
.loginMainDiv{
|
}
|
||||||
|
.enterButt{
|
||||||
|
height: 60%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.enterError{
|
||||||
|
margin-bottom: 1%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.reg1,
|
||||||
|
.reg2{
|
||||||
|
height: 40%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder {
|
||||||
|
color: var(--disable);
|
||||||
|
transition: opacity 1s ease;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#greetings,
|
||||||
|
#hi {
|
||||||
|
transition: opacity 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group > * {
|
||||||
|
margin-top: 1%;
|
||||||
|
margin-bottom: 1%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
}
|
||||||
|
.bigGroup{
|
||||||
|
height: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regregDiv {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginMainDiv {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
}
|
}
|
||||||
.regDiv{
|
.regDiv {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 32%;
|
height: 32%;
|
||||||
|
}
|
||||||
}
|
.loginDiv {
|
||||||
.loginDiv{
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 66%;
|
height: 66%;
|
||||||
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.loginDiv,
|
.loginDiv,
|
||||||
.regDiv{
|
.regDiv {
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
background:
|
background:
|
||||||
linear-gradient(#101010, #101010) padding-box,
|
linear-gradient(#101010, #101010) padding-box,
|
||||||
var(--gradient) border-box;
|
var(--gradient) border-box;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-attachment: fixed;
|
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,
|
.previewField {
|
||||||
#passwordError {
|
height: 100%;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginField {
|
||||||
|
height: 100%;
|
||||||
|
width: 50%;
|
||||||
|
outline: 1px dotted red;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enterError {
|
||||||
color: var(--disable);
|
color: var(--disable);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.marginDiv {
|
.marginDiv {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-between;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-left: 5%;
|
padding-left: 5%;
|
||||||
padding-right: 5%;
|
padding-right: 5%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.marginDiv > * {
|
||||||
|
//border: 1px solid white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jopa1 {
|
.jopa1 {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -197,18 +281,17 @@ onMount(() => {
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jopa1::after{
|
.jopa1::after {
|
||||||
content: "";
|
content: '';
|
||||||
background-image: url(../noise.gif);
|
background-image: url(../noise.gif);
|
||||||
opacity: 0.011;
|
opacity: 0.011;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0;
|
top: 0;
|
||||||
left:0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
|
@ -227,15 +310,15 @@ onMount(() => {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus{
|
input:focus {
|
||||||
transition: 0.5s ease-in;
|
transition: 0.5s ease-in;
|
||||||
box-shadow: 0 0 transparent;
|
box-shadow: 0 0 transparent;
|
||||||
}
|
}
|
||||||
input:not(:focus) {
|
input:not(:focus) {
|
||||||
transition: 0.5s ease-in-out;
|
transition: 0.5s ease-in-out;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
|
4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
|
||||||
-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
|
-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
@ -255,12 +338,11 @@ onMount(() => {
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
input,
|
input,
|
||||||
select,
|
button {
|
||||||
button{
|
|
||||||
color: var(--fontColor);
|
color: var(--fontColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1{
|
h1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -268,7 +350,7 @@ onMount(() => {
|
||||||
font-size: 5vh;
|
font-size: 5vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2{
|
h2 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -282,13 +364,13 @@ onMount(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
overflow: hidden;
|
||||||
flex-direction: row;
|
display: flex;
|
||||||
}
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: Comfortaa;
|
font-family: Comfortaa;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import Header from './../Header.svelte';
|
|
||||||
import { handleRegister, checkName, checkMail, VerificationEmail } from '$lib/userFunction.js';
|
import { handleRegister, checkName, checkMail, VerificationEmail } from '$lib/userFunction.js';
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition';
|
||||||
import { cubicOut } from 'svelte/easing';
|
import { cubicOut } from 'svelte/easing';
|
||||||
|
|
||||||
|
|
@ -22,7 +20,6 @@
|
||||||
let code = ''; let codeError = '';
|
let code = ''; let codeError = '';
|
||||||
|
|
||||||
async function SendData() {
|
async function SendData() {
|
||||||
console.log(`name=${nameError} mail=${mailError} password=${passwordError} password2=${password2Error}`)
|
|
||||||
if ((name === '' )|| (name === undefined))
|
if ((name === '' )|| (name === undefined))
|
||||||
nameError = 'пустой ник';
|
nameError = 'пустой ник';
|
||||||
|
|
||||||
|
|
@ -45,7 +42,6 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
||||||
let date = `${dateYear}-${dateMonth}-${dateDay}`;
|
let date = `${dateYear}-${dateMonth}-${dateDay}`;
|
||||||
|
|
||||||
let reg = await handleRegister(name, password, mail, date);
|
let reg = await handleRegister(name, password, mail, date);
|
||||||
console.log(reg);
|
|
||||||
rotate();
|
rotate();
|
||||||
console.log("отправлено")
|
console.log("отправлено")
|
||||||
}
|
}
|
||||||
|
|
@ -116,14 +112,13 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
||||||
<div class="mainDivFront">
|
<div class="mainDivFront">
|
||||||
<div class="jopa1">
|
<div class="jopa1">
|
||||||
<div class="marginDiv">
|
<div class="marginDiv">
|
||||||
|
|
||||||
<form on:submit|preventDefault={SendData}>
|
<form on:submit|preventDefault={SendData}>
|
||||||
<h1>Регистрация</h1>
|
<h1>Регистрация</h1>
|
||||||
|
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<div class="groupname">
|
<div class="groupname">
|
||||||
<h3>имя</h3>
|
<h3>имя</h3>
|
||||||
{#if nameError && nameError !== ''}
|
{#if nameError !== ''}
|
||||||
<h3 id="name" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
|
<h3 id="name" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
|
||||||
{nameError}
|
{nameError}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -135,7 +130,7 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<div class="groupname">
|
<div class="groupname">
|
||||||
<h3>эл почта</h3>
|
<h3>эл почта</h3>
|
||||||
{#if mailError && mailError !== ''}
|
{#if mailError !== ''}
|
||||||
<h3 id="mail" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
|
<h3 id="mail" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
|
||||||
{mailError}
|
{mailError}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue