registration implemented

hw15-gql-cathegory-pg/GQL_files/index.js

@@ -183,6 +183,19 @@ const actionGetOrders = () =>
         }
       }
     `))
+
+const actionRegister = (login, password) =>
+    actionPromise('registration', gql(`
+        mutation register($login:String, $password:String) {
+            UserUpsert(
+            user: {
+                login: $login,
+                password: $password,
+            }){
+                login _id 
+            }
+        }
+      `, { login, password }))
 //const actionRegister //actionPromise
 //const actionFullRegister = (login, password) => //actionRegister + actionFullLogin
 //+ интерфейс к этому - форму логина, регистрации, может повесить это на #/login #/register 
@@ -302,6 +315,65 @@ window.onhashchange = () => {
         good() {
             store.dispatch(actionGoodById(_id))
         },
+        registration() {
+            let navBar = document.getElementById('navBar')
+            navBar.style.visibility = 'hidden'
+
+            let pass, log
+
+            aside.innerHTML = ''
+            main.innerHTML = `
+                <div style="border: 5px solid purple; padding: 10px; background-color: black;">
+                    <button id="returnBtnReg" style="font-size: small;">&#8656 назад</button>
+                    <input  id="logInp" style="font-size: small; display:block; margin:10px" type="text" placeholder="Логин"/>
+                    <input  id="passInp" style="font-size: small; display:block; margin:10px" type="password" placeholder="Пароль"/>
+                    <small id="errBox" style="display: block; width:fit-content; color: red; margin: 0 auto;"></small>
+                    <button id="registerBtn" style="font-size: small; display:block; margin:0 auto">РЕГИСТРАЦИЯ</button>
+                </div>
+            `
+            let returnBtn = document.getElementById('returnBtnReg')
+            let logInp = document.getElementById('logInp')
+            let passInp = document.getElementById('passInp')
+            let registerBtn = document.getElementById('registerBtn')
+            let errBox = document.getElementById('errBox')
+
+            passInp.oninput = (e) => { pass = e.target.value }
+            logInp.oninput = (e) => { log = e.target.value }
+
+            returnBtn.onclick = () => {
+                navBar.style.visibility = 'visible'
+                history.back()
+            }
+
+            registerBtn.onclick = () => {
+                console.log('login clicked')
+                if (log && pass) {
+                    (async () => {
+                        await store.dispatch(actionRegister(log, pass))
+                        aside.innerHTML = ``
+
+                        if (store.getState().promise.registration.payload) {
+                            errBox.innerText = ''
+                            main.innerHTML = `
+                            <h2>Пользователь под логином '${store.getState().promise.registration.payload.login} успешно зарегистрирован!'<h2>
+                            <button id="returnBtn">&#8656 Вернуться к просмотру</button>
+                            <span>&nbsp или &nbsp</span>
+                            <button id="returnBtn">
+                                <a href="#/login" style="text-decoration: none; color: black;">Авторизоваться</a>
+                            </button>
+                            `
+                            let retBtn = document.getElementById('returnBtn')
+                            retBtn.onclick = () => {
+                                navBar.style.visibility = 'visible'
+                                location.href = "#/category"
+                            }
+                        } else {
+                            errBox.innerText = 'Пользователь с таким логином уже существует'
+                        }
+                    })();
+                }
+            }
+        },
         login() {
             let navBar = document.getElementById('navBar')
             navBar.style.visibility = 'hidden'
@@ -559,7 +631,8 @@ store.subscribe(() => {
         logBtn.style.backgroundColor = 'mediumaquamarine'
         logLink.innerText = 'Войти'
         logBtn.onclick = () => {/*killing onclick login action*/ }
-        if(!document.getElementById('regLink')) {
+
+        if (!document.getElementById('regLink')) {
             regLink.className = 'linkDeco'
             regLink.innerText = 'Регистрация'
             regLink.href = `#/registration`
@@ -567,6 +640,7 @@ store.subscribe(() => {
             regLink.id = 'regLink'
             logBtn.after(regLink)
         }
+
         try {
             let orderBtn = document.getElementById('orderBtn')
             navBar.removeChild(orderBtn)
@@ -576,18 +650,23 @@ store.subscribe(() => {
         aside.innerHTML = ``
         main.innerHTML = `
             <h2>Вы успешно вошли под логином пользователя '${payload.sub.login}'<h2>
-            <button id="returnBtn">&#8656 Венуться к просмотру</button>
+            <button id="returnBtn">&#8656 Вернуться к просмотру</button>
         `
         let retBtn = document.getElementById('returnBtn')
         retBtn.onclick = () => {
             navBar.style.visibility = 'visible'
-            history.back()
+            location.href = "#/category/5dc49f4d5df9d670df48cc64"
         }
 
     } else {
         nameField.innerText = payload.sub.login
         logBtn.style.backgroundColor = 'firebrick'
         logBtn.innerHTML = 'Выйти'
+        try {
+            let _regLink = document.getElementById('regLink')
+            _regLink.parentElement.removeChild(_regLink)
+        } catch (e) { }
+
         if (!document.getElementById('orderBtn')) {
             let orderBtn = document.createElement('a')
             orderBtn.href = '#/orders'