Login, Registrieren reperiert
This commit is contained in:
Georg Reisinger
parent
74977a257a
commit
f645aee8e5
@ -10,26 +10,16 @@ var config = {
|
||||
firebase.initializeApp(config);
|
||||
|
||||
|
||||
function checkAuth() {
|
||||
firebase.auth().onAuthStateChanged(async function (user) {
|
||||
async function checkAuth() {
|
||||
await firebase.auth().onAuthStateChanged(async function (user) {
|
||||
if (user) {
|
||||
try {
|
||||
firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idToken) {
|
||||
console.log("Vor Replace");
|
||||
await firebase.auth().currentUser.getIdToken(true).then(function (idToken) {
|
||||
console.log("Vor Replace");
|
||||
|
||||
window.location.replace("/dash/" + idToken);
|
||||
}).catch(function (error) {
|
||||
console.error("Get id token client error: ", error)
|
||||
});
|
||||
} catch {
|
||||
console.error("checkAuth error: ");
|
||||
}
|
||||
|
||||
// document.getElementById("loginbutton").style.display = "none";
|
||||
//
|
||||
} else {
|
||||
// document.getElementById("loginbutton").style.display = "block";
|
||||
console.log("Check Auth error", user)
|
||||
window.location.replace("/dash/" + idToken);
|
||||
}).catch(function (error) {
|
||||
console.error("Get id token client error: ", error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -43,9 +33,17 @@ var vue = new Vue({
|
||||
el: '#vue-app',
|
||||
data: {
|
||||
email: "",
|
||||
password: ""
|
||||
password: "",
|
||||
emailandpwd: false
|
||||
},
|
||||
methods: {
|
||||
emailpasswdfilled() {
|
||||
var filled = false;
|
||||
if (email && password) {
|
||||
filled = true;
|
||||
}
|
||||
emailandpwd = filled;
|
||||
},
|
||||
login() {
|
||||
var provider = new firebase.auth.GoogleAuthProvider();
|
||||
provider.addScope('profile');
|
||||
|
||||
@ -15,38 +15,45 @@ var vue = new Vue({
|
||||
data: {
|
||||
name: "",
|
||||
email: "",
|
||||
picurl: "",
|
||||
password: ""
|
||||
},
|
||||
methods: {
|
||||
registerEmail() {
|
||||
async registerEmail() {
|
||||
|
||||
|
||||
console.log("Start register: ", this.name, this.email, this.password)
|
||||
|
||||
await firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
|
||||
.then(user => {
|
||||
console.log("User created: ", user);
|
||||
|
||||
})
|
||||
.catch(function (error) {
|
||||
// Handle Errors here.
|
||||
var errorCode = error.code;
|
||||
var errorMessage = error.message;
|
||||
|
||||
console.error(error.code + '_' + error.message);
|
||||
alert(error.code + '_' + error.message);
|
||||
});
|
||||
var user = firebase.auth().currentUser;
|
||||
if (user != null) {
|
||||
await user.updateProfile({
|
||||
displayName: this.name,
|
||||
photoURL: "http://techfrage.de/upfiles/13547334191038217.png"
|
||||
}).then(function () {
|
||||
console.log("update name and photo");
|
||||
|
||||
firebase.auth().createUserWithEmailAndPassword(this.email, this.password).catch(function (error) {
|
||||
// Handle Errors here.
|
||||
var errorCode = error.code;
|
||||
var errorMessage = error.message;
|
||||
|
||||
console.error(error)
|
||||
// ...
|
||||
});
|
||||
|
||||
user.updateProfile({
|
||||
displayName: this.name,
|
||||
photoURL: this.picurl
|
||||
}).then(function () {
|
||||
// Update successful.
|
||||
}).catch(function (error) {
|
||||
console.error(error)
|
||||
});
|
||||
|
||||
user.updateEmail(this.email).then(function () {
|
||||
// Update successful.
|
||||
}).catch(function (error) {
|
||||
console.error(error)
|
||||
});
|
||||
|
||||
window.location.href = "/";
|
||||
}).catch(function (error) {
|
||||
console.error(error);
|
||||
});
|
||||
await user.updateEmail(this.email).then(function () {
|
||||
console.log("Email");
|
||||
}).catch(function (error) {
|
||||
console.error(error);
|
||||
});
|
||||
window.location.href = "/";
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
@ -11,24 +11,24 @@ var postgres = require("./../db-connect/db-connect");
|
||||
var admin = require('firebase-admin');
|
||||
var serviceAccount = require('../login/firebaseAdminKey.json');
|
||||
var firebaseAdmin = admin.initializeApp({
|
||||
credential: admin.credential.cert(serviceAccount),
|
||||
databaseURL: 'https://test-667ca.firebaseio.com'
|
||||
});
|
||||
credential: admin.credential.cert(serviceAccount),
|
||||
databaseURL: 'https://test-667ca.firebaseio.com'
|
||||
});
|
||||
|
||||
router.get('/user', function(req, res, next){
|
||||
res.status(200).render('user');
|
||||
});
|
||||
router.get('/user', function (req, res, next) {
|
||||
res.status(200).render('user');
|
||||
});
|
||||
|
||||
router.post('/userbearbeiten', function(req, res, next){
|
||||
var mid = req.body.mid;
|
||||
var token = req.body.token;
|
||||
var name = req.body.name;
|
||||
var pic = req.body.pic;
|
||||
var vm = this;
|
||||
firebaseAdmin.auth().verifyIdToken(token)
|
||||
router.post('/userbearbeiten', function (req, res, next) {
|
||||
var mid = req.body.mid;
|
||||
var token = req.body.token;
|
||||
var name = req.body.name;
|
||||
var pic = req.body.pic;
|
||||
var vm = this;
|
||||
firebaseAdmin.auth().verifyIdToken(token)
|
||||
.then(async function (decodedToken) {
|
||||
console.log("UID: ", decodedToken.uid);
|
||||
console.log("Name: ", name, ' \nPic: ', pic, ' \nToken: ', token, ' \nMID: ' , mid, "\nDecoded token: ", decodedToken.uid, decodedToken.email);
|
||||
console.log("Name: ", name, ' \nPic: ', pic, ' \nToken: ', token, ' \nMID: ', mid, "\nDecoded token: ", decodedToken.uid, decodedToken.email);
|
||||
try {
|
||||
|
||||
res.status(200).send(await postgres.realUpdateUser(decodedToken.uid, mid, name, pic, decodedToken.email));
|
||||
@ -39,19 +39,19 @@ var firebaseAdmin = admin.initializeApp({
|
||||
console.error(await error);
|
||||
});
|
||||
|
||||
});
|
||||
router.get('/getuser/:uid', async function(req, res){
|
||||
try {
|
||||
var sender = await postgres.getUser(req.params.uid);
|
||||
res.status(200).send(sender);
|
||||
}catch (err) {
|
||||
res.status(400).send(await err);
|
||||
}
|
||||
});
|
||||
});
|
||||
router.get('/getuser/:uid', async function (req, res) {
|
||||
try {
|
||||
var sender = await postgres.getUser(req.params.uid);
|
||||
res.status(200).send(sender);
|
||||
} catch (err) {
|
||||
res.status(400).send(await err);
|
||||
}
|
||||
});
|
||||
|
||||
//Push
|
||||
router.get('/push/:msgtoken/:message/:title', function (req, res, next) {
|
||||
|
||||
|
||||
push.sendPush(req.params.msgtoken, req.params.title, req.params.message);
|
||||
var sender = "Message Token: " + req.params.msgtoken + " Message: " + req.params.message + " Title: " + req.params.title;
|
||||
res.status(200).send(sender);
|
||||
@ -218,20 +218,20 @@ router.get("/shoppinglist_json/:sl_id", async (req, res) => {
|
||||
|
||||
router.delete("/shoppinglist", async (req, res) => {
|
||||
|
||||
var token = req.body.idtoken;
|
||||
var uid;
|
||||
firebaseAdmin.auth().verifyIdToken(token)
|
||||
.then(async function (decodedToken) {
|
||||
uid = decodedToken.uid;
|
||||
|
||||
try {
|
||||
res.status(200).send(await postgres.deleteShoppinglist(req.body.sl_id, uid));
|
||||
} catch (err) {
|
||||
res.status(400).send(await err);
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
var token = req.body.idtoken;
|
||||
var uid;
|
||||
firebaseAdmin.auth().verifyIdToken(token)
|
||||
.then(async function (decodedToken) {
|
||||
uid = decodedToken.uid;
|
||||
|
||||
try {
|
||||
res.status(200).send(await postgres.deleteShoppinglist(req.body.sl_id, uid));
|
||||
} catch (err) {
|
||||
res.status(400).send(await err);
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
});
|
||||
|
||||
router.post("/movedoneitem", (req, res) => {
|
||||
|
||||
@ -2,29 +2,124 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<link rel='stylesheet' href='/stylesheets/style.css' />
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
|
||||
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-green.min.css" />
|
||||
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
|
||||
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-auth.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id='vue-app'>
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<div id="login-conatiner" class="mdl-card mdl-shadow--16dp">
|
||||
<div class="mdl-card__supporting-text">
|
||||
<div id="login-fab" class="mdl-color--accent mdl-color-text--white">
|
||||
<i id="lock-icon" class="material-icons">lock</i>
|
||||
</div>
|
||||
<div id="card-heading">
|
||||
User Login
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" v-model="email" id="email" type="email">
|
||||
<label class="mdl-textfield__label" for="email">Email</label>
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" v-model="password" id="password" type="password">
|
||||
<label class="mdl-textfield__label" for="password">Password</label>
|
||||
</div>
|
||||
<p>
|
||||
<button id="login-button" v-show="email && password"
|
||||
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">
|
||||
Login mit Email
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button id="login-button" @click="login()" v-show="!email && !password"
|
||||
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">
|
||||
Login mit Google
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input v-model="email" id="email" type="email">
|
||||
<input v-model="password" id="password" type="password">
|
||||
<button id="loginemailbutton" @click="loginemail">Login with Email</button>
|
||||
|
||||
<button id="loginbutton" @click="login">Login with google</button>
|
||||
|
||||
<a href="/registrieren"><button>Jetzt mit Email und Passwort Registrieren!</button></a>
|
||||
|
||||
<script src="javascripts/login.js"></script>
|
||||
<div class="mdl-card__actions">
|
||||
<a href="/register"><button class="mdl-button mdl-js-button mdl-button--primary">Email
|
||||
Registrieren</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
||||
<script src="javascripts/login.js"></script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
overflow-x: hidden;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgba(0, 0, 0, 0.0392156862745098);
|
||||
background: linear-gradient(-45deg, rgba(16, 0, 78, 0.3686274509803922), rgba(20, 4, 81, 0));
|
||||
}
|
||||
|
||||
#login-conatiner {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mdl-card,
|
||||
.mdl-card__supporting-text {
|
||||
overflow: inherit !important;
|
||||
}
|
||||
|
||||
.mdl-card {
|
||||
overflow: visible !important;
|
||||
z-index: auto !important;
|
||||
}
|
||||
|
||||
#login-fab {
|
||||
border-radius: 50%;
|
||||
height: 56px;
|
||||
margin: auto;
|
||||
min-width: 56px;
|
||||
width: 56px;
|
||||
overflow: hidden;
|
||||
background: rgba(158, 158, 158, .2);
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#lock-icon {
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
#login-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
min-width: initial;
|
||||
}
|
||||
|
||||
#card-heading {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
height: 30px;
|
||||
padding-top: 30px;
|
||||
color: rgba(0, 0, 0, 0.31);
|
||||
}
|
||||
|
||||
#forgotpassword {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -6,26 +6,116 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
|
||||
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
|
||||
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
|
||||
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-auth.js"></script>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-green.min.css" />
|
||||
<title>Registrieren</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="vue-app">
|
||||
<label for="name">Name: </label>
|
||||
<input v-model="name" type="text" id="name">
|
||||
<label for="email">Email: </label>
|
||||
<input v-model="email" type="email" name="email">
|
||||
<label for="picURL">Bild URL: </label>
|
||||
<input v-model="picurl" type="url" id="picURL">
|
||||
<label for="password">Passwort: </label>
|
||||
<input type="password" id="password" v-model="password">
|
||||
|
||||
<button @click="registerEmail()"></button>
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<div id="login-conatiner" class="mdl-card mdl-shadow--16dp">
|
||||
<div class="mdl-card__supporting-text">
|
||||
<div id="login-fab" class="mdl-color--accent mdl-color-text--white">
|
||||
<i id="lock-icon" class="material-icons">lock</i>
|
||||
</div>
|
||||
<div id="card-heading">
|
||||
User Registrieren
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" v-model="name" id="name" type="name">
|
||||
<label class="mdl-textfield__label" for="name">Name</label>
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" v-model="email" id="email" type="email">
|
||||
<label class="mdl-textfield__label" for="email">Email</label>
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" v-model="password" id="password" type="password">
|
||||
<label class="mdl-textfield__label" for="password">Password</label>
|
||||
</div>
|
||||
<button id="login-button" @click="registerEmail()" v-show="email && password && name"
|
||||
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">
|
||||
Jetzt Registrieren
|
||||
</button>
|
||||
</div>
|
||||
<div class="mdl-card__actions">
|
||||
<a href="/"><button class="mdl-button mdl-js-button mdl-button--primary">Zurück zum
|
||||
Login</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
||||
<script src="javascripts/registerEmail.js"></script>
|
||||
<style>
|
||||
* {
|
||||
overflow-x: hidden;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgba(0, 0, 0, 0.0392156862745098);
|
||||
background: linear-gradient(-45deg, rgba(16, 0, 78, 0.3686274509803922), rgba(20, 4, 81, 0));
|
||||
}
|
||||
|
||||
#login-conatiner {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mdl-card,
|
||||
.mdl-card__supporting-text {
|
||||
overflow: inherit !important;
|
||||
}
|
||||
|
||||
.mdl-card {
|
||||
overflow: visible !important;
|
||||
z-index: auto !important;
|
||||
}
|
||||
|
||||
#login-fab {
|
||||
border-radius: 50%;
|
||||
height: 56px;
|
||||
margin: auto;
|
||||
min-width: 56px;
|
||||
width: 56px;
|
||||
overflow: hidden;
|
||||
background: rgba(158, 158, 158, .2);
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#lock-icon {
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
#login-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
min-width: initial;
|
||||
}
|
||||
|
||||
#card-heading {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
height: 30px;
|
||||
padding-top: 30px;
|
||||
color: rgba(0, 0, 0, 0.31);
|
||||
}
|
||||
|
||||
#forgotpassword {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -22,32 +22,37 @@
|
||||
<!-- Square card -->
|
||||
<center>
|
||||
<div class="demo-card-image mdl-card mdl-shadow--2dp">
|
||||
<button @click="backToDash" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> Zurück
|
||||
zu SmartShopper</button>
|
||||
<button @click="backToDash"
|
||||
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> Zurück
|
||||
zu SmartShopper</button>
|
||||
<img v-bind:src="this.dataPic" width="100%" />
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
|
||||
|
||||
</div>
|
||||
<div class="mdl-card__actions">
|
||||
<label for="nameinput">Name: </label><input type="text" id="nameinput" v-model="name">
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<div v-if="!showUploadButtons">
|
||||
<Label class="input-custom-file mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
|
||||
Foto ändern
|
||||
<input type="file" @change="onFileChange">
|
||||
</label>
|
||||
<Label
|
||||
class="input-custom-file mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
|
||||
Foto ändern
|
||||
<input type="file" @change="onFileChange">
|
||||
</label>
|
||||
<button @click="fertig" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Fertig
|
||||
</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<button @click="removeImage" class="mdl-button mdl-js-button mdl-button--raised mdl-button--coloredmdl-js-ripple-effect mdl-button--accent">Remove image</button>
|
||||
<button @click="fotoChoose" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
|
||||
<button @click="removeImage"
|
||||
class="mdl-button mdl-js-button mdl-button--raised mdl-button--coloredmdl-js-ripple-effect mdl-button--accent">Remove
|
||||
image</button>
|
||||
<button @click="fotoChoose"
|
||||
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
|
||||
Foto setzten
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</center>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user