login/register/post
This commit is contained in:
parent
6f18890739
commit
6fc506df2f
6 changed files with 283 additions and 108 deletions
|
|
@ -22,47 +22,69 @@
|
|||
padding-top: 8px;
|
||||
padding-left: 4px;
|
||||
|
||||
.buttons {
|
||||
display: none;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
input, button {
|
||||
height: 36px;
|
||||
}
|
||||
input {
|
||||
width: calc(50% - 8px);
|
||||
}
|
||||
.buttons {
|
||||
&.login {
|
||||
input {
|
||||
width: calc(100% - 8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
input.invalid,
|
||||
textarea.invalid {
|
||||
border-bottom: 1px solid purple;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input {
|
||||
padding: 4px;
|
||||
margin-left: 0;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
margin-right: 4px;
|
||||
background: none;
|
||||
color: white;
|
||||
border: 1px solid green;
|
||||
}
|
||||
textarea {
|
||||
width: calc(100% - 8px);
|
||||
height: 100px;
|
||||
display: block;
|
||||
}
|
||||
button {
|
||||
background: black;
|
||||
color: white;
|
||||
border: solid 1px green;
|
||||
padding: 8px;
|
||||
}
|
||||
button:hover,
|
||||
button:active {
|
||||
border: solid 1px lightgreen;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@media(max-width:768px) {
|
||||
.add-comment {
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-comment textarea,
|
||||
.add-comment input {
|
||||
padding: 4px;
|
||||
margin-left: 0;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
margin-right: 4px;
|
||||
background: none;
|
||||
color: white;
|
||||
border: 1px solid green;
|
||||
}
|
||||
.add-comment input {
|
||||
width: calc(50% - 8px);
|
||||
}
|
||||
.add-comment textarea {
|
||||
width: calc(100% - 8px);
|
||||
height: 100px;
|
||||
display: block;
|
||||
}
|
||||
.add-comment button {
|
||||
background: black;
|
||||
color: white;
|
||||
border: solid 1px green;
|
||||
padding: 8px;
|
||||
}
|
||||
.add-comment button:hover {
|
||||
border: solid 1px lightgreen;
|
||||
cursor: pointer;
|
||||
}
|
||||
.add-comment {
|
||||
.buttons {
|
||||
&.login {
|
||||
input {
|
||||
width: calc(25% - 8px);
|
||||
input {
|
||||
width: calc(100% - 8px);
|
||||
}
|
||||
.buttons {
|
||||
&.login {
|
||||
input {
|
||||
width: calc(100% - 8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -99,3 +121,4 @@ button.publish-comment {
|
|||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,42 @@
|
|||
async function publish_comment(id) {
|
||||
var csrf
|
||||
function getCookie(name) {
|
||||
var cookieValue = null;
|
||||
if (document.cookie && document.cookie !== '') {
|
||||
var cookies = document.cookie.split(';');
|
||||
for (var i = 0; i < cookies.length; i++) {
|
||||
var cookie = cookies[i].trim();
|
||||
// Does this cookie string begin with the name we want?
|
||||
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return cookieValue;
|
||||
}
|
||||
|
||||
function getCSRF() {
|
||||
return document.querySelector('input[name="csrfmiddlewaretoken"]').value
|
||||
}
|
||||
|
||||
function serializeData(fields) {
|
||||
var data = {};
|
||||
document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
|
||||
if (input.name == 'csrfmiddlewaretoken') {
|
||||
csrf = input.value.trim()
|
||||
if (fields && !fields.includes(input.name)) {
|
||||
return
|
||||
}
|
||||
if (input.name != 'csrfmiddlewaretoken') {
|
||||
var value = input.value.trim()
|
||||
if (value) {
|
||||
data[input.name] = value
|
||||
}
|
||||
}
|
||||
})
|
||||
var data = {
|
||||
"comment": id
|
||||
}
|
||||
return fetch("/comment/publish/", {
|
||||
return data
|
||||
}
|
||||
|
||||
async function api(url, data) {
|
||||
var csrf = getCSRF()
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
|
|
@ -19,30 +47,26 @@ async function publish_comment(id) {
|
|||
return response.json()
|
||||
})
|
||||
}
|
||||
async function publish_comment(id) {
|
||||
return api("/comment/publish/", {
|
||||
"comment": id
|
||||
})
|
||||
}
|
||||
|
||||
async function login(username, password) {
|
||||
var csrf
|
||||
document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
|
||||
if (input.name == 'csrfmiddlewaretoken') {
|
||||
csrf = input.value.trim()
|
||||
}
|
||||
})
|
||||
var data = {
|
||||
"username": username,
|
||||
"password": password,
|
||||
}
|
||||
return fetch("/login/", {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': csrf
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
}).then(response => {
|
||||
return response.json()
|
||||
async function logout() {
|
||||
return api("/logout/", {}).then(response => {
|
||||
delete user.username
|
||||
})
|
||||
}
|
||||
|
||||
async function login(data) {
|
||||
return api("/login/", data)
|
||||
}
|
||||
|
||||
async function register(data) {
|
||||
return api("/register/", data)
|
||||
}
|
||||
|
||||
function renderComments(cdiv, data) {
|
||||
cdiv.innerHTML = `
|
||||
<h3>
|
||||
|
|
@ -70,7 +94,6 @@ function renderComments(cdiv, data) {
|
|||
<div class="text">${comment.text}</div>
|
||||
<div class="meta">
|
||||
by <span class="name">${comment.name}</span>
|
||||
on
|
||||
<span class="date">${comment.date}</span>
|
||||
${extra}
|
||||
</div>
|
||||
|
|
@ -101,29 +124,31 @@ function renderComments(cdiv, data) {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
function clearInvalid() {
|
||||
document.querySelectorAll('input.invalid, textarea.invalid').forEach(invalid => {
|
||||
invalid.classList.remove('invalid')
|
||||
})
|
||||
}
|
||||
|
||||
document.querySelector('button#add-comment').addEventListener('click', event => {
|
||||
var data = {}, csrf;
|
||||
document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
|
||||
if (input.name == 'csrfmiddlewaretoken') {
|
||||
csrf = input.value.trim()
|
||||
} else {
|
||||
data[input.name] = input.value.trim()
|
||||
if (!data[input.name]) {
|
||||
delete data[input.name]
|
||||
}
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
var valid = true, fields = ['text', 'name', 'email']
|
||||
var element = document.querySelector('.add-comment .comment-fields')
|
||||
element.querySelectorAll('input:invalid, textarea:invalid').forEach(invalid => {
|
||||
if (fields.includes(invalid.name)) {
|
||||
invalid.classList.add('invalid')
|
||||
valid = false
|
||||
console.log('invalid', invalid)
|
||||
}
|
||||
})
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
var data = serializeData(fields);
|
||||
data.item = pandora.comment
|
||||
fetch("/comment/", {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': csrf
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
}).then(response => {
|
||||
return response.json()
|
||||
}).then(response => {
|
||||
api("/comment/", data).then(response => {
|
||||
var comment = document.createElement('div')
|
||||
comment.classList.add('comment')
|
||||
comment.innerHTML = `
|
||||
|
|
@ -139,5 +164,119 @@ document.querySelector('button#add-comment').addEventListener('click', event =>
|
|||
comment.querySelector('.text').innerText = response.text
|
||||
document.querySelector('.comments .comments-content').append(comment)
|
||||
document.querySelector('.add-comment textarea').value = ''
|
||||
if (!user.username) {
|
||||
localStorage.name = data.name
|
||||
localStorage.email = data.email
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function afterLogin() {
|
||||
document.querySelector('input[name="csrfmiddlewaretoken"]').value = getCookie('csrftoken')
|
||||
user.username = data.username
|
||||
document.querySelectorAll('.add-comment input[name="email"]').forEach(input => {
|
||||
input.required = false
|
||||
})
|
||||
document.querySelectorAll('.add-comment input[type="password"]').forEach(input => {
|
||||
input.value = ""
|
||||
input.required = false
|
||||
})
|
||||
document.querySelector('.add-comment .buttons.login').classList.remove('active')
|
||||
var buttons = document.querySelector('.add-comment .buttons.guest')
|
||||
buttons.querySelector('#add-comment').innerText = "Add comment"
|
||||
buttons.querySelector('#login').remove()
|
||||
buttons.classList.remove('guest')
|
||||
buttons.classList.add('active')
|
||||
var textarea = document.querySelector('.add-comment textarea')
|
||||
textarea.style.display = ""
|
||||
textarea.required = true
|
||||
document.querySelector('.add-comment .login .error').innerText = ''
|
||||
delete localStorage.name
|
||||
delete localStorage.email
|
||||
}
|
||||
|
||||
var btnLogin = document.querySelector('.add-comment .buttons.guest button#login')
|
||||
if (btnLogin) {
|
||||
btnLogin.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
clearInvalid()
|
||||
document.querySelector('.add-comment .buttons.guest').classList.remove('active')
|
||||
document.querySelector('.add-comment .user-info').style.display = "none"
|
||||
document.querySelector('.add-comment .buttons.login').classList.add('active')
|
||||
var textarea = document.querySelector('.add-comment textarea')
|
||||
textarea.style.display = "none"
|
||||
textarea.required = false
|
||||
|
||||
})
|
||||
document.querySelector('.add-comment .buttons.login button#login').addEventListener("click", event => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
clearInvalid()
|
||||
if (!document.querySelectorAll('.add-comment .login input:invalid').length) {
|
||||
event.target.disabled = true
|
||||
var data = serializeData()
|
||||
login({
|
||||
"username": data.username,
|
||||
"password": data.password,
|
||||
}).then(response => {
|
||||
if (response.error) {
|
||||
document.querySelector('.add-comment .login .error').innerText = response.error
|
||||
event.target.disabled = false
|
||||
} else {
|
||||
afterLogin()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
document.querySelectorAll('.add-comment .login input:invalid').forEach(invalid => {
|
||||
invalid.classList.add('invalid')
|
||||
})
|
||||
document.querySelector('.add-comment .login .error').innerText = ''
|
||||
}
|
||||
})
|
||||
document.querySelector('.add-comment .buttons.login button#register').addEventListener("click", event => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
clearInvalid()
|
||||
var login = document.querySelector('.add-comment .buttons.login button#login')
|
||||
var email = document.querySelector('.add-comment .buttons.login input[name="email"]')
|
||||
if (login.style.display == "none") {
|
||||
if (!document.querySelectorAll('.add-comment .login input:invalid').length) {
|
||||
event.target.disabled = true
|
||||
var data = serializeData()
|
||||
register({
|
||||
"username": data.username,
|
||||
"password": data.password,
|
||||
"email": data.email,
|
||||
}).then(response => {
|
||||
if (response.error) {
|
||||
document.querySelector('.add-comment .login .error').innerText = response.error
|
||||
event.target.disabled = false
|
||||
} else {
|
||||
afterLogin()
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
document.querySelectorAll('.add-comment .login input:invalid').forEach(invalid => {
|
||||
invalid.classList.add('invalid')
|
||||
})
|
||||
document.querySelector('.add-comment .login .error').innerText = ''
|
||||
}
|
||||
} else {
|
||||
document.querySelector('.add-comment .login .error').innerText = ''
|
||||
login.style.display = "none"
|
||||
email.required = true
|
||||
email.style.display = "block"
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (!user.username) {
|
||||
if (localStorage.name) {
|
||||
document.querySelector('.add-comment .comment-fields input[name="name"]').value = localStorage.name
|
||||
}
|
||||
if (localStorage.email) {
|
||||
document.querySelector('.add-comment .comment-fields input[name="email"]').value = localStorage.email
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue