From e8d0ad8ddf1bc1340fdd06c2a698d2813a840abe Mon Sep 17 00:00:00 2001 From: Nik Topler Date: Wed, 30 Sep 2020 20:46:56 +0200 Subject: [PATCH] Implemented some backend features --- CSS/*.css | 9 +- CSS/account.css | 39 +++++ CSS/colors.css | 1 + CSS/index.css | 295 +++++++++++++++++++++++++++---------- CSS/responsive.css | 3 + JS/main.js | 8 +- JS/show.js | 9 ++ JS/signIn/signin.js | 12 +- JS/signIn/signup.js | 154 ++++++++++--------- JS/variables.js | 4 +- account.php | 53 +++++++ add-ons/navigation-bar.php | 169 ++++++++++++++++----- add-ons/side-bar.php | 7 +- include/insert.inc.php | 62 +++++--- include/session.inc.php | 1 + 15 files changed, 601 insertions(+), 225 deletions(-) create mode 100644 CSS/account.css create mode 100644 account.php diff --git a/CSS/*.css b/CSS/*.css index 697c288..ed49e05 100644 --- a/CSS/*.css +++ b/CSS/*.css @@ -75,7 +75,7 @@ body{ a{ text-decoration: none; } /** Img */ - .img{ + .imga{ width: calc(var(--imageDefaultSize) * var(--times)); height: calc(var(--imageDefaultSize) * var(--times)); } @@ -85,7 +85,8 @@ body{ .search-icon:hover + .tooltiptext, .article-other-info .test:hover + .tooltiptext, .article-extra-option-icon:hover + .tooltiptext, - .company-date:hover .tooltiptext{ + .company-date:hover .tooltiptext, + .outter-container:hover .tooltiptext{ visibility: visible; opacity: 1; font-size: 0.7em; @@ -138,9 +139,7 @@ body{ width: 90%; border: none; } - .activeProfile{ - background-color: var(--hover-medium) !important; - } + .activeProfile{ background-color: var(--hover-medium) !important; } .underline-input-animation{ display: inline-block; width: 0px; diff --git a/CSS/account.css b/CSS/account.css new file mode 100644 index 0000000..10cecb0 --- /dev/null +++ b/CSS/account.css @@ -0,0 +1,39 @@ +body { + height: 100vh; + width: 100vh; + display: grid; + grid-template-rows: 64px 1fr; + background-color: var(--bg); + position: relative; +} +main { + grid-row: 2/3; + height: 100%; + background-color: rebeccapurple; + display: flex; + align-items: center; + justify-content: center; + +} + +nav { + grid-row: 1/2; + display: flex; +} +nav .left-side { + min-height: 100%; + min-width: 5rem; + background-color: yellow; +} +nav .right-side { + min-height: 100%; + width: 100%; + background-color: aqua; +} + + +aside { + position: absolute; + background-color: green; + +} \ No newline at end of file diff --git a/CSS/colors.css b/CSS/colors.css index c12c0d0..eb4850b 100644 --- a/CSS/colors.css +++ b/CSS/colors.css @@ -9,6 +9,7 @@ --blue-medium:rgb(27, 122, 231); --blue-dark: #1967d2; --google-blue: #4486f7; + --hover-blue: #b0d1f0; --red-medium: rgb(253,29,29); --yellow-medium: rgb(255,205,0); diff --git a/CSS/index.css b/CSS/index.css index 3dc5a7f..f825066 100644 --- a/CSS/index.css +++ b/CSS/index.css @@ -293,9 +293,7 @@ body{ /** Navigation Right Side */ - .nav-right-side > * { - float: right; - } + .nav-right-side > * { float: right; } .link { padding: 9px 13px; margin-right: 15px; @@ -305,92 +303,235 @@ body{ border-radius: 7px; color: var(--bg); } - .login:hover { - filter: brightness(1.06); - } + .login:hover { filter: brightness(1.06); } - .navigation-profile-img{ - --times: 2.2; - } + .navigation-profile-img { --times: 2.2; } .first-profile-div{ width: 2.8rem; height: 2.8rem; margin-right: 15px; } - .first-profile-div:hover{ - background-color: var(--hover-light); - } - .first-profile-div-active{ - background-color: var(--hover-medium); - } - .tooltiptext-name{ - color: var(--hover-dark); - } + .first-profile-div:hover{ background-color: var(--hover-light); } + .first-profile-div-active{ background-color: var(--hover-medium); } + .tooltiptext-name { color: var(--hover-dark); } /** Profile Options */ - .profile-extra-options{ - right: 0px; - top: 100%; - grid-template-rows: 230px 10px 1fr 1fr; - width: 260px; - height: 360px; - border-radius: 6px; - text-align: center; - background-color: var(--bg); - border: none; - box-shadow: 1px 1px 2px 0px var(--border-medium), - 1px 1px 1px 0px var(--border-medium) inset; - border-radius: 2px; - right: 10px; - border-top-right-radius: 0; - border-top-left-radius: 0; + .profile-extra-options { + right: 0.75rem; + top: 93%; + min-width: 350px; + min-height: 380px; + border-radius: 6px; + background-color: var(--bg); + box-shadow: 1px 1px 2px 0px var(--border-medium), + 1px 1px 1px 0px var(--border-medium) inset; + } + .profile-extra-options .top-div { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 20px; + } + .top-div .img-container { + width: 100%; + padding-bottom: 10px; + } + img.imga { + width: 100%; + height: 100%; + border-radius:50%; + } + .top-div .img-middle { + position: relative; + width: fit-content; + margin: auto; + } + .nav-right-side .outter-container { + padding: 4px; + margin-right: 15px; + } + .nav-right-side .outter-container:hover { background-color: var(--hover-light); } + .nav-right-side .outter-container.active { background-color: var(--hover-medium); } + .img { + position: relative; + border-radius: 50%; + width: var(--num); + height: var(--num); + /* background: url('https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'); + cursor: pointer; */ + } + .img-settings { + background-repeat: no-repeat; + background-size: cover; + } + .img.big { + --num: 5.5rem; + --letter: 2.75rem; + cursor: pointer; + } + .img.small { + --num: 2.25rem; + --letter: 1rem; + cursor: pointer; + } + .img .letter { + position: absolute; + left: calc(50% - 1.5rem); + right: calc(50% - 1.5rem); + top: calc(50% - 1.5rem); + bottom: calc(50% - 1.5rem); + width: 3rem; + height: 3rem; + display: flex; + align-items: center; + justify-content: center; + } + .img .letter span{ + font-size: var(--letter); + color: var(--bg); + } + .img:hover { filter: brightness(1.1); } + + .camera-container { + position: absolute; + bottom: -3px; + right: 0; + background-color: yellow; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + padding: 5px; + border: 1px solid var(--border-light); + background-color: var(--bg); + cursor: pointer; + } + .camera-container:hover i{ color: var(--google-blue); } + + .top-div .personal-info { + padding: 12px 10px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + + .top-div .full-name, + .top-div .email, + .top-div .manage-button { + width: 100%; + padding: 3px 0; + display: flex; + align-items: center; + justify-content: center; + } + .top-div .full-name { font-size: 1.25rem; } + .top-div .email { + color: var(--font-medium); + font-size: 1rem; + } + + .top-div .manage-button .container { + border-radius: 4rem; + border: 1px solid var(--border-light); + width: 80%; + padding: 8px 5px; + margin-top: 1.25rem; + display: flex; + align-items: center; + justify-content: center; + transition: all ease-in-out .15; + } + .top-div .manage-button .container:hover { + cursor: pointer; + background-color: var(--very-light-grey); + } + .top-div .manage-button .container span { color: var(--font-dark); } + + .sign-out { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 15px; + } + .sign-out .button-container { + border: 1px solid var(--border-light); + border-radius: 3px; + min-height: 1.5rem; + width: 10.75rem; + margin: auto; + padding: 5px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } + .sign-out .button-container:hover { background-color: var(--very-light-grey); } + .sign-out .button-container span { color: var(--font-dark); } + + .middle-div { + margin-bottom: 1rem; + border-top: 1px solid var(--hover-medium); + border-bottom: 1px solid var(--hover-medium); + display: flex; + justify-content: center; + flex-direction: column; + } + .middle-div .container { + padding: 5px 0; + min-height: 2.5rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + } + .middle-div .container:hover { background-color: var(--hover-light); } + .middle-div .google, + .middle-div .facebook, + .middle-div .github { + padding: 0 20px; + width: calc(100% - 20px); + display: grid; + grid-template-columns: 50px 1fr; + } + .middle-div .icon { + font-size: 1.5rem; + display: flex; + align-items: center; + justify-content: center; + } + .google .icon { color: var(--google-blue); } + .facebook .icon { color: #4267B2; } + .github .icon { color: var(--font-very-dark); } + .middle-div span { + text-align: left; + display: flex; + align-items: center; + font-size: 0.9rem; + color: var(--font-medium); + } + .profile-extra-options .footer { + min-height: 1.5rem; + display: block; } - .profile-options-profile-img { - --times: 5.625; + .profile-extra-options .footer .container { + display: flex; + align-items: center; + justify-content: center; } - .profile-extra-options .profile-img-link span{ - font-size: 3.5rem; + .profile-extra-options .footer .container .inner-container { + min-width: 4rem; + display: flex; } - .change-profile-picture{ - width: 1.8rem; - height: 1.8rem; - right: 5.3rem; - bottom: 0.4rem; - background-color: var(--bg); - border: 1px solid var(--border-medium); - z-index: 11; - } - .emailProfile{ - padding-top: 5px; - color: var(--font-dark); - } - .manage-profile-extra-options > *{ - padding: 10px 20px; - border: 1px solid var(--border-medium); - border-radius: 10px; - color: var(--userTextInput); - } - .manage-profile-extra-options a:hover{ - background-color: var(--hover-light); - } - .profile-extra-options hr { - border-top: 1px solid var(--hover-medium); - } - .extra-options-logout a,.extra-options-settings a{ - color: var(--font-dark); - } - .extra-options-logout a { - padding: 10px 20px; - border: 1px solid var(--hover-medium); - border-radius: 2px; - transition: all ease-in-out .2s; - } - .extra-options-logout a:hover{ - background-color: var(--hover-light); - } - #profile-extra-options .grid .profile-img-link .img:hover{ - filter: brightness(0.96); + .profile-extra-options .footer .container .inner-container span { + font-size: 0.78rem; + color: var(--font-light); + padding: 2px 5px; + cursor: pointer; } /* Main Content */ diff --git a/CSS/responsive.css b/CSS/responsive.css index bce0f3c..1eb8ada 100644 --- a/CSS/responsive.css +++ b/CSS/responsive.css @@ -49,6 +49,9 @@ .double.psw .eye-icon-container { display: none; } .double.psw .psw-repeat-container { margin: 0; } .sign-container h1 { font-size: 1.5rem; } + + /* Profile options */ + .profile-extra-options { min-width: 300px; } } @media screen and (max-width: 360px) { diff --git a/JS/main.js b/JS/main.js index ddfd941..6279cdc 100644 --- a/JS/main.js +++ b/JS/main.js @@ -717,7 +717,7 @@ function clickInOutCheck(parent, target) { if(clickOnOpenedElement === true) return if(parent === extraSearchOptions && target !== extOptIcon) hideExtraSearchOptions() else if(parent === suggestMainInput && document.activeElement !== mainSearchInput) hideSuggestWords() - else if(parent === extOptProfile) manageExtraProfileOptions() + // else if(parent === extOptProfile) manageExtraProfileOptions() else if(parent === selectCountryDiv && countryDivExceptions.some((val) => val === target) === false) hideSelectCountry() else if(parent === logInOptions && target !== loginButton) manageLoginOptions() } @@ -816,9 +816,7 @@ function checkIfCategoriesAreOpen() { // string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"') - -// Temporary -async function manageExtraProfileOptions() { +async function logOut(path) { await fetch(`${pathLocation}include/logout.inc.php`) - openLinks(filePath.headlines); + openLinks(filePath.headlines + path); } \ No newline at end of file diff --git a/JS/show.js b/JS/show.js index 3d02d57..43e2707 100644 --- a/JS/show.js +++ b/JS/show.js @@ -133,3 +133,12 @@ function removeActiveSidebarCategory() { } +function manageExtraProfileOptions() { + if(extOptProfile.classList.contains('disable')) { + extOptProfile.classList.remove('disable') + navigationBarProfileImageDiv.classList.add('active') + } else { + extOptProfile.classList.add('disable') + navigationBarProfileImageDiv.classList.remove('active') + } +} \ No newline at end of file diff --git a/JS/signIn/signin.js b/JS/signIn/signin.js index 9b532fb..338f10a 100644 --- a/JS/signIn/signin.js +++ b/JS/signIn/signin.js @@ -47,6 +47,9 @@ function switchLoginBox() { email.classList.remove('active') password.classList.remove('active') setupSubHeading() + errorContainer.classList.add('disable') + emailInput.classList.remove('error-red-border') + email.querySelector('.label-container').classList.remove('error-red') } } async function checkEmail() { @@ -57,8 +60,11 @@ async function checkEmail() { }) const data = await res.text() - if(errorHandelingEmail(data) === true) switchLoginBox() - setupProfile() + if(errorHandelingEmail(data) === true) { + switchLoginBox() + setupProfile() + } + } const errorPswContainer = document.querySelector('.error.psw') @@ -160,4 +166,4 @@ function resetPsw() { element.firstElementChild.firstElementChild.classList.add('disable') element.firstElementChild.lastElementChild.classList.remove('disable') passwordInput.type = 'password' -} \ No newline at end of file +} diff --git a/JS/signIn/signup.js b/JS/signIn/signup.js index 4fcb71b..d914c98 100644 --- a/JS/signIn/signup.js +++ b/JS/signIn/signup.js @@ -166,6 +166,7 @@ async function register() { let country = indexCountryLabel.innerHTML.trim() error.reset() if(error.before(firstName, lastName, email, password, passwordRepeat, country) === false) return + console.log('next') insertToDB(firstName, lastName, email, password, passwordRepeat, country) } async function insertToDB(firstName, lastName, email, password, passwordRepeat, country) { @@ -191,6 +192,8 @@ const error = { nameError.firstElementChild.innerHTML = "" nameInput.classList.remove('error-red-border') name.querySelector('label').classList.remove('error-red') + surnameInput.classList.remove('error-red-border') + surname.querySelector('label').classList.remove('error-red') emailError.classList.add('disable') emailError.firstElementChild.innerHTML = "" emailInput.classList.remove('error-red-border') @@ -205,89 +208,102 @@ const error = { countryError.firstElementChild.innerHTML = "" resultError.classList.add('disable') }, - before : (FirstName, LastName, Email, Password, PasswordRepeat, Country) => { + before : function (FirstName, LastName, Email, Password, PasswordRepeat, Country) { let num = 0 - if(FirstName.length === 0 || LastName.length === 0) { + + if (FirstName.length === 0 || LastName.length === 0) { nameError.classList.remove('disable') - if(FirstName.length === 0 && LastName.length === 0) { - nameError.firstElementChild.innerHTML = `${icon} Name and Surname must not be empty` - nameInput.classList.add('error-red-border') - name.querySelector('label').classList.add('error-red') - surnameInput.classList.add('error-red-border') - surname.querySelector('label').classList.add('error-red') - } else if(FirstName.length !== 0 && LastName.length === 0) { - nameError.firstElementChild.innerHTML = `${icon} Surname must not be empty` - surnameInput.classList.add('error-red-border') - surname.querySelector('label').classList.add('error-red') - } else if(FirstName.length === 0 && LastName.length !== 0) { - nameError.firstElementChild.innerHTML = `${icon} Name must not be empty` - nameInput.classList.add('error-red-border') - name.querySelector('label').classList.add('error-red') + if (FirstName.length === 0 && LastName.length === 0) { + errorHandeling.name() + errorHandeling.surname() + errorHandeling.text(nameError.firstElementChild, 'Name and Surname must not be empty') + } else if (FirstName.length !== 0 && LastName.length === 0) { + errorHandeling.surname() + errorHandeling.text(nameError.firstElementChild, 'Surname must not be empty') + } else if (FirstName.length === 0 && LastName.length !== 0) { + errorHandeling.name() + errorHandeling.text(nameError.firstElementChild, 'Name must not be empty') } - num = num++ + num = 10 } if(Email.length === 0 || validateEmail(Email) === false) { - if(validateEmail(Email) === false) emailError.firstElementChild.innerHTML = `${icon} Incorrect email format` - else emailError.firstElementChild.innerHTML = `${icon} Field email must be filled` emailError.classList.remove('disable') - emailInput.classList.add('error-red-border') - email.querySelector('label').classList.add('error-red') - num = num++ + errorHandeling.email() + if(validateEmail(Email) === false) errorHandeling.text(emailError.firstElementChild, 'Incorrect email format') + else errorHandeling.text(emailError.firstElementChild, 'Field email must be filled') + num = 10 } - if(Password.length === 0 || PasswordRepeat.length === 0 || Password.length < 6) { - pswError.classList.remove('disable') - if(Password.length === 0 && PasswordRepeat.length === 0 || Password.length < 6) { - if(Password.length === 0 && PasswordRepeat.length === 0) pswError.firstElementChild.innerHTML = `${icon} You must type in your password` - else pswError.firstElementChild.innerHTML = `${icon} Password must include atleast 7 characters` - pswInput.classList.add('error-red-border') - psw.querySelector('label').classList.add('error-red') - pswRepeatInput.classList.add('error-red-border') - pswRepeat.querySelector('label').classList.add('error-red') - } else if(Password !== PasswordRepeat) { - pswError.firstElementChild.innerHTML = `${icon} Passwords do not match` - pswInput.classList.add('error-red-border') - psw.querySelector('label').classList.add('error-red') - pswRepeatInput.classList.add('error-red-border') - pswRepeat.querySelector('label').classList.add('error-red') - } else if(Password.length !== 0 && PasswordRepeat.length === 0) { - pswError.firstElementChild.innerHTML = `${icon} Surname must not be empty` - pswRepeatInput.classList.add('error-red-border') - pswRepeat.querySelector('label').classList.add('error-red') - } else if(Password.length === 0 && PasswordRepeat.length !== 0) { - nameError.firstElementChild.innerHTML = `${icon} Name must not be empty` - pswInput.classList.add('error-red-border') - psw.querySelector('label').classList.add('error-red') - } - num = num++ - } - if(Country === 'Select Country') { - countryError.classList.remove('disable') - countryError.firstElementChild.innerHTML = `${icon} You must select country` - num = num++ - } - if(num > 0) return false - else true - }, - after : (data) => { - if(data === 'success') return urlOpen('') + if (Password.length === 0 || PasswordRepeat.length === 0 || Password.length < 6 || Password === '' || PasswordRepeat === '' || Password !== PasswordRepeat) { + pswError.classList.remove('disable') + errorHandeling.password() + errorHandeling.passwordRepeat() + + if(Password.length === 0 || PasswordRepeat.length === 0 || Password === '' || PasswordRepeat === '') errorHandeling.text(pswError.firstElementChild, 'You must type in your password') + else if(Password.length < 6) errorHandeling.text(pswError.firstElementChild, 'Password must include atleast 7 characters') + else if(Password !== PasswordRepeat) errorHandeling.text(pswError.firstElementChild, 'Passwords do not match') + else if(Password.split(' ').length > 1 || PasswordRepeat.split(' ').length > 1) errorHandeling.text(pswError.firstElementChild, 'No white spaces in password') + num = 10 + } + + if (Country === 'Select Country') { + countryError.classList.remove('disable') + errorHandeling.text(countryError.firstElementChild, 'Select a country') + num = 10 + } + console.log(num) + if (num > 0) return false + else return true + }, + after : function (data) { + if(data === 'success') return urlOpen('') resultError.classList.remove('disable') - if(data === `user exist's`) resultError.firstElementChild.innerHTML = 'User with this email already exists!' - else if(data.includes('google') || data.includes('facebook') || data.includes('github')) resultError.firstElementChild.innerHTML = `You don't have set up password. Sign in with ${data.split(' ')[1]}` + + if(data === `user exist's`) errorHandeling.text(resultError.firstElementChild, 'User with this email already exists!') + else if(data.includes('exist') && (data.includes('google') || data.includes('facebook') || data.includes('github'))) errorHandeling.text(resultError.firstElementChild, `You don't have set up password. Sign in with ${data.split(' ')[1]}`) else if(data === 'incorrect email') { - emailError.firstElementChild.innerHTML = `${icon} Incorrect email format` emailError.classList.remove('disable') - emailInput.classList.add('error-red-border') - email.querySelector('label').classList.add('error-red') - } else if(data === `passwords don't match`) { - pswError.firstElementChild.innerHTML = `${icon} Passwords do not match` - pswInput.classList.add('error-red-border') - psw.querySelector('label').classList.add('error-red') - pswRepeatInput.classList.add('error-red-border') - pswRepeat.querySelector('label').classList.add('error-red') + errorHandeling.email() + errorHandeling.text(emailError.firstElementChild, `Incorrect email format`) + } else if(data === `passwords don't match` || data === 'empty password') { + pswError.classList.remove('disable') + errorHandeling.psw() + errorHandeling.pswRepeat() + if(data === 'empty password') errorHandeling.text(pswError.firstElementChild, `Password shouldn't be empty`) + else errorHandeling.text(pswError.firstElementChild, 'Passwords do not match') + } else if(data === 'no white spaces in password') { + pswError.classList.remove('disable') + errorHandeling.psw() + errorHandeling.pswRepeat() + errorHandeling.text(pswError.firstElementChild, data) } } } + +const errorHandeling = { + name : () => { + nameInput.classList.add('error-red-border') + name.querySelector('label').classList.add('error-red') + }, + surname : () => { + surnameInput.classList.add('error-red-border') + surname.querySelector('label').classList.add('error-red') + }, + email : () => { + emailInput.classList.add('error-red-border') + email.querySelector('label').classList.add('error-red') + }, + password : () => { + pswInput.classList.add('error-red-border') + psw.querySelector('label').classList.add('error-red') + }, + passwordRepeat : () => { + pswRepeatInput.classList.add('error-red-border') + pswRepeat.querySelector('label').classList.add('error-red') + }, + text : (element, text) => { element.innerHTML = `${icon} ${text}` } +} + function createFormData(word, data) { let formData = new FormData formData.append(word, data) diff --git a/JS/variables.js b/JS/variables.js index 8f4475b..1ea88d5 100644 --- a/JS/variables.js +++ b/JS/variables.js @@ -71,8 +71,8 @@ const main = document.getElementById('main') const overlay = document.getElementById('overlay') - let navigationBarProfileImageDiv = document.getElementById('navigation-bar-profile-img-div') - let extOptProfile = document.getElementById('profile-extra-options') + const navigationBarProfileImageDiv = document.getElementById('outter-container') + const extOptProfile = document.getElementById('profile-extra-options') let currentNewsArticles = [ diff --git a/account.php b/account.php new file mode 100644 index 0000000..923acfa --- /dev/null +++ b/account.php @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + Account + + + + + +
+ + + main contnt +
+ + + + \ No newline at end of file diff --git a/add-ons/navigation-bar.php b/add-ons/navigation-bar.php index 50c3bf2..c6c7ea2 100644 --- a/add-ons/navigation-bar.php +++ b/add-ons/navigation-bar.php @@ -74,53 +74,144 @@ -