Updated responsiveness, login with google/facebook

CSS/index.css

@@ -158,7 +158,7 @@ body{
                                 
                 }
                 .extra-search-options div {
-                    grid-template-columns: 100px 1fr;
+                    grid-template-columns: 115px 1fr;
                     grid-template-rows: 1fr;
                 }
                 .extra-search-options .extra-search-options-div {
@@ -1128,12 +1128,10 @@ body{
             width: 40px;
             height: 40px;
         }
-        .x-icon:active{
+        .x-icon:active{ background-color: var(--hover-light); }
-            background-color: var(--hover-light);
+        .x-icon i { font-size: 1.125rem; }
-        }
+
-        .select-country .blue-link{
+        .select-country .blue-link { font-weight: 500; }
-            font-weight: 500;
-        }
         .select-country h3{
             font-size:1.6rem;
             font-weight: 400;
@@ -1188,9 +1186,7 @@ body{
             align-items: center;
             justify-content: center;
         }
-        .select-country .radio-button-container{
+        .select-country .radio-button-container{ padding: 0 20px; }
-            padding: 0 20px;
-        }
         .select-country .radio-button-container p{
             width: fit-content;
             margin-left: 8px;
@@ -1219,118 +1215,128 @@ body{
         }
 
         /** Login Options */
-            .login-option-div{
+            .login-option-div {
-                width: 250px;
+                display: flex;
-                height: 300px;
+                flex-direction: column;
+                max-width: 300px;
+                min-width: 240px;
+                width: auto;
+                min-height: 250px;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%,-50%) scale(0.8);
-                padding: 20px;
+                padding: 25px;
                 background-color: var(--bg);
                 border-radius: 5px;
                 border: 1px solid var(--shadow);
                 z-index: -10;
-                grid-template-rows: 3.4rem 1fr 2rem 20px 2.5rem;
             }
             .login-option-div.active{
                 z-index: 10;
                 transform: translate(-50%,-50%) scale(1);
             }
-            .login-option-div header{
+            .login-option-div header {
-                grid-row: 1/2;
+               display: flex;
-                grid-template-columns: 20px 1fr 20px;
+               flex-direction: column;
-                grid-template-rows: 1fr 1fr;
+               margin-bottom: 0.5rem;
-            }
-            .login-option-div header h1{
-                grid-row: 2/3;
-                grid-column: 2/3;
-                font-size: 1.6rem;
-                color: var(--font-very-dark);
             }
             .login-option-div header span{
-                grid-row: 1/2;
+                font-size: 1.33rem;
-                grid-column: 2/3;
-                font-size: 1.2rem;
                 color: var(--font-very-dark);
             }
-            .google-facebook-links{
+            .login-option-div h3 {
-                grid-row: 2/4;
+                text-align: center;
-                margin: auto 0;
+                font-size: 1.6rem;
+                color: var(--font-very-dark);
+                font-weight: 400;
+                margin-bottom: 1rem;
+                font-family: 'Open Sans', sans-serif;
             }
-            .google-facebook-links div {
+            .external-login-options {
-                margin: auto;
-            }
-            .google-facebook-links .external-login-container:not(:last-child){
-                margin-bottom: 8px;
-            }
-            .login-option-div hr{
-                border-bottom: 1px solid var(--hover-medium);
-                width: 100%;
-            }
-            .login-option-div .or-login{
-                background-color: var(--bg);
-                padding: 4px 12px;
-                left: 128px;
-                bottom: 57px;
-                color: var(--font-dark);
-            }
-            .fa.fa-github,.fab.fa-facebook{
                 display: flex;
+                flex-direction: column;
+                min-width: fit-content;
+                padding-bottom: 3px;
+                margin-bottom: 0.5rem;
             }
-            .github-login-button{
+            .external-login-options .external-container {
-                --color: var(--font-very-dark);
+                height: 53px;
-                background-color: var(--font-very-dark);
+                margin: 4px 0;
             }
-            .facebook-login-button{
+            .external-login-options .container {
-                background-color: #4267B2;
+                width: calc(100% - 2px);
-            }
+                border: 1px solid var(--color);
-           .external-login-container label,.github-login-button .fa,.fa-facebook{
-                color: var(--bg);
-            }
-            .login-other-options{
-                margin: auto 0;
-            }
-            .login-other-options a:first-child{
-                float: left;
-            }
-            .login-other-options a:last-child{
-                float: right;
-            } 
-
-            .external-login-container{
-                width: 100%;
                 padding-top: 3px;
                 padding-bottom: 0;
-                transition: all ease-in .2s;
+                transition: ease-in .1s;
             }
-            .external-login-container:hover {
+            .external-login-options .container:hover {
                 padding-top: 0;
                 padding-bottom: 3px;
             }
-            .external-login-botton {
+            .external-login-options .container .inner-container {
-                width: 96%;
+                width: 100%;
                 height: 50px;
+                display: grid;
+                grid-template-columns: 50px 1fr; 
                 border-radius: 4px;
                 border: 1px solid var(--color);
-                transition: all ease-in-out .1s;
+                transition: all ease-in .2s;
-                grid-template-columns: 50px 1fr;
-            }
-            .external-login-container:hover .external-login-botton{
-                box-shadow: 0px 1px 10px var(--font-medium);
-            }
-           
-            .google-login-button {
-                --color: var(--google-blue);
-            }
-            .google-login-button label{
-                background-color: var(--google-blue);
-                font-weight: 500;
             }
+            .external-login-options .container:hover .inner-container { box-shadow: 0 2px 4px 0 var(--border-dark); }
             .icons8-google { 
+                margin: auto;
                 display: inline-block;
                 width: 22px;
                 height: 22px;
                 background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDIiIGhlaWdodD0iNDIiCnZpZXdCb3g9IjAgMCA0OCA0OCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48cGF0aCBmaWxsPSIjRkZDMTA3IiBkPSJNNDMuNjExLDIwLjA4M0g0MlYyMEgyNHY4aDExLjMwM2MtMS42NDksNC42NTctNi4wOCw4LTExLjMwMyw4Yy02LjYyNywwLTEyLTUuMzczLTEyLTEyYzAtNi42MjcsNS4zNzMtMTIsMTItMTJjMy4wNTksMCw1Ljg0MiwxLjE1NCw3Ljk2MSwzLjAzOWw1LjY1Ny01LjY1N0MzNC4wNDYsNi4wNTMsMjkuMjY4LDQsMjQsNEMxMi45NTUsNCw0LDEyLjk1NSw0LDI0YzAsMTEuMDQ1LDguOTU1LDIwLDIwLDIwYzExLjA0NSwwLDIwLTguOTU1LDIwLTIwQzQ0LDIyLjY1OSw0My44NjIsMjEuMzUsNDMuNjExLDIwLjA4M3oiPjwvcGF0aD48cGF0aCBmaWxsPSIjRkYzRDAwIiBkPSJNNi4zMDYsMTQuNjkxbDYuNTcxLDQuODE5QzE0LjY1NSwxNS4xMDgsMTguOTYxLDEyLDI0LDEyYzMuMDU5LDAsNS44NDIsMS4xNTQsNy45NjEsMy4wMzlsNS42NTctNS42NTdDMzQuMDQ2LDYuMDUzLDI5LjI2OCw0LDI0LDRDMTYuMzE4LDQsOS42NTYsOC4zMzcsNi4zMDYsMTQuNjkxeiI+PC9wYXRoPjxwYXRoIGZpbGw9IiM0Q0FGNTAiIGQ9Ik0yNCw0NGM1LjE2NiwwLDkuODYtMS45NzcsMTMuNDA5LTUuMTkybC02LjE5LTUuMjM4QzI5LjIxMSwzNS4wOTEsMjYuNzE1LDM2LDI0LDM2Yy01LjIwMiwwLTkuNjE5LTMuMzE3LTExLjI4My03Ljk0NmwtNi41MjIsNS4wMjVDOS41MDUsMzkuNTU2LDE2LjIyNyw0NCwyNCw0NHoiPjwvcGF0aD48cGF0aCBmaWxsPSIjMTk3NkQyIiBkPSJNNDMuNjExLDIwLjA4M0g0MlYyMEgyNHY4aDExLjMwM2MtMC43OTIsMi4yMzctMi4yMzEsNC4xNjYtNC4wODcsNS41NzFjMC4wMDEtMC4wMDEsMC4wMDItMC4wMDEsMC4wMDMtMC4wMDJsNi4xOSw1LjIzOEMzNi45NzEsMzkuMjA1LDQ0LDM0LDQ0LDI0QzQ0LDIyLjY1OSw0My44NjIsMjEuMzUsNDMuNjExLDIwLjA4M3oiPjwvcGF0aD48L3N2Zz4=') 50% 50% no-repeat;
                 background-size: 100%; 
             }
-
+            .google-btn { 
+                --color: var(--google-blue); 
+                width: 100%;
+                height: 100%;
+            }
+            .google-btn label{
+                background-color: var(--google-blue);
+                font-weight: 500;
+            }
+            .facebook-btn{ background-color: #4267B2; }
+            .fa.fa-github, .fab.fa-facebook { display: flex; }
+            .github-btn {
+                --color: var(--font-very-dark);
+                background-color: var(--font-very-dark);
+            }
+            .external-login-options label,
+            .github-btn .fa, .fa-facebook { color: var(--bg); } 
+            .other-login-options {
+                padding: 0.75rem 0;
+                display: flex;
+                justify-content: space-between;
+                flex-direction: row;
+            }
+            .seperate-line {
+                padding: 5px 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+            }
+            .seperate-line span { 
+                background-color: var(--bg); 
+                z-index: 11;
+                padding: 4px;
+                color: var(--font-medium);
+            }
+            .seperate-line .line {
+                position: absolute;
+                left: 0;
+                bottom: 50%;
+                top: 50%;
+                width: 100%;
+                z-index: 10;
+            }
+            .seperate-line .line hr {
+                width: inherit;
+                border-bottom: 1px solid var(--font-medium); 
+            }

CSS/signup.css

@@ -0,0 +1,64 @@
+main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif;
+    background-color: var(--bg);
+    z-index: 100;
+}
+.main-container {
+    min-width: 400px;
+    height: auto;
+    min-height: 440px;
+    padding: 40px;
+    border: 1px solid var(--border-light);
+    border-radius: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--bg);
+}
+.logo-container { margin: 0 auto; }
+.sign-container,
+.upper-container  {
+    margin-top: 15px;
+    text-align: center;
+}
+.upper-container span { font-size: 1.2rem; }
+
+.sign-container h1 { font-size: 1.8rem; }
+
+.main-middle-conatiner {
+    display: flex;  
+    min-height: 310px;
+    position: relative;
+    margin-top: 15px;
+}
+.email-container {
+    position: absolute;
+    min-width: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    transition: all ease-in-out .2;
+    background-color: rebeccapurple;
+}
+.password-container {
+    position: absolute;
+    min-width: 100%;
+    top: 0;
+    bottom: 0;
+    left: 100%;
+    background-color: green;
+    transition: all ease-in-out .2;
+}
+.email-container.active {
+    right: 100%;
+    left: -100%;
+}
+.password-container.active {
+    left: 0;
+}
+

JS/main.js

@@ -183,19 +183,38 @@ const suggest = {
 }
 
 const php = {
-    info : async(word) => {
+    info : async (word) => {
-        const response =  await fetch(`${pathLocation}privateInfo.php`, {                          
+        const res =  await fetch(`${pathLocation}privateInfo.php`, {                          
             method: "POST", 
-            body: createFormData(word)
+            body: createFormData(word, '')
         })
-        return await response.text()
+        return await res.text()
     },
-    session : async() => {
+    session : async () => {
-        const response =  await fetch('include/session.inc.php', {                          
+        const res =  await fetch('include/session.inc.php', {                          
             method: "POST", 
-            body: createFormData('user')
+            body: createFormData('user', '')
         })
-        return await response.text()
+        return await res.text()
+    },
+    userInsertInDB : async (type, userInfo, id_token, clientID) => {
+        let array
+        if(type === 'google') {
+            let id = userInfo.getId()
+            let name = userInfo.getGivenName()
+            let surname = userInfo.getFamilyName()
+            let img = userInfo.getImageUrl()
+            let email = userInfo.getEmail()
+            array = JSON.stringify([id, id_token, clientID, name, surname, img, email])
+        } else if(type === 'facebook') array = JSON.stringify([userInfo[0], userInfo[1], userInfo[2],userInfo[3], userInfo[4], userInfo[5].data.url,userInfo[6]])
+
+        const res = await fetch(`${pathLocation}include/insert.inc.php`, {
+            method: "POST", 
+            body: createFormData(type, array)
+        })
+        const data = await res.text()
+        console.log(data)
+        if(data === 'success') location.reload()
     }
 }
 
@@ -730,30 +749,34 @@ function inputExtraSearchOptionChange() {
 function addDisableSideElements() { mainAsideContent.querySelectorAll('article').forEach(article => article.classList.add('disable')) }
 function removeDisableSideElements() { mainAsideContent.querySelectorAll('article.disable').forEach(article => article.classList.remove('disable')) }
 
+function follow(element) {
+    if(element.lastElementChild.textContent === 'Follow') fillIcons(element.firstElementChild, element.lastElementChild, 'Following')
+    else emptyIcons(element.firstElementChild, element.lastElementChild, 'Follow')
+
+    if(window.location.pathname.includes('search')) followNews()
+    else followCategory()
+}
 function saveNews(element) {
-    if(element.lastElementChild.textContent === 'Save') {
+    if(element.lastElementChild.textContent === 'Save') fillIcons(element.firstElementChild, element.lastElementChild, 'Saved')
-        element.firstElementChild.classList.remove('far')
+    else emptyIcons(element.firstElementChild, element.lastElementChild, 'Save')
-        element.firstElementChild.classList.add('fas')
-        element.lastElementChild.textContent = 'Saved'
-    } else {
-        element.firstElementChild.classList.remove('fas')
-        element.firstElementChild.classList.add('far')
-        element.lastElementChild.textContent = 'Save'
-    }
     //PHP
 }
-function followNews(element) {
+function followNews() {
+    //PHP
+}
+function followCategory() {
+    
+}
 
-    if(element.lastElementChild.textContent === 'Follow') {
+function fillIcons(icon, text, string) {
-        element.firstElementChild.classList.remove('far')
+    icon.classList.remove('far')
-        element.firstElementChild.classList.add('fas')
+    icon.classList.add('fas')
-        element.lastElementChild.textContent = 'Following'
+    text.textContent = string
-    } else {
+}
-        element.firstElementChild.classList.remove('fas')
+function emptyIcons(icon, text, string) {
-        element.firstElementChild.classList.add('far')
+    icon.classList.add('far')
-        element.lastElementChild.textContent = 'Follow'
+    icon.classList.remove('fas')
-    }
+    text.textContent = string
-        //PHP
 }
 
 /* API */
@@ -772,9 +795,9 @@ async function fetchNewsArticles() {
     const articles = await json.articles
 }
 
-function createFormData(word) { 
+function createFormData(word, data) { 
     let formData = new FormData
-        formData.append(word, '') 
+        formData.append(word, data) 
     return formData
 }
 function capitalizeString(string) { return string.charAt(0).toUpperCase() + string.slice(1) }
@@ -790,5 +813,10 @@ function checkIfCategoriesAreOpen() {
  }
 // string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"')
 
-function followCategory() {
+
+
+// Temporary
+async function manageExtraProfileOptions() {
+    await fetch(`${pathLocation}include/logout.inc.php`)
+    openLinks(filePath.headlines);
 }

JS/responsive.js

@@ -38,11 +38,11 @@ const responsiveVersion = {
     },
     smallScreen457() {
         if(window.innerWidth < 510) {
-            document.querySelectorAll('.article-container .main-header .buttons .white-button span')[0].innerHTML = ''
+            // document.querySelectorAll('.article-container .main-header .buttons .white-button span')[0].innerHTML = ''
-            document.querySelectorAll('.article-container .main-header .buttons .white-button span')[1].innerHTML = ''
+            // document.querySelectorAll('.article-container .main-header .buttons .white-button span')[1].innerHTML = ''
         } else {
-            document.querySelectorAll('.article-container .main-header .buttons .white-button span')[0].innerHTML = 'Following'
+            // document.querySelectorAll('.article-container .main-header .buttons .white-button span')[0].innerHTML = 'Following'
-            document.querySelectorAll('.article-container .main-header .buttons .white-button span')[1].innerHTML = 'Share'
+            // document.querySelectorAll('.article-container .main-header .buttons .white-button span')[1].innerHTML = 'Share'
         }
     }
 

JS/show.js

@@ -137,3 +137,5 @@ function removeActiveSidebarCategory() {
     for(let i = 0; i < oldSelectedElements.length; i++)
         oldSelectedElements[i].classList.remove('active')
 }
+
+

JS/sign.js

@@ -1,101 +0,0 @@
-// // /** Google */
-
-//     let googleUser = {}
-//     function startApp() {
-//         gapi.load('auth2', () => {
-//         auth2 = gapi.auth2.init({
-//             client_id: '571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com',
-//             cookiepolicy: 'single_host_origin',
-//         }) 
-//         attachSignin(document.getElementById('googleBtn'))
-//       })
-//     }
-//     function attachSignin(element) {
-//         auth2.attachClickHandler(element, {},
-//             (googleUser) => {
-//               console.log(googleUser.getBasicProfile())}, 
-//               (error) => {
-//               alert(JSON.stringify(error, undefined, 2))
-//             })
-//       }
-//     startApp()
-//     function signOut() {
-//         let auth2 = gapi.auth2.getAuthInstance()
-//         auth2.signOut().then(function () {
-//         console.log('User signed out.')
-//         })
-//     }
-
-
-
-// /** GitHub */
-
-//       document.getElementById('github-button').addEventListener('click', () => {     
-//         // Initialize with your OAuth.io app public key
-//         OAuth.initialize('_nPRfzTNGplyDCW0vD9dmek5QAg');
-//         // Use popup for oauth
-//         // Alternative is redirect
-//         OAuth.popup('github').then(github => {
-//           console.log('github:', github);
-//           // Retrieves user data from oauth provider
-//           // Prompts 'welcome' message with User's email on successful login
-//           // #me() is a convenient method to retrieve user data without requiring you
-//           // to know which OAuth provider url to call
-//           github.me().then(data => {
-//             console.log('me data:', data);
-//             // alert('GitHub says your email is:' + data.email + ".\nView browser 'Console Log' for more details");
-//           });
-//           // Retrieves user data from OAuth provider by using #get() and
-//           // OAuth provider url
-//           github.get('/user').then(data => {
-//             console.log('self data:', data);
-//           })
-//         });
-//       })
-
-
-// // /** FaceBook */
-
-// //     // function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
-// //     //     console.log('statusChangeCallback');
-// //     //     console.log(response);                   // The current login status of the person.
-// //     //     if (response.status === 'connected') {   // Logged into your webpage and Facebook.
-// //     //     testAPI();  
-// //     //     } else {                                 // Not logged into your webpage or we are unable to tell.
-// //     //     document.getElementById('status').innerHTML = 'Please log ' +
-// //     //         'into this webpage.';
-// //     //     }
-// //     // }
-
-
-// //     // function checkLoginState() {               // Called when a person is finished with the Login Button.
-// //     //     FB.getLoginStatus(function(response) {   // See the onlogin handler
-// //     //     statusChangeCallback(response);
-// //     //     });
-// //     // }
-
-
-// //     // window.fbAsyncInit = function() {
-// //     //     FB.init({
-// //     //     appId      : '1318555625202480',
-// //     //     cookie     : true,                     // Enable cookies to allow the server to access the session.
-// //     //     xfbml      : true,                     // Parse social plugins on this webpage.
-// //     //     version    : ''           // Use this Graph API version for this call.
-// //     //     });
-
-
-// //     //     FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
-// //     //     statusChangeCallback(response);        // Returns the login status.
-// //     //     });
-// //     // };
-    
-// //     // function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
-// //     //     console.log('Welcome!  Fetching your information.... ');
-// //     //     FB.api('/me', function(response) {
-// //     //     console.log('Successful login for: ' + response.name);
-// //     //     document.getElementById('status').innerHTML =
-// //     //         'Thanks for logging in, ' + response.name + '!';
-// //     //     });
-// //     // }
-
-  

JS/signIn/external.js

@@ -0,0 +1,82 @@
+/** Google */
+    let clientID = '571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com'
+    let googleUser = {}
+    function startApp() {
+        gapi.load('auth2', function () {
+            auth2 = gapi.auth2.init({
+                client_id: clientID,
+                cookiepolicy: 'single_host_origin',
+            }) 
+            attachSignin(document.getElementById('googleBtn'))
+        })
+    }
+    function attachSignin(element) {
+        auth2.attachClickHandler(element, {},
+            function (googleUser) {
+                let id_token = googleUser.getAuthResponse().id_token;
+                php.userInsertInDB('google', googleUser.getBasicProfile(), id_token, clientID)}, 
+                (error) => {
+                alert(JSON.stringify(error, undefined, 2))
+            }
+        )
+    }
+    startApp()
+    function signOut() {
+        let auth2 = gapi.auth2.getAuthInstance()
+        auth2.signOut().then(function () {
+            console.log('User signed out.')
+        })
+    }
+
+/** GitHub */
+    // OAuth.initialize('qFa2sjgoyyIVRhaoOePG2ie1RqY') 
+      document.getElementById('github-btn').onclick = () => {     
+        // Initialize with your OAuth.io app public key
+        OAuth.initialize('_nPRfzTNGplyDCW0vD9dmek5QAg')
+        // Use popup for oauth
+        // Alternative is redirect
+        OAuth.popup('github').then(github => {
+        //   console.log('github:', github)
+          // Retrieves user data from oauth provider
+          // Prompts 'welcome' message with User's email on successful login
+          // #me() is a convenient method to retrieve user data without requiring you
+          // to know which OAuth provider url to call
+          github.me().then(data => {
+            // console.log('me data:', data)
+            // alert('GitHub says your email is:' + data.email + ".\nView browser 'Console Log' for more details")
+          })
+        })
+      }
+
+
+/** FaceBook */
+// [0] = id
+// [1] = id_token
+// [2] = clientID
+// [3] = name
+// [4] = surname
+// [5] = img
+// [6] = email
+    document.getElementById('facebook-btn').onclick = () => {
+        FB.login(function (res) {
+            if(res.status === 'connected') {
+                let id = res.authResponse.userID
+                let id_token = res.authResponse.accessToken
+
+                FB.api('/me?fields=id,first_name,last_name,picture.type(large),email', function (userData) {
+                    php.userInsertInDB('facebook', [id, id_token, '',userData.first_name, userData.last_name, userData.picture, userData.email], )
+                })
+                
+            }
+        }, { scope: 'public_profile, email'})
+    }
+    window.fbAsyncInit = function() {
+        FB.init({
+        appId            : '3448140125279175',
+        autoLogAppEvents : true,
+        cookie           : true,
+        status           : true,
+        xfbml            : true,
+        version          : 'v8.0'
+        });
+    };

add-ons/footer-scripts.php

@@ -1,3 +1,3 @@
-<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
 <script src="https://apis.google.com/js/api:client.js"></script>
-<script src="https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js" async defer></script>
+<script src="oauth.js"></script>
+<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

add-ons/head.php

@@ -1,24 +1,25 @@
+<?php session_start(); ?>
 <!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="viewport" content="width=device-width, initial-scale=1.0"> -->
+    <meta name="google-signin-client_id" content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
-    <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/index.css">
     <link rel="stylesheet" href="../CSS/responsive.css">
 
+    <script src="https://apis.google.com/js/platform.js" async defer></script>
+
     <script src="../JS/variables.js" defer></script>
     <script src="../JS/responsive.js" defer></script>
     <script src="../JS/show.js" defer></script>
     <script src="../JS/diacritics.js" defer></script>
     <script src="../JS/main.js" defer></script>
-    <script src="../JS/sign.js" defer></script>
+    <script src="../JS/signIn/external.js" defer></script>
 
     <script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
     <script src="../JS/icon.js" defer></script>

add-ons/login.php

@@ -1,41 +1,43 @@
-<div class="login-option-div grid absolute fixed" id="login-option-div">
+<div class="login-option-div absolute fixed" id="login-option-div">
-        <header class="grid">
+    <header>
-            <span class="flex align-center justify-center ">Sign in to</span>
+        <span class="flex align-center justify-center ">Sign in to</span>
-            <h1 class="flex align-center justify-center ">News Website</h1>
+    </header>
-        </header>
+    <h3> News Website </h3>
-
+    <div class="external-login-options">
-        <div class="google-facebook-links">
+        <div class="external-container">
-            <div class="external-login-container" id="googleBtn">
+            <div class="container" id="googleBtn">
-                <div class="external-login-botton google-login-button grid pointer">
+                <div class="inner-container google-btn grid pointer">
-                    <div class="icons8-google"></div>
+                    <figure class="icons8-google"></figure>
                     <label class="flex align-center justify-center pointer">Google</label>
                 </div>
             </div>
-            <!--! Facebook is curently unavailable-->
+        </div>
-            <!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
+        <div class="external-container">
-                <div class="external-login-botton facebook-login-button grid pointer">
+            <div class="container" id="facebook-btn">
+                <div class="inner-container facebook-btn">
                     <i class="fab fa-facebook fa-2x flex align-center justify-center"></i>                    
                     <label class="flex align-center justify-center pointer">Facebook</label>             
                 </div>
-            </div> -->
+            </div>
-            <div class="external-login-container" id="github-button">
+        </div>
-                <div class="external-login-botton github-login-button grid pointer">
+        <div class="external-container">
+            <div class="container">
+                <div class="inner-container github-btn" id="github-btn">
                     <i class="fa fa-github fa-2x flex align-center justify-center"></i>
                     <label class="flex align-center justify-center pointer">GitHub</label>
                 </div>
             </div>
-        </div>
+        </div>            
-        <hr>
-        <span class="or-login absolute">or</span>
-
-
-
-        <figure class="x-icon absolute flex align-center justify-center border-radius-50">
-            <i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
-        </figure>
-
-        <footer class="login-other-options">
-            <a href="signin.php" class="blue-link">Create Account</a>
-            <a href="login.php" class="blue-link">Log In</a>
-        </footer>
     </div>
+    <div class="seperate-line">
+        <div class="line"><hr></div>
+        <span>or</span>
+    </div>
+    <div class="other-login-options">
+        <a href="signup.php" class="blue-link">Create Account</a>
+        <a href="signin.php" class="blue-link">Log In</a>
+    </div>
+    <figure class="x-icon absolute flex align-center justify-center border-radius-50">
+        <i class="fal fa-times pointer" onclick="manageLoginOptions()"></i>
+    </figure>
+</div>

add-ons/navigation-bar.php

@@ -73,8 +73,8 @@
     </div>
 
     <div class="nav-right-side" id="navigation-bar-right">
-        <a href="#" class="login link" id="login-button" onclick="manageLoginOptions()">Log in</a>
+        <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">
+        <i class="profile-img-link relative  <?php if(!isset($_SESSION['id'])) echo 'disable'?>">
             <span>
             </span>
             <figure class="img border-radius-50"></figure>
@@ -88,8 +88,7 @@
                 <span class="tooltiptext-name">Nik Topler</span><br>
                 <span class="tooltiptext-name">nik.topler@gmail.com</span>
             </span>
-        </i> -->
+        </i>
-
     </div>
 
     <aside class="profile-extra-options grid absolute disable" id="profile-extra-options">

headlines.php

@@ -1,25 +1,23 @@
+<?php session_start(); ?>
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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="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">
-    <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/index.css">
     <link rel="stylesheet" href="CSS/responsive.css">
 
-
     <script src="JS/variables.js" defer></script>
     <script src="JS/responsive.js" defer></script>
     <script src="JS/show.js" defer></script>
     <script src="JS/diacritics.js" defer></script>
     <script src="JS/main.js" defer></script>
-    <script src="JS/sign.js" defer></script>
+    <script src="JS/signIn/external.js" defer></script>
 
     <script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
     <script src="JS/icon.js" defer></script>

include/db.inc.php

@@ -0,0 +1,17 @@
+<?php 
+
+    class Dbh {
+        private $host = 'localhost';
+        private $dbName   = 'NewsWebsite';
+        private $user   = 'root';
+        private $pwd = '';
+        private $charset = 'utf8mb4';
+
+        protected function connect() {
+            $dsn = 'mysql:host=' .$this->host. ';dbname=' .$this->dbName. ';charset=' .$this->charset ; 
+            $pdo = new PDO($dsn, $this->user, $this->pwd);
+            $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
+            return $pdo;
+        }
+    }
+

include/insert.inc.php

@@ -0,0 +1,131 @@
+<?php  include_once 'db.inc.php';
+
+class Login extends Dbh {
+
+    public function google($userInfo) {
+        require_once '../vendor/autoload.php';
+        $client = new Google_Client(['client_id' => $userInfo[2]]);
+        $payload = $client->verifyIdToken($userInfo[1]);
+        if (!$payload) {
+            echo 'error';
+            return;
+        } 
+
+        $userExist = $this->checkIfUserExists('google', $userInfo);
+        if($userExist == 'empty') $this->insert('google', $userInfo);
+        else if($userExist == 'ID') $this->updateID('googleID', $userInfo);
+        $this->setSessionVariables($userInfo[6]);
+        echo 'success';
+    }
+    public function facebook($userInfo) {
+        $userExist = $this->checkIfUserExists('facebook', $userInfo);
+        if($userExist == 'empty') $this->insert('facebook', $userInfo);
+        else if($userExist == 'ID') $this->updateID('facebookID', $userInfo);
+        $this->setSessionVariables($userInfo[6]);
+        echo 'success';
+    }
+
+    public function checkIfUserExists($type, $userInfo) {
+        
+        $sql = 'SELECT * FROM users WHERE email = ?';
+        $stmt = $this->connect()->prepare($sql);
+        $stmt->execute([$userInfo[6]]);
+        $row = $stmt->fetch();
+
+        if($type == 'google') $dbName = 'googleID';
+        else if($type == 'facebook') $dbName = 'facebookID';
+
+        if(!$row) return 'empty';
+        else if(password_verify($userInfo[0], $row[$dbName])) return 'full';
+        else return 'ID';
+    }
+    public function insert($type, $userInfo) {
+        if($type == 'google') {
+            $num = 2;
+            $sql = 'INSERT INTO users(name, surname, email, google_profile_img, googleID) VALUES(?, ?, ?, ?, ?)';
+            $hashGoogleID = password_hash($userInfo[0], PASSWORD_DEFAULT);
+            $array = [$userInfo[3], $userInfo[4], $userInfo[6], $userInfo[5], $hashGoogleID];
+        } else if ($type == 'facebook') {
+            $num = 3;
+            $sql = 'INSERT INTO users(name, surname, email, facebook_profile_img, facebookID) VALUES(?, ?, ?, ?, ?)';
+            $hashFacebookID = password_hash($userInfo[0], PASSWORD_DEFAULT);
+            $array = [$userInfo[3], $userInfo[4], $userInfo[6], $userInfo[5], $hashFacebookID];
+        }
+        $stmt = $this->connect()->prepare($sql);
+        $stmt->execute($array);
+
+        $this->updateProfileChoice($num, $userInfo[6]);
+    }
+    public function updateID($type, $userInfo) {
+        if($this->isIdSet($type, $userInfo) == 1) {
+            $hashID = password_hash($userInfo[0], PASSWORD_DEFAULT);
+            $sql = 'UPDATE users SET '.$type.'= ? WHERE email = ?';
+            $stmt = $this->connect()->prepare($sql);
+            $stmt->execute([$hashID, $userInfo[6]]);
+        }
+        if($type == 'googleID') $var = 'google_profile_img';
+        else if($type == 'facebookID') $var = 'facebook_profile_img';
+
+        $sql = 'UPDATE users SET '.$var.' = ? WHERE email = ?';
+        $stmt = $this->connect()->prepare($sql);
+        $stmt->execute([$userInfo[5], $userInfo[6]]);
+    } 
+    public function isIdSet($type, $userInfo) {
+
+        $sql = 'SELECT * FROM users WHERE email = ?';
+        $stmt = $this->connect()->prepare($sql);
+        $stmt->execute([$userInfo[6]]);
+        $row = $stmt->fetch();
+
+        return empty($row[$type]);
+    }
+    public function updateProfileChoice($num, $email) {
+        $sql = 'UPDATE users SET profile_choice = ? WHERE email = ?';
+        $stmt = $this->connect()->prepare($sql);
+        $stmt->execute([$num, $email]);
+    }
+    public function setSessionVariables($email) {
+        session_start();
+
+        $sql = 'SELECT * FROM users WHERE email = ?';
+        $stmt = $this->connect()->prepare($sql);
+        $stmt->execute([$email]);
+        $row = $stmt->fetch();
+
+        $_SESSION['id'] = $row['id'];
+        $_SESSION['name'] = $row['name'];
+        $_SESSION['surname'] = $row['surname'];
+        $_SESSION['email'] = $email;
+        $_SESSION['gender'] = $row['gender'];
+        $_SESSION['password_change'] = $row['password_change'];
+        $_SESSION['profile_img'] = $row['profile_img'];
+        $_SESSION['profile_color'] = $row['profile_color'];
+        $_SESSION['google_profile_img'] = $row['google_profile_img'];
+        $_SESSION['facebook_profile_img'] = $row['facebook_profile_img'];
+        $_SESSION['github_profile_img'] = $row['github_profile_img'];
+        $_SESSION['profile_choice'] = $row['profile_choice'];
+        $_SESSION['googleID'] = $this->checkIfStringNull($row['googleID']);
+        $_SESSION['facebookID'] = $this->checkIfStringNull($row['facebookID']);
+        $_SESSION['githubID'] = $this->checkIfStringNull($row['githubID']);
+        $_SESSION['country'] = $this->getCountryWithID($row['country_id']);
+    }
+
+    public function checkIfStringNull($string) { 
+        if($string == null) return 0;
+        else return 1;
+    }
+    public function getCountryWithID($countryID) {
+        $sql = 'SELECT * FROM countries WHERE id = ?';
+        $stmt = $this->connect()->prepare($sql);
+        $stmt->execute([$countryID]);
+        $row = $stmt->fetch();
+        $country = array($row['name'], $row['acronym']);
+        return $country;
+    }
+}
+
+$loginObj = new Login();
+
+if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
+else if(isset($_POST['google'])) $loginObj->google(json_decode($_POST['google']));
+else if(isset($_POST['facebook'])) $loginObj->facebook(json_decode($_POST['facebook']));

include/logout.inc.php

@@ -0,0 +1,4 @@
+<?php 
+    session_start(); 
+    session_unset(); 
+    session_destroy();

privateInfo.php

@@ -8,4 +8,5 @@ if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
 if(isset($_POST['images'])) echo $_ENV['IMAGE_API_KEY']; 
 else if(isset($_POST['user'])) echo $_ENV['USER_LOCATION_API_KEY'];
 else if(isset($_POST['weather'])) echo $_ENV['WEATHER_API_KEY'];
-else if(isset($_POST['news'])) echo $_ENV['NEWS_API_KEY'];
+else if(isset($_POST['news'])) echo $_ENV['NEWS_API_KEY'];
+else if(isset($_POST['google_client_id'])) echo $_ENV['GOOGLE_CLIENT_ID'];

search.php

@@ -1,12 +1,11 @@
+<?php session_start(); ?>
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
-    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
     <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"
+    <meta name="google-signin-client_id" content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
-        content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
 
     <link rel="stylesheet" href="CSS/colors.css">
     <link rel="stylesheet" href="CSS/*.css">
@@ -18,7 +17,7 @@
     <script src="JS/diacritics.js" defer></script>
     <script src="JS/main.js" defer></script>
     <script src="JS/show.js" defer></script>
-    <script src="JS/sign.js" defer></script>
+    <script src="JS/signIn/external.js" defer></script>
 
     <script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
     <script src="JS/icon.js" defer></script>
@@ -66,7 +65,7 @@
                                 <i class="far fa-bookmark"></i>
                                 <span>Save</span>
                             </div> 
-                            <div class="white-button" onclick="followNews(this)">
+                            <div class="white-button" onclick="follow(this)">
                                 <i class="far fa-star fa-lg"></i>
                                 <span>Follow</span>
                             </div>

signin.php

@@ -0,0 +1,66 @@
+<!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/signup.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>News Website</title>
+
+</head>
+<body>
+    
+    <main>
+        <div class="main-container">
+
+            <div class="logo-container">
+                <h1>Fews</h1>
+            </div>
+            <div class="sign-container">
+                <h1>Sign In</h1>
+            </div>
+            <div class="upper-container">
+               <span onclick="test()">Use Fews account to sign in</span>
+            </div> 
+
+            <div class="main-middle-conatiner">
+                <div class="email-container">
+                    <div>
+                        <input type="text" name="" id="">
+                    </div>
+                </div>
+                <div class="password-container">
+                    <div>
+                        <input type="text" name="" id="">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </main>
+    <script>
+        function test() {
+            let email = document.querySelector('.email-container')
+            let password = document.querySelector('.password-container')
+
+            if(!email.classList.contains('active')) {
+                email.classList.add('active')
+                password.classList.add('active')
+            } else {
+                email.classList.remove('active')
+                password.classList.remove('active')
+            }
+        }
+    </script>
+</body>
+</html>

topics/business.php

@@ -19,7 +19,7 @@
                             </div>
                             </div>
                             <div class="buttons">
-                                <div class="white-button follow topic" onclick="followCategory()">
+                                <div class="white-button follow topic" onclick="follow(this)">
                                     <i class="far fa-star fa-lg"></i>
                                     <span>Follow</span>
                                 </div>

topics/covid-19.php

@@ -19,7 +19,7 @@
                                 </div>
                                 </div>
                                 <div class="buttons">
-                                    <div class="white-button follow topic" onclick="followCategory()">
+                                    <div class="white-button follow topic" onclick="follow(this)">
                                         <i class="far fa-star fa-lg"></i>
                                         <span>Follow</span>
                                     </div>

topics/entertainment.php

@@ -19,7 +19,7 @@
                                 </div>
                                 </div>
                                 <div class="buttons">
-                                    <div class="white-button follow topic" onclick="followCategory()">
+                                    <div class="white-button follow topic" onclick="follow(this)">
                                         <i class="far fa-star fa-lg"></i>
                                         <span>Follow</span>
                                     </div>

topics/health.php

@@ -19,7 +19,7 @@
                                 </div>
                                 </div>
                                 <div class="buttons">
-                                    <div class="white-button follow topic" onclick="followCategory()">
+                                    <div class="white-button follow topic" onclick="follow(this)">
                                         <i class="far fa-star fa-lg"></i>
                                         <span>Follow</span>
                                     </div>

topics/sports.php

@@ -19,7 +19,7 @@
                                 </div>
                                 </div>
                                 <div class="buttons">
-                                    <div class="white-button follow topic" onclick="followCategory()">
+                                    <div class="white-button follow topic" onclick="follow(this)">
                                         <i class="far fa-star fa-lg"></i>
                                         <span>Follow</span>
                                     </div>

topics/technology.php

@@ -18,7 +18,7 @@
                             </div>
                             </div>
                             <div class="buttons">
-                                <div class="white-button follow topic" onclick="followCategory()">
+                                <div class="white-button follow topic" onclick="follow(this)">
                                     <i class="far fa-star fa-lg"></i>
                                     <span>Follow</span>
                                 </div>

topics/world.php

@@ -15,16 +15,16 @@
                                     <i class="fas fa-globe-europe fa-lg"></i>
                                 </div>
                             <div class="title">
-                                    <h2>World</h2>
+                                <h2>World</h2>
                             </div>
                             </div>
                             <div class="buttons">
-                                <div class="white-button follow topic" onclick="followCategory()">
+                                <div class="white-button follow topic" onclick="follow(this)">
                                     <i class="far fa-star fa-lg"></i>
                                     <span>Follow</span>
                                 </div>
                                 <div class="white-button share topic">
-                                        <i class="fas fa-share-alt fa-lg"></i>
+                                    <i class="fas fa-share-alt fa-lg"></i>
                                     <span>Share</span>
                                 </div>
                             </div>