Implemented some backend features

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{
+    .activeProfile{ background-color: var(--hover-medium) !important; }
-        background-color: var(--hover-medium) !important;
-    }
     .underline-input-animation{
         display: inline-block;
         width: 0px;

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;
+    
+}

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);

CSS/index.css

@@ -293,9 +293,7 @@ body{
             
             /** Navigation Right Side */
             
-                .nav-right-side > * {
+                .nav-right-side > * { float: right; }
-                    float: right;
-                }
                 .link {
                     padding: 9px 13px;
                     margin-right: 15px;
@@ -305,92 +303,235 @@ body{
                     border-radius: 7px;
                     color: var(--bg);
                 }
-                .login:hover {
+                .login:hover { filter: brightness(1.06); }
-                    filter: brightness(1.06);
-                }
 
-                .navigation-profile-img{
+                .navigation-profile-img { --times: 2.2; }
-                    --times: 2.2;
-                }
                 .first-profile-div{
                     width: 2.8rem;
                     height: 2.8rem;
                     margin-right: 15px;
                 }
-                .first-profile-div:hover{
+                .first-profile-div:hover{ background-color: var(--hover-light); }
-                    background-color: var(--hover-light);
+                .first-profile-div-active{ background-color: var(--hover-medium); }
-                }
+                .tooltiptext-name { color: var(--hover-dark); }
-                .first-profile-div-active{
-                    background-color: var(--hover-medium);
-                }
-                .tooltiptext-name{
-                    color: var(--hover-dark);
-                }
             
                 /** Profile Options */
 
-                .profile-extra-options{
+                    .profile-extra-options {
-                    right: 0px;
+                        right: 0.75rem;
-                    top: 100%;
+                        top: 93%;
-                    grid-template-rows: 230px 10px 1fr 1fr;
+                        min-width: 350px;
-                    width: 260px;
+                        min-height: 380px;
-                    height: 360px;
+                        border-radius: 6px;
-                    border-radius: 6px;
+                        background-color: var(--bg);
-                    text-align: center;
+                        box-shadow: 1px 1px 2px 0px var(--border-medium), 
-                    background-color: var(--bg);
+                                    1px 1px 1px 0px var(--border-medium) inset; 
-                    border: none;
+                    }
-                    box-shadow: 1px 1px 2px 0px var(--border-medium), 
+                    .profile-extra-options .top-div {
-                                1px 1px 1px 0px var(--border-medium) inset; 
+                        display: flex;
-                    border-radius: 2px;
+                        align-items: center;
-                    right: 10px;
+                        justify-content: center;
-                    border-top-right-radius: 0;
+                        flex-direction: column;
-                    border-top-left-radius: 0;
+                        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 {
+                .profile-extra-options .footer .container {
-                    --times: 5.625;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
                 }
-                .profile-extra-options .profile-img-link span{
+                .profile-extra-options .footer .container .inner-container {
-                    font-size: 3.5rem;
+                    min-width: 4rem;
+                    display: flex;
                 }
-                .change-profile-picture{
+                .profile-extra-options .footer .container .inner-container span {
-                    width: 1.8rem;
+                    font-size: 0.78rem;
-                    height: 1.8rem;
+                    color: var(--font-light);
-                    right: 5.3rem;
+                    padding: 2px 5px;
-                    bottom: 0.4rem;
+                    cursor: pointer;
-                    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);
                 }
         
 /* Main Content */

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) {

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, '"')
 
 
-
+async function logOut(path) {
-// Temporary
-async function manageExtraProfileOptions() {
     await fetch(`${pathLocation}include/logout.inc.php`)
-    openLinks(filePath.headlines);
+    openLinks(filePath.headlines + path);
 }

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')
+    }
+}

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()
+    if(errorHandelingEmail(data) === true) {
-    setupProfile()
+        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'
-}
+}

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) {
+            if (FirstName.length === 0 && LastName.length === 0) {
-                nameError.firstElementChild.innerHTML = `${icon} Name and Surname must not be empty`
+                errorHandeling.name()
-                nameInput.classList.add('error-red-border')
+                errorHandeling.surname()
-                name.querySelector('label').classList.add('error-red')
+                errorHandeling.text(nameError.firstElementChild, 'Name and Surname must not be empty')
-                surnameInput.classList.add('error-red-border')
+            } else if (FirstName.length !== 0 && LastName.length === 0) {
-                surname.querySelector('label').classList.add('error-red')
+                errorHandeling.surname()
-            } else if(FirstName.length !== 0 && LastName.length === 0) {
+                errorHandeling.text(nameError.firstElementChild, 'Surname must not be empty')
-                nameError.firstElementChild.innerHTML = `${icon} Surname must not be empty`
+            } else if (FirstName.length === 0 && LastName.length !== 0) {
-                surnameInput.classList.add('error-red-border')
+                errorHandeling.name()
-                surname.querySelector('label').classList.add('error-red')
+                errorHandeling.text(nameError.firstElementChild, 'Name must not be empty')
-            } 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')
             }
-            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')
+            errorHandeling.email()
-            email.querySelector('label').classList.add('error-red')
+            if(validateEmail(Email) === false) errorHandeling.text(emailError.firstElementChild, 'Incorrect email format')
-            num = num++
+            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 <a href="#" onclick="urlOpen('#login')">${data.split(' ')[1]}</a>`
+        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 <a href="#" onclick="urlOpen('#login')">${data.split(' ')[1]}</a>`)
         else if(data === 'incorrect email') {
-            emailError.firstElementChild.innerHTML = `${icon} Incorrect email format`
             emailError.classList.remove('disable')
-            emailInput.classList.add('error-red-border')
+            errorHandeling.email()
-            email.querySelector('label').classList.add('error-red')
+            errorHandeling.text(emailError.firstElementChild, `Incorrect email format`)
-        } else if(data === `passwords don't match`) {
+        } else if(data === `passwords don't match` || data === 'empty password') {
-            pswError.firstElementChild.innerHTML = `${icon} Passwords do not match`
+            pswError.classList.remove('disable')
-            pswInput.classList.add('error-red-border')
+            errorHandeling.psw()
-            psw.querySelector('label').classList.add('error-red')
+            errorHandeling.pswRepeat()
-            pswRepeatInput.classList.add('error-red-border')
+            if(data === 'empty password')  errorHandeling.text(pswError.firstElementChild, `Password shouldn't be empty`)
-            pswRepeat.querySelector('label').classList.add('error-red')
+            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) 

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')
+    const navigationBarProfileImageDiv = document.getElementById('outter-container')
-    let extOptProfile = document.getElementById('profile-extra-options')
+    const extOptProfile = document.getElementById('profile-extra-options')
 
 
     let currentNewsArticles = [

account.php

@@ -0,0 +1,53 @@
+<?php     
+    session_start();
+    if(!isset($_SESSION['id'])) header('location: headlines.php#nopermission')
+?>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
+    <meta name="google-signin-client_id"
+        content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
+
+    <link rel="stylesheet" href="CSS/colors.css">
+    <link rel="stylesheet" href="CSS/*.css">
+    <link rel="stylesheet" href="CSS/responsive.css">
+    <link rel="stylesheet" href="CSS/account.css">
+
+    <script src="JS/responsive.js" defer></script>
+
+    <script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
+    <script src="JS/icon.js" defer></script>
+
+    <title>Account</title>
+
+</head>
+
+<body>
+    <nav>
+        <div class="left-side">
+
+            <div class="logo">
+                <a href="">Fews</a>
+            </div>
+
+        </div>
+        <div class="right-side">
+            asd
+        </div>
+
+    </nav>
+    <main>
+        <aside class="side-menu">
+
+        </aside>
+
+        main contnt
+    </main>
+
+</body>
+
+</html>

add-ons/navigation-bar.php

@@ -74,53 +74,144 @@
 
     <div class="nav-right-side" id="navigation-bar-right">
         <a href="#" class="login link  <?php if(isset($_SESSION['id'])) echo 'disable'?>" id="login-button" onclick="manageLoginOptions()">Log in</a>
-        <i class="profile-img-link relative  <?php if(!isset($_SESSION['id'])) echo 'disable'?>">
+
-            <span>
+        <div class="outter-container border-radius-50 pointer <?php if(!isset($_SESSION['id'])) echo 'disable'?>" id="outter-container">
-            </span>
+            <div>
-            <figure class="img border-radius-50"></figure>
+                <?php 
-            <div class="first-profile-div flex align-center justify-center border-radius-50 pointer"
+                    if($_SESSION['profile_choice'] == 0) 
-                onclick="manageExtraProfileOptions()" id="navigation-bar-profile-img-div">
+                        echo ('<div class="img small" onclick="manageExtraProfileOptions()"><img src="'.$_SESSION['profile_img'].'" class="imga"></div>');
-                <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg"
+                    else if($_SESSION['profile_choice'] == 1) 
-                    class="img border-radius-50 navigation-profile-img">
+                        echo ('<div class="img small" onclick="manageExtraProfileOptions()" style="background-color: '.$_SESSION['profile_color'].';">
+                                    <div class="letter">
+                                        <span>'.$_SESSION['letter'].'</span>
+                                    </div>
+                                </div>');
+                    else if($_SESSION['profile_choice'] == 2) 
+                        echo ('<div class="img small" onclick="manageExtraProfileOptions()"><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
+                    else if($_SESSION['profile_choice'] == 3) 
+                        echo ('<div class="img small" onclick="manageExtraProfileOptions()"><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
+                    else if($_SESSION['profile_choice'] == 4) 
+                        echo ('<div class="img small" onclick="manageExtraProfileOptions()"><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
+                ?>
+                
             </div>
-            <span class="tooltiptext tooltiptextTop120">
+            <span class="tooltiptext tooltiptextTop90">
-                <strong>Personal Information</strong><br>
+                <div><strong>Personal Information</strong></div>
-                <span class="tooltiptext-name">Nik Topler</span><br>
+                <div class=" <?php if(!isset($_SESSION['name']) && !isset($_SESSION['surname'])) echo 'disable'?> ">
-                <span class="tooltiptext-name">nik.topler@gmail.com</span>
+                    <span class="tooltiptext-name">
+                        <?php echo $_SESSION['name'].' '.$_SESSION['surname'];?>
+                    </span>
+                </div>
+                <div>
+                    <span class="tooltiptext-name">
+                        <?php echo $_SESSION['email']?>
+                    </span>
+                </div>
             </span>
-        </i>
+        </div>
     </div>
 
-    <aside class="profile-extra-options grid absolute disable" id="profile-extra-options">
+    <aside class="profile-extra-options absolute disable" id="profile-extra-options">
-        <div class="grid">
+        <div class="top-div">
-            <aside class="profile-img-link relative flex align-center justify-center">
+            <div class="img-container">
-                <!-- <span>
+                <div class="img-middle">
-                </span> -->
+                    <div>
-                <!-- <figure class="img border-radius-50"></figure> -->
+                        <?php 
-                <!-- <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg"
+                            if($_SESSION['profile_choice'] == 0) 
-                    class="img border-radius-50 profile-options-profile-img pointer" alt="img"> -->
+                                echo ('<div class="img big" onclick="openLinks(\'account.php\')" ><img src="'.$_SESSION['profile_img'].'" class="imga"></div>');
-                <figure
+                            else if($_SESSION['profile_choice'] == 1) 
-                    class="change-profile-picture grid flex align-center justify-center absolute border-radius-50 pointer">
+                                echo ('<div class="img big" onclick="openLinks(\'account.php\')" style="background-color: '.$_SESSION['profile_color'].';">
-                    <i class="fal fa-camera"></i>
+                                            <div class="letter">
-                </figure>
+                                                <span>'.$_SESSION['letter'].'</span>
-            </aside>
+                                            </div>
-            <div>
+                                        </div>');
-                <strong>Nik Topler</strong>
+                            else if($_SESSION['profile_choice'] == 2) 
-                <p class="emailProfile">
+                                echo ('<div class="img big" onclick="openLinks(\'account.php\')"><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
-                    nik.topler@gmail.com
+                            else if($_SESSION['profile_choice'] == 3) 
-                </p>
+                                echo ('<div class="img big" onclick="openLinks(\'account.php\')"><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
+                            else if($_SESSION['profile_choice'] == 4) 
+                                echo ('<div class="img big" onclick="openLinks(\'account.php\')"><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
+                        ?>
+                    </div>
+                    <div class="camera-container">
+                        <i class="far fa-camera"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="full-name <?php if(!isset($_SESSION['name']) && !isset($_SESSION['surname'])) echo 'disable'?>">
+                <span>
+                    <?php echo $_SESSION['name'].' '.$_SESSION['surname']; ?>
+                </span>
+            </div>
+            <div class="email">
+                <span><?php echo $_SESSION['email']?></span>
+            </div>
+            <div class="manage-button">
+                <div class="container" onclick="openLinks('account.php')">
+                    <span>
+                        Manage your account
+                    </span>
+                </div>
             </div>
 
-            <div class="manage-profile-extra-options flex align-center justify-center">
+        </div>
-                <a href="account.php">Manage your account</a>
+        <div class="middle-div">
+            <div class="container">
+               <div class="google" <?php if($_SESSION['googleID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
+                    <div>
+                        <i class="fab fa-google icon"></i>
+                    </div>
+                    <span>
+                        <?php 
+                            if($_SESSION['googleID'] == 0) echo 'Sign in with Google'; 
+                            else echo 'Signed in'; 
+                        ?>
+                    </span>
+               </div>
+            </div>
+            <div class="container">
+                <div class="facebook" <?php if($_SESSION['facebookID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
+                    <div>
+                        <i class="fab fa-facebook icon"></i>
+                    </div>
+                    <span>
+                        <?php 
+                            if($_SESSION['facebookID'] == 0) echo 'Sign in with Facebook'; 
+                            else echo 'Signed in'; 
+                        ?>
+                    </span>
+                </div>
+            </div>
+            <div class="container">
+                <div class="github" <?php if($_SESSION['githubID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
+                    <div>
+                        <i class="fab fa-github icon"></i>
+                    </div>
+                    <span>
+                        <?php 
+                            if($_SESSION['githubID'] == 0) echo 'Sign in with Github'; 
+                            else echo 'Signed in'; 
+                        ?>
+                    </span>
+                </div>
             </div>
         </div>
-        <hr>
+        <div class="bottom-div">
-        <div class="extra-options-settings flex align-center justify-center">
+            <div class="sign-out">
-            <a href="account.php#settings">Settings</a>
+                <div class="button-container" onclick="logOut('')">
-        </div>
+                    <span>
-        <div class="extra-options-logout flex align-center justify-center">
+                        Sign out
-            <a href="#" onclick="signOut()">Sign Out</a>
+                    </span>
+                </div>
+            </div>
+            <div class="footer">
+                <div class="container">
+                   <div class="inner-container">
+                        <span>About</span>
+                        <span>Settings</span>
+                   </div>
+                </div>
+            </div>
         </div>
     </aside>
 

add-ons/side-bar.php

@@ -56,7 +56,12 @@
                                                 <div class="sidebar-category country" id="show-countries-button" onclick="showSelectCountry()"> 
                                                         <div class="sidebar-country-container grid">
                                                                 <span>Language & Region</span> 
-                                                                <strong id="country-name-side-menu"><?php echo 'United States' ?></strong> 
+                                                                <strong id="country-name-side-menu">
+                                                                        <?php 
+                                                                                if(isset($_SESSION['country'])) echo $_SESSION['country'][0];
+                                                                                else echo 'United States';
+                                                                        ?>
+                                                                </strong> 
                                                         </div>
                                                 </div>
                                                 <div class="sidebar-category">

include/insert.inc.php

@@ -53,18 +53,18 @@ class Login extends Dbh{
             $hashFacebookID = password_hash($userInfo[0], PASSWORD_DEFAULT);
             $array = [$userInfo[3], $userInfo[4], $userInfo[6], $userInfo[5], $hashFacebookID];
         } else if($type === 'standard') {
+            $color = $this->randomColor();
             $num = 1;
             $emailNum = 2;
             $countryID = $this->getCountryIDwithName($userInfo[5]);
             $hashPassword = password_hash($userInfo[3], PASSWORD_DEFAULT);
-            $sql = 'INSERT INTO users(name, surname, email, password, country_id) VALUES(?, ?, ?, ?, ?)';
+            $sql = 'INSERT INTO users(name, surname, email, password, country_id, profile_color) VALUES(?, ?, ?, ?, ?, ?)';
-            $array = [$userInfo[0], $userInfo[1], $userInfo[2], $hashPassword, $countryID];
+            $array = [$userInfo[0], $userInfo[1], $userInfo[2], $hashPassword, $countryID, $color];
         }
         $stmt = $this->connect()->prepare($sql);
         $stmt->execute($array);
         $this->updateProfileChoice($num, $userInfo[$emailNum]);
         $this->setSessionVariables($userInfo[$emailNum]);
-        echo 'success';
     }
     public function updateID($type, $userInfo) {
         if($this->isIdSet($type, $userInfo) == 1) {
@@ -109,23 +109,10 @@ class Login extends Dbh{
     }
 
     public function standard($userInfo) {
-        $res = $this->checkIfUserExists($userInfo[2]);
+        $this->checkIfUserExists($userInfo[2]);
-        if($res == "user exist's") {
+        $this->errorHandeling($userInfo);
-            echo "user exist's";
-            return;
-        } else if($res == "exist google" ||  $res == "exist facebook" || $res == "exist github") {
-            echo $res;
-            return;
-        }
-        if(!filter_var($userInfo[2], FILTER_VALIDATE_EMAIL)) {
-            echo 'incorrect email';
-            return;
-        }
-        if($userInfo[3] !== $userInfo[4]) {
-            echo "passwords don't match";
-            return;
-        }
         $this->insert('standard', $userInfo);
+        echo 'success';
     }
     public function checkIfUserExists($email) {
         $sql = 'SELECT * FROM users WHERE email = ?';
@@ -133,12 +120,39 @@ class Login extends Dbh{
         $stmt->execute([$email]);
         $row = $stmt->fetch();
         if($row) {            
-            if($row['googleID'] != null) return "exist google";
+            if($row['googleID'] != null) $this->errorHandeling("exist google");
-            if($row['facebookID'] != null) return "exist facebook";
+            if($row['facebookID'] != null) $this->errorHandeling("exist facebook");
-            if($row['githubID'] != null) return "exist github";
+            if($row['githubID'] != null)  $this->errorHandeling("exist github");
-            return "user exist's";
+            $this->errorHandeling("user exist's");
         } 
-        else return "user doesn't exist's";  
+    }
+    public function errorOver($string) {
+        echo $string;
+        die;
+    }
+    public function errorHandeling($userInfo) {
+        $string = 'empty';
+        if(empty($userInfo[0])) $string = $string.' name';
+        if(empty($userInfo[1])) $string = $string.' surname';
+        if(empty($userInfo[2])) $string = $string.' email';
+        if(empty($userInfo[3])) $string = $string.' password';
+        if(empty($userInfo[4])) $string = $string.' password-repeat';
+        if($userInfo[5] == 'Select Country') $string = $string.' country';
+        if($string != 'empty') $this->errorOver($string);
+
+        if(strlen($userInfo[0]) > 10) $this->errorOver('name too long');
+        if(strlen($userInfo[1]) > 10) $this->errorOver('surname too long');
+
+        if(!filter_var($userInfo[2], FILTER_VALIDATE_EMAIL)) $this->errorOver('incorrect email');
+
+        if($userInfo[3] != $userInfo[4]) $this->errorOver("passwords don't match");
+        if(strlen($userInfo[3]) > 25) $this->errorOver('password too long');
+        if(preg_match('/\s/', $userInfo[3])) $this->errorOver("no white spaces in password");
+    }
+    public function randomColor() {
+        $colors = array('rgb(211,47,47)','rgb(123,31,162)','rgb(81,45,168)','rgb(48,63,159)','rgb(25,118,210)','rgb(2,136,209)','rgb(0,151,167)','rgb(0,121,107)','rgb(56,142,60)','rgb(104,159,56)','rgb(175,180,43)','rgb(251,192,45)','rgb(255,160,0)','rgb(245,124,0)','rgb(230,74,25)','rgb(93,64,55)','rgb(97,97,97)');
+        $i = array_rand($colors);
+        return $colors[$i];
     }
 }
 

include/session.inc.php

@@ -25,6 +25,7 @@ class Session extends Dbh {
         $_SESSION['facebookID'] = $this->checkIfStringNull($row['facebookID']);
         $_SESSION['githubID'] = $this->checkIfStringNull($row['githubID']);
         $_SESSION['country'] = $this->getCountryWithID($row['country_id']);
+        $_SESSION['letter'] = strtoupper($email[0]);
     }
     public function checkIfStringNull($string) { 
         if($string == null) return 0;