дизайн логина, половина с самим процессом логина сделан. остался забагованный passwordError
This commit is contained in:
parent
71e4b2e311
commit
2cb5598b85
4 changed files with 301 additions and 39 deletions
15
src/app.html
15
src/app.html
|
|
@ -10,11 +10,6 @@
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html,body{
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background-color: #101010;
|
|
||||||
}
|
|
||||||
:root{
|
:root{
|
||||||
--bg: #101010;
|
--bg: #101010;
|
||||||
--gradient: linear-gradient(to bottom, #3C53FF, #7734AA);
|
--gradient: linear-gradient(to bottom, #3C53FF, #7734AA);
|
||||||
|
|
@ -25,6 +20,16 @@
|
||||||
font-family: Comfortaa;
|
font-family: Comfortaa;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html,body{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -128,15 +128,18 @@ export async function VerificationEmail(Code){
|
||||||
})
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
if(!response.ok)
|
|
||||||
|
if(response.status === 200)
|
||||||
{
|
{
|
||||||
console.log(response.status)
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
console.log('лох залогинен!');
|
|
||||||
window.location.href = '/chatPage'
|
window.location.href = '/chatPage'
|
||||||
}
|
}
|
||||||
|
else if(response.status === 401)
|
||||||
|
{
|
||||||
|
return "Неправильный логин или парль"
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
console.log(response.status)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function handleLogout() {
|
export async function handleLogout() {
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,294 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import Header from '../Header.svelte';
|
import Header from '../Header.svelte';
|
||||||
import {navigate} from 'svelte-routing'
|
import {handleLogin} from '$lib/userFunction'
|
||||||
import {handleLogin, handleLogout} from '$lib/userFunction'
|
import { onMount } from 'svelte';
|
||||||
|
import { fly } from 'svelte/transition';
|
||||||
|
import { cubicOut } from 'svelte/easing';
|
||||||
|
|
||||||
let username = "";
|
let username = ""; let usernameError = "";
|
||||||
let password = "";
|
let password = ""; let passwordError = "";
|
||||||
|
|
||||||
function login(){
|
async function login(){
|
||||||
handleLogin(username,password)
|
|
||||||
|
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 = ""
|
||||||
|
passwordError = ""
|
||||||
|
passwordError = "ничего не забыл?"
|
||||||
|
console.log("ЖОПА2")
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
else if((username == "") && (password == "")){
|
||||||
|
usernameError = "ничего не забыл?"
|
||||||
|
passwordError = "ничего не забыл?"
|
||||||
|
console.log("ЖОПА3")
|
||||||
|
}
|
||||||
|
else if((username != "") && (password != ""))
|
||||||
|
{
|
||||||
|
usernameError = await handleLogin(username,password)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let greeting
|
||||||
|
//список приветствований. TODO: пополнить пул
|
||||||
|
let greetings = ["опять ты? ну давай, заходи",];
|
||||||
|
onMount(() => {
|
||||||
|
greeting = greetings[Math.floor(Math.random() * greetings.length)]
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="loginField">
|
||||||
|
|
||||||
|
<div class="loginMainDiv">
|
||||||
|
<div class="loginDiv">
|
||||||
|
<div class="jopa1">
|
||||||
|
<div class="marginDiv">
|
||||||
|
<h1>Дарова</h1>
|
||||||
|
<h2>{greeting}</h2>
|
||||||
|
<div>
|
||||||
|
<div class="group">
|
||||||
|
<h3>никнейм или почта</h3>
|
||||||
|
{#if usernameError && usernameError !== ''}
|
||||||
|
<h3 id="usernameError" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}
|
||||||
|
>{usernameError}</h3>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
<form on:submit|preventDefault={login}>
|
|
||||||
<label for="username">Username:</label>
|
|
||||||
<input type="text" id="username" bind:value={username} />
|
<input type="text" id="username" bind:value={username} />
|
||||||
|
|
||||||
<label for="password">Password:</label>
|
<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} />
|
<input type="password" id="password" bind:value={password} />
|
||||||
|
</div>
|
||||||
|
<button on:click={login}>Войти</button>
|
||||||
|
|
||||||
<button type="submit">Login</button>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="regDiv">
|
||||||
|
<div class="jopa1">
|
||||||
|
<div class="regregDiv">
|
||||||
|
<h2>Нет аккаунта? Лох!</h2>
|
||||||
|
<button on:click={() => window.location.href = '/register'}>Перестать был лохом</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button on:click={handleLogout}>Выход</button>
|
</div>
|
||||||
|
|
||||||
<style>
|
<div class="previewField">
|
||||||
*{
|
<h3>не жопа</h3>
|
||||||
font-weight: 600;
|
</div>
|
||||||
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
.group > *{
|
||||||
|
margin-top: 1%;
|
||||||
|
margin-bottom: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.group{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.regregDiv{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginMainDiv{
|
||||||
|
width: 60%;
|
||||||
|
height: 90%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
}
|
||||||
|
.regDiv{
|
||||||
|
width: 100%;
|
||||||
|
height: 32%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.loginDiv{
|
||||||
|
width: 100%;
|
||||||
|
height: 66%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginDiv,
|
||||||
|
.regDiv{
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background:
|
||||||
|
linear-gradient(#101010, #101010) padding-box,
|
||||||
|
var(--gradient) border-box;
|
||||||
|
border-radius: 15px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
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,
|
||||||
|
#passwordError {
|
||||||
|
color: var(--disable);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marginDiv {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 90%;
|
||||||
|
height: 100%;
|
||||||
|
padding-left: 5%;
|
||||||
|
padding-right: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jopa1 {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 4px 4px 11px rgba($color: #000000, $alpha: 0.4);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jopa1::after{
|
||||||
|
content: "";
|
||||||
|
background-image: url(../noise.gif);
|
||||||
|
opacity: 0.011;
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background:
|
||||||
|
linear-gradient(#101010, #101010) padding-box,
|
||||||
|
var(--gradient) border-box;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 100%;
|
||||||
|
height: 2em;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus{
|
||||||
|
transition: 0.5s ease-in;
|
||||||
|
box-shadow: 0 0 transparent;
|
||||||
|
}
|
||||||
|
input: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);
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
text-shadow: 0 0 20px white;
|
||||||
|
font-size: 36px;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
height: 10%;
|
||||||
|
margin-bottom: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
button{
|
||||||
|
color: var(--fontColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-shadow: 0 0 20px white;
|
||||||
|
font-size: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-shadow: 0 0 20px white;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 3.5vh;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 3vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: Comfortaa;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -110,7 +110,6 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="mainDiv {rotated ? 'rotated' : ''}">
|
<div class="mainDiv {rotated ? 'rotated' : ''}">
|
||||||
<div class="mainDivInner">
|
<div class="mainDivInner">
|
||||||
|
|
||||||
|
|
@ -379,7 +378,7 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
|
||||||
var(--gradient) border-box;
|
var(--gradient) border-box;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1.8em;
|
height: 2em;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue