siv/github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

basic authentication

Browse Source
This commit is contained in:
sava 2020-03-27 22:24:01 +01:00
parent 8676f94dcc
commit 891f219379
13 changed files with 197 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -6,10 +6,10 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="/main.css"> <link rel="stylesheet" href="/main.css">
</head> </head>
<bod> <body>
<div id="content"> <div id="content">
<h3>Noting to see here</h3> <h3>Noting to see here</h3>
<p>You can check out work I did in IT1 (informasjons teknologi 1) a Norwegian optional vacational course <a href="/it1/index.html">here</a>.</p> <p>You can check out work I did in IT1 (informasjons teknologi 1) a Norwegian optional vacational course <a href="/it1/">here</a>.</p>
</div> </div>
</bod> </body>
</html> </html>

50
it1/bibliotek/bibliotek.js
View File

@ -1,44 +1,60 @@
var firestore = firebase.firestore var db = firebase.firestore()
var list = function() { var list = function(user) {
// db.collection('bibliotek').doc("8ZBX5gmIaRwQBCjgLLg0").get().then(function(doc){console.log(doc.data())}) // db.collection('bibliotek').doc("8ZBX5gmIaRwQBCjgLLg0").get().then(function(doc){console.log(doc.data())})
// db.collection('bibliotek').get().then(function(query){query.forEach(function(doc){console.log(doc.data())})}) // db.collection('bibliotek').get().then(function(query){query.forEach(function(doc){console.log(doc.data())})})
db.collection('bibliotek') db.collection('bibliotek')
.withConverter(bookConverter) .withConverter(bookConverter)
.get() .get()
.then(function(query) { .then(function(query) {
html = '' html = '<br/>'
query.forEach(function(doc) { query.forEach(function(doc) {
book = doc.data() book = doc.data()
html += book.toHtml() html += book.toHtml(user)
}) })
$('#books').html(html) $('#books').html(html)
}) }).catch(function(error) {
.catch(function(error) { $('#books').html('<h3>Kunne ikke hente bøker!</h3><br/><p>'+error+'</p>')
$('#books').html('<h3>Kunne ikke hente bøker!</h3><p>'+error+'</p>')
$('#books').css('color', 'red') $('#books').css('color', 'red')
}) })
} }
var add = function() { var add = function() {
let millis = Date.parse($('#published')[0].value) db.collection("bibliotek")
db.collection("bibliotek").add({ // withConverter ? .withConverter(bookConverter)
tittel: $('#title')[0].value, .add(new Book(
forfatter: $('#author')[0].value, $('#title')[0].value,
forlag: $('#publisher')[0].value, $('#author')[0].value,
terningkast: $('#rating')[0].value, $('#publisher')[0].value,
utgitt: new firestore.Timestamp(millis/1000, 0) $('#rating')[0].value,
}).then(function() { $('#published')[0].value
)).then(function() {
$('#status').html('<p>La til bok '+$('#title')[0].value+'!</p>') $('#status').html('<p>La til bok '+$('#title')[0].value+'!</p>')
$('#status').css('color', 'green') $('#status').css('color', 'green')
list(firebase.auth().currentUser)
}).catch(function() { }).catch(function() {
$('#status').html('<p>Problem med å legge til bok '+$('#title')[0].value+'!</p>') $('#status').html('<p>Problem med å legge til bok '+$('#title')[0].value+'!</p>')
$('#status').css('color', 'red') $('#status').css('color', 'red')
}) })
} }
$(document).ready(function() { var remove = function(id) {
list() db.collection("bibliotek").doc(id)
.delete().then(function() {
list(firebase.auth().currentUser)
}).catch(function(error) {
alert("Error removing document: ", error)
})
}
firebase.auth().onAuthStateChanged(function(user) {
list(user)
}) })
/*
$(document).ready(function() {
list(firebase.auth().currentUser)
})
*/

34
it1/bibliotek/bok.js
View File

@ -1,37 +1,47 @@
class Book { class Book {
constructor(title, author, publisher, rating, published) { constructor(title, author, publisher, rating, published, id=0) {
this.cfid = id
this.title = title this.title = title
this.author = author this.author = author
this.publisher = publisher this.publisher = publisher
this.rating = rating this.rating = rating
this.published = published.toDate() this.published = published
} }
toString() { toString() {
return this.title+' av '+this.author+', ternignkast '+this.rating+', utgitt '+this.published.toString().slice(0,15)+', forlag; '+this.publisher return this.title+' av '+this.author+', terningkast '+this.rating+', utgitt '+this.published.toString().slice(0,15)+', forlag; '+this.publisher
} }
toHtml() { toHtml(user=false) {
let span = function(string, color='red') { let span = function(string, color='red') {
return '<span style="color: '+color+'">'+string+'</span>' return '<span style="color: '+color+'">'+string+'</span>'
} }
return '<p>'+span(this.title)+' av '+span(this.author)+', ternignkast '+span(this.rating)+ return '<p>'+span(this.title)+' av '+span(this.author)+', terningkast '+span(this.rating)+', utgitt '
', utgitt '+span(this.published.toString().slice(0,15), 'green')+', forlag; '+span(this.publisher, 'yellow')+'</p>' +span(this.published.toString().slice(0,15), 'green')+', forlag; '+span(this.publisher, 'yellow')
+(user?' &nbsp; <a class="btn btn-primary" href="javascript: remove(\''+this.cfid+'\')">Slett</a>':'')+'</p>'
} }
} }
bookConverter = { bookConverter = {
toFirestore: function(book) { toFirestore: function(book) {
let millis = Date.parse(book.published)
return { return {
title: book.title, tittel: book.title,
author: book.author, forfatter: book.author,
publisher: book.publisher, forlag: book.publisher,
rating: book.rating, terningkast: book.rating,
published: book.published utgitt: new firebase.firestore.Timestamp(millis/1000, 0)
} }
}, },
fromFirestore: function(snapshot, options) { fromFirestore: function(snapshot, options) {
const data = snapshot.data(options) const data = snapshot.data(options)
return new Book(data.tittel, data.forfatter, data.forlag, data.terningkast, data.utgitt) return new Book(
data.tittel,
data.forfatter,
data.forlag,
data.terningkast,
data.utgitt.toDate(),
snapshot.id
)
} }
} }

16
it1/bibliotek/index.html
View File

@ -4,16 +4,18 @@
<title>Firebase basert bibliotek</title> <title>Firebase basert bibliotek</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="/it1/bibliotek/bibliotek.css"> <link rel="stylesheet" href="/it1/main.css">
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script> <link rel="stylesheet" href="/it1/css/form.css">
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-firestore.js"></script> <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/it1/init-firebase.js"></script> <script type="text/javascript" src="/it1/js/init-firebase.js"></script>
<script type="text/javascript" src="/it1/bibliotek/bok.js"></script> <script type="text/javascript" src="/it1/bibliotek/bok.js"></script>
</head> </head>
<body> <body>
<script type="text/javascript" id="navbar" src="/it1/navbar/navbar.js"></script> <script type="text/javascript" id="navbar" src="/it1/js/navbar.js"></script>
<div id="content" class="middle"> <div id="content">
<form action="#" method="POST" id="form" class="top"> <form action="#" method="POST" id="form" class="top">
<div class="form-group"> <div class="form-group">
<div class="row"> <div class="row">
@ -37,7 +39,7 @@
<div id="status"> <div id="status">
<p>&nbsp;</p> <p>&nbsp;</p>
</div> </div>
<a type="submit" class="btn btn-primary" href="javascript: list()">Hent bøker</a> <a type="submit" class="btn btn-primary" href="javascript: list(firebase.auth().currentUser)">Hent bøker</a>
<div id="books"> <div id="books">
</div> </div>
</div> </div>

30
it1/bruker/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Firebase basert bibliotek</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="/it1/main.css">
<link rel="stylesheet" href="/it1/css/form.css">
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/it1/js/init-firebase.js"></script>
<script type="text/javascript" src="/it1/js/auth.js"></script>
</head>
<body>
<script type="text/javascript" id="navbar" src="/it1/js/navbar.js"></script>
<div id="content">
<form action="#" method="POST" id="form" class="top">
<div class="form-group">
<input type="name" class="form-control" id="mail" placeholder="Epost">
<input type="password" class="form-control" id="password" placeholder="Passord">
</div>
<a type="submit" class="btn btn-primary" id="login" onclick="signin()">Logg inn</a>
</form>
<div id="status">
</div>
</div>
<script type="text/javascript" src="/it1/js/auth.js"></script>
</body>
</html>

18
it1/bibliotek/bibliotek.css → it1/css/form.css
View File

@ -1,17 +1,14 @@
#content { #content {
margin: 2vh; margin: 2vh;
margin-left: 13vw;
margin-right: 42.0vw;
} }
.top { .top {
margin-top: 9vh; margin-top: 9vh;
} }
.middle {
margin-left: 13vw;
margin-right: 42.0vw;
}
#status { #status {
margin-top: 1vh; margin-top: 1vh;
} }
@ -24,3 +21,14 @@
margin-bottom: 0.33vh; margin-bottom: 0.33vh;
} }
.form-control {
background-color: #333;
border-color: #222;
color: lime;
}
.form-control:focus {
background-color: #555;
border-color: #333;
color: lime;
}

13
it1/index.html
View File

@ -1,20 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Simple firebase logon</title> <title>Simple firebase stuff</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="/it1/main.css"> <link rel="stylesheet" href="/it1/main.css">
<!-- <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/7.11.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/7.11.0/firebase-firestore.js"></script>
-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/it1/js/init-firebase.js"></script>
<script type="text/javascript" src="/it1/js/auth.js"></script>
</head> </head>
<body> <body>
<!-- <iframe id="navbar" width="100%" height="60px" src="/it1/navbar/navbar.html" style="border: 0px"></iframe> --> <!-- <iframe id="navbar" width="100%" height="60px" src="/it1/navbar/navbar.html" style="border: 0px"></iframe> -->
<script type="text/javascript" id="navbar" src="/it1/navbar/navbar.js"></script> <script type="text/javascript" id="navbar" src="/it1/js/navbar.js"></script>
<div id="content"> <div id="content">
<h3 style="margin: 3vh">Denne siden inneholder ting jeg har laget med firebase i IT1!</h3> <h3 style="margin: 3vh">Denne siden inneholder ting jeg har laget med firebase i IT1!</h3>
<br /> <br />

18
it1/js/auth.js Normal file
View File

@ -0,0 +1,18 @@
var signin = function() {
firebase.auth()
.signInWithEmailAndPassword($('#mail')[0].value, $('#password')[0].value)
.then(function() {
document.location.href = "/it1/"
}).catch(function(error) {
$('#status').html('<h3>Kunne ikke logge inn som '+$('#mail')[0].value+'!</h3><p>'+error.code+': '+error.message+'</p>')
$('#status').css('color', 'red')
})
}
$(document).keydown(function(e) {
if (e.which == 13){
$("#login").click()
}
})

2
it1/init-firebase.js → it1/js/init-firebase.js
View File

@ -8,5 +8,3 @@ firebase.initializeApp({
messagingSenderId: "206703382262", messagingSenderId: "206703382262",
appId: "1:206703382262:web:be48f32d11a15fa28f26d7" appId: "1:206703382262:web:be48f32d11a15fa28f26d7"
}) })
var db = firebase.firestore()

43
it1/js/navbar.js Normal file
View File

@ -0,0 +1,43 @@
$('#navbar').parent().html(`
<nav class="navbar navbar-expand-sm bg-dark navbar-dark" id="navbar">
<a class="navbar-brand" href="/it1/">IT1 firebase stuff</a>
<!-- <ul class="navbar-nav">
<li class="nav-item right">
<a class="nav-link" href="/it1/about.html">About</a>
</li>
</ul> -->
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item right" id="register-btn">
<a class="nav-link" href="/register">Register</a>
</li> -->
<li class="nav-item right">
<a class="nav-link" id="login-btn" href="/it1/bruker/"></a>
</li>
</ul>
</nav>`)
var signout = function() {
firebase.auth()
.signOut()
.then(function() {
document.location.href = '/it1/'
}).catch(function(error) {
alert('could not log out: '+error.message)
})
}
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
$('#login-btn').attr('href', 'javascript: signout()')
$('#login-btn').html('Logout')
} else {
$('#login-btn').attr('href', '/it1/bruker/login')
$('#login-btn').html('Login')
}
})
for (var i = 0; i < $('#navbar').children().length; i++) {
$('#navbar').children().css('color', 'springgreen')
}

9
it1/main.css
View File

@ -1,4 +1,13 @@
body {
background-color: rgb(24, 26, 27);
color: rgb(218, 215, 210);
}
li.right > ul { /* TODO: FIX! */
align-content: right;
}
#oppgaver { #oppgaver {
margin-left: 3vh; margin-left: 3vh;
} }

28
it1/navbar/navbar.js
View File

@ -1,28 +0,0 @@
$('#navbar').parent().html(`
<nav class="navbar navbar-expand-sm bg-dark navbar-dark" id="navbar">
<a class="navbar-brand g" target="_top" href="/it1/index.html">IT1 firebase stuff</a> <!-- href="/it1/index.html" -->
<!-- <ul class="navbar-nav">
<li class="nav-item right">
<a class="nav-link" target="_top" href="/it1/about.html">About</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item right">
<a class="nav-link">Simple login here later</a>
</li>
<li class="nav-item right" style="visibility: hidden">
<a class="nav-link" target="_top" href="/logout">Logout</a>
</li>
<li class="nav-item right" id="register-btn">
<a class="nav-link" target="_top" href="/register">Register</a>
</li>
<li class="nav-item right" id="login-btn">
<a class="nav-link" target="_top" href="/login">Login</a>
</li>
</ul> -->
</nav>`)
for (var i = 0; i < $('#navbar').children().length; i++) {
$('#navbar').children().css('color', 'green')
}

5
main.css
View File

@ -1,4 +1,9 @@
body {
background-color: rgb(24, 26, 27);
color: lime;
}
div#content > * { div#content > * {
padding: 2vh; padding: 2vh;
margin: 4vh; margin: 4vh;