Login, Registrieren reperiert
This commit is contained in:
Georg Reisinger
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user