input bindin

src/base.scss

@@ -5,6 +5,4 @@ $d-green: #006C43;
 $l-green: #34BE5B;
 $gray: #a6a6a6;
 
-$font: 'SF Pro Text', Arial, sans-serif;
-
-b {color: pink}
\ No newline at end of file
+$font: 'SF Pro Text', Arial, sans-serif;
\ No newline at end of file

src/core/data/store/Store.js

@@ -38,7 +38,21 @@ Store.prototype = {
     this.on(key, wrap);
     wrap(this.get(key));
     return this;
+  },
+  bind: function (key) {
+    return new StoreBinding(this, key);
+  }
+};
+const StoreBinding = function(store, key){
+  this.store = store;
+  this.key = key;
+};
+StoreBinding.prototype = {
+  sub: function (fn) {
+    this.store.sub(this.key, fn);
+  },
+  set: function (val) {
+    this.store.set(this.key, val);
   }
 };
-
 Store.prototype = Object.assign(new Observable, Store.prototype);
\ No newline at end of file

src/view/cmp/field/Input.jsx

+
+export default D.declare('view.cmp.field.Input', (cfg)=> {
+    const dom = <input class="labeled-field__input" type={'text'} {...cfg}/>;
+    if(cfg.bind){
+        cfg.bind.sub(function (val) {
+            dom.value = val;
+        });
+        dom.addEventListener('input', function () {
+            cfg.bind.set(dom.value);
+        })
+    }
+    return dom;
+})
\ No newline at end of file

src/view/cmp/field/LabeledField.jsx

 import './LabeledField.scss';
+import Input from './Input.jsx';
+
 export default D.declare('view.cmp.field.LabeledField', (cfg)=>
   <div class="labeled-field">
     <label class="labeled-field__label">
         <span class="labeled-field__label-text">{cfg.label}</span>
-        <input class="labeled-field__input" type={'text'}/>
+        <Input class="labeled-field__input" type={'text'} {...cfg}/>
     </label>
   </div>
 )

src/view/cmp/switch/Switch.jsx

 export default D.declare('view.cmp.Switch', (cfg, contentHash) => {
   const cmp = div( {
-    cls: update => store.sub(
+    cls: update => (cfg.store || store).sub(
       cfg.key,
         val => update(
           D.cls(
@@ -8,7 +8,7 @@ export default D.declare('view.cmp.Switch', (cfg, contentHash) => {
             cfg.cls,
             { 'cmp-switch__filled': val in contentHash } ) ) ) } );
 
-  store.sub( cfg.key, (val)=> {
+  (cfg.store || store).sub( cfg.key, (val)=> {
     D.removeChildren(cmp);
     if(val in contentHash)
       D.appendChild( cmp, contentHash[ val ] );

src/view/page/login/Login.jsx

@@ -2,13 +2,34 @@ import '../../cmp/field/LabeledField.jsx';
 import Logo from '../../../svg/logo_vkusvill.svg';
 import './loginPage.scss';
 
-export default D.declare('view.page.Login', () =>
-    <div className={"login-page"}>
+export default D.declare('view.page.Login', () => {
+    const loginStore = new Store({
+       phone: '7',
+       code: '',
+       active: 'enterPhone',
+        phoneValid: false
+    });
+    loginStore.sub('phone', function (phone) {
+       loginStore.set('phoneValid', phone.length === 11);
+    });
+    return <div className={"login-page"}>
         <div class="login-page__big-logo">
             <Logo width="660" height="300"/>
         </div>
-        <view.cmp.field.LabeledField label={'Login'}/>
-        <view.cmp.field.LabeledField label={'Password'}/>
+        {view.cmp.Switch({store: loginStore, key: 'active'}, {
+            enterPhone: [
+                <view.cmp.field.LabeledField label={'Login'} bind={loginStore.bind('phone')}/>,
+                <button
+                    onclick={()=>loginStore.set('active', 'enterCode')}
+                    disabled={_=>loginStore.equal('phoneValid', false, _)}
+                >Ага</button>
+            ],
+            enterCode: [
+                <button onClick={() => loginStore.set('active', 'enterPhone')}>Взат</button>,
+                <view.cmp.field.LabeledField label={'Code'}/>
+            ]
+        })}
+
         <button type={'button'} onclick={() => store.set('navigation.current', 'main')}>To account</button>
     </div>
-)
+})