большая разработка аутентификации

This commit is contained in:
2023-03-02 11:46:14 +10:00
parent 0aae5b6558
commit 687db4e4b1
129 changed files with 2282 additions and 646 deletions

View File

@@ -1,5 +1,4 @@
@keyframes glare {
2%,
100% {
left : 130%;
@@ -9,27 +8,78 @@
}
}
section#authentication {
main {
z-index: 1000;
top: 20%;
position: relative;
height: unset;
display: flex;
flex-direction: unset;
justify-content: center;
align-items: unset;
}
section.panel {
z-index : 1000;
width : 400px;
position : relative;
margin : 25vh auto;
position : absolute;
display : flex;
flex-direction: column;
}
section#authentication>section.header {
z-index : 1000;
height : 100px;
margin-left : -50px;
padding : 30px 0;
display : flex;
clip-path : url(#authentication-header-mask);
border-radius : 3px 3px 0 0;
animation-duration: 120s;
section.panel.medium {
width: 300px;
}
section#authentication>section.header>img.avatar {
section.panel.small {
width: 220px;
}
section.panel#mnemonic {
margin-left: -570px;
}
section.panel#classic {
margin-left: 570px;
}
section.panel>section.body>ul {
margin: 0 5%;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
list-style: square;
}
section.panel>section.body>ul>li {
font-size: 0.8rem;
word-break: break-word;
animation-duration : .35s;
animation-name : uprise;
animation-fill-mode : forwards;
animation-timing-function: cubic-bezier(.47,0,.74,.71);
}
section.panel>section.header {
z-index : 1000;
height : 50px;
display : flex;
justify-content: center;
align-items: end;
animation-duration: 120s;
border-radius : 3px 3px 0 0;
background-color : var(--background-above);
}
section#profile>section.header {
margin-left : -50px;
height : 100px;
padding : 30px 0;
clip-path : url(#profile-header-mask);
}
section#profile>section.header>img.avatar {
z-index : 1500;
left : 6px;
top : 36px;
@@ -46,7 +96,7 @@ section#authentication>section.header>img.avatar {
-moz-box-shadow : 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
section#authentication>section.header>img.avatar:hover {
section#profile>section.header>img.avatar:hover {
left : 0;
top : 30px;
width : 100px;
@@ -56,7 +106,7 @@ section#authentication>section.header>img.avatar:hover {
-moz-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
}
section#authentication>section.header>img.cover {
section#profile>section.header>img.cover {
z-index : -5000;
left : -50px;
top : 0;
@@ -70,7 +120,7 @@ section#authentication>section.header>img.cover {
background : var(--background-above);
}
section#authentication>section.header>div.glare {
section#profile>section.header>div.glare {
z-index : 3000;
left : -30px;
top : -300px;
@@ -89,11 +139,11 @@ section#authentication>section.header>div.glare {
background-color : #fff;
}
section#authentication>section.header>div {
section#profile>section.header>div {
animation-duration: 80s;
}
section#authentication>section.header>a {
section#profile>section.header>a {
margin : auto;
width : 100%;
margin-left : 110px;
@@ -107,40 +157,38 @@ section#authentication>section.header>a {
text-shadow : 0 0 8px #00000080;
}
section.panel>section.header>:is(h1, h2, h3) {
margin-bottom: unset;
}
section#authentication>section.body {
margin-top : -160px;
padding : 180px 30px 20px 30px;
gap : 3ex;
section.panel>section.body {
padding : 20px 30px;
gap : 10px;
display : flex;
flex-direction : column;
border-radius : 3px;
border-radius : 0 0 3px 3px;
background-color : var(--background-above);
/* background-image : radial-gradient(circle at 70% 20%, #000000A0 0%, var(--background-above) 75%); */
box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}
section#authentication>section.body>ul {
section#profile>section.body>ul {
margin : unset;
margin-left : 10%;
margin-bottom: 1ex;
}
section#authentication>section.body ul ul {
section#profile>section.body ul ul {
padding-top: 1ex;
}
section#authentication>section.body ul li:not(:last-child) {
section#profile>section.body ul li:not(:last-child) {
margin-bottom: 1ex;
}
section#authentication>section.body div.buttons {
section#profile>section.body div.buttons {
margin-top: 10px;
display: flex;
}
section#authentication>section.body div.buttons>button {
section#profile>section.body div.buttons>button {
padding : 1ex 2ex;
cursor : pointer;
border-radius : 3px;
@@ -148,35 +196,35 @@ section#authentication>section.body div.buttons>button {
background-color: unset;
}
section#authentication>section.body div.buttons>button:hover {
section#profile>section.body div.buttons>button:hover {
color: var(--text-hover);
}
section#authentication>section.body div.buttons>button:active {
section#profile>section.body div.buttons>button:active {
color : var(--text-active);
transition: unset;
}
section#authentication>section.body div.buttons>button:first-of-type {
section#profile>section.body div.buttons>button:first-of-type {
margin-left : auto;
margin-right: 5%;
}
section#authentication>section.body div.buttons>button:last-of-type {
section#profile>section.body div.buttons>button:last-of-type {
margin-right: auto;
}
section#authentication>section.body div.buttons>button.accept {
section#profile>section.body div.buttons>button.accept {
padding : 1ex 5ex;
color : var(--text-inverse);
background-color: #63954d;
}
section#authentication>section.body div.buttons>button.accept:hover {
section#profile>section.body div.buttons>button.accept:hover {
color : var(--text-inverse-above);
background-color: #6fa259;
}
section#authentication>section.body div.buttons>button.accept:active {
section#profile>section.body div.buttons>button.accept:active {
background-color: #63954d;
}

View File

@@ -0,0 +1,23 @@
@keyframes input-error {
0%,
20% {
background-color: var(--input-error);
}
50%,
100% {
background-color: var(--background-above-1);
}
}
@keyframes uprise {
0% {
opacity: 0;
filter: blur(2px);
}
100% {
opacity: 1;
filter: blur(0px);
}
}

View File

@@ -0,0 +1,139 @@
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Hair.woff2') format('woff2'), url('/fonts/fira/FiraSans-Hair.woff') format('woff');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-HairItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-HairItalic.woff') format('woff');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-UltraLight.woff2') format('woff2'), url('/fonts/fira/FiraSans-UltraLight.woff') format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-UltraLightItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-UltraLightItalic.woff') format('woff');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Light.woff2') format('woff2'), url('/fonts/fira/FiraSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-LightItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Regular.woff2') format('woff2'), url('/fonts/fira/FiraSans-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Italic.woff2') format('woff2'), url('/fonts/fira/FiraSans-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraMono-Medium.woff2') format('woff2'), url('/fonts/fira/FiraMono-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-MediumItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-SemiBold.woff2') format('woff2'), url('/fonts/fira/FiraSans-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-SemiBoldItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-SemiBoldItalic.woff') format('woff');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Bold.woff2') format('woff2'), url('/fonts/fira/FiraSans-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-BoldItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-BoldItalic.woff') format('woff');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-ExtraBold.woff2') format('woff2'), url('/fonts/fira/FiraSans-ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-ExtraBoldItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-ExtraBoldItalic.woff') format('woff');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Heavy.woff2') format('woff2'), url('/fonts/fira/FiraSans-Heavy.woff') format('woff');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-HeavyItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-HeavyItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Fira Mono;
src: url('/fonts/fira/FiraMono-Regular.woff2') format('woff2'), url('/fonts/fira/FiraMono-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Fira Mono;
src: url('/fonts/fira/FiraMono-Bold.woff2') format('woff2'), url('/fonts/fira/FiraMono-Bold.woff') format('woff');
font-weight: 600;
font-style: normal;
}

View File

@@ -0,0 +1,63 @@
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-regular.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-regular.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-bold.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-bold.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-italic.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-italic.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-bolditalic.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-bolditalic.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-regular-subset.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-regular-subset.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-bold-subset.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-bold-subset.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-italic-subset.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-italic-subset.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-bolditalic-subset.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-bolditalic-subset.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: italic;
font-display: swap;
}

View File

@@ -2,9 +2,9 @@
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs,1));
width: 22px;
height: 22px
--height: 22px;
height: var(--height);
}
i.arrow.right::after,
@@ -13,7 +13,7 @@ i.arrow.right::before {
display: block;
box-sizing: border-box;
position: absolute;
right: 3px
right: 3px;
}
i.arrow.right::after {
@@ -22,12 +22,12 @@ i.arrow.right::after {
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
bottom: 7px
bottom: 7px;
}
i.arrow.right::before {
width: 16px;
height: 2px;
bottom: 10px;
background: currentColor
background: currentColor;
}

View File

@@ -0,0 +1,48 @@
i.keyhole,
i.keyhole::after,
i.keyhole::before {
display: block;
box-sizing: border-box;
border-radius: 20px;
}
i.keyhole {
--width: 20px;
--height: 20px;
position: relative;
width: 20px;
height: 20px;
border: 2px solid;
}
i.keyhole::after,
i.keyhole::before {
position: absolute;
content: '';
}
i.keyhole::before {
left: 5px;
top: 3px;
width: 6px;
height: 6px;
border: 2px solid;
}
i.keyhole::after {
left: 7px;
bottom: 3px;
width: 2px;
height: 5px;
background: currentColor;
}
label>i.keyhole:first-child {
left: 7px;
scale: .9;
border: 2.1px solid;
}
i.keyhole+input {
padding-left: 34px;
}

View File

@@ -0,0 +1,28 @@
i.lock {
--width: 12px;
--height: 11px;
position: relative;
margin-top: -12px;
width: 12px;
height: 11px;
display: block;
box-sizing: border-box;
border: 2px solid;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom: transparent;
}
i.lock::after {
left: -4px;
top: 9px;
position: absolute;
width: 16px;
height: 10px;
display: block;
box-sizing: border-box;
content: '';
box-shadow: 0 0 0 2px;
border-radius: 2px;
border: 2px solid transparent;
}

View File

@@ -0,0 +1,30 @@
i.mail,
i.mail::after {
--width: 18px;
--height: 14px;
height: 14px;
display: block;
box-sizing: border-box;
border: 2px solid;
}
i.mail {
position: relative;
width: 18px;
overflow: hidden;
border-radius: 2px;
}
i.mail::after {
position: absolute;
left: 0;
bottom: 3px;
width: 14px;
transform: rotate(-45deg);
content: "";
border-radius: 3px;
}
i.mail+input {
padding-left: 36px;
}

View File

@@ -0,0 +1,34 @@
i.nametag {
--width: 6px;
--height: 6px;
box-sizing: border-box;
position: relative;
width: 6px;
height: 6px;
display: block;
border: 2px solid;
}
i.nametag::before {
left: -5px;
top: -5px;
position: absolute;
width: 12px;
height: 12px;
display: block;
box-sizing: border-box;
content: '';
box-shadow:
-5px -5px 0 -3px,
5px 5px 0 -3px,
5px -5px 0 -3px,
-5px 5px 0 -3px;
}
label>i.nametag:first-child {
left: 13px;
}
i.nametag+input {
padding-left: 32px;
}

View File

@@ -0,0 +1,53 @@
i.user.add {
--width: 20px;
--height: 18px;
width: 20px;
height: 18px;
display: block;
box-sizing: border-box;
background:
linear-gradient(
to left,
currentColor 8px,
transparent 0)
no-repeat 14px 6px/6px 2px,
linear-gradient(
to left,
currentColor 8px,
transparent 0)
no-repeat 16px 4px/2px 6px;
}
i.user.add::after,
i.user.add::before {
content: '';
position: absolute;
display: block;
box-sizing: border-box;
border: 2px solid
}
i.user.add::before {
left: 2px;
top: 0;
width: 8px;
height: 8px;
border-radius: 30px;
}
i.user.add::after {
top: 9px;
width: 12px;
height: 9px;
border-bottom: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
label>i.user.add:first-child {
left: 9px;
}
i.user.add+input {
padding-left: 37px;
}

View File

@@ -35,11 +35,12 @@
--text : #e6e6e6;
--text-hover : #fff;
--text-active : #d0d0d0;
--text-inverse : 'dark';
--text-inverse : #020202;
--red-light-1 : #dc4343;
--red-light : #bf3737;
--red : #a43333;
--red-dark : #8d2a2a;
--input-error : #6c2424;
}
}
@@ -71,15 +72,6 @@
--link-active: #3064dd;
}
* {
text-decoration: none;
outline : none;
border : none;
color : var(--text);
font-family : 'Commissioner', sans-serif;
transition : 0.1s ease-out;
}
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select : none;
@@ -89,6 +81,28 @@
user-select : none;
}
.hidden {
display: none !important;
opacity: 0;
}
* {
text-decoration: none;
outline : none;
border : none;
color : var(--text);
font-family : Fira, sans-serif;
transition : 0.1s ease-out;
}
pre, code {
font-family: Hack, monospace;
}
button {
cursor: pointer;
}
a {
color: var(--link);
}
@@ -102,10 +116,60 @@ a:active {
transition: unset;
}
label {
position: relative;
height: 26px;
display: flex;
overflow: hidden;
border-radius: 2px;
}
label>i:first-child {
left: 8px;
top: calc((26px - var(--height)) / 2);
position: absolute !important;
margin: auto;
color: #8c7d7d;
}
label * {
/* color: var(--text-inverse); */
}
label>input {
width: 100%;
padding: 0 8px;
background-color: var(--background-above-1);
}
label>input+button {
background-color: var(--red);
}
i+input {
padding-left: 30px;
}
input.error {
animation-duration : 1s;
animation-name : input-error;
animation-fill-mode : forwards;
animation-timing-function: ease-in;
}
section.header>h1 {
font-size: 1.3rem;
line-height: 1.3rem;
}
section.header>:is(h2, h3) {
font-size: 1.1rem;
line-height: 1.1rem;
}
body {
height : 100vh;
margin : 0;
overflow : hidden;
background-color: var(--background);
}
@@ -217,6 +281,8 @@ main {
height : 100%;
display : flex;
flex-direction: column;
justify-content : center;
align-items : center;
}
footer {

View File

@@ -4,8 +4,13 @@ declare(strict_types=1);
namespace mirzaev\site\account;
use mirzaev\minimal\core;
use mirzaev\minimal\router;
// Файлы проекта
use mirzaev\site\account\controllers\core as controller,
mirzaev\site\account\models\core as model;
// Фреймворк
use mirzaev\minimal\core,
mirzaev\minimal\router;
ini_set('error_reporting', E_ALL);
ini_set('display_errors', 1);
@@ -25,12 +30,20 @@ $router = new router;
$router->write('/', 'index', 'index');
$router->write('/system/hotline', 'hotline', 'index');
$router->write('/system/graph', 'graph', 'index');
$router->write('/account/initialization', 'account', 'initialization', 'PUT');
$router->write('/account/initialization', 'account', 'initialization', 'POST');
$router->write('/account/vk/connect', 'account', 'connect');
$router->write('/account/panel', 'account', 'panel');
$router->write('/api/generate/password', 'api', 'password', 'POST');
$router->write('/session/login', 'session', 'login', 'POST');
$router->write('/session/password', 'session', 'password', 'POST');
$router->write('/session/invite', 'session', 'invite', 'POST');
// Инициализация ядра
$core = new core(namespace: __NAMESPACE__, router: $router);
// Инициализация ядер
$core->controller = new controller;
$core->model = new model;
// Обработка запроса
echo $core->start();

View File

@@ -1,26 +1,17 @@
"use strict";
'use strict';
class account {
static async initialization() {
// Запрос
return fetch('https://auth.mirzaev.sexy/account/initialization', {
method: 'GET'
});
}
static async initialization() {
// Запрос
return await fetch('https://account.mirzaev.sexy/account/initialization', {
method: 'POST',
});
}
static authentication() {
// Инициализация аккаунта
alert(1);
this.initialization()
.then(
(response) => {
alert(2);
}
);
static deauthentication() {
}
return true;
}
static deauthentication() {
}
static registration() {
alert(228);
}
}

View File

@@ -1,2 +1 @@
/*! js-cookie v3.0.1 | MIT */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var n=e.Cookies,o=e.Cookies=t();o.noConflict=function(){return e.Cookies=n,o}}())}(this,(function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)e[o]=n[o]}return e}return function t(n,o){function r(t,r,i){if("undefined"!=typeof document){"number"==typeof(i=e({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.cookie=t+"="+n.write(r,t)+c}}return Object.create({set:r,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var t=document.cookie?document.cookie.split("; "):[],o={},r=0;r<t.length;r++){var i=t[r].split("="),c=i.slice(1).join("=");try{var u=decodeURIComponent(i[0]);if(o[u]=n.read(c,u),e===u)break}catch(e){}}return e?o[e]:o}},remove:function(t,n){r(t,"",e({},n,{expires:-1}))},withAttributes:function(n){return t(this.converter,e({},this.attributes,n))},withConverter:function(n){return t(e({},this.converter,n),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(n)}})}({read:function(e){return'"'===e[0]&&(e=e.slice(1,-1)),e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}},{path:"/"})}));

Some files were not shown because too many files have changed in this diff Show More