Skip to content

K
kus-admin
Commit f9e7d587 by Иван Кубота
Options

Login refactor + livereload fixes + once loading deps

parent 0ff4be3c
Showing with 144 additions and 79 deletions
src/core/Ajax.jsx
......@@ -103,6 +103,14 @@ export const AsyncAjax = {
});
},
post(url, data){
return new Promise(function(resolve, reject) {
Ajax.post(url, data, function(err, data) {
if(err){
reject(data);
}else{
resolve(data);
}
})
});
}
};
\ No newline at end of file
src/core/Require.js
......@@ -63,7 +63,7 @@
return dep === 'exports' ? 'exports': resolve(fileName, dep);
});
if(!(fileName in definitions)){
if(!(fileName in definitions) || definitions[fileName].notResolved !== 0){
definitions[ fileName ] = { fileName: fileName, deps: deps, fn: fn, exports: {} };
var notResolved = 0;
......@@ -72,14 +72,17 @@
if( dep === 'exports' )
continue;
var skip = false;
console.log(dep)
if( !( dep in definitions ) ){
for( var j = 0, _j = InstantLoaders.length; j < _j; j++ ){
const instantLoader = InstantLoaders[ j ];
if( dep.substr( -instantLoader.name.length ).toLowerCase() === instantLoader.name ){
if( !( dep in definitions ) ){
definitions[ dep ] = { exports: {} };
if( instantLoader.loader( dep ) ){
definitions[ dep ] = { exports: {} }
skip = true;
}else{
definitions[ dep ].loading = true;
}
}
break;
......
src/dict/Consts.jsx
......@@ -39,7 +39,7 @@ const Consts = {
GET_USER: id => `/api/users/${id}`,
GET_USER_NEW_CARDS: "/api/history/cards/new",
GET_USER_QUIZ_ATTEMPT_ID: "/api/quiz_attempt/last",
GET_USER_QUIZ_ATTEMPTS_BY_ID: id => `/api/quiz_attempts/${id}`,
GET_USER_QUIZ_ATTEMPTS_BY_ID: id => `/api/quiz_attempts/${id}`
},
HEADERS: {
DEFAULT: {
......@@ -211,6 +211,12 @@ Consts.ENV.IS_DEVELOPMENT = Consts.ENV.NODE_ENV === Consts.ENV.DEVELOPMENT
Consts.ENV.BASE_URL = 'https://api.local.vkusvill.testin.ru';/*Consts.ENV.IS_DEVELOPMENT
? `${window.location.protocol}//${window.location.hostname}`//${window.location.port!=="80"?':'+window.location.port:''}`
: window.location.origin*/
for(let key in Consts.API.ENDPOINTS){
const ENDPOINT = Consts.API.ENDPOINTS[key];
Consts.API.ENDPOINTS[key] = (data)=>{
return Consts.ENV.BASE_URL + (typeof ENDPOINT === 'function' ? ENDPOINT(data): ENDPOINT);
};
}
export default Consts
export const API = Consts.API;
src/view/cmp/field/LabeledField.jsx
......@@ -2,7 +2,6 @@ import './LabeledField.scss';
import Input from './Input.jsx';
export default D.declare('view.cmp.field.LabeledField', (cfg, children)=> {
console.log(cfg.invalid)
return <div class={D.cls( "labeled-field", cfg.cls, { "labeled-field--invalid": cfg.invalid } )}>
<label class="labeled-field__label">
<span class="labeled-field__label-text">{cfg.label}</span>
......
src/view/page/login/Login.jsx
......@@ -2,11 +2,11 @@ import '../../cmp/field/LabeledField.jsx';
import Button from '../../cmp/button/Button.jsx';
import Logo from '../../../svg/logo_vkusvill.svg';
import './loginPage.scss';
import Arr from '../../../svg/arr.svg';
import ArrB from '../../../svg/arr-back.svg';
import {AsyncAjax} from '/core/Ajax.jsx';
import {API} from '/dict/Consts.jsx';
import LoginHelp from './LoginHelp.jsx';
import LoginPhone from './LoginPhone.jsx';
import LoginCode from './LoginCode.jsx';
const {AND, OR, IF} = Store;
export default D.declare('view.page.Login', () => {
......@@ -17,36 +17,13 @@ export default D.declare('view.page.Login', () => {
active: 'enterPhone',
phoneValid: false,
phoneChecking: false,
phoneError: false,
phoneErrorText: '',
incorrectPhone: false,
displayHelpPage: false,
codeError: false
});
loginStore.sub('phone', function (phone) {
loginStore.set('phoneValid', phone.length === 11);
});
loginStore.sub('code', function (code) {
loginStore.set('codeValid', (code+'').length === 6);
});
const checkPhone = async function() {
loginStore.set('phoneChecking', true);
try{
const result = await AsyncAjax.post( API.ENDPOINTS.CHECK_CODE, data );
console.log(result)
}catch( e ){
}
setTimeout(function() {
loginStore.set('phoneChecking', false);
loginStore.set('active', 'enterCode');
}, 2000)
};
const checkCode = function () {
loginStore.set('codeChecking', true);
setTimeout(function() {
loginStore.set('codeChecking', false);
loginStore.set('codeError', true);
}, 2000)
};
return <div className={"login-page"}>
......@@ -55,57 +32,15 @@ export default D.declare('view.page.Login', () => {
</div>
<IF condition={loginStore.valTrue('displayHelpPage')}>
<div className={"login-page__back-link"}>
<Button onClick={() => loginStore.set( 'displayHelpPage', false )} type={"button"}>
<ArrB width="17" height="11"/><span>Вернуться к авторизации</span>
</Button>
</div>
<h2 className="login-page__headline">Проблемы с авторизацией?</h2>
<div className="login-page__text">
<p>Текст про&nbsp;то, куда писать и&nbsp;звонить Текст про&nbsp;то, куда писать и&nbsp;звонить, текст
про&nbsp;то, куда писать и&nbsp;звонить</p>
</div>
<a href="tel:88000000000" className="login-page__support">8 800 000 00 00</a>
<LoginHelp loginStore={loginStore}/>
</IF>
<IF condition={loginStore.valFalse('displayHelpPage')}>
<h1 className="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
<form action="#" method="post" className="authorization-form">
<Switch store={loginStore} key='active' content={{
enterPhone: <>
<view.cmp.field.LabeledField required type={'tel'} bind={loginStore.bind('phone')}
label={'Введите номер телефона, чтобы продолжить.'}
disabled={loginStore.valTrue('phoneChecking')}
placeholder={'Ваш телефон'} />
<Button class={"button button--primary authorization-form__button"}
type={"button"} onclick={checkPhone}
disabled={OR(
loginStore.valFalse('phoneValid'),
loginStore.valTrue('phoneChecking')
)}>
<span>Далее</span><Arr width="17" height="11"/>
</Button>
</>,
enterCode: <>
<view.cmp.field.LabeledField required label={'Введите код из СМС'}
placeholder={'Код'} type={'number'}
disabled={loginStore.valTrue('codeChecking')}
bind={loginStore.bind('code')}
invalid={loginStore.valTrue('codeError')}>
<IF condition={loginStore.valTrue('codeError')}>
<span className={"labeled-field__error-message"}>Некорректный код. Попробуйте еще раз</span>
</IF>
</view.cmp.field.LabeledField>
<Button class={"button button--primary authorization-form__button"}
type={"button"} onclick={checkCode}
disabled={OR(
loginStore.valFalse('codeValid'),
loginStore.valTrue('codeChecking')
)}>
<span>Далее</span><Arr width="17" height="11"/>
</Button>
</>
enterPhone: <LoginPhone loginStore={loginStore}/>,
enterCode: <LoginCode loginStore={loginStore}/>
}}/>
<Button onClick={() => loginStore.set('displayHelpPage', true)} type={"button"}>Проблемы с авторизацией?</Button>
</form>
......
src/view/page/login/LoginCode.jsx 0 → 100644
import Button from "/view/cmp/button/Button.jsx";
import { AsyncAjax } from "/core/Ajax.jsx";
import { API } from "/dict/Consts.jsx";
import Arr from '/svg/arr.svg';
const {AND, OR, IF} = Store;
export default D.declare('view.page.LoginCode', ({loginStore}) => {
const checkCode = function () {
loginStore.set('codeChecking', true);
setTimeout(function() {
loginStore.set('codeChecking', false);
loginStore.set('codeError', true);
}, 2000)
};
loginStore.sub('code', function (code) {
loginStore.set('codeValid', (code+'').length === 6);
});
return <>
<view.cmp.field.LabeledField required label={'Введите код из СМС'}
placeholder={'Код'} type={'number'}
disabled={loginStore.valTrue('codeChecking')}
bind={loginStore.bind('code')}
invalid={loginStore.valTrue('codeError')}>
<IF condition={loginStore.valTrue('codeError')}>
<span className={"labeled-field__error-message"}>Некорректный код. Попробуйте еще раз</span>
</IF>
</view.cmp.field.LabeledField>
<Button class={"button button--primary authorization-form__button"}
type={"button"} onclick={checkCode}
disabled={OR(
loginStore.valFalse('codeValid'),
loginStore.valTrue('codeChecking')
)}>
<span>Далее</span><Arr width="17" height="11"/>
</Button>
</>
});
src/view/page/login/LoginHelp.jsx 0 → 100644
import Button from "/view/cmp/button/Button.jsx";
import ArrB from "/svg/arr-back.svg";
export default D.declare('view.page.LoginHelp', ({loginStore}) => {
return <>
<div className={"login-page__back-link"}>
<Button onClick={() => loginStore.set( 'displayHelpPage', false )} type={"button"}>
<ArrB width="17" height="11"/><span>Вернуться к авторизации</span>
</Button>
</div>
<h2 className="login-page__headline">Проблемы с авторизацией?</h2>
<div className="login-page__text">
<p>Текст про&nbsp;то, куда писать и&nbsp;звонить Текст про&nbsp;то, куда писать и&nbsp;звонить, текст
про&nbsp;то, куда писать и&nbsp;звонить</p>
</div>
<a href="tel:88000000000" className="login-page__support">8 800 000 00 00</a>
</>
});
src/view/page/login/LoginPhone.jsx 0 → 100644
import Button from "/view/cmp/button/Button.jsx";
import { AsyncAjax } from "/core/Ajax.jsx";
import { API } from "/dict/Consts.jsx";
import Arr from '/svg/arr.svg';
const {AND, OR, IF} = Store;
export default D.declare('view.page.LoginPhone', ({loginStore}) => {
const checkPhone = async function() {
loginStore.set('phoneChecking', true);
try{
const result = await AsyncAjax.post( API.ENDPOINTS.CHECK_PHONE(), {
phone: loginStore.get('phone')
} );
if(!result)
throw new Error();
if(result.userExist === false){
loginStore.set('phoneErrorText', 'Пользователь с таким номером не зарегистрирован!');
loginStore.set('phoneError', true);
}else if(result.userExist === true){
loginStore.set('active', 'enterCode');
loginStore.set('phoneError', false);
}
}catch( e ){
console.error(e);
loginStore.set('phoneErrorText', 'Что-то пошло не так, проверьте соединение и обратитесь в поддержку!')
loginStore.set('phoneError', true);
}
loginStore.set('phoneChecking', false);
};
loginStore.sub('phone', function (phone) {
loginStore.set('phoneValid', phone.length === 11);
});
return <>
<view.cmp.field.LabeledField required type={'tel'} bind={loginStore.bind('phone')}
label={'Введите номер телефона, чтобы продолжить.'}
disabled={loginStore.valTrue('phoneChecking')}
placeholder={'Ваш телефон'}
invalid={loginStore.valTrue('phoneError')}>
<IF condition={loginStore.valTrue('phoneError')}>
<span className={"labeled-field__error-message"}>{loginStore.val('phoneErrorText')}</span>
</IF>
</view.cmp.field.LabeledField>
<Button class={"button button--primary authorization-form__button"}
type={"button"} onclick={checkPhone}
disabled={OR(
loginStore.valFalse('phoneValid'),
loginStore.valTrue('phoneChecking')
)}>
<span>Далее</span><Arr width="17" height="11"/>
</Button>
</>
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment