dergeorg/SmartShopper
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Login, Registrieren reperiert

Browse Source
This commit is contained in:
Georg Reisinger
2019-03-31 22:54:42 +02:00
parent 74977a257a
commit f645aee8e5
6 changed files with 315 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
express-server/public/javascripts/login.js
View File

@@ -10,26 +10,16 @@ var config = {
firebase.initializeApp(config); firebase.initializeApp(config);
function checkAuth() { async function checkAuth() {
firebase.auth().onAuthStateChanged(async function (user) { await firebase.auth().onAuthStateChanged(async function (user) {
if (user) { if (user) {
try { await firebase.auth().currentUser.getIdToken(true).then(function (idToken) {
firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idToken) {
console.log("Vor Replace"); console.log("Vor Replace");
window.location.replace("/dash/" + idToken); window.location.replace("/dash/" + idToken);
}).catch(function (error) { }).catch(function (error) {
console.error("Get id token client error: ", 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)
} }
}); });
} }
@@ -43,9 +33,17 @@ var vue = new Vue({
el: '#vue-app', el: '#vue-app',
data: { data: {
email: "", email: "",
password: "" password: "",
emailandpwd: false
}, },
methods: { methods: {
emailpasswdfilled() {
var filled = false;
if (email && password) {
filled = true;
}
emailandpwd = filled;
},
login() { login() {
var provider = new firebase.auth.GoogleAuthProvider(); var provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('profile'); provider.addScope('profile');

41
express-server/public/javascripts/registerEmail.js
View File

@@ -15,38 +15,45 @@ var vue = new Vue({
data: { data: {
name: "", name: "",
email: "", email: "",
picurl: "",
password: "" password: ""
}, },
methods: { methods: {
registerEmail() { async registerEmail() {
var user = firebase.auth().currentUser;
firebase.auth().createUserWithEmailAndPassword(this.email, this.password).catch(function (error) {
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. // Handle Errors here.
var errorCode = error.code; var errorCode = error.code;
var errorMessage = error.message; var errorMessage = error.message;
console.error(error) console.error(error.code + '_' + error.message);
// ... alert(error.code + '_' + error.message);
}); });
var user = firebase.auth().currentUser;
user.updateProfile({ if (user != null) {
await user.updateProfile({
displayName: this.name, displayName: this.name,
photoURL: this.picurl photoURL: "http://techfrage.de/upfiles/13547334191038217.png"
}).then(function () { }).then(function () {
// Update successful. console.log("update name and photo");
}).catch(function (error) {
console.error(error)
});
user.updateEmail(this.email).then(function () {
// Update successful.
}).catch(function (error) { }).catch(function (error) {
console.error(error) console.error(error);
});
await user.updateEmail(this.email).then(function () {
console.log("Email");
}).catch(function (error) {
console.error(error);
}); });
window.location.href = "/"; window.location.href = "/";
} }
}
}, },
}) })

117
express-server/views/index.ejs
View File

@@ -2,29 +2,124 @@
<html> <html>
<head> <head>
<link rel='stylesheet' href='/stylesheets/style.css' /> <link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script> <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> </head>
<body> <body>
<div id='vue-app'> <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"> <div class="mdl-card__actions">
<input v-model="password" id="password" type="password"> <a href="/register"><button class="mdl-button mdl-js-button mdl-button--primary">Email
<button id="loginemailbutton" @click="loginemail">Login with Email</button> Registrieren</button></a>
</div>
</div>
</div>
<button id="loginbutton" @click="login">Login with google</button>
<a href="/registrieren"><button>Jetzt mit Email und Passwort Registrieren!</button></a>
</div>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="javascripts/login.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> </body>
</html> </html>

114
express-server/views/registrieremail.ejs
View File

@@ -6,26 +6,116 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.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.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> <title>Registrieren</title>
</head> </head>
<body> <body>
<div id="vue-app"> <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>
<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> <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> </body>
</html> </html>

13
express-server/views/user.ejs
View File

@@ -22,7 +22,8 @@
<!-- Square card --> <!-- Square card -->
<center> <center>
<div class="demo-card-image mdl-card mdl-shadow--2dp"> <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 <button @click="backToDash"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> Zurück
zu SmartShopper</button> zu SmartShopper</button>
<img v-bind:src="this.dataPic" width="100%" /> <img v-bind:src="this.dataPic" width="100%" />
<div class="mdl-card__title mdl-card--expand"> <div class="mdl-card__title mdl-card--expand">
@@ -33,7 +34,8 @@
</div> </div>
<div class="mdl-card__actions mdl-card--border"> <div class="mdl-card__actions mdl-card--border">
<div v-if="!showUploadButtons"> <div v-if="!showUploadButtons">
<Label class="input-custom-file mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"> <Label
class="input-custom-file mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
Foto ändern Foto ändern
<input type="file" @change="onFileChange"> <input type="file" @change="onFileChange">
</label> </label>
@@ -42,8 +44,11 @@
</button> </button>
</div> </div>
<div v-else> <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="removeImage"
<button @click="fotoChoose" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> 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 Foto setzten
</button> </button>
</div> </div>