From 82d9ba9eeea4e8451339ff19a0db179ff0dd87aa Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Mon, 13 May 2019 14:02:10 -0600 Subject: [PATCH] Add import-ed account script --- src/js/account/helpers.js | 21 +++++++++++++ src/js/account/index.js | 7 +++++ src/js/account/login.js | 25 +++++++++++++++ src/js/account/render.js | 52 ++++++++++++++++++++++++++++++++ src/js/account/setupListeners.js | 12 ++++++++ src/js/setupListeners.js | 14 +++++++-- src/scss/Account/_structure.scss | 16 ++++++++++ src/scss/Account/main.scss | 3 ++ 8 files changed, 148 insertions(+), 2 deletions(-) create mode 100644 src/js/account/helpers.js create mode 100644 src/js/account/index.js create mode 100644 src/js/account/login.js create mode 100644 src/js/account/render.js create mode 100644 src/js/account/setupListeners.js create mode 100644 src/scss/Account/_structure.scss create mode 100644 src/scss/Account/main.scss diff --git a/src/js/account/helpers.js b/src/js/account/helpers.js new file mode 100644 index 0000000..58108d4 --- /dev/null +++ b/src/js/account/helpers.js @@ -0,0 +1,21 @@ +export function request (data = {}, success = () => {}, error = () => {}, fail = () => {}) { + fetch('./account/', { + method: 'POST', // or 'PUT' + body: JSON.stringify(data), // data can be `string` or {object}! + headers: { + 'Content-Type': 'application/json', + }, + credentials: 'same-origin', + }).then(res => res.json()) + .then(response => { + console.log('Success:', JSON.stringify(response)); + if (response.error) { + error(response); + } + success(response); + }) + .catch(err => { + console.error('Request Error:', err); + fail(err); + }); +} \ No newline at end of file diff --git a/src/js/account/index.js b/src/js/account/index.js new file mode 100644 index 0000000..bcb1285 --- /dev/null +++ b/src/js/account/index.js @@ -0,0 +1,7 @@ +import '../../scss/Account/main.scss'; + +import { renderLoginForm } from "./render"; + +export function showLoginForm() { + renderLoginForm(); +} \ No newline at end of file diff --git a/src/js/account/login.js b/src/js/account/login.js new file mode 100644 index 0000000..f173209 --- /dev/null +++ b/src/js/account/login.js @@ -0,0 +1,25 @@ +import { request } from "./helpers"; + +export function logIn() { + const email = document.getElementById('loginEmail').value.trim(), + password = document.getElementById('loginPassword').value.trim(); + const loginErrorMessages = document.getElementById('loginErrorMessages'); + let errorHTML = ''; + + if (email === '') { + errorHTML += '

Please enter your email address.

'; + } + if (password === '') { + errorHTML += '

Please enter your password.

'; + } + + loginErrorMessages.innerHTML = errorHTML; + + if (errorHTML !== '') { + request({ + action: 'login', + email, + password, + }); + } +} \ No newline at end of file diff --git a/src/js/account/render.js b/src/js/account/render.js new file mode 100644 index 0000000..06be43b --- /dev/null +++ b/src/js/account/render.js @@ -0,0 +1,52 @@ +import { setupLoginModal } from "./setupListeners"; + +export function renderLoginForm() { + const loginModal = document.createElement('section'); + loginModal.classList.add('modal'); + loginModal.id = 'loginModal'; + loginModal.innerHTML = `
+
×︎ +
+
+
+

Log In

+ + +
+ Log In
+ Forgot Password? +
+
+

Create a New Account

+

Creating an account allows you to save and switch between as many dictionaries as you need and access them from any device for free! If you have a dictionary you've been working on loaded already, it will automatically be uploaded to your account when you log in for the first time.

+

Plus if you allow us to send you emails, we'll make sure that you're the first to hear about any new features that get added or if any of our policies change for any reason. We'll never spam you or sell your information.

+

By creating an account, you are indicating that you agree to the Terms of Service and that you understand Lexiconga's Privacy Policy.

+ + + + + + Create Account +
+
+
+
`; + + document.body.appendChild(loginModal); + + setupLoginModal(loginModal); +} \ No newline at end of file diff --git a/src/js/account/setupListeners.js b/src/js/account/setupListeners.js new file mode 100644 index 0000000..bc4507f --- /dev/null +++ b/src/js/account/setupListeners.js @@ -0,0 +1,12 @@ +import { logIn } from "./login"; + +export function setupLoginModal(modal) { + const closeElements = modal.querySelectorAll('.modal-background, .close-button'); + Array.from(closeElements).forEach(close => { + close.addEventListener('click', () => { + modal.parentElement.removeChild(modal); + }); + }); + + document.getElementById('loginSubmit').addEventListener('click', logIn); +} \ No newline at end of file diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js index 820e060..e79b0c5 100644 --- a/src/js/setupListeners.js +++ b/src/js/setupListeners.js @@ -11,8 +11,7 @@ import { showSearchModal, clearSearchText } from './search'; export default function setupListeners() { setupDetailsTabs(); - setupSearchBar(); - setupSettingsModal(); + setupHeaderButtons(); setupWordForm(); setupMobileWordFormButton(); setupInfoButtons(); @@ -21,6 +20,17 @@ export default function setupListeners() { } } +export function setupHeaderButtons() { + setupSearchBar(); + setupSettingsModal(); + + document.getElementById('loginCreateAccountButton').addEventListener('click', () => { + import('./account/index.js').then(account => { + account.showLoginForm(); + }); + }); +} + function setupDetailsTabs() { const tabs = document.querySelectorAll('#detailsSection nav li'); tabs.forEach(tab => { diff --git a/src/scss/Account/_structure.scss b/src/scss/Account/_structure.scss new file mode 100644 index 0000000..e54f47f --- /dev/null +++ b/src/scss/Account/_structure.scss @@ -0,0 +1,16 @@ +#loginModal { + .modal-content { + padding: $general-padding; + width: 1000px; + + section { + overflow-y: auto; + height: 100%; + + p { + font-size: 10pt; + line-height: 12pt; + } + } + } +} \ No newline at end of file diff --git a/src/scss/Account/main.scss b/src/scss/Account/main.scss new file mode 100644 index 0000000..3d9cd0d --- /dev/null +++ b/src/scss/Account/main.scss @@ -0,0 +1,3 @@ +@import '../variables'; + +@import './structure'; \ No newline at end of file