Skip to content

Commit

Permalink
RB + ORM
Browse files Browse the repository at this point in the history 
public of Boldyrig
  • Loading branch information
@EndeZz
EndeZz authored Apr 18, 2020
1 parent b7d177a commit c7eacda
Show file tree
Hide file tree
Showing 5 changed files with 391 additions and 281 deletions.
121 changes: 58 additions & 63 deletions public/src/components/Auth/Auth.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,59 @@
import React from 'react';
import md5 from 'md5';
import './Auth.scss';
import './../../index.css';

import socket from '../../helpers/socket';

class Auth extends React.Component {
constructor(props) {
super();
this.setAuthState = props.setAuthState;
this.setRegistrState = props.setRegistrState;
this.setIsJoinedState = props.setIsJoinedState;
this.setTeams = props.setTeams;
this.MESSAGES = props.MESSAGES;
socket.on(this.MESSAGES.USER_LOGIN, data => {
if(data && data.user && data.user.token) {
localStorage.setItem('token', data.user.token);
localStorage.setItem('id', data.user.id);
this.setTeams(data.teams);
for(let teamId in data.teams) { // проверяем не подключен ли уже к команде наш пользователь
if(data.teams[teamId].players.find(player => player.id === data.user.id)) {
this.setIsJoinedState(true);
}
}
this.setAuthState(false);
}
});
socket.on(this.MESSAGES.USER_LOGOUT, data => data && (this.setAuthState(true) || localStorage.removeItem('token')));
}

auth() {
const login = document.querySelector('#loginAuth').value;
const password = document.querySelector('#passwordAuth').value;
if (login && password) {
const random = Math.random();
const hash = md5(md5(password + login) + random);
socket.emit(this.MESSAGES.USER_LOGIN, { login, hash, random });
}
}

render() {
return (
<div className="container__intro">
{ <div className="auth">
<div className="menu__auth">
<h1>Authorization</h1>
<div className="input__menu">
<input className='input__login' id="loginAuth" placeholder="Login" />
<input type="password" className='input__password' id="passwordAuth" placeholder="Password" />
</div>
<div className="button__menu">
<a href="#a" className="button__sign__in button" id="userLogin" onClick = {() => this.auth()}>Sign in</a>
<a href="#a" className="button__sign__up button" id="userRegistr" onClick = { () => this.setRegistrState(true) }>Sign up</a>
</div>
</div>
</div>
}
</div>
);
}
}

import React from 'react';
import md5 from 'md5';
import './Auth.scss';
import './../../index.css';

import socket from '../../helpers/socket';

class Auth extends React.Component {
constructor(props) {
super();
this.MESSAGES = props.MESSAGES;
// колбеки
this.setAuthState = props.setAuthState;
this.setRegistrState = props.setRegistrState;

socket.on(this.MESSAGES.USER_LOGIN, user => {
if(user && user.token && user.id) {
localStorage.setItem('token', user.token);
localStorage.setItem('id', user.id);
this.setAuthState(false);
} else {
console.log('Ошибка авторизации!!!');
}
});
socket.on(this.MESSAGES.USER_LOGOUT, data => data && (this.setAuthState(true) || localStorage.removeItem('token') || localStorage.removeItem('id')));
}

auth() {
const login = document.querySelector('#loginAuth').value;
const password = document.querySelector('#passwordAuth').value;
if (login && password) {
const random = Math.random();
const hash = md5(md5(password + login) + random);
socket.emit(this.MESSAGES.USER_LOGIN, { login, hash, random });
}
}

render() {
return (
<div className="container__intro">
<div className="auth">
<div className="menu__auth">
<h1>Authorization</h1>
<div className="input__menu">
<input className='input__login' id="loginAuth" placeholder="Login" />
<input type="password" className='input__password' id="passwordAuth" placeholder="Password" />
</div>
<div className="button__menu">
<a href="#a" className="button__sign__in button" id="userLogin" onClick = {() => this.auth()}>Sign in</a>
<a href="#a" className="button__sign__up button" id="userRegistr" onClick = { () => this.setRegistrState(true) }>Sign up</a>
</div>
</div>
</div>
</div>
);
}
}

export default Auth;
171 changes: 88 additions & 83 deletions public/src/components/Auth/Auth.scss
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,89 @@
.container__intro {

.auth {
display: flex;
justify-content: center;
top: 50%;
left: 50%;
//transform: translate3d(-50%, -50%, 0);
position: relative;
width: 320px;
height: 400px;
background: linear-gradient(to top, #524b5e, #1f202c);
.menu__auth {
display: flex;
border: #fff 2px solid;
flex-wrap: wrap;
justify-content: center;
.input__menu {
text-align: center;
width: 100%;
margin-top: 50px;
height: 100px;

.input__login {
text-align: center;
font-size: 20px;
font-weight: bold;
width: 240px;
height: 36px;
border-radius: 10px;
border: none;
margin-bottom: 14px;
}
.input__password {
font-size: 20px;
font-weight: bold;
text-align: center;
width: 240px;
height: 36px;
border-radius: 10px;
margin-bottom: 14px;
border: none;
}
}
.button__menu {
display: flex;
height: 35px;
justify-content: center;
width: 240px;
font-size: 15px;
border-radius: 10px;
text-transform: uppercase;
align-items: center;
margin-bottom: 110px;
color: #fff;
background: linear-gradient(to bottom right, #1394a5, #1e2f44);
border-left: #fff 2px solid;
border-top: #fff 2px solid;
border-bottom: #fff 2px solid;
border-right: #fff 2px solid;


.button__sign__in {
position: relative;
padding: 9px 30px;
border-right: #fff 1px solid;
border-radius: 10px 0 0 10px;
cursor: pointer;


}
.button__sign__up {
position: relative;
padding: 9px 30px;
border-left: #fff 1px solid;
border-radius: 0 10px 10px 0;
cursor: pointer;
flex-wrap: nowrap;
}
}

}
}
.container__intro {
background-image: url(./../../assets/img/bg_auth_registr.png);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
.auth {
display: flex;
justify-content: center;
top: 20%;
left: 50%;
margin-left: -160px;
//transform: translate3d(-50%, -50%, 0);
position: relative;
width: 320px;
height: 400px;
background: linear-gradient(to top, #524b5e, #1f202c);
.menu__auth {
display: flex;
border: #fff 2px solid;
flex-wrap: wrap;
justify-content: center;
color: #fff;
.input__menu {
text-align: center;
width: 100%;
margin-top: 50px;
height: 100px;
.input__login {
text-align: center;
font-size: 20px;
font-weight: bold;
width: 240px;
height: 36px;
border-radius: 10px;
border: none;
margin-bottom: 14px;
}
.input__password {
font-size: 20px;
font-weight: bold;
text-align: center;
width: 240px;
height: 36px;
border-radius: 10px;
margin-bottom: 14px;
border: none;
}
}
.button__menu {
display: flex;
height: 35px;
justify-content: center;
width: 240px;
font-size: 15px;
border-radius: 10px;
text-transform: uppercase;
align-items: center;
margin-bottom: 110px;
color: #fff;
background: linear-gradient(to bottom right, #1394a5, #1e2f44);
border-left: #fff 2px solid;
border-top: #fff 2px solid;
border-bottom: #fff 2px solid;
border-right: #fff 2px solid;
.button__sign__in {
position: relative;
padding: 9px 30px;
color: #fff;
border-right: #fff 1px solid;
border-radius: 10px 0 0 10px;
cursor: pointer;
font-size: 15px;
text-decoration: none;
}
.button__sign__up {
position: relative;
padding: 9px 30px;
color: #fff;
border-left: #fff 1px solid;
border-radius: 0 10px 10px 0;
cursor: pointer;
flex-wrap: nowrap;
font-size: 15px;
text-decoration: none;
}
}
}
}
}
Loading

0 comments on commit c7eacda

Please sign in to comment.