diff --git a/._oauth.js b/._oauth.js new file mode 100755 index 0000000..187cff5 Binary files /dev/null and b/._oauth.js differ diff --git a/CSS/index.css b/CSS/index.css index a262bb2..3dc5a7f 100644 --- a/CSS/index.css +++ b/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{ - background-color: var(--hover-light); - } - .select-country .blue-link{ - font-weight: 500; - } + .x-icon:active{ background-color: var(--hover-light); } + .x-icon i { font-size: 1.125rem; } + + .select-country .blue-link { 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{ - padding: 0 20px; - } + .select-country .radio-button-container{ 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{ - width: 250px; - height: 300px; + .login-option-div { + display: flex; + 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{ - grid-row: 1/2; - grid-template-columns: 20px 1fr 20px; - grid-template-rows: 1fr 1fr; - } - .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 { + display: flex; + flex-direction: column; + margin-bottom: 0.5rem; } .login-option-div header span{ - grid-row: 1/2; - grid-column: 2/3; - font-size: 1.2rem; + font-size: 1.33rem; color: var(--font-very-dark); } - .google-facebook-links{ - grid-row: 2/4; - margin: auto 0; + .login-option-div h3 { + text-align: center; + 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 { - 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{ + .external-login-options { display: flex; + flex-direction: column; + min-width: fit-content; + padding-bottom: 3px; + margin-bottom: 0.5rem; } - .github-login-button{ - --color: var(--font-very-dark); - background-color: var(--font-very-dark); + .external-login-options .external-container { + height: 53px; + margin: 4px 0; } - .facebook-login-button{ - background-color: #4267B2; - } - .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%; + .external-login-options .container { + width: calc(100% - 2px); + border: 1px solid var(--color); 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 { - width: 96%; + .external-login-options .container .inner-container { + 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; - 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; + transition: all ease-in .2s; } + .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); + } diff --git a/CSS/signup.css b/CSS/signup.css new file mode 100644 index 0000000..3b9e183 --- /dev/null +++ b/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; +} + diff --git a/JS/main.js b/JS/main.js index 5d45e83..07e6a04 100644 --- a/JS/main.js +++ b/JS/main.js @@ -183,19 +183,38 @@ const suggest = { } const php = { - info : async(word) => { - const response = await fetch(`${pathLocation}privateInfo.php`, { + info : async (word) => { + 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() => { - const response = await fetch('include/session.inc.php', { + session : async () => { + 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') { - element.firstElementChild.classList.remove('far') - element.firstElementChild.classList.add('fas') - element.lastElementChild.textContent = 'Saved' - } else { - element.firstElementChild.classList.remove('fas') - element.firstElementChild.classList.add('far') - element.lastElementChild.textContent = 'Save' - } + if(element.lastElementChild.textContent === 'Save') fillIcons(element.firstElementChild, element.lastElementChild, 'Saved') + else emptyIcons(element.firstElementChild, element.lastElementChild, 'Save') //PHP } -function followNews(element) { +function followNews() { + //PHP +} +function followCategory() { + +} - if(element.lastElementChild.textContent === 'Follow') { - element.firstElementChild.classList.remove('far') - element.firstElementChild.classList.add('fas') - element.lastElementChild.textContent = 'Following' - } else { - element.firstElementChild.classList.remove('fas') - element.firstElementChild.classList.add('far') - element.lastElementChild.textContent = 'Follow' - } - //PHP +function fillIcons(icon, text, string) { + icon.classList.remove('far') + icon.classList.add('fas') + text.textContent = string +} +function emptyIcons(icon, text, string) { + icon.classList.add('far') + icon.classList.remove('fas') + text.textContent = string } /* 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); } \ No newline at end of file diff --git a/JS/responsive.js b/JS/responsive.js index 5c54339..083a34d 100644 --- a/JS/responsive.js +++ b/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')[1].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 = '' } else { - 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')[0].innerHTML = 'Following' + // document.querySelectorAll('.article-container .main-header .buttons .white-button span')[1].innerHTML = 'Share' } } diff --git a/JS/show.js b/JS/show.js index fa48011..494f835 100644 --- a/JS/show.js +++ b/JS/show.js @@ -137,3 +137,5 @@ function removeActiveSidebarCategory() { for(let i = 0; i < oldSelectedElements.length; i++) oldSelectedElements[i].classList.remove('active') } + + diff --git a/JS/sign.js b/JS/sign.js deleted file mode 100644 index b3509f3..0000000 --- a/JS/sign.js +++ /dev/null @@ -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 + '!'; -// // // }); -// // // } - - \ No newline at end of file diff --git a/JS/signIn/external.js b/JS/signIn/external.js new file mode 100644 index 0000000..f1d0901 --- /dev/null +++ b/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' + }); + }; diff --git a/JS/signIn/regular.js b/JS/signIn/regular.js new file mode 100644 index 0000000..e69de29 diff --git a/add-ons/footer-scripts.php b/add-ons/footer-scripts.php index b53d23d..ce88c59 100644 --- a/add-ons/footer-scripts.php +++ b/add-ons/footer-scripts.php @@ -1,3 +1,3 @@ - - + + diff --git a/add-ons/head.php b/add-ons/head.php index 265f5eb..144f4c3 100644 --- a/add-ons/head.php +++ b/add-ons/head.php @@ -1,24 +1,25 @@ + - - + + + - + diff --git a/add-ons/login.php b/add-ons/login.php index 6ad638e..9b491fd 100644 --- a/add-ons/login.php +++ b/add-ons/login.php @@ -1,41 +1,43 @@ -
-
- Sign in to -

News Website

-
- -
-
-
-
-
-
-
-

World

+

World

-