diff --git a/UI/assets/.DS_Store b/UI/assets/.DS_Store new file mode 100644 index 0000000..abc97e1 Binary files /dev/null and b/UI/assets/.DS_Store differ diff --git a/UI/assets/js/.DS_Store b/UI/assets/js/.DS_Store new file mode 100644 index 0000000..36f4dd2 Binary files /dev/null and b/UI/assets/js/.DS_Store differ diff --git a/UI/assets/js/cookies_lib/api.mjs b/UI/assets/js/cookies_lib/api.mjs new file mode 100644 index 0000000..c0a4ed2 --- /dev/null +++ b/UI/assets/js/cookies_lib/api.mjs @@ -0,0 +1,91 @@ +import assign from './assign.mjs' +import defaultConverter from './converter.mjs' + +function init (converter, defaultAttributes) { + function set (key, value, attributes) { + if (typeof document === 'undefined') { + return + } + + attributes = assign({}, defaultAttributes, attributes) + + if (typeof attributes.expires === 'number') { + attributes.expires = new Date(Date.now() + attributes.expires * 864e5) + } + if (attributes.expires) { + attributes.expires = attributes.expires.toUTCString() + } + + key = defaultConverter.write(key).replace(/=/g, '%3D') + + value = converter.write(String(value), key) + + var stringifiedAttributes = '' + for (var attributeName in attributes) { + if (!attributes[attributeName]) { + continue + } + + stringifiedAttributes += '; ' + attributeName + + if (attributes[attributeName] === true) { + continue + } + + stringifiedAttributes += '=' + attributes[attributeName].split(';')[0] + } + + return (document.cookie = key + '=' + value + stringifiedAttributes) + } + + function get (key) { + if (typeof document === 'undefined' || (arguments.length && !key)) { + return + } + + // To prevent the for loop in the first place assign an empty array + // in case there are no cookies at all. + var cookies = document.cookie ? document.cookie.split('; ') : [] + var jar = {} + for (var i = 0; i < cookies.length; i++) { + var parts = cookies[i].split('=') + var value = parts.slice(1).join('=') + var foundKey = defaultConverter.read(parts[0]).replace(/%3D/g, '=') + jar[foundKey] = converter.read(value, foundKey) + + if (key === foundKey) { + break + } + } + + return key ? jar[key] : jar + } + + return Object.create( + { + set: set, + get: get, + remove: function (key, attributes) { + set( + key, + '', + assign({}, attributes, { + expires: -1 + }) + ) + }, + withAttributes: function (attributes) { + return init(this.converter, assign({}, this.attributes, attributes)) + }, + withConverter: function (converter) { + return init(assign({}, this.converter, converter), this.attributes) + } + }, + { + attributes: { value: Object.freeze(defaultAttributes) }, + converter: { value: Object.freeze(converter) } + } + ) +} + +export default init(defaultConverter, { path: '/' }) diff --git a/UI/assets/js/cookies_lib/assign.mjs b/UI/assets/js/cookies_lib/assign.mjs new file mode 100644 index 0000000..fed18c1 --- /dev/null +++ b/UI/assets/js/cookies_lib/assign.mjs @@ -0,0 +1,9 @@ +export default function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i] + for (var key in source) { + target[key] = source[key] + } + } + return target +} diff --git a/UI/assets/js/cookies_lib/converter.mjs b/UI/assets/js/cookies_lib/converter.mjs new file mode 100644 index 0000000..823b735 --- /dev/null +++ b/UI/assets/js/cookies_lib/converter.mjs @@ -0,0 +1,8 @@ +export default { + read: function (value) { + return value.replace(/%3B/g, ';') + }, + write: function (value) { + return value.replace(/;/g, '%3B') + } +} diff --git a/UI/assets/js/webcomponents/webcomponents.js b/UI/assets/js/webcomponents/webcomponents.js index 8c5a11e..49d925d 100755 --- a/UI/assets/js/webcomponents/webcomponents.js +++ b/UI/assets/js/webcomponents/webcomponents.js @@ -1,159 +1,168 @@ +/* eslint-disable no-undef */ +const ApiUrl = 'http://localhost:7000/api/v1/'; +// const Cookie = require('../cookies_lib/api.mjs'); + /** - * @name courses-mini + * @name courses-mini * @description creates a card setup layout for listed courses with minimal information * @slot { name = 'one' } contains the courses' name */ -fetch("assets/templates/courses-mini.html") - .then(response => response.text()) - .then(data => - customElements.define("courses-mini", class extends HTMLElement { - constructor() { - super() - this.attachShadow({ mode: 'open' }); - const template = document.createElement('template'); - template.innerHTML = data; - this.shadowRoot.appendChild(template.content.cloneNode(true)) - } - }) - ) +fetch('assets/templates/courses-mini.html') + .then(response => response.text()) + .then(data => customElements.define('courses-mini', class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + const template = document.createElement('template'); + template.innerHTML = data; + this.shadowRoot.appendChild(template.content.cloneNode(true)); + } + })); /** * @name join-us * @description a parallax mini section with a button to sign up */ -fetch("assets/templates/join-us.html") - .then(response => response.text()) - .then(data => - customElements.define("join-us", class extends HTMLElement { - constructor() { - super() - this.attachShadow({ mode: 'open' }); - const template = document.createElement('template'); - template.innerHTML = data; - this.shadowRoot.appendChild(template.content.cloneNode(true)) - } - }) - ) +fetch('assets/templates/join-us.html') + .then(response => response.text()) + .then(data => customElements.define('join-us', class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + const template = document.createElement('template'); + template.innerHTML = data; + this.shadowRoot.appendChild(template.content.cloneNode(true)); + } + })); /** * @name my-header * @description a parallax mini section with a button to sign up */ -fetch("assets/templates/my-header.html") - .then(response => response.text()) - .then(data => - customElements.define("my-header", class extends HTMLElement { - constructor() { - super() - this.attachShadow({ mode: 'open' }); - const template = document.createElement('template'); - template.innerHTML = data; - this.shadowRoot.appendChild(template.content.cloneNode(true)); - - this.navControl = this.shadowRoot.querySelector('.nav-control > div'); - this.logInBtn = this.shadowRoot.querySelector('.signin'); - this.signUpBtn = this.shadowRoot.querySelector('.signup'); - - } - - connectedCallback() { - const body = document.body; - const signModal = document.querySelector('sign-modal'); - - this.navControl.addEventListener('click', () => { - this.classList.toggle('show-nav'); - }); - - this.logInBtn.addEventListener('click', (e) => { - e.preventDefault(); - body.setAttribute('class', 'show-modal'); - signModal.setAttribute('class', 'show-login'); - }); - - this.signUpBtn.addEventListener('click', (e) => { - e.preventDefault(); - // window.location.href = './registeration.html' - body.setAttribute('class', 'show-modal'); - signModal.setAttribute('class', 'show-signup'); - }); - } - }) - ) +fetch('assets/templates/my-header.html') + .then(response => response.text()) + .then(data => customElements.define('my-header', class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + const template = document.createElement('template'); + template.innerHTML = data; + this.shadowRoot.appendChild(template.content.cloneNode(true)); + + this.navControl = this.shadowRoot.querySelector('.nav-control > div'); + this.logInBtn = this.shadowRoot.querySelector('.signin'); + this.signUpBtn = this.shadowRoot.querySelector('.signup'); + } + + connectedCallback() { + const { body } = document; + const signModal = document.querySelector('sign-modal'); + + this.navControl.addEventListener('click', () => { + this.classList.toggle('show-nav'); + }); + + this.logInBtn.addEventListener('click', (e) => { + e.preventDefault(); + body.setAttribute('class', 'show-modal'); + signModal.setAttribute('class', 'show-login'); + }); + + this.signUpBtn.addEventListener('click', (e) => { + e.preventDefault(); + // window.location.href = './registeration.html' + body.setAttribute('class', 'show-modal'); + signModal.setAttribute('class', 'show-signup'); + }); + } + })); /** * @name my-footer * @description a parallax mini section with a button to sign up */ -fetch("assets/templates/my-footer.html") - .then(response => response.text()) - .then(data => - customElements.define("my-footer", class extends HTMLElement { - constructor() { - super() - this.attachShadow({ mode: 'open' }); - const template = document.createElement('template'); - template.innerHTML = data; - this.shadowRoot.appendChild(template.content.cloneNode(true)) - } - }) - ) +fetch('assets/templates/my-footer.html') + .then(response => response.text()) + .then(data => customElements.define('my-footer', class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + const template = document.createElement('template'); + template.innerHTML = data; + this.shadowRoot.appendChild(template.content.cloneNode(true)); + } + })); /** * @name sign-modal * @description a parallax mini section with a button to sign up */ -fetch("assets/templates/sign-modal.html") - .then(response => response.text()) - .then(data => - customElements.define("sign-modal", class extends HTMLElement { - constructor() { - super() - this.attachShadow({ mode: 'open' }); - const template = document.createElement('template'); - template.innerHTML = data; - this.shadowRoot.appendChild(template.content.cloneNode(true)); - - this.closeBtn = this.shadowRoot.querySelector('.close-btn'); - this.logInBtn = this.shadowRoot.querySelector('.show-login'); - this.signUpBtn = this.shadowRoot.querySelector('.show-signin'); - - // form submission buttons - this.signUpFormBtn = this.shadowRoot.querySelector('#signup-button'); - this.logInFormBtn = this.shadowRoot.querySelector('#login-button'); - - } - - connectedCallback() { - const body = document.body; - const signModal = document.querySelector('sign-modal'); - - this.closeBtn.addEventListener('click', (e) => { - e.preventDefault(); - body.setAttribute('class', ''); - }); - - this.logInBtn.addEventListener('click', (e) => { - e.preventDefault(); - signModal.setAttribute('class', 'show-login'); - }); - - this.signUpBtn.addEventListener('click', (e) => { - e.preventDefault(); - // window.location.href = './registeration.html' - signModal.setAttribute('class', 'show-signup'); - }); - - // controls what happens when the submit button on the sign up form is clicked - this.signUpFormBtn.addEventListener('click', (e) => { - e.preventDefault(); - window.location.href = 'profile.html'; - }); - // controls what happens when the submit button on the sign in form is clicked - this.logInFormBtn.addEventListener('click', (e) => { - e.preventDefault(); - console.log('a') - window.location.href = 'profile.html'; - }); - } +fetch('assets/templates/sign-modal.html') + .then(response => response.text()) + .then(data => customElements.define('sign-modal', class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + const template = document.createElement('template'); + template.innerHTML = data; + this.shadowRoot.appendChild(template.content.cloneNode(true)); + + this.closeBtn = this.shadowRoot.querySelector('.close-btn'); + this.logInBtn = this.shadowRoot.querySelector('.show-login'); + this.signUpBtn = this.shadowRoot.querySelector('.show-signin'); + + // form submission buttons + this.signUpFormBtn = this.shadowRoot.querySelector('#signup-button'); + this.logInFormBtn = this.shadowRoot.querySelector('#login-button'); + } + + connectedCallback() { + const { body } = document; + const signModal = document.querySelector('sign-modal'); + + this.closeBtn.addEventListener('click', (e) => { + e.preventDefault(); + body.setAttribute('class', ''); + }); + + this.logInBtn.addEventListener('click', (e) => { + e.preventDefault(); + signModal.setAttribute('class', 'show-login'); + }); + + this.signUpBtn.addEventListener('click', (e) => { + e.preventDefault(); + // window.location.href = './registeration.html' + signModal.setAttribute('class', 'show-signup'); + }); + + // controls what happens when the submit button on the sign up form is clicked + this.signUpFormBtn.addEventListener('click', (e) => { + e.preventDefault(); + // const email = this.shadowRoot.querySelector('#email-signup').value; + // const password = this.shadowRoot.querySelector('#password-signup').value; + + // window.location.href = 'profile.html'; + }); + // controls what happens when the submit button on the sign in form is clicked + this.logInFormBtn.addEventListener('click', (e) => { + e.preventDefault(); + const email = this.shadowRoot.querySelector('#email-login').value; + const password = this.shadowRoot.querySelector('#password-login').value; + + $.post(`${ApiUrl}auth/signin`, { + email, + password, }) - ) + .done((response) => { + localStorage.setItem('user', JSON.stringify(response.data.user)); + localStorage.setItem('tokens', JSON.stringify(response.data.tokens)); + window.location.href = 'profile.html'; + }) + .fail((error) => { + this.shadowRoot.querySelector('#authErrorMSg').innerHTML = error.responseJSON.error; + this.shadowRoot.querySelector('#authErrorMSg').style = 'background: red; padding: 8px;'; + }); + }); + } + })); diff --git a/UI/assets/templates/sign-modal.html b/UI/assets/templates/sign-modal.html index 951f1ec..e97c37c 100755 --- a/UI/assets/templates/sign-modal.html +++ b/UI/assets/templates/sign-modal.html @@ -421,17 +421,17 @@