beenull/News-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated signin/up system

Browse source
This commit is contained in:
Nik Topler 2020-09-29 21:19:07 +02:00
parent abe04218cb
commit 2520be24f0
21 changed files with 1224 additions and 5711 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
._oauth.js
View file

Binary file not shown.

9
CSS/*.css
View file

@ -16,7 +16,7 @@ body{
.select-div{ .select-div{
position: relative; position: relative;
padding: 10px; padding: 0 0 0 5px;
cursor: pointer; cursor: pointer;
height: 20%; height: 20%;
display: flex; display: flex;
@ -39,18 +39,13 @@ body{
z-index: 10; z-index: 10;
} }
.select-options::-webkit-scrollbar { .select-options::-webkit-scrollbar { display: none; }
display: none;
}
.select-options div { .select-options div {
font-size: 1rem; font-size: 1rem;
padding: 10px; padding: 10px;
color: var(--userTextInput); color: var(--userTextInput);
} }
.selected-option { background-color: var(--hover-light); } .selected-option { background-color: var(--hover-light); }
/* .selected-option:active {
transition: all ease-in .18s;
} */
/*? Reusable classes */ /*? Reusable classes */

17
CSS/responsive.css
View file

@ -45,7 +45,22 @@
.title-container .title h2 { font-size: 1.5rem ; } .title-container .title h2 { font-size: 1.5rem ; }
.white-button.topic { padding: 6px 10px; } .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) { @media screen and (max-width: 360px) {
.main-content-section.full .main-header .title-container { flex-grow: 0; } .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
View 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
View file

@ -1,3 +1,7 @@
a {
color: var(--blue-light);
font-weight: 600;
}
main { main {
display: flex; display: flex;
align-items: center; align-items: center;
@ -7,58 +11,175 @@ main {
font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif; font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif;
background-color: var(--bg); background-color: var(--bg);
z-index: 100; z-index: 100;
overflow: hidden;
} }
.main-container { .main-container {
min-width: 400px;
height: auto;
min-height: 440px;
padding: 40px;
border: 1px solid var(--border-light);
border-radius: 0.75rem;
display: flex; display: flex;
flex-direction: column; 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); 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 { .main-middle-conatiner {
display: flex; display: flex;
flex-direction: column;
min-height: 310px; min-height: 310px;
position: relative; position: relative;
margin-top: 15px; margin-top: 2rem;
} }
.email-container { .main-middle-conatiner .double {
position: absolute; display: flex;
min-width: 100%; align-items: center;
left: 0; justify-content: center;
right: 0;
top: 0;
bottom: 0;
transition: all ease-in-out .2;
background-color: rebeccapurple;
} }
.password-container { .name-container,
position: absolute; .surname-container,
min-width: 100%; .psw-container,
top: 0; .psw-repeat-container {
bottom: 0; width: 100%;
left: 100%;
background-color: green;
transition: all ease-in-out .2;
} }
.email-container.active { .name-container { margin-right: 10px; }
right: 100%; .surnname-container { margin-left: 10px; }
left: -100%;
} .sign-container { margin-top: 10px; }
.password-container.active { .sign-container h1 { font-size: 1.8rem; }
left: 0;
.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; }

2
JS/main.js
View file

@ -274,6 +274,8 @@ window.onload = async () => {
hideExtraSearchOptions() hideExtraSearchOptions()
hideSuggestWords() hideSuggestWords()
if(window.location.hash === '#login') manageLoginOptions()
document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' }) document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' })
error.window() error.window()

6
JS/show.js
View file

@ -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) { function sidebarCategorySelect(selectedElement) {
if(selectedElement.classList.contains('active')) return if(selectedElement.classList.contains('active')) return
selectedElement.classList.add('active') selectedElement.classList.add('active')

34
JS/signIn/external.js
View file

@ -30,23 +30,23 @@
/** GitHub */ /** GitHub */
// OAuth.initialize('qFa2sjgoyyIVRhaoOePG2ie1RqY') // OAuth.initialize('qFa2sjgoyyIVRhaoOePG2ie1RqY')
document.getElementById('github-btn').onclick = () => { // document.getElementById('github-btn').onclick = () => {
// Initialize with your OAuth.io app public key // // Initialize with your OAuth.io app public key
OAuth.initialize('_nPRfzTNGplyDCW0vD9dmek5QAg') // OAuth.initialize('_nPRfzTNGplyDCW0vD9dmek5QAg')
// Use popup for oauth // // Use popup for oauth
// Alternative is redirect // // Alternative is redirect
OAuth.popup('github').then(github => { // OAuth.popup('github').then(github => {
// console.log('github:', github) // // console.log('github:', github)
// Retrieves user data from oauth provider // // Retrieves user data from oauth provider
// Prompts 'welcome' message with User's email on successful login // // Prompts 'welcome' message with User's email on successful login
// #me() is a convenient method to retrieve user data without requiring you // // #me() is a convenient method to retrieve user data without requiring you
// to know which OAuth provider url to call // // to know which OAuth provider url to call
github.me().then(data => { // github.me().then(data => {
// console.log('me data:', data) // // console.log('me data:', data)
// alert('GitHub says your email is:' + data.email + ".\nView browser 'Console Log' for more details") // // alert('GitHub says your email is:' + data.email + ".\nView browser 'Console Log' for more details")
}) // })
}) // })
} // }
/** FaceBook */ /** FaceBook */

0
JS/signIn/regular.js
View file

163
JS/signIn/signin.js Normal file
View 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!#$%&amp;'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+)*|"(?:[\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
View 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!#$%&amp;'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+)*|"(?:[\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
add-ons/footer-scripts.php
View file

@ -1,3 +1,2 @@
<script src="https://apis.google.com/js/api:client.js"></script> <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> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

2
add-ons/head.php
View file

@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <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"> <meta name="google-signin-client_id" content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
<link rel="stylesheet" href="../CSS/colors.css"> <link rel="stylesheet" href="../CSS/colors.css">

2
headlines.php
View file

@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <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"> <meta name="google-signin-client_id" content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
<link rel="stylesheet" href="CSS/colors.css"> <link rel="stylesheet" href="CSS/colors.css">

47
include/check.inc.php Normal file
View 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']));

93
include/insert.inc.php
View file

@ -1,6 +1,6 @@
<?php include_once 'db.inc.php'; <?php include_once 'db.inc.php';
class Login extends Dbh { class Login extends Dbh{
public function google($userInfo) { public function google($userInfo) {
require_once '../vendor/autoload.php'; require_once '../vendor/autoload.php';
@ -11,21 +11,21 @@ class Login extends Dbh {
return; return;
} }
$userExist = $this->checkIfUserExists('google', $userInfo); $userExist = $this->checkIfUserExistsExternal('google', $userInfo);
if($userExist == 'empty') $this->insert('google', $userInfo); if($userExist == 'empty') $this->insert('google', $userInfo);
else if($userExist == 'ID') $this->updateID('googleID', $userInfo); else if($userExist == 'ID') $this->updateID('googleID', $userInfo);
$this->setSessionVariables($userInfo[6]); $this->setSessionVariables($userInfo[6]);
echo 'success'; echo 'success';
} }
public function facebook($userInfo) { public function facebook($userInfo) {
$userExist = $this->checkIfUserExists('facebook', $userInfo); $userExist = $this->checkIfUserExistsExternal('facebook', $userInfo);
if($userExist == 'empty') $this->insert('facebook', $userInfo); if($userExist == 'empty') $this->insert('facebook', $userInfo);
else if($userExist == 'ID') $this->updateID('facebookID', $userInfo); else if($userExist == 'ID') $this->updateID('facebookID', $userInfo);
$this->setSessionVariables($userInfo[6]); $this->setSessionVariables($userInfo[6]);
echo 'success'; echo 'success';
} }
public function checkIfUserExists($type, $userInfo) { public function checkIfUserExistsExternal($type, $userInfo) {
$sql = 'SELECT * FROM users WHERE email = ?'; $sql = 'SELECT * FROM users WHERE email = ?';
$stmt = $this->connect()->prepare($sql); $stmt = $this->connect()->prepare($sql);
@ -42,19 +42,29 @@ class Login extends Dbh {
public function insert($type, $userInfo) { public function insert($type, $userInfo) {
if($type == 'google') { if($type == 'google') {
$num = 2; $num = 2;
$emailNum = 6;
$sql = 'INSERT INTO users(name, surname, email, google_profile_img, googleID) VALUES(?, ?, ?, ?, ?)'; $sql = 'INSERT INTO users(name, surname, email, google_profile_img, googleID) VALUES(?, ?, ?, ?, ?)';
$hashGoogleID = password_hash($userInfo[0], PASSWORD_DEFAULT); $hashGoogleID = password_hash($userInfo[0], PASSWORD_DEFAULT);
$array = [$userInfo[3], $userInfo[4], $userInfo[6], $userInfo[5], $hashGoogleID]; $array = [$userInfo[3], $userInfo[4], $userInfo[6], $userInfo[5], $hashGoogleID];
} else if ($type == 'facebook') { } else if ($type == 'facebook') {
$num = 3; $num = 3;
$emailNum = 6;
$sql = 'INSERT INTO users(name, surname, email, facebook_profile_img, facebookID) VALUES(?, ?, ?, ?, ?)'; $sql = 'INSERT INTO users(name, surname, email, facebook_profile_img, facebookID) VALUES(?, ?, ?, ?, ?)';
$hashFacebookID = password_hash($userInfo[0], PASSWORD_DEFAULT); $hashFacebookID = password_hash($userInfo[0], PASSWORD_DEFAULT);
$array = [$userInfo[3], $userInfo[4], $userInfo[6], $userInfo[5], $hashFacebookID]; $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 = $this->connect()->prepare($sql);
$stmt->execute($array); $stmt->execute($array);
$this->updateProfileChoice($num, $userInfo[$emailNum]);
$this->updateProfileChoice($num, $userInfo[6]); $this->setSessionVariables($userInfo[$emailNum]);
echo 'success';
} }
public function updateID($type, $userInfo) { public function updateID($type, $userInfo) {
if($this->isIdSet($type, $userInfo) == 1) { if($this->isIdSet($type, $userInfo) == 1) {
@ -85,42 +95,50 @@ class Login extends Dbh {
$stmt->execute([$num, $email]); $stmt->execute([$num, $email]);
} }
public function setSessionVariables($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 = ?'; $sql = 'SELECT * FROM users WHERE email = ?';
$stmt = $this->connect()->prepare($sql); $stmt = $this->connect()->prepare($sql);
$stmt->execute([$email]); $stmt->execute([$email]);
$row = $stmt->fetch(); $row = $stmt->fetch();
if($row) {
$_SESSION['id'] = $row['id']; if($row['googleID'] != null) return "exist google";
$_SESSION['name'] = $row['name']; if($row['facebookID'] != null) return "exist facebook";
$_SESSION['surname'] = $row['surname']; if($row['githubID'] != null) return "exist github";
$_SESSION['email'] = $email; return "user exist's";
$_SESSION['gender'] = $row['gender']; }
$_SESSION['password_change'] = $row['password_change']; else return "user doesn't exist's";
$_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;
} }
} }
@ -129,3 +147,4 @@ $loginObj = new Login();
if($_SERVER['REQUEST_METHOD'] !== 'POST') return; if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
else if(isset($_POST['google'])) $loginObj->google(json_decode($_POST['google'])); 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['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
View file

@ -0,0 +1,7 @@
<?php session_start();
echo $_SERVER['REQUEST_URI'];
if(isset($_SESSION['user_id'])) {
}

45
include/session.inc.php
View file

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

5573
oauth.js
View file

File diff suppressed because it is too large Load diff

83
signin.php
View file

@ -2,15 +2,16 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <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"> <meta name="google-signin-client_id" content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
<link rel="stylesheet" href="CSS/colors.css"> <link rel="stylesheet" href="CSS/colors.css">
<link rel="stylesheet" href="CSS/*.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/responsive.css">
<link rel="stylesheet" href="CSS/signup.css">
<script src="JS/responsive.js" defer></script> <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="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
<script src="JS/icon.js" defer></script> <script src="JS/icon.js" defer></script>
@ -29,38 +30,78 @@
<div class="sign-container"> <div class="sign-container">
<h1>Sign In</h1> <h1>Sign In</h1>
</div> </div>
<div class="upper-container"> <div class="upper-container" id="upper-container">
<span onclick="test()">Use Fews account to sign in</span> <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>
<div class="main-middle-conatiner"> <div class="main-middle-conatiner">
<div class="email-container"> <div class="email-container">
<div> <div class="input-container">
<input type="text" name="" id=""> <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> </div>
<div class="password-container"> <div class="password-container">
<div> <div class="input-container">
<input type="text" name="" id=""> <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>
</div> </div>
</div> </div>
</main> </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> </body>
</html> </html>

132
signup.php Normal file
View 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>