Updated signin/up system
This commit is contained in:
Nik Topler
parent
abe04218cb
commit
2520be24f0
21 changed files with 1224 additions and 5711 deletions
BIN
._oauth.js
BIN
._oauth.js
Binary file not shown.
|
|
@ -16,7 +16,7 @@ body{
|
|||
|
||||
.select-div{
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding: 0 0 0 5px;
|
||||
cursor: pointer;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
|
|
@ -39,18 +39,13 @@ body{
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
.select-options::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.select-options::-webkit-scrollbar { display: none; }
|
||||
.select-options div {
|
||||
font-size: 1rem;
|
||||
padding: 10px;
|
||||
color: var(--userTextInput);
|
||||
}
|
||||
.selected-option { background-color: var(--hover-light); }
|
||||
/* .selected-option:active {
|
||||
transition: all ease-in .18s;
|
||||
} */
|
||||
|
||||
/*? Reusable classes */
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,22 @@
|
|||
.title-container .title h2 { font-size: 1.5rem ; }
|
||||
.white-button.topic { padding: 6px 10px; }
|
||||
|
||||
/* Sign up */
|
||||
.double.psw .eye-icon-container { display: none; }
|
||||
.double.psw .psw-repeat-container { margin: 0; }
|
||||
.sign-container h1 { font-size: 1.5rem; }
|
||||
|
||||
}
|
||||
@media screen and (max-width: 360px) {
|
||||
.main-content-section.full .main-header .title-container { flex-grow: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Sign In */
|
||||
@media screen and (max-width: 600px) {
|
||||
.main-container {
|
||||
min-width: calc(100% - 40px);
|
||||
padding: 40px;
|
||||
/* border: none; */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
215
CSS/signin.css
Normal file
215
CSS/signin.css
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
a {
|
||||
color: var(--blue-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
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;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main-container {
|
||||
min-width: 400px;
|
||||
height: auto;
|
||||
min-height: 400px;
|
||||
padding: 40px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
.logo-container { margin: 0 auto; }
|
||||
.sign-container,.sign-container h1 {
|
||||
margin: auto;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.main-middle-conatiner {
|
||||
display: flex;
|
||||
min-height: 310px;
|
||||
position: relative;
|
||||
margin-top: 2.6rem;
|
||||
}
|
||||
.email-container {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: all ease-in-out .2s;
|
||||
z-index: 1000;
|
||||
}
|
||||
.password-container {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
left: 12%;
|
||||
top: 0;
|
||||
z-index: -1000;
|
||||
transition: all ease-in-out .2s;
|
||||
}
|
||||
|
||||
.email-container.active {
|
||||
left: -5%;
|
||||
opacity: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
.password-container.active {
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.input-container {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.input-container input {
|
||||
height: 56px;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #dedfe0;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
outline-width: 0;
|
||||
font-weight: 400;
|
||||
color: #090a0acb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input-container .label-container {
|
||||
position: absolute;
|
||||
font-size: 1.1rem;
|
||||
height: 1.1rem;
|
||||
top: calc(50% - 0.55rem);
|
||||
bottom: calc(50% - 0.55rem);
|
||||
left: 1.25rem;
|
||||
color: var(--font-medium);
|
||||
transition: all ease-in-out .16s;
|
||||
background-color: var(--bg);
|
||||
padding: 0 5px;
|
||||
cursor: text;
|
||||
}
|
||||
.input-container .label-container label,
|
||||
.input-container input { cursor: text; }
|
||||
.input-container .label-container.active {
|
||||
font-size: 0.8rem;
|
||||
top: -0.4rem;
|
||||
}
|
||||
.google-blue { color: var(--google-blue) !important; }
|
||||
.input-container input.active { border: 1px solid var(--google-blue); }
|
||||
|
||||
.forget-container {
|
||||
margin-top: 7px;
|
||||
}
|
||||
.forget-container a {
|
||||
font-weight: 500;
|
||||
}
|
||||
.main-middle-conatiner .text {
|
||||
margin-top: 2.5rem;
|
||||
color: var(--font-dark);
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
min-width: 100%;
|
||||
padding: 10px 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.button-container .inner-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
.button-container .inner-container:first-of-type {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.blue-button {
|
||||
padding: 10px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--blue-medium);
|
||||
border-radius: 0.25rem;
|
||||
color: var(--bg);
|
||||
transition: all ease-in-out .15;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-container .blue-button:hover { background-color: var(--blue-dark); }
|
||||
|
||||
|
||||
.main-middle-conatiner .error {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.main-middle-conatiner .error .red {
|
||||
color: var(--red-medium);
|
||||
font-size: 12px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.main-middle-conatiner .error .red i {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.upper-container {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.upper-container span {
|
||||
padding: 5px 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.upper-container .profile {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
.upper-container .profile div {
|
||||
padding: 5px 8px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 6rem;
|
||||
min-width: auto;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out .2;
|
||||
}
|
||||
.upper-container .profile span {
|
||||
font-size: 1rem;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.upper-container .profile i { font-size: 0.9rem; }
|
||||
.upper-container .profile span,
|
||||
.upper-container .profile i { color: var(--font-dark); }
|
||||
.upper-container .profile div:hover { background-color: var(--very-light-grey); }
|
||||
|
||||
.eye-icon-container {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: calc(50% - 1.25rem);
|
||||
bottom: calc(50% - 1.25rem);
|
||||
min-height: 2.5rem;
|
||||
min-width: 2.5rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.eye-icon-container:active { background-color: var(--hover-light); }
|
||||
.eye-icon-container div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.eye-icon-container i { color: var(--font-medium); }
|
||||
|
||||
|
||||
/* Error handeling */
|
||||
.main-middle-conatiner .error-red { color: var(--red-medium) !important; }
|
||||
.main-middle-conatiner .error-red-border { border: 1px solid var(--red-medium) !important; }
|
||||
203
CSS/signup.css
203
CSS/signup.css
|
|
@ -1,3 +1,7 @@
|
|||
a {
|
||||
color: var(--blue-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -7,58 +11,175 @@ main {
|
|||
font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif;
|
||||
background-color: var(--bg);
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
.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;
|
||||
height: auto;
|
||||
width: 420px;
|
||||
min-height: 400px;
|
||||
padding: 40px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 0.5rem;
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 310px;
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.email-container {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transition: all ease-in-out .2;
|
||||
background-color: rebeccapurple;
|
||||
.main-middle-conatiner .double {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.password-container {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
background-color: green;
|
||||
transition: all ease-in-out .2;
|
||||
.name-container,
|
||||
.surname-container,
|
||||
.psw-container,
|
||||
.psw-repeat-container {
|
||||
width: 100%;
|
||||
}
|
||||
.email-container.active {
|
||||
right: 100%;
|
||||
left: -100%;
|
||||
}
|
||||
.password-container.active {
|
||||
left: 0;
|
||||
.name-container { margin-right: 10px; }
|
||||
.surnname-container { margin-left: 10px; }
|
||||
|
||||
.sign-container { margin-top: 10px; }
|
||||
.sign-container h1 { font-size: 1.8rem; }
|
||||
|
||||
|
||||
.input-container {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-container input {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #dedfe0;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
outline-width: 0;
|
||||
font-weight: 400;
|
||||
color: #090a0acb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input-container .label-container {
|
||||
position: absolute;
|
||||
font-size: 1.1rem;
|
||||
height: 1.1rem;
|
||||
top: calc(50% - 0.55rem);
|
||||
bottom: calc(50% - 0.55rem);
|
||||
left: 0.4rem;
|
||||
color: var(--font-medium);
|
||||
transition: all ease-in-out .16s;
|
||||
background-color: var(--bg);
|
||||
padding: 0 5px;
|
||||
cursor: text;
|
||||
}
|
||||
.input-container .label-container.active {
|
||||
font-size: 0.75rem;
|
||||
top: -0.4rem;
|
||||
}
|
||||
|
||||
.email-container, .double.psw { margin-top: 1rem; }
|
||||
.psw-container,
|
||||
.psw-repeat-container {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.eye-icon-container {
|
||||
min-height: 2.5rem;
|
||||
min-width: 2.5rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.eye-icon-container:active {
|
||||
background-color: var(--hover-light);
|
||||
}
|
||||
.eye-icon-container div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.eye-icon-container i { color: var(--font-medium); }
|
||||
|
||||
.text {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.select-div {
|
||||
width: fit-content;
|
||||
min-height: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.option-icon-select {
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.option-icon-select::after {
|
||||
content: '';
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 6px solid var(--font-dark);
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
.country-select {
|
||||
min-width: 8rem;
|
||||
height: 10rem;
|
||||
overflow: auto;
|
||||
}
|
||||
.google-blue { color: var(--google-blue) !important; }
|
||||
.input-container input.active { border: 1px solid var(--google-blue); }
|
||||
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
min-width: 100%;
|
||||
padding: 10px 0;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.button-container .inner-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
.button-container .inner-container:first-of-type {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.blue-button {
|
||||
padding: 10px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--blue-medium);
|
||||
border-radius: 0.25rem;
|
||||
color: var(--bg);
|
||||
transition: all ease-in-out .15;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-container .blue-button:hover { background-color: var(--blue-dark); }
|
||||
.main-middle-conatiner .error .red {
|
||||
color: var(--red-medium);
|
||||
font-size: 12px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.main-middle-conatiner .error.result .red {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.main-middle-conatiner .error .red i { font-size: 0.9rem; }
|
||||
|
||||
/* Error handeling */
|
||||
.main-middle-conatiner .error-red { color: var(--red-medium) !important; }
|
||||
.main-middle-conatiner .error-red-border { border: 1px solid var(--red-medium) !important; }
|
||||
|
|
@ -274,6 +274,8 @@ window.onload = async () => {
|
|||
hideExtraSearchOptions()
|
||||
hideSuggestWords()
|
||||
|
||||
if(window.location.hash === '#login') manageLoginOptions()
|
||||
|
||||
document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' })
|
||||
|
||||
error.window()
|
||||
|
|
|
|||
|
|
@ -120,12 +120,6 @@ function manageLoginOptions() {
|
|||
}
|
||||
}
|
||||
|
||||
function resetExtraSearchOptions() {
|
||||
indexTimeLabel.innerHTML = 'Anytime'
|
||||
for(let i = 0; i < 3; i++)
|
||||
document.querySelectorAll('.extra-search-options > div > input')[i].value = ''
|
||||
}
|
||||
|
||||
function sidebarCategorySelect(selectedElement) {
|
||||
if(selectedElement.classList.contains('active')) return
|
||||
selectedElement.classList.add('active')
|
||||
|
|
|
|||
|
|
@ -30,23 +30,23 @@
|
|||
|
||||
/** 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")
|
||||
})
|
||||
})
|
||||
}
|
||||
// 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 */
|
||||
|
|
|
|||
163
JS/signIn/signin.js
Normal file
163
JS/signIn/signin.js
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
const email = document.querySelector('.email-container')
|
||||
const password = document.querySelector('.password-container')
|
||||
|
||||
const emailInput = document.getElementById('email-input')
|
||||
const passwordInput = document.getElementById('password-input')
|
||||
|
||||
const websiteURL = 'http://localhost:8080/News-website/'
|
||||
|
||||
emailInput.onfocus = () => {
|
||||
email.querySelector('.label-container').classList.add('active')
|
||||
email.querySelector('.label-container').classList.add('google-blue')
|
||||
emailInput.classList.add('active')
|
||||
}
|
||||
emailInput.onblur = () => {
|
||||
if(emailInput.value.length === 0) {
|
||||
email.querySelector('.label-container').classList.remove('active')
|
||||
email.querySelector('.label-container').classList.remove('google-blue')
|
||||
emailInput.classList.remove('active')
|
||||
} else {
|
||||
email.querySelector('.label-container').classList.remove('google-blue')
|
||||
emailInput.classList.remove('active')
|
||||
}
|
||||
}
|
||||
passwordInput.onfocus = () => {
|
||||
password.querySelector('.label-container').classList.add('active')
|
||||
password.querySelector('.label-container').classList.add('google-blue')
|
||||
passwordInput.classList.add('active')
|
||||
}
|
||||
passwordInput.onblur = () => {
|
||||
if(passwordInput.value.length === 0) {
|
||||
password.querySelector('.label-container').classList.remove('active')
|
||||
password.querySelector('.label-container').classList.remove('google-blue')
|
||||
passwordInput.classList.remove('active')
|
||||
} else {
|
||||
password.querySelector('.label-container').classList.remove('google-blue')
|
||||
passwordInput.classList.remove('active')
|
||||
}
|
||||
}
|
||||
|
||||
function switchLoginBox() {
|
||||
|
||||
if(!email.classList.contains('active')) {
|
||||
email.classList.add('active')
|
||||
password.classList.add('active')
|
||||
resetPsw()
|
||||
} else {
|
||||
email.classList.remove('active')
|
||||
password.classList.remove('active')
|
||||
setupSubHeading()
|
||||
}
|
||||
}
|
||||
async function checkEmail() {
|
||||
array = JSON.stringify([emailInput.value.trim()])
|
||||
const res = await fetch('include/check.inc.php', {
|
||||
method: "POST",
|
||||
body: createFormData('email', array)
|
||||
})
|
||||
const data = await res.text()
|
||||
|
||||
if(errorHandelingEmail(data) === true) switchLoginBox()
|
||||
setupProfile()
|
||||
}
|
||||
|
||||
const errorPswContainer = document.querySelector('.error.psw')
|
||||
async function checkPassword() {
|
||||
if(passwordInput.value.length === 0) {
|
||||
errorPswContainer.classList.remove('disable')
|
||||
errorPswContainer.firstElementChild.innerHTML = `${icon} Field password must not be empty`;
|
||||
passwordInput.classList.add('error-red-border')
|
||||
password.querySelector('label').classList.add('error-red')
|
||||
return
|
||||
}
|
||||
array = JSON.stringify([emailInput.value.trim(), passwordInput.value.trim()])
|
||||
const res = await fetch('include/check.inc.php', {
|
||||
method: "POST",
|
||||
body: createFormData('login', array)
|
||||
})
|
||||
const data = await res.text()
|
||||
|
||||
if(data === 'success') urlOpen('')
|
||||
else if(data == 'wrong password') {
|
||||
errorPswContainer.classList.remove('disable')
|
||||
errorPswContainer.firstElementChild.innerHTML = `${icon} Incorrect password`;
|
||||
passwordInput.classList.add('error-red-border')
|
||||
password.querySelector('label').classList.add('error-red')
|
||||
}
|
||||
}
|
||||
|
||||
function setupProfile() {
|
||||
const upperContainer = document.getElementById('upper-container')
|
||||
upperContainer.firstElementChild.classList.add('disable')
|
||||
upperContainer.lastElementChild.classList.remove('disable')
|
||||
upperContainer.lastElementChild.firstElementChild.querySelector('span').innerHTML = emailInput.value
|
||||
}
|
||||
function setupSubHeading() {
|
||||
const upperContainer = document.getElementById('upper-container')
|
||||
upperContainer.firstElementChild.classList.remove('disable')
|
||||
upperContainer.lastElementChild.classList.add('disable')
|
||||
upperContainer.lastElementChild.firstElementChild.querySelector('span').innerHTML = ''
|
||||
}
|
||||
|
||||
const errorContainer = document.querySelector('.error')
|
||||
const icon = `<i class="fas fa-exclamation-circle fa-lg"></i>`
|
||||
|
||||
function errorHandelingEmail(data) {
|
||||
if(data === `user exists`) return true
|
||||
|
||||
if(emailInput.value.length === 0) errorContainer.firstElementChild.innerHTML = `${icon} Enter your email adress`
|
||||
else if(!validateEmail(emailInput.value.trim())) errorContainer.firstElementChild.innerHTML = `${icon} Email address doesn't exist`
|
||||
else if(data === `user doesn't exist`) errorContainer.firstElementChild.innerHTML = `${icon} There is no user with this email`
|
||||
else if(data === `google user doesn't have password set up`) {
|
||||
errorContainer.firstElementChild.innerHTML = `${icon} No set up password`
|
||||
errorContainer.lastElementChild.classList.remove('disable')
|
||||
errorContainer.lastElementChild.innerHTML = `You have logged in with your Google account, but you didn't set up your password.`
|
||||
} else if(data === `facebook user doesn't have password set up`) {
|
||||
errorContainer.firstElementChild.innerHTML = `${icon} No set up password`
|
||||
errorContainer.lastElementChild.classList.remove('disable')
|
||||
errorContainer.lastElementChild.innerHTML = `You have logged in with your Facebook account, but you didn't set up your password.`
|
||||
} else if(data === `github user doesn't have password set up`) {
|
||||
errorContainer.firstElementChild.innerHTML = `${icon} No set up password`
|
||||
errorContainer.lastElementChild.classList.remove('disable')
|
||||
errorContainer.lastElementChild.innerHTML = `You have logged in with your Facebook account, but you didn't set up your password.`
|
||||
}
|
||||
errorContainer.classList.remove('disable')
|
||||
email.querySelector('.label-container').classList.add('error-red')
|
||||
emailInput.classList.add('error-red-border')
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
function validateEmail(email) {
|
||||
let mailformat = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/
|
||||
if (email.match(mailformat)) return true
|
||||
else return false
|
||||
}
|
||||
function createFormData(word, data) {
|
||||
let formData = new FormData
|
||||
formData.append(word, data)
|
||||
return formData
|
||||
}
|
||||
|
||||
function urlOpen(string) { window.location.replace(`${websiteURL}headlines.php${string}`) }
|
||||
|
||||
element = document.querySelector('.eye-icon-container')
|
||||
|
||||
function managePswVisibility() {
|
||||
if(element.firstElementChild.firstElementChild.classList.contains('disable')) {
|
||||
element.firstElementChild.firstElementChild.classList.remove('disable')
|
||||
element.firstElementChild.lastElementChild.classList.add('disable')
|
||||
passwordInput.type = 'text'
|
||||
} else {
|
||||
element.firstElementChild.firstElementChild.classList.add('disable')
|
||||
element.firstElementChild.lastElementChild.classList.remove('disable')
|
||||
passwordInput.type = 'password'
|
||||
}
|
||||
}
|
||||
|
||||
function resetPsw() {
|
||||
passwordInput.value = ''
|
||||
element.firstElementChild.firstElementChild.classList.add('disable')
|
||||
element.firstElementChild.lastElementChild.classList.remove('disable')
|
||||
passwordInput.type = 'password'
|
||||
}
|
||||
301
JS/signIn/signup.js
Normal file
301
JS/signIn/signup.js
Normal file
|
|
@ -0,0 +1,301 @@
|
|||
const name = document.querySelector('.name-container')
|
||||
const surname = document.querySelector('.surname-container')
|
||||
const email = document.querySelector('.email-container')
|
||||
const psw = document.querySelector('.psw-container')
|
||||
const pswRepeat = document.querySelector('.psw-repeat-container')
|
||||
|
||||
const nameInput = document.getElementById('name-input')
|
||||
const surnameInput = document.getElementById('surname-input')
|
||||
const emailInput = document.getElementById('email-input')
|
||||
const pswInput = document.getElementById('psw-input')
|
||||
const pswRepeatInput = document.getElementById('psw-repeat-input')
|
||||
|
||||
const countries = ['Arab Emirates','Argentina','Australia','Austria','Belgium','Brasil','Bulgaria','Canada','China','Colombia','Cuba','Czech Republic','Egypt','England','France','Germany','Greece','Hong Kong','Hungary','Indonesia','Ireland','Israel','Italy','Japan','Latvia','Lithuania','Malaysia','Mexico','Morocco','Netherlands','New Zealand','Nigeria','Norway','Philippines','Poland','Portugal','Romania','Russia','Saudia Arabia','Serbia','Singapore','Slovakia','Slovenia','South Africa','South Korea','Sweden','Switzerland','Taiwan','Thailand','Turkey','Ukraine','United States','Venezuela']
|
||||
|
||||
nameInput.onfocus = () => {
|
||||
name.querySelector('.label-container').classList.add('active')
|
||||
name.querySelector('.label-container').classList.add('google-blue')
|
||||
nameInput.classList.add('active')
|
||||
}
|
||||
nameInput.onblur = () => {
|
||||
if(nameInput.value.length === 0) {
|
||||
name.querySelector('.label-container').classList.remove('active')
|
||||
name.querySelector('.label-container').classList.remove('google-blue')
|
||||
nameInput.classList.remove('active')
|
||||
} else {
|
||||
name.querySelector('.label-container').classList.remove('google-blue')
|
||||
nameInput.classList.remove('active')
|
||||
}
|
||||
}
|
||||
surnameInput.onfocus = () => {
|
||||
surname.querySelector('.label-container').classList.add('active')
|
||||
surname.querySelector('.label-container').classList.add('google-blue')
|
||||
surnameInput.classList.add('active')
|
||||
}
|
||||
surnameInput.onblur = () => {
|
||||
if(surnameInput.value.length === 0) {
|
||||
surname.querySelector('.label-container').classList.remove('active')
|
||||
surname.querySelector('.label-container').classList.remove('google-blue')
|
||||
surnameInput.classList.remove('active')
|
||||
} else {
|
||||
surname.querySelector('.label-container').classList.remove('google-blue')
|
||||
surnameInput.classList.remove('active')
|
||||
}
|
||||
}
|
||||
|
||||
emailInput.onfocus = () => {
|
||||
email.querySelector('.label-container').classList.add('active')
|
||||
email.querySelector('.label-container').classList.add('google-blue')
|
||||
emailInput.classList.add('active')
|
||||
}
|
||||
emailInput.onblur = () => {
|
||||
if(emailInput.value.length === 0) {
|
||||
email.querySelector('.label-container').classList.remove('active')
|
||||
email.querySelector('.label-container').classList.remove('google-blue')
|
||||
emailInput.classList.remove('active')
|
||||
} else {
|
||||
email.querySelector('.label-container').classList.remove('google-blue')
|
||||
emailInput.classList.remove('active')
|
||||
}
|
||||
}
|
||||
pswInput.onfocus = () => {
|
||||
psw.querySelector('.label-container').classList.add('active')
|
||||
psw.querySelector('.label-container').classList.add('google-blue')
|
||||
pswInput.classList.add('active')
|
||||
}
|
||||
pswInput.onblur = () => {
|
||||
if(pswInput.value.length === 0) {
|
||||
psw.querySelector('.label-container').classList.remove('active')
|
||||
psw.querySelector('.label-container').classList.remove('google-blue')
|
||||
pswInput.classList.remove('active')
|
||||
} else {
|
||||
psw.querySelector('.label-container').classList.remove('google-blue')
|
||||
pswInput.classList.remove('active')
|
||||
}
|
||||
}
|
||||
pswRepeatInput.onfocus = () => {
|
||||
pswRepeat.querySelector('.label-container').classList.add('active')
|
||||
pswRepeat.querySelector('.label-container').classList.add('google-blue')
|
||||
pswRepeatInput.classList.add('active')
|
||||
}
|
||||
pswRepeatInput.onblur = () => {
|
||||
if(pswRepeatInput.value.length === 0) {
|
||||
pswRepeat.querySelector('.label-container').classList.remove('active')
|
||||
pswRepeat.querySelector('.label-container').classList.remove('google-blue')
|
||||
pswRepeatInput.classList.remove('active')
|
||||
} else {
|
||||
pswRepeat.querySelector('.label-container').classList.remove('google-blue')
|
||||
pswRepeatInput.classList.remove('active')
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
generateCountries()
|
||||
}
|
||||
|
||||
const indexCountrySelect = document.getElementById('index-country-select')
|
||||
const indexCountryLabel = document.getElementById('index-country-label')
|
||||
|
||||
function manageOptionSelect() {
|
||||
if(indexCountrySelect.classList.contains('disable')){
|
||||
indexCountrySelect.classList.remove('disable')
|
||||
showCountrySelect()
|
||||
}
|
||||
else indexCountrySelect.classList.add('disable')
|
||||
}
|
||||
function showCountrySelect() {
|
||||
let selectedValue
|
||||
for(let i = 0; i < countries.length; i++) {
|
||||
if(indexCountrySelect.children[i].innerHTML === indexCountryLabel.innerHTML) {
|
||||
indexCountrySelect.children[i].classList.add('selected-option')
|
||||
selectedValue = i
|
||||
}
|
||||
indexCountrySelect.children[i].onmouseenter = () => { eventHandelerForCountrySelect(indexCountrySelect.children[i],'enter') }
|
||||
indexCountrySelect.children[i].onmouseleave = () => { eventHandelerForCountrySelect(indexCountrySelect.children[i],'leave') }
|
||||
}
|
||||
return selectedValue
|
||||
}
|
||||
function selectValue(selectedElement) {
|
||||
event.stopPropagation()
|
||||
indexCountryLabel.innerHTML = selectedElement.innerHTML
|
||||
indexCountrySelect.classList.add('disable')
|
||||
}
|
||||
let countrySelectValueArray = []
|
||||
function eventHandelerForCountrySelect(element, command) {
|
||||
countrySelectValueArray.push(command)
|
||||
removeEveryChildsClass(element.parentElement,'selected-option')
|
||||
if(command == 'enter' || countrySelectValueArray[countrySelectValueArray.length - 1] == 'leave') element.classList.add('selected-option')
|
||||
}
|
||||
function removeEveryChildsClass(parent,className) {
|
||||
for(let i = 0; i < parent.children.length; i++)
|
||||
parent.children[i].classList.remove(className)
|
||||
}
|
||||
function generateCountries() {
|
||||
for(let i = 0; i < countries.length; i++) {
|
||||
let div = document.createElement('div')
|
||||
div.onclick = () => { selectValue(div) }
|
||||
div.innerHTML = countries[i]
|
||||
indexCountrySelect.appendChild(div)
|
||||
}
|
||||
}
|
||||
function managePasswordVisibility(element) {
|
||||
if(element.firstElementChild.firstElementChild.classList.contains('disable')) {
|
||||
element.firstElementChild.firstElementChild.classList.remove('disable')
|
||||
element.firstElementChild.lastElementChild.classList.add('disable')
|
||||
pswInput.type = 'text'
|
||||
pswRepeatInput.type = 'text'
|
||||
|
||||
} else {
|
||||
element.firstElementChild.firstElementChild.classList.add('disable')
|
||||
element.firstElementChild.lastElementChild.classList.remove('disable')
|
||||
pswInput.type = 'password'
|
||||
pswRepeatInput.type = 'password'
|
||||
}
|
||||
}
|
||||
const websiteURL = 'http://localhost:8080/News-website/'
|
||||
|
||||
function urlOpen(string) { window.location.replace(`${websiteURL}headlines.php${string}`) }
|
||||
|
||||
|
||||
async function register() {
|
||||
let firstName = nameInput.value.trim()
|
||||
let lastName = surnameInput.value.trim()
|
||||
let email = emailInput.value.trim()
|
||||
let password = pswInput.value.trim()
|
||||
let passwordRepeat = pswRepeatInput.value.trim()
|
||||
let country = indexCountryLabel.innerHTML.trim()
|
||||
error.reset()
|
||||
if(error.before(firstName, lastName, email, password, passwordRepeat, country) === false) return
|
||||
insertToDB(firstName, lastName, email, password, passwordRepeat, country)
|
||||
}
|
||||
async function insertToDB(firstName, lastName, email, password, passwordRepeat, country) {
|
||||
array = JSON.stringify([firstName, lastName, email, password, passwordRepeat, country])
|
||||
const res = await fetch('include/insert.inc.php', {
|
||||
method: "POST",
|
||||
body: createFormData('standard', array)
|
||||
})
|
||||
const data = await res.text()
|
||||
error.after(data)
|
||||
}
|
||||
const icon = `<i class="fas fa-exclamation-circle fa-lg"></i>`
|
||||
const nameError = document.querySelector('.error.name')
|
||||
const emailError = document.querySelector('.error.email')
|
||||
const pswError = document.querySelector('.error.psw')
|
||||
const countryError = document.querySelector('.error.country')
|
||||
const resultError = document.querySelector('.error.result')
|
||||
|
||||
|
||||
const error = {
|
||||
reset : () => {
|
||||
nameError.classList.add('disable')
|
||||
nameError.firstElementChild.innerHTML = ""
|
||||
nameInput.classList.remove('error-red-border')
|
||||
name.querySelector('label').classList.remove('error-red')
|
||||
emailError.classList.add('disable')
|
||||
emailError.firstElementChild.innerHTML = ""
|
||||
emailInput.classList.remove('error-red-border')
|
||||
email.querySelector('label').classList.remove('error-red')
|
||||
pswError.classList.add('disable')
|
||||
pswError.firstElementChild.innerHTML = ""
|
||||
pswInput.classList.remove('error-red-border')
|
||||
psw.querySelector('label').classList.remove('error-red')
|
||||
pswRepeatInput.classList.remove('error-red-border')
|
||||
pswRepeat.querySelector('label').classList.remove('error-red')
|
||||
countryError.classList.add('disable')
|
||||
countryError.firstElementChild.innerHTML = ""
|
||||
resultError.classList.add('disable')
|
||||
},
|
||||
before : (FirstName, LastName, Email, Password, PasswordRepeat, Country) => {
|
||||
let num = 0
|
||||
if(FirstName.length === 0 || LastName.length === 0) {
|
||||
nameError.classList.remove('disable')
|
||||
if(FirstName.length === 0 && LastName.length === 0) {
|
||||
nameError.firstElementChild.innerHTML = `${icon} Name and Surname must not be empty`
|
||||
nameInput.classList.add('error-red-border')
|
||||
name.querySelector('label').classList.add('error-red')
|
||||
surnameInput.classList.add('error-red-border')
|
||||
surname.querySelector('label').classList.add('error-red')
|
||||
} else if(FirstName.length !== 0 && LastName.length === 0) {
|
||||
nameError.firstElementChild.innerHTML = `${icon} Surname must not be empty`
|
||||
surnameInput.classList.add('error-red-border')
|
||||
surname.querySelector('label').classList.add('error-red')
|
||||
} else if(FirstName.length === 0 && LastName.length !== 0) {
|
||||
nameError.firstElementChild.innerHTML = `${icon} Name must not be empty`
|
||||
nameInput.classList.add('error-red-border')
|
||||
name.querySelector('label').classList.add('error-red')
|
||||
}
|
||||
num = num++
|
||||
}
|
||||
if(Email.length === 0 || validateEmail(Email) === false) {
|
||||
if(validateEmail(Email) === false) emailError.firstElementChild.innerHTML = `${icon} Incorrect email format`
|
||||
else emailError.firstElementChild.innerHTML = `${icon} Field email must be filled`
|
||||
emailError.classList.remove('disable')
|
||||
emailInput.classList.add('error-red-border')
|
||||
email.querySelector('label').classList.add('error-red')
|
||||
num = num++
|
||||
}
|
||||
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('')
|
||||
|
||||
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>`
|
||||
else if(data === 'incorrect email') {
|
||||
emailError.firstElementChild.innerHTML = `${icon} Incorrect email format`
|
||||
emailError.classList.remove('disable')
|
||||
emailInput.classList.add('error-red-border')
|
||||
email.querySelector('label').classList.add('error-red')
|
||||
} else if(data === `passwords don't match`) {
|
||||
pswError.firstElementChild.innerHTML = `${icon} Passwords do not match`
|
||||
pswInput.classList.add('error-red-border')
|
||||
psw.querySelector('label').classList.add('error-red')
|
||||
pswRepeatInput.classList.add('error-red-border')
|
||||
pswRepeat.querySelector('label').classList.add('error-red')
|
||||
}
|
||||
}
|
||||
}
|
||||
function createFormData(word, data) {
|
||||
let formData = new FormData
|
||||
formData.append(word, data)
|
||||
return formData
|
||||
}
|
||||
|
||||
function validateEmail(email) {
|
||||
let mailformat = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/
|
||||
if (email.match(mailformat)) return true
|
||||
else return false
|
||||
}
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
<script src="https://apis.google.com/js/api:client.js"></script>
|
||||
<script src="oauth.js"></script>
|
||||
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<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, height=device-height, initial-scale=1.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">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<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, height=device-height, initial-scale=1.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">
|
||||
|
|
|
|||
47
include/check.inc.php
Normal file
47
include/check.inc.php
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<?php include_once 'db.inc.php';
|
||||
|
||||
class Check extends Dbh {
|
||||
|
||||
public function email($userInfo) {
|
||||
$sql = 'SELECT * FROM users WHERE email = ?';
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute([$userInfo[0]]);
|
||||
$row = $stmt->fetch();
|
||||
if(isset($_POST['email'])) {
|
||||
if($row) {
|
||||
if($row['password'] == null) {
|
||||
if($row['googleID'] != null) echo "google user doesn't have password set up";
|
||||
else if($row['facebookID'] != null) echo "facebook user doesn't have password set up";
|
||||
else if($row['githubID'] != null) echo "github user doesn't have password set up";
|
||||
} else echo 'user exists';
|
||||
|
||||
} else echo "user doesn't exist";
|
||||
return;
|
||||
}
|
||||
}
|
||||
public function login($userInfo) {
|
||||
if(!filter_var($userInfo[0], FILTER_VALIDATE_EMAIL)) {
|
||||
echo 'error email';
|
||||
return;
|
||||
}
|
||||
|
||||
$sql = 'SELECT * FROM users WHERE email = ?';
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute([$userInfo[0]]);
|
||||
$row = $stmt->fetch();
|
||||
|
||||
if(password_verify($userInfo[1], $row['password'])) {
|
||||
include_once 'session.inc.php';
|
||||
$session = new Session();
|
||||
$session->setSession($userInfo[0]);
|
||||
echo 'success';
|
||||
} else echo 'wrong password';
|
||||
}
|
||||
}
|
||||
|
||||
$checkObj = new Check();
|
||||
|
||||
if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
|
||||
if(isset($_POST['email'])) $checkObj->email(json_decode($_POST['email']));
|
||||
else if(isset($_POST['login'])) $checkObj->login(json_decode($_POST['login']));
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<?php include_once 'db.inc.php';
|
||||
|
||||
class Login extends Dbh {
|
||||
class Login extends Dbh{
|
||||
|
||||
public function google($userInfo) {
|
||||
require_once '../vendor/autoload.php';
|
||||
|
|
@ -11,21 +11,21 @@ class Login extends Dbh {
|
|||
return;
|
||||
}
|
||||
|
||||
$userExist = $this->checkIfUserExists('google', $userInfo);
|
||||
$userExist = $this->checkIfUserExistsExternal('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);
|
||||
$userExist = $this->checkIfUserExistsExternal('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) {
|
||||
public function checkIfUserExistsExternal($type, $userInfo) {
|
||||
|
||||
$sql = 'SELECT * FROM users WHERE email = ?';
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
|
|
@ -42,19 +42,29 @@ class Login extends Dbh {
|
|||
public function insert($type, $userInfo) {
|
||||
if($type == 'google') {
|
||||
$num = 2;
|
||||
$emailNum = 6;
|
||||
$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;
|
||||
$emailNum = 6;
|
||||
$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];
|
||||
} else if($type === 'standard') {
|
||||
$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(?, ?, ?, ?, ?)';
|
||||
$array = [$userInfo[0], $userInfo[1], $userInfo[2], $hashPassword, $countryID];
|
||||
}
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute($array);
|
||||
|
||||
$this->updateProfileChoice($num, $userInfo[6]);
|
||||
$this->updateProfileChoice($num, $userInfo[$emailNum]);
|
||||
$this->setSessionVariables($userInfo[$emailNum]);
|
||||
echo 'success';
|
||||
}
|
||||
public function updateID($type, $userInfo) {
|
||||
if($this->isIdSet($type, $userInfo) == 1) {
|
||||
|
|
@ -85,42 +95,50 @@ class Login extends Dbh {
|
|||
$stmt->execute([$num, $email]);
|
||||
}
|
||||
public function setSessionVariables($email) {
|
||||
session_start();
|
||||
include_once 'session.inc.php';
|
||||
$session = new Session();
|
||||
$session->setSession($email);
|
||||
}
|
||||
public function getCountryIDwithName($country) {
|
||||
$sql = 'SELECT * FROM countries WHERE name = ?';
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute([$country]);
|
||||
$row = $stmt->fetch();
|
||||
$countryID = $row['id'];
|
||||
return $countryID;
|
||||
}
|
||||
|
||||
public function standard($userInfo) {
|
||||
$res = $this->checkIfUserExists($userInfo[2]);
|
||||
if($res == "user exist's") {
|
||||
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);
|
||||
}
|
||||
public function checkIfUserExists($email) {
|
||||
$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;
|
||||
if($row) {
|
||||
if($row['googleID'] != null) return "exist google";
|
||||
if($row['facebookID'] != null) return "exist facebook";
|
||||
if($row['githubID'] != null) return "exist github";
|
||||
return "user exist's";
|
||||
}
|
||||
else return "user doesn't exist's";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -129,3 +147,4 @@ $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']));
|
||||
else if(isset($_POST['standard'])) $loginObj->standard(json_decode($_POST['standard']));
|
||||
7
include/isSessionSet.inc.php
Normal file
7
include/isSessionSet.inc.php
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<?php session_start();
|
||||
|
||||
echo $_SERVER['REQUEST_URI'];
|
||||
|
||||
if(isset($_SESSION['user_id'])) {
|
||||
|
||||
}
|
||||
|
|
@ -1,7 +1,42 @@
|
|||
<?php session_start();
|
||||
<?php
|
||||
|
||||
echo $_SERVER['REQUEST_URI'];
|
||||
class Session extends Dbh {
|
||||
|
||||
if(isset($_SESSION['user_id'])) {
|
||||
|
||||
}
|
||||
public function setSession($email) {
|
||||
if(session_id() == '') 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;
|
||||
}
|
||||
}
|
||||
|
||||
83
signin.php
83
signin.php
|
|
@ -2,15 +2,16 @@
|
|||
<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, height=device-height, initial-scale=1.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/signin.css">
|
||||
<link rel="stylesheet" href="CSS/responsive.css">
|
||||
<link rel="stylesheet" href="CSS/signup.css">
|
||||
|
||||
<script src="JS/responsive.js" defer></script>
|
||||
<script src="JS/signIn/signin.js" defer></script>
|
||||
|
||||
<script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
|
||||
<script src="JS/icon.js" defer></script>
|
||||
|
|
@ -29,38 +30,78 @@
|
|||
<div class="sign-container">
|
||||
<h1>Sign In</h1>
|
||||
</div>
|
||||
<div class="upper-container">
|
||||
<span onclick="test()">Use Fews account to sign in</span>
|
||||
<div class="upper-container" id="upper-container">
|
||||
<span>Use Fews account to sign in</span>
|
||||
<div class="profile disable">
|
||||
<div onclick="switchLoginBox()">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
<span></span>
|
||||
<i class="far fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-middle-conatiner">
|
||||
<div class="email-container">
|
||||
<div>
|
||||
<input type="text" name="" id="">
|
||||
<div class="input-container">
|
||||
<div class="label-container">
|
||||
<label for="email-input">Email</label>
|
||||
</div>
|
||||
<input type="text" name="" id="email-input" autocomplete="off">
|
||||
</div>
|
||||
<div class="error disable">
|
||||
<div class="red"></div>
|
||||
<div class="error-text disable"></div>
|
||||
</div>
|
||||
<div class="forget-container">
|
||||
<a href="">Forgot email?</a>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>
|
||||
If you don't have an account, you can
|
||||
<a href="signup.php">create</a> it or sign up with
|
||||
<a href="#" onclick="urlOpen('#login')">google</a> or
|
||||
<a href="#" onclick="urlOpen('#login')">facebook</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<div class="inner-container">
|
||||
<a href="signup.php">Create account</a>
|
||||
</div>
|
||||
<div class="inner-container">
|
||||
<div class="blue-button" onclick="checkEmail()">Next</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="password-container">
|
||||
<div>
|
||||
<input type="text" name="" id="">
|
||||
<div class="input-container">
|
||||
<div class="label-container">
|
||||
<label for="password-input">Enter your password</label>
|
||||
</div>
|
||||
<input type="password" name="password" id="password-input" autocomplete="off">
|
||||
<div class="eye-icon-container" onclick="managePswVisibility()">
|
||||
<div>
|
||||
<i class="far fa-eye fa-lg disable"></i>
|
||||
<i class="far fa-eye-slash fa-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="error psw">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<div class="inner-container">
|
||||
<a href="">Forgot password?</a>
|
||||
</div>
|
||||
<div class="inner-container" onclick="checkPassword()">
|
||||
<div class="blue-button">Next</div>
|
||||
</div>
|
||||
</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>
|
||||
132
signup.php
Normal file
132
signup.php
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<!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/signup.css">
|
||||
<link rel="stylesheet" href="CSS/responsive.css">
|
||||
|
||||
<script src="JS/responsive.js" defer></script>
|
||||
<script src="JS/signIn/signup.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>Create your Fews Account</h1>
|
||||
</div>
|
||||
<div class="main-middle-conatiner">
|
||||
|
||||
<div class="double">
|
||||
<div class="name-container">
|
||||
<div class="input-container">
|
||||
<div class="label-container">
|
||||
<label for="name-input">First Name</label>
|
||||
</div>
|
||||
<input type="text" name="name" id="name-input" autocomplete="off">
|
||||
</div>
|
||||
<div class="error disable">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="surname-container">
|
||||
<div class="input-container">
|
||||
<div class="label-container">
|
||||
<label for="surname-input">Last Name</label>
|
||||
</div>
|
||||
<input type="text" name="surname" id="surname-input" autocomplete="off">
|
||||
</div>
|
||||
<div class="error disable">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="error name disable">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
<div class="email-container">
|
||||
<div class="input-container">
|
||||
<div class="label-container">
|
||||
<label for="email-input">Email</label>
|
||||
</div>
|
||||
<input type="text" name="email" id="email-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="error email disable">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
<div class="double psw">
|
||||
<div class="psw-container">
|
||||
<div class="input-container">
|
||||
<div class="label-container">
|
||||
<label for="psw-input">Password</label>
|
||||
</div>
|
||||
<input type="password" name="password" id="psw-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="psw-repeat-container">
|
||||
<div class="input-container">
|
||||
<div class="label-container">
|
||||
<label for="psw-repeat-input">Repeat</label>
|
||||
</div>
|
||||
<input type="password" name="password-repeat" id="psw-repeat-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="eye-icon-container" onclick="managePasswordVisibility(this)">
|
||||
<div>
|
||||
<i class="far fa-eye fa-lg disable"></i>
|
||||
<i class="far fa-eye-slash fa-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="error psw disable">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
<div class="select-div" onclick="manageOptionSelect()">
|
||||
<label id="index-country-label">Select Country</label>
|
||||
<div> <i class="option-icon-select flex align-center justify-center"></i> </div>
|
||||
<aside class="select-options country-select absolute disable" id="index-country-select">
|
||||
</aside>
|
||||
</div>
|
||||
<div class="error country disable">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
<div class="error result disable">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>
|
||||
You can also sign up with
|
||||
<a href="#" onclick="urlOpen('#login')">google</a> or
|
||||
<a href="#" onclick="urlOpen('#login')">facebook</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<div class="inner-container">
|
||||
<a href="signin.php">Sign in instead</a>
|
||||
</div>
|
||||
<div class="inner-container">
|
||||
<div class="blue-button" onclick="register()">Next</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue