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

Implemented some backend features

Browse source
This commit is contained in:
Nik Topler 2020-09-30 20:46:56 +02:00
parent 2520be24f0
commit e8d0ad8ddf
15 changed files with 601 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
CSS/*.css
View file

@ -75,7 +75,7 @@ body{
a{ text-decoration: none; }
/** Img */
.img{
.imga{
width: calc(var(--imageDefaultSize) * var(--times));
height: calc(var(--imageDefaultSize) * var(--times));
}
@ -85,7 +85,8 @@ body{
.search-icon:hover + .tooltiptext,
.article-other-info .test:hover + .tooltiptext,
.article-extra-option-icon:hover + .tooltiptext,
.company-date:hover .tooltiptext{
.company-date:hover .tooltiptext,
.outter-container:hover .tooltiptext{
visibility: visible;
opacity: 1;
font-size: 0.7em;
@ -138,9 +139,7 @@ body{
width: 90%;
border: none;
}
.activeProfile{
background-color: var(--hover-medium) !important;
}
.activeProfile{ background-color: var(--hover-medium) !important; }
.underline-input-animation{
display: inline-block;
width: 0px;

39
CSS/account.css Normal file
View file

@ -0,0 +1,39 @@
body {
height: 100vh;
width: 100vh;
display: grid;
grid-template-rows: 64px 1fr;
background-color: var(--bg);
position: relative;
}
main {
grid-row: 2/3;
height: 100%;
background-color: rebeccapurple;
display: flex;
align-items: center;
justify-content: center;
}
nav {
grid-row: 1/2;
display: flex;
}
nav .left-side {
min-height: 100%;
min-width: 5rem;
background-color: yellow;
}
nav .right-side {
min-height: 100%;
width: 100%;
background-color: aqua;
}
aside {
position: absolute;
background-color: green;
}

1
CSS/colors.css
View file

@ -9,6 +9,7 @@
--blue-medium:rgb(27, 122, 231);
--blue-dark: #1967d2;
--google-blue: #4486f7;
--hover-blue: #b0d1f0;
--red-medium: rgb(253,29,29);
--yellow-medium: rgb(255,205,0);

295
CSS/index.css
View file

@ -293,9 +293,7 @@ body{
/** Navigation Right Side */
.nav-right-side > * {
float: right;
}
.nav-right-side > * { float: right; }
.link {
padding: 9px 13px;
margin-right: 15px;
@ -305,92 +303,235 @@ body{
border-radius: 7px;
color: var(--bg);
}
.login:hover {
filter: brightness(1.06);
}
.login:hover { filter: brightness(1.06); }
.navigation-profile-img{
--times: 2.2;
}
.navigation-profile-img { --times: 2.2; }
.first-profile-div{
width: 2.8rem;
height: 2.8rem;
margin-right: 15px;
}
.first-profile-div:hover{
background-color: var(--hover-light);
}
.first-profile-div-active{
background-color: var(--hover-medium);
}
.tooltiptext-name{
color: var(--hover-dark);
}
.first-profile-div:hover{ background-color: var(--hover-light); }
.first-profile-div-active{ background-color: var(--hover-medium); }
.tooltiptext-name { color: var(--hover-dark); }
/** Profile Options */
.profile-extra-options{
right: 0px;
top: 100%;
grid-template-rows: 230px 10px 1fr 1fr;
width: 260px;
height: 360px;
border-radius: 6px;
text-align: center;
background-color: var(--bg);
border: none;
box-shadow: 1px 1px 2px 0px var(--border-medium),
1px 1px 1px 0px var(--border-medium) inset;
border-radius: 2px;
right: 10px;
border-top-right-radius: 0;
border-top-left-radius: 0;
.profile-extra-options {
right: 0.75rem;
top: 93%;
min-width: 350px;
min-height: 380px;
border-radius: 6px;
background-color: var(--bg);
box-shadow: 1px 1px 2px 0px var(--border-medium),
1px 1px 1px 0px var(--border-medium) inset;
}
.profile-extra-options .top-div {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
}
.top-div .img-container {
width: 100%;
padding-bottom: 10px;
}
img.imga {
width: 100%;
height: 100%;
border-radius:50%;
}
.top-div .img-middle {
position: relative;
width: fit-content;
margin: auto;
}
.nav-right-side .outter-container {
padding: 4px;
margin-right: 15px;
}
.nav-right-side .outter-container:hover { background-color: var(--hover-light); }
.nav-right-side .outter-container.active { background-color: var(--hover-medium); }
.img {
position: relative;
border-radius: 50%;
width: var(--num);
height: var(--num);
/* background: url('https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg');
cursor: pointer; */
}
.img-settings {
background-repeat: no-repeat;
background-size: cover;
}
.img.big {
--num: 5.5rem;
--letter: 2.75rem;
cursor: pointer;
}
.img.small {
--num: 2.25rem;
--letter: 1rem;
cursor: pointer;
}
.img .letter {
position: absolute;
left: calc(50% - 1.5rem);
right: calc(50% - 1.5rem);
top: calc(50% - 1.5rem);
bottom: calc(50% - 1.5rem);
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.img .letter span{
font-size: var(--letter);
color: var(--bg);
}
.img:hover { filter: brightness(1.1); }
.camera-container {
position: absolute;
bottom: -3px;
right: 0;
background-color: yellow;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
padding: 5px;
border: 1px solid var(--border-light);
background-color: var(--bg);
cursor: pointer;
}
.camera-container:hover i{ color: var(--google-blue); }
.top-div .personal-info {
padding: 12px 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.top-div .full-name,
.top-div .email,
.top-div .manage-button {
width: 100%;
padding: 3px 0;
display: flex;
align-items: center;
justify-content: center;
}
.top-div .full-name { font-size: 1.25rem; }
.top-div .email {
color: var(--font-medium);
font-size: 1rem;
}
.top-div .manage-button .container {
border-radius: 4rem;
border: 1px solid var(--border-light);
width: 80%;
padding: 8px 5px;
margin-top: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
transition: all ease-in-out .15;
}
.top-div .manage-button .container:hover {
cursor: pointer;
background-color: var(--very-light-grey);
}
.top-div .manage-button .container span { color: var(--font-dark); }
.sign-out {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.sign-out .button-container {
border: 1px solid var(--border-light);
border-radius: 3px;
min-height: 1.5rem;
width: 10.75rem;
margin: auto;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.sign-out .button-container:hover { background-color: var(--very-light-grey); }
.sign-out .button-container span { color: var(--font-dark); }
.middle-div {
margin-bottom: 1rem;
border-top: 1px solid var(--hover-medium);
border-bottom: 1px solid var(--hover-medium);
display: flex;
justify-content: center;
flex-direction: column;
}
.middle-div .container {
padding: 5px 0;
min-height: 2.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.middle-div .container:hover { background-color: var(--hover-light); }
.middle-div .google,
.middle-div .facebook,
.middle-div .github {
padding: 0 20px;
width: calc(100% - 20px);
display: grid;
grid-template-columns: 50px 1fr;
}
.middle-div .icon {
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.google .icon { color: var(--google-blue); }
.facebook .icon { color: #4267B2; }
.github .icon { color: var(--font-very-dark); }
.middle-div span {
text-align: left;
display: flex;
align-items: center;
font-size: 0.9rem;
color: var(--font-medium);
}
.profile-extra-options .footer {
min-height: 1.5rem;
display: block;
}
.profile-options-profile-img {
--times: 5.625;
.profile-extra-options .footer .container {
display: flex;
align-items: center;
justify-content: center;
}
.profile-extra-options .profile-img-link span{
font-size: 3.5rem;
.profile-extra-options .footer .container .inner-container {
min-width: 4rem;
display: flex;
}
.change-profile-picture{
width: 1.8rem;
height: 1.8rem;
right: 5.3rem;
bottom: 0.4rem;
background-color: var(--bg);
border: 1px solid var(--border-medium);
z-index: 11;
}
.emailProfile{
padding-top: 5px;
color: var(--font-dark);
}
.manage-profile-extra-options > *{
padding: 10px 20px;
border: 1px solid var(--border-medium);
border-radius: 10px;
color: var(--userTextInput);
}
.manage-profile-extra-options a:hover{
background-color: var(--hover-light);
}
.profile-extra-options hr {
border-top: 1px solid var(--hover-medium);
}
.extra-options-logout a,.extra-options-settings a{
color: var(--font-dark);
}
.extra-options-logout a {
padding: 10px 20px;
border: 1px solid var(--hover-medium);
border-radius: 2px;
transition: all ease-in-out .2s;
}
.extra-options-logout a:hover{
background-color: var(--hover-light);
}
#profile-extra-options .grid .profile-img-link .img:hover{
filter: brightness(0.96);
.profile-extra-options .footer .container .inner-container span {
font-size: 0.78rem;
color: var(--font-light);
padding: 2px 5px;
cursor: pointer;
}
/* Main Content */

3
CSS/responsive.css
View file

@ -49,6 +49,9 @@
.double.psw .eye-icon-container { display: none; }
.double.psw .psw-repeat-container { margin: 0; }
.sign-container h1 { font-size: 1.5rem; }
/* Profile options */
.profile-extra-options { min-width: 300px; }
}
@media screen and (max-width: 360px) {

8
JS/main.js
View file

@ -717,7 +717,7 @@ function clickInOutCheck(parent, target) {
if(clickOnOpenedElement === true) return
if(parent === extraSearchOptions && target !== extOptIcon) hideExtraSearchOptions()
else if(parent === suggestMainInput && document.activeElement !== mainSearchInput) hideSuggestWords()
else if(parent === extOptProfile) manageExtraProfileOptions()
// else if(parent === extOptProfile) manageExtraProfileOptions()
else if(parent === selectCountryDiv && countryDivExceptions.some((val) => val === target) === false) hideSelectCountry()
else if(parent === logInOptions && target !== loginButton) manageLoginOptions()
}
@ -816,9 +816,7 @@ function checkIfCategoriesAreOpen() {
// string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"')
// Temporary
async function manageExtraProfileOptions() {
async function logOut(path) {
await fetch(`${pathLocation}include/logout.inc.php`)
openLinks(filePath.headlines);
openLinks(filePath.headlines + path);
}

9
JS/show.js
View file

@ -133,3 +133,12 @@ function removeActiveSidebarCategory() {
}
function manageExtraProfileOptions() {
if(extOptProfile.classList.contains('disable')) {
extOptProfile.classList.remove('disable')
navigationBarProfileImageDiv.classList.add('active')
} else {
extOptProfile.classList.add('disable')
navigationBarProfileImageDiv.classList.remove('active')
}
}

12
JS/signIn/signin.js
View file

@ -47,6 +47,9 @@ function switchLoginBox() {
email.classList.remove('active')
password.classList.remove('active')
setupSubHeading()
errorContainer.classList.add('disable')
emailInput.classList.remove('error-red-border')
email.querySelector('.label-container').classList.remove('error-red')
}
}
async function checkEmail() {
@ -57,8 +60,11 @@ async function checkEmail() {
})
const data = await res.text()
if(errorHandelingEmail(data) === true) switchLoginBox()
setupProfile()
if(errorHandelingEmail(data) === true) {
switchLoginBox()
setupProfile()
}
}
const errorPswContainer = document.querySelector('.error.psw')
@ -160,4 +166,4 @@ function resetPsw() {
element.firstElementChild.firstElementChild.classList.add('disable')
element.firstElementChild.lastElementChild.classList.remove('disable')
passwordInput.type = 'password'
}
}

154
JS/signIn/signup.js
View file

@ -166,6 +166,7 @@ async function register() {
let country = indexCountryLabel.innerHTML.trim()
error.reset()
if(error.before(firstName, lastName, email, password, passwordRepeat, country) === false) return
console.log('next')
insertToDB(firstName, lastName, email, password, passwordRepeat, country)
}
async function insertToDB(firstName, lastName, email, password, passwordRepeat, country) {
@ -191,6 +192,8 @@ const error = {
nameError.firstElementChild.innerHTML = ""
nameInput.classList.remove('error-red-border')
name.querySelector('label').classList.remove('error-red')
surnameInput.classList.remove('error-red-border')
surname.querySelector('label').classList.remove('error-red')
emailError.classList.add('disable')
emailError.firstElementChild.innerHTML = ""
emailInput.classList.remove('error-red-border')
@ -205,89 +208,102 @@ const error = {
countryError.firstElementChild.innerHTML = ""
resultError.classList.add('disable')
},
before : (FirstName, LastName, Email, Password, PasswordRepeat, Country) => {
before : function (FirstName, LastName, Email, Password, PasswordRepeat, Country) {
let num = 0
if(FirstName.length === 0 || LastName.length === 0) {
if (FirstName.length === 0 || LastName.length === 0) {
nameError.classList.remove('disable')
if(FirstName.length === 0 && LastName.length === 0) {
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')
if (FirstName.length === 0 && LastName.length === 0) {
errorHandeling.name()
errorHandeling.surname()
errorHandeling.text(nameError.firstElementChild, 'Name and Surname must not be empty')
} else if (FirstName.length !== 0 && LastName.length === 0) {
errorHandeling.surname()
errorHandeling.text(nameError.firstElementChild, 'Surname must not be empty')
} else if (FirstName.length === 0 && LastName.length !== 0) {
errorHandeling.name()
errorHandeling.text(nameError.firstElementChild, 'Name must not be empty')
}
num = num++
num = 10
}
if(Email.length === 0 || validateEmail(Email) === false) {
if(validateEmail(Email) === false) emailError.firstElementChild.innerHTML = `${icon} Incorrect email format`
else emailError.firstElementChild.innerHTML = `${icon} Field email must be filled`
emailError.classList.remove('disable')
emailInput.classList.add('error-red-border')
email.querySelector('label').classList.add('error-red')
num = num++
errorHandeling.email()
if(validateEmail(Email) === false) errorHandeling.text(emailError.firstElementChild, 'Incorrect email format')
else errorHandeling.text(emailError.firstElementChild, 'Field email must be filled')
num = 10
}
if(Password.length === 0 || PasswordRepeat.length === 0 || Password.length < 6) {
pswError.classList.remove('disable')
if(Password.length === 0 && PasswordRepeat.length === 0 || Password.length < 6) {
if(Password.length === 0 && PasswordRepeat.length === 0) pswError.firstElementChild.innerHTML = `${icon} You must type in your password`
else pswError.firstElementChild.innerHTML = `${icon} Password must include atleast 7 characters`
pswInput.classList.add('error-red-border')
psw.querySelector('label').classList.add('error-red')
pswRepeatInput.classList.add('error-red-border')
pswRepeat.querySelector('label').classList.add('error-red')
} else if(Password !== PasswordRepeat) {
pswError.firstElementChild.innerHTML = `${icon} Passwords do not match`
pswInput.classList.add('error-red-border')
psw.querySelector('label').classList.add('error-red')
pswRepeatInput.classList.add('error-red-border')
pswRepeat.querySelector('label').classList.add('error-red')
} else if(Password.length !== 0 && PasswordRepeat.length === 0) {
pswError.firstElementChild.innerHTML = `${icon} Surname must not be empty`
pswRepeatInput.classList.add('error-red-border')
pswRepeat.querySelector('label').classList.add('error-red')
} else if(Password.length === 0 && PasswordRepeat.length !== 0) {
nameError.firstElementChild.innerHTML = `${icon} Name must not be empty`
pswInput.classList.add('error-red-border')
psw.querySelector('label').classList.add('error-red')
}
num = num++
}
if(Country === 'Select Country') {
countryError.classList.remove('disable')
countryError.firstElementChild.innerHTML = `${icon} You must select country`
num = num++
}
if(num > 0) return false
else true
},
after : (data) => {
if(data === 'success') return urlOpen('')
if (Password.length === 0 || PasswordRepeat.length === 0 || Password.length < 6 || Password === '' || PasswordRepeat === '' || Password !== PasswordRepeat) {
pswError.classList.remove('disable')
errorHandeling.password()
errorHandeling.passwordRepeat()
if(Password.length === 0 || PasswordRepeat.length === 0 || Password === '' || PasswordRepeat === '') errorHandeling.text(pswError.firstElementChild, 'You must type in your password')
else if(Password.length < 6) errorHandeling.text(pswError.firstElementChild, 'Password must include atleast 7 characters')
else if(Password !== PasswordRepeat) errorHandeling.text(pswError.firstElementChild, 'Passwords do not match')
else if(Password.split(' ').length > 1 || PasswordRepeat.split(' ').length > 1) errorHandeling.text(pswError.firstElementChild, 'No white spaces in password')
num = 10
}
if (Country === 'Select Country') {
countryError.classList.remove('disable')
errorHandeling.text(countryError.firstElementChild, 'Select a country')
num = 10
}
console.log(num)
if (num > 0) return false
else return true
},
after : function (data) {
if(data === 'success') return urlOpen('')
resultError.classList.remove('disable')
if(data === `user exist's`) resultError.firstElementChild.innerHTML = 'User with this email already exists!'
else if(data.includes('google') || data.includes('facebook') || data.includes('github')) resultError.firstElementChild.innerHTML = `You don't have set up password. Sign in with <a href="#" onclick="urlOpen('#login')">${data.split(' ')[1]}</a>`
if(data === `user exist's`) errorHandeling.text(resultError.firstElementChild, 'User with this email already exists!')
else if(data.includes('exist') && (data.includes('google') || data.includes('facebook') || data.includes('github'))) errorHandeling.text(resultError.firstElementChild, `You don't have set up password. Sign in with <a href="#" onclick="urlOpen('#login')">${data.split(' ')[1]}</a>`)
else if(data === 'incorrect email') {
emailError.firstElementChild.innerHTML = `${icon} Incorrect email format`
emailError.classList.remove('disable')
emailInput.classList.add('error-red-border')
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')
errorHandeling.email()
errorHandeling.text(emailError.firstElementChild, `Incorrect email format`)
} else if(data === `passwords don't match` || data === 'empty password') {
pswError.classList.remove('disable')
errorHandeling.psw()
errorHandeling.pswRepeat()
if(data === 'empty password') errorHandeling.text(pswError.firstElementChild, `Password shouldn't be empty`)
else errorHandeling.text(pswError.firstElementChild, 'Passwords do not match')
} else if(data === 'no white spaces in password') {
pswError.classList.remove('disable')
errorHandeling.psw()
errorHandeling.pswRepeat()
errorHandeling.text(pswError.firstElementChild, data)
}
}
}
const errorHandeling = {
name : () => {
nameInput.classList.add('error-red-border')
name.querySelector('label').classList.add('error-red')
},
surname : () => {
surnameInput.classList.add('error-red-border')
surname.querySelector('label').classList.add('error-red')
},
email : () => {
emailInput.classList.add('error-red-border')
email.querySelector('label').classList.add('error-red')
},
password : () => {
pswInput.classList.add('error-red-border')
psw.querySelector('label').classList.add('error-red')
},
passwordRepeat : () => {
pswRepeatInput.classList.add('error-red-border')
pswRepeat.querySelector('label').classList.add('error-red')
},
text : (element, text) => { element.innerHTML = `${icon} ${text}` }
}
function createFormData(word, data) {
let formData = new FormData
formData.append(word, data)

4
JS/variables.js
View file

@ -71,8 +71,8 @@
const main = document.getElementById('main')
const overlay = document.getElementById('overlay')
let navigationBarProfileImageDiv = document.getElementById('navigation-bar-profile-img-div')
let extOptProfile = document.getElementById('profile-extra-options')
const navigationBarProfileImageDiv = document.getElementById('outter-container')
const extOptProfile = document.getElementById('profile-extra-options')
let currentNewsArticles = [

53
account.php Normal file
View file

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

169
add-ons/navigation-bar.php
View file

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

7
add-ons/side-bar.php
View file

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

62
include/insert.inc.php
View file

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

1
include/session.inc.php
View file

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