Login refactor + livereload fixes + once loading deps

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

+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

+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

+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