First version of OpenAuth remake

views/shared/cookie.js

@@ -0,0 +1,20 @@
+export function setCookie(cname, cvalue, exdate) {
+   var expires = exdate ? `expires=${exdate};` : "";
+   document.cookie = `${cname}=${cvalue};${expires}path=/`
+}
+
+export function getCookie(cname) {
+   var name = cname + "=";
+   var decodedCookie = decodeURIComponent(document.cookie);
+   var ca = decodedCookie.split(';');
+   for (var i = 0; i < ca.length; i++) {
+      var c = ca[i];
+      while (c.charAt(0) == ' ') {
+         c = c.substring(1);
+      }
+      if (c.indexOf(name) == 0) {
+         return c.substring(name.length, c.length);
+      }
+   }
+   return "";
+}

views/shared/event.js

@@ -0,0 +1,13 @@
+export default function fireEvent(element, event) {
+   if (document.createEventObject) {
+      // dispatch for IE
+      var evt = document.createEventObject();
+      return element.fireEvent('on' + event, evt)
+   }
+   else {
+      // dispatch for firefox + others
+      var evt = document.createEvent("HTMLEvents");
+      evt.initEvent(event, true, true); // event type,bubbling,cancelable
+      return !element.dispatchEvent(evt);
+   }
+}

views/shared/formdata.js

@@ -0,0 +1,14 @@
+export default function getFormData(element) {
+   let data = {};
+   if (element.name !== undefined && element.name !== null && element.name !== "") {
+      if (typeof element.name === "string") {
+         if (element.type === "checkbox") data[element.name] = element.checked;
+         else data[element.name] = element.value;
+      }
+   }
+   element.childNodes.forEach(child => {
+      let res = getFormData(child);
+      data = Object.assign(data, res);
+   })
+   return data;
+}

views/shared/inputs.js

@@ -0,0 +1,13 @@
+document.querySelectorAll(".floating>input").forEach(e => {
+   function checkState() {
+      if (e.value !== "") {
+         if (e.classList.contains("used")) return;
+         e.classList.add("used")
+      } else {
+         if (e.classList.contains("used")) e.classList.remove("used")
+      }
+   }
+
+   e.addEventListener("change", () => checkState())
+   checkState()
+})

views/shared/inputs.scss

@@ -0,0 +1,113 @@
+@import "style";
+.group {
+   position: relative;
+   margin-bottom: 24px;
+   min-height: 45px;
+}
+
+.floating>input {
+   font-size: 18px;
+   padding: 10px 10px 10px 5px;
+   appearance: none;
+   -webkit-appearance: none;
+   display: block;
+   background: #fafafa;
+   color: #636363;
+   width: 100%;
+   border: none;
+   border-radius: 0;
+   border-bottom: 1px solid #757575;
+}
+
+.floating>input:focus {
+   outline: none;
+}
+
+/* Label */
+
+.floating>label {
+   color: #999;
+   font-size: 18px;
+   font-weight: normal;
+   position: absolute;
+   pointer-events: none;
+   left: 5px;
+   top: 10px;
+   transition: all 0.2s ease;
+}
+
+/* active */
+
+.floating>input:focus~label,
+.floating>input.used~label {
+   top: -.75em;
+   transform: scale(.75);
+   left: -2px;
+   /* font-size: 14px; */
+   color: $primary;
+   transform-origin: left;
+}
+
+/* Underline */
+
+.bar {
+   position: relative;
+   display: block;
+   width: 100%;
+}
+
+.bar:before,
+.bar:after {
+   content: '';
+   height: 2px;
+   width: 0;
+   bottom: 1px;
+   position: absolute;
+   background: $primary;
+   transition: all 0.2s ease;
+}
+
+.bar:before {
+   left: 50%;
+}
+
+.bar:after {
+   right: 50%;
+}
+
+/* active */
+
+.floating>input:focus~.bar:before,
+.floating>input:focus~.bar:after {
+   width: 50%;
+}
+
+/* Highlight */
+
+.highlight {
+   position: absolute;
+   height: 60%;
+   width: 100px;
+   top: 25%;
+   left: 0;
+   pointer-events: none;
+   opacity: 0.5;
+}
+
+/* active */
+
+.floating>input:focus~.highlight {
+   animation: inputHighlighter 0.3s ease;
+}
+
+/* Animations */
+
+@keyframes inputHighlighter {
+   from {
+      background: $primary;
+   }
+   to {
+      width: 0;
+      background: transparent;
+   }
+}

views/shared/mat_bs.scss

@@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons");
+@import url("https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css");

views/shared/request.js

@@ -0,0 +1,16 @@
+export default function request(endpoint, method, data) {
+   var headers = new Headers();
+   headers.set('Content-Type', 'application/json');
+   return fetch(endpoint, {
+      method: method,
+      body: JSON.stringify(data),
+      headers: headers,
+      credentials: "include"
+   }).then(async e => {
+      if (e.status !== 200) throw new Error(await e.text() || e.statusText);
+      return e.json()
+   }).then(e => {
+      if (e.error) return Promise.reject(new Error(typeof e.error === "string" ? e.error : JSON.stringify(e.error)));
+      return e;
+   })
+}

views/shared/style.scss

@@ -0,0 +1,7 @@
+// $primary: #4a89dc;
+$primary: #1E88E5;
+$error: #ff2f00;
+.btn-primary {
+   color: white !important;
+   background-color: $primary !important;
+}