Commit f9e7d587 by Иван Кубота

Login refactor + livereload fixes + once loading deps

parent 0ff4be3c
...@@ -103,6 +103,14 @@ export const AsyncAjax = { ...@@ -103,6 +103,14 @@ export const AsyncAjax = {
}); });
}, },
post(url, data){ 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
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
return dep === 'exports' ? 'exports': resolve(fileName, dep); 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: {} }; definitions[ fileName ] = { fileName: fileName, deps: deps, fn: fn, exports: {} };
var notResolved = 0; var notResolved = 0;
...@@ -72,14 +72,17 @@ ...@@ -72,14 +72,17 @@
if( dep === 'exports' ) if( dep === 'exports' )
continue; continue;
var skip = false; var skip = false;
console.log(dep)
if( !( dep in definitions ) ){ if( !( dep in definitions ) ){
for( var j = 0, _j = InstantLoaders.length; j < _j; j++ ){ for( var j = 0, _j = InstantLoaders.length; j < _j; j++ ){
const instantLoader = InstantLoaders[ j ]; const instantLoader = InstantLoaders[ j ];
if( dep.substr( -instantLoader.name.length ).toLowerCase() === instantLoader.name ){ if( dep.substr( -instantLoader.name.length ).toLowerCase() === instantLoader.name ){
if( !( dep in definitions ) ){ if( !( dep in definitions ) ){
definitions[ dep ] = { exports: {} };
if( instantLoader.loader( dep ) ){ if( instantLoader.loader( dep ) ){
definitions[ dep ] = { exports: {} }
skip = true; skip = true;
}else{
definitions[ dep ].loading = true;
} }
} }
break; break;
......
...@@ -39,7 +39,7 @@ const Consts = { ...@@ -39,7 +39,7 @@ const Consts = {
GET_USER: id => `/api/users/${id}`, GET_USER: id => `/api/users/${id}`,
GET_USER_NEW_CARDS: "/api/history/cards/new", GET_USER_NEW_CARDS: "/api/history/cards/new",
GET_USER_QUIZ_ATTEMPT_ID: "/api/quiz_attempt/last", 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: { HEADERS: {
DEFAULT: { DEFAULT: {
...@@ -211,6 +211,12 @@ Consts.ENV.IS_DEVELOPMENT = Consts.ENV.NODE_ENV === Consts.ENV.DEVELOPMENT ...@@ -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 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.protocol}//${window.location.hostname}`//${window.location.port!=="80"?':'+window.location.port:''}`
: window.location.origin*/ : 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 default Consts
export const API = Consts.API; export const API = Consts.API;
...@@ -2,7 +2,6 @@ import './LabeledField.scss'; ...@@ -2,7 +2,6 @@ import './LabeledField.scss';
import Input from './Input.jsx'; import Input from './Input.jsx';
export default D.declare('view.cmp.field.LabeledField', (cfg, children)=> { 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 } )}> return <div class={D.cls( "labeled-field", cfg.cls, { "labeled-field--invalid": cfg.invalid } )}>
<label class="labeled-field__label"> <label class="labeled-field__label">
<span class="labeled-field__label-text">{cfg.label}</span> <span class="labeled-field__label-text">{cfg.label}</span>
......
...@@ -2,11 +2,11 @@ import '../../cmp/field/LabeledField.jsx'; ...@@ -2,11 +2,11 @@ import '../../cmp/field/LabeledField.jsx';
import Button from '../../cmp/button/Button.jsx'; import Button from '../../cmp/button/Button.jsx';
import Logo from '../../../svg/logo_vkusvill.svg'; import Logo from '../../../svg/logo_vkusvill.svg';
import './loginPage.scss'; import './loginPage.scss';
import Arr from '../../../svg/arr.svg'; import Arr from '../../../svg/arr.svg';
import ArrB from '../../../svg/arr-back.svg';
import {AsyncAjax} from '/core/Ajax.jsx'; import LoginHelp from './LoginHelp.jsx';
import {API} from '/dict/Consts.jsx'; import LoginPhone from './LoginPhone.jsx';
import LoginCode from './LoginCode.jsx';
const {AND, OR, IF} = Store; const {AND, OR, IF} = Store;
export default D.declare('view.page.Login', () => { export default D.declare('view.page.Login', () => {
...@@ -17,36 +17,13 @@ export default D.declare('view.page.Login', () => { ...@@ -17,36 +17,13 @@ export default D.declare('view.page.Login', () => {
active: 'enterPhone', active: 'enterPhone',
phoneValid: false, phoneValid: false,
phoneChecking: false, phoneChecking: false,
phoneError: false,
phoneErrorText: '',
incorrectPhone: false, incorrectPhone: false,
displayHelpPage: false, displayHelpPage: false,
codeError: 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"}> return <div className={"login-page"}>
...@@ -55,57 +32,15 @@ export default D.declare('view.page.Login', () => { ...@@ -55,57 +32,15 @@ export default D.declare('view.page.Login', () => {
</div> </div>
<IF condition={loginStore.valTrue('displayHelpPage')}> <IF condition={loginStore.valTrue('displayHelpPage')}>
<div className={"login-page__back-link"}> <LoginHelp loginStore={loginStore}/>
<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>
</IF> </IF>
<IF condition={loginStore.valFalse('displayHelpPage')}> <IF condition={loginStore.valFalse('displayHelpPage')}>
<h1 className="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1> <h1 className="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
<form action="#" method="post" className="authorization-form"> <form action="#" method="post" className="authorization-form">
<Switch store={loginStore} key='active' content={{ <Switch store={loginStore} key='active' content={{
enterPhone: <> enterPhone: <LoginPhone loginStore={loginStore}/>,
<view.cmp.field.LabeledField required type={'tel'} bind={loginStore.bind('phone')} enterCode: <LoginCode loginStore={loginStore}/>
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>
</>
}}/> }}/>
<Button onClick={() => loginStore.set('displayHelpPage', true)} type={"button"}>Проблемы с авторизацией?</Button> <Button onClick={() => loginStore.set('displayHelpPage', true)} type={"button"}>Проблемы с авторизацией?</Button>
</form> </form>
......
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>
</>
});
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>
</>
});
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