462 lines
No EOL
21 KiB
JavaScript
462 lines
No EOL
21 KiB
JavaScript
const slideAccount = document.querySelector('.side-bar-responsive .slide')
|
|
const sideBarResAccount = document.querySelector('.side-bar-responsive')
|
|
const sideBarAccount = document.getElementById('side-bar-account')
|
|
|
|
window.onload = () => {
|
|
generateColors()
|
|
if(window.location.pathname.includes('changeName')) change.name()
|
|
else if(window.location.pathname.includes('changeCountry')) change.country()
|
|
else if(window.location.pathname.includes('changePassword')) change.password()
|
|
if(!window.location.pathname.includes('change')) responsive()
|
|
}
|
|
window.onresize = () => {
|
|
if(!window.location.pathname.includes('change')) responsive()
|
|
}
|
|
|
|
function responsive() {
|
|
if(window.innerWidth < 780) {
|
|
sideBarResAccount.classList.remove('disable')
|
|
sideBarAccount.classList.add('disable')
|
|
slideAccount.style.width = window.innerWidth + 'px'
|
|
if(window.innerWidth > 430) {
|
|
sideBarResAccount.style.alignItems = 'center'
|
|
sideBarResAccount.style.justifyContent = 'center'
|
|
}
|
|
} else {
|
|
sideBarAccount.classList.remove('disable')
|
|
sideBarResAccount.classList.add('disable')
|
|
}
|
|
}
|
|
if(mainImgContainer)
|
|
if(mainImgContainer.classList.contains('disable')) mainImgContainer.classList.remove('disable')
|
|
|
|
|
|
async function logout(string) {
|
|
await fetch(`../include/logout.inc.php`)
|
|
openLinks('/'+filePath.headlines+string);
|
|
}
|
|
|
|
function openLinks(string) { window.location.replace(websiteURL + string) }
|
|
|
|
const icon = `<i class="fas fa-exclamation-circle fa-lg"></i>`
|
|
const name = document.querySelector('.name-container')
|
|
const surname = document.querySelector('.surname-container')
|
|
const nameInput = document.getElementById('name-input')
|
|
const surnameInput = document.getElementById('surname-input')
|
|
const nameError = document.querySelector('.error.name')
|
|
const surnameError = document.querySelector('.error.surname')
|
|
const genderError = document.querySelector('.error.gender')
|
|
const countryError = document.querySelector('.error.country')
|
|
|
|
let pswOld = document.querySelector('.psw-old-container')
|
|
let pswOldInput = document.getElementById('psw-old-input')
|
|
let psw = document.querySelector('.psw-container')
|
|
let pswRepeat = document.querySelector('.psw-repeat-container')
|
|
let pswInput = document.getElementById('psw-input')
|
|
let pswRepeatInput = document.getElementById('psw-repeat-input')
|
|
let pswError = document.querySelector('.error.psw')
|
|
|
|
const change = {
|
|
name : () => {
|
|
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')
|
|
}
|
|
}
|
|
},
|
|
password : async () => {
|
|
|
|
await change.generateInpout()
|
|
|
|
pswOld = document.querySelector('.psw-old-container')
|
|
pswOldInput = document.getElementById('psw-old-input')
|
|
psw = document.querySelector('.psw-container')
|
|
pswRepeat = document.querySelector('.psw-repeat-container')
|
|
pswInput = document.getElementById('psw-input')
|
|
pswRepeatInput = document.getElementById('psw-repeat-input')
|
|
pswError = document.querySelector('.error.psw')
|
|
|
|
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')
|
|
}
|
|
}
|
|
if(pswOld !== null) {
|
|
pswOldInput.onfocus = () => {
|
|
pswOld.querySelector('.label-container').classList.add('active')
|
|
pswOld.querySelector('.label-container').classList.add('google-blue')
|
|
pswOldInput.classList.add('active')
|
|
}
|
|
pswOldInput.onblur = () => {
|
|
if(pswOldInput.value.length === 0) {
|
|
pswOld.querySelector('.label-container').classList.remove('active')
|
|
pswOld.querySelector('.label-container').classList.remove('google-blue')
|
|
pswOldInput.classList.remove('active')
|
|
} else {
|
|
pswOld.querySelector('.label-container').classList.remove('google-blue')
|
|
pswOldInput.classList.remove('active')
|
|
}
|
|
}
|
|
}
|
|
},
|
|
generateInpout : async() => {
|
|
const res = await fetch('../include/check.inc.php', {
|
|
method: "POST",
|
|
body: createFormData('pswSet', '')
|
|
})
|
|
const data = await res.text()
|
|
document.querySelector('article').innerHTML = data
|
|
},
|
|
country : () => {
|
|
for(let i = 0; i < countries.length; i++) {
|
|
let div = document.createElement('div')
|
|
div.onclick = () => { select(div) }
|
|
if(getAcronymCountry(window.location.search.match(/[\?|\&]+[c]+[o]+[u]+[=].{2}/g)[0].slice(5, 7)) === countries[i]) div.classList.add('active')
|
|
let p = document.createElement('p')
|
|
p.innerHTML = countries[i]
|
|
div.appendChild(p)
|
|
document.querySelector('.countries').appendChild(div)
|
|
}
|
|
}
|
|
}
|
|
function getAcronymCountry(acronym) {
|
|
for(let i = 0; i < countries.length; i++)
|
|
if(countryAcronyms[i] === acronym)
|
|
return countries[i]
|
|
}
|
|
|
|
const check = {
|
|
name : async() => {
|
|
if(error.name(nameInput.value.trim(), surnameInput.value.trim()) === true) return errorHandeling.name()
|
|
array = JSON.stringify([nameInput.value.trim(), surnameInput.value.trim()])
|
|
const res = await fetch('../include/update.inc.php', {
|
|
method: "POST",
|
|
body: createFormData('name', array)
|
|
})
|
|
const data = await res.text()
|
|
if(data === 'success') openLinks('/account/personal.php')
|
|
},
|
|
gender : async() => {
|
|
if(!document.querySelector('.gender-container .active')) {
|
|
genderError.classList.remove('disable')
|
|
return errorHandeling.text(genderError.firstElementChild, 'You need to pick one')
|
|
}
|
|
array = JSON.stringify([document.querySelector('.gender-container .active').parentElement.lastElementChild.innerHTML.trim()])
|
|
const res = await fetch('../include/update.inc.php', {
|
|
method: "POST",
|
|
body: createFormData('gender', array)
|
|
})
|
|
const data = await res.text()
|
|
if(data === 'success') openLinks('/account/personal.php')
|
|
},
|
|
country : async() => {
|
|
if(!document.querySelector('.country-container .active')) {
|
|
countryError.classList.remove('disable')
|
|
return errorHandeling.text(countryError.firstElementChild, 'Select a country')
|
|
}
|
|
array = JSON.stringify([document.querySelector('.country-container .active').firstElementChild.innerHTML])
|
|
const res = await fetch('../include/update.inc.php', {
|
|
method: "POST",
|
|
body: createFormData('country', array)
|
|
})
|
|
const data = await res.text()
|
|
if(data === 'success') openLinks('/account/personal.php')
|
|
|
|
},
|
|
psw : async() => {
|
|
let string = 'newPsw'
|
|
if(pswOldInput !== null) {
|
|
if(error.passwordOld(pswInput.value.trim(), pswRepeatInput.value.trim(),pswOldInput.value.trim()) === true) return errorHandeling.password()
|
|
string = 'oldPsw'
|
|
arrayInput = [pswOldInput.value.trim(), pswInput.value.trim(), pswRepeatInput.value.trim()]
|
|
} else {
|
|
if(error.password(pswInput.value.trim(), pswRepeatInput.value.trim()) === true) return
|
|
arrayInput = [pswInput.value.trim(), pswRepeatInput.value.trim()]
|
|
}
|
|
array = JSON.stringify(arrayInput)
|
|
const res = await fetch('../include/update.inc.php', {
|
|
method: "POST",
|
|
body: createFormData(string, array)
|
|
})
|
|
const data = await res.text()
|
|
if(data === 'success') openLinks('/account/personal.php')
|
|
else error.passwordOldAfter()
|
|
}
|
|
}
|
|
|
|
const error = {
|
|
reset : () => {
|
|
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')
|
|
pswOldInput.classList.remove('error-red-border')
|
|
pswOld.querySelector('label').classList.remove('error-red')
|
|
},
|
|
name : (FirstName, LastName) => {
|
|
if (FirstName.length === 0 || LastName.length === 0) {
|
|
nameError.classList.remove('disable')
|
|
surnameError.classList.remove('disable')
|
|
if (FirstName.length === 0 && LastName.length === 0) {
|
|
errorHandeling.name()
|
|
errorHandeling.surname()
|
|
errorHandeling.text(nameError.firstElementChild, 'Name must not be empty')
|
|
errorHandeling.text(surnameError.firstElementChild, 'Surname must not be empty')
|
|
} else if (FirstName.length !== 0 && LastName.length === 0) {
|
|
errorHandeling.surname()
|
|
errorHandeling.text(surnameError.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')
|
|
errorHandeling.text(surnameError.firstElementChild, 'Surname must not be empty')
|
|
}
|
|
return true
|
|
}
|
|
},
|
|
password : (Password, PasswordRepeat) => {
|
|
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')
|
|
return true
|
|
}
|
|
else return false
|
|
},
|
|
passwordOld : (Password, PasswordRepeat, PasswordOld) => {
|
|
num = 0
|
|
if(PasswordOld.length === 0 || PasswordOld.length === '' || PasswordOld.length > 20) {
|
|
errorHandeling.passwordOld()
|
|
|
|
if(PasswordOld.length === 0 || PasswordOld.length === '') errorHandeling.text(pswError.firstElementChild, 'Password field should not be empty')
|
|
if(PasswordOld.length > 20) errorHandeling.text(pswError.firstElementChild, 'Password must contain maximum of 20 letters')
|
|
num = 10
|
|
}
|
|
if(error.password(Password, PasswordRepeat) === true) num = 10
|
|
if(num > 0) return true
|
|
else return false
|
|
},
|
|
passwordOldAfter : () => {
|
|
error.reset()
|
|
pswError.classList.remove('disable')
|
|
errorHandeling.passwordOld()
|
|
errorHandeling.text(pswError.firstElementChild, 'Wrong password')
|
|
}
|
|
}
|
|
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')
|
|
},
|
|
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')
|
|
},
|
|
passwordOld : () => {
|
|
pswOldInput.classList.add('error-red-border')
|
|
pswOld.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)
|
|
return formData
|
|
}
|
|
|
|
function setGender(element) {
|
|
let aside = element.parentElement
|
|
let oldSelect = aside.parentElement.querySelector('.active')
|
|
if(oldSelect) {
|
|
oldSelect.classList.remove('active')
|
|
oldSelect.firstElementChild.classList.remove('active')
|
|
oldSelect.firstElementChild.firstElementChild.classList.remove('active')
|
|
}
|
|
aside.firstElementChild.classList.add('active')
|
|
aside.firstElementChild.firstElementChild.classList.add('active')
|
|
aside.firstElementChild.firstElementChild.firstElementChild.classList.add('active')
|
|
}
|
|
|
|
function select(element) {
|
|
if(document.querySelector('.country-container .active')) document.querySelector('.country-container .active').classList.remove('active')
|
|
element.classList.add('active')
|
|
}
|
|
|
|
function managePasswordVisibility(element) {
|
|
if(element.firstElementChild.firstElementChild.classList.contains('disable')) {
|
|
element.firstElementChild.firstElementChild.classList.remove('disable')
|
|
element.firstElementChild.lastElementChild.classList.add('disable')
|
|
if(element.parentElement.firstElementChild.lastElementChild === pswInput) pswInput.type = 'text'
|
|
else if(element.parentElement.firstElementChild.lastElementChild === pswRepeatInput) pswRepeatInput.type = 'text'
|
|
else if(element.parentElement.firstElementChild.lastElementChild === pswOldInput) pswOldInput.type = 'text'
|
|
|
|
} else {
|
|
element.firstElementChild.firstElementChild.classList.add('disable')
|
|
element.firstElementChild.lastElementChild.classList.remove('disable')
|
|
if(element.parentElement.firstElementChild.lastElementChild === pswInput) pswInput.type = 'password'
|
|
else if(element.parentElement.firstElementChild.lastElementChild === pswRepeatInput) pswRepeatInput.type = 'password'
|
|
else if(element.parentElement.firstElementChild.lastElementChild === pswOldInput) pswOldInput.type = 'password'
|
|
}
|
|
}
|
|
|
|
|
|
function addAdmin(element) {
|
|
element.parentElement.firstElementChild.classList.add('disable')
|
|
element.parentElement.lastElementChild.classList.remove('disable')
|
|
admin('addAdmin', element.parentElement.parentElement.children[1].innerHTML.trim())
|
|
}
|
|
|
|
function removeAdmin(element) {
|
|
element.parentElement.firstElementChild.classList.remove('disable')
|
|
element.parentElement.lastElementChild.classList.add('disable')
|
|
admin('removeAdmin', element.parentElement.parentElement.children[1].innerHTML.trim())
|
|
}
|
|
|
|
async function admin(action, email) {
|
|
|
|
const res = await fetch('../include/update.inc.php', {
|
|
method: "POST",
|
|
body: createFormData(action, email)
|
|
})
|
|
const data = await res.text()
|
|
console.log(data)
|
|
}
|
|
|
|
let imageUploadActive = false
|
|
let currentImageUploadLocation
|
|
let newImg = false
|
|
async function submitProfileImageUploadForm() {
|
|
|
|
if(document.getElementById('file-upload').value) {
|
|
errorSpanUploadImage.classList.remove('light-green-color')
|
|
let photo = document.getElementById("file-upload").files[0]
|
|
let formData = new FormData()
|
|
|
|
formData.append('file', photo)
|
|
|
|
const response = await fetch('../include/uploadFile.inc.php', {
|
|
method: "POST",
|
|
body: formData
|
|
})
|
|
const text = await response.text()
|
|
if(text === 'too big') errorSpanUploadImage.innerHTML = `${icon} Max file size is 1MB`
|
|
else if(text === 'error') errorSpanUploadImage.innerHTML = `${icon} There have been some sort of an error`
|
|
else if(text === 'extension not allowed') errorSpanUploadImage.innerHTML = `${icon} Only jpeg, jpg, png are allowed`
|
|
else {
|
|
newImg = true
|
|
imageUploadActive = true
|
|
errorSpanUploadImage.classList.remove('red-color')
|
|
errorSpanUploadImage.classList.add('light-green-color')
|
|
errorSpanUploadImage.innerHTML = 'Image has been successfully added'
|
|
currentImageUploadLocation = text.split(' ')[1]
|
|
console.log(currentImageUploadLocation)
|
|
if(document.querySelector('#external-img-container div.costum')) {
|
|
document.querySelector('#external-img-container div.costum').remove()
|
|
removeImg('../' + currentImageUploadLocation)
|
|
}
|
|
let div = document.createElement('div')
|
|
div.style.display = 'flex'
|
|
div.style.alignItems = 'center'
|
|
div.style.justifyContent = 'center'
|
|
div.classList.add('google','costum')
|
|
div.onclick = () => { selectImg(div) }
|
|
let img = document.createElement('img')
|
|
img.src = '../' + currentImageUploadLocation
|
|
img.alt = 'profile'
|
|
img.classList.add('img','medium')
|
|
div.appendChild(img)
|
|
document.querySelector('#external-img-container').insertBefore(div , document.querySelector('#external-img-container').children[0])
|
|
}
|
|
document.getElementById('file-upload').value = null
|
|
|
|
} else imageNameLabel.innerHTML = 'No file selected'
|
|
|
|
}
|
|
function fileChange() {
|
|
document.querySelector('.insert-photo-container .footer .footer').classList.remove('disable')
|
|
let a = document.getElementById('file-upload').value.split(`fakepath`).pop().replace(/\\/g, '')
|
|
a = a.substring(0, 20)+'...'
|
|
imageNameLabel.innerHTML = a
|
|
}
|
|
|
|
function selectImg(element) {
|
|
if(document.querySelector('.check-mark')) document.querySelector('.check-mark').remove()
|
|
let div = document.createElement('div')
|
|
div.classList.add('check-mark')
|
|
let i = document.createElement('i')
|
|
i.classList.add('far','fa-check')
|
|
div.appendChild(i)
|
|
element.appendChild(div)
|
|
}
|
|
|
|
async function removeImg(name) {
|
|
await fetch('../include/update.inc.php', {
|
|
method: "POST",
|
|
body: createFormData('deleteImg', name)
|
|
})
|
|
} |