<router-view></router-view> | <router-view></router-view> | ||||
</div> | </div> | ||||
<!--<b-tabs type="is-toggle" expanded> | |||||
<b-tab-item><router-link to="/home" > | |||||
<b-icon | |||||
pack="fas" | |||||
icon="home" | |||||
size="is-small"> | |||||
</b-icon> | |||||
</router-link></b-tab-item> | |||||
<b-tab-item icon="magnify"></b-tab-item> | |||||
<b-tab-item icon="plus-circle"></b-tab-item> | |||||
<b-tab-item icon="bookmark"></b-tab-item> | |||||
<b-tab-item icon="account"></b-tab-item> | |||||
</b-tabs>--> | |||||
<nav class="navbar is-fixed-bottom is-expanded is-light is-hoverable" role="navigation" aria-label="main navigation"> | <nav class="navbar is-fixed-bottom is-expanded is-light is-hoverable" role="navigation" aria-label="main navigation"> | ||||
<div class="navbar-brand is-expanded"> | <div class="navbar-brand is-expanded"> | ||||
<router-link to="/home" class="navbar-item is-expanded has-text-centered is-active"> | <router-link to="/home" class="navbar-item is-expanded has-text-centered is-active"> |
<p class="modal-card-title">Login</p> | <p class="modal-card-title">Login</p> | ||||
</header> | </header> | ||||
<section class="modal-card-body"> | <section class="modal-card-body"> | ||||
<b-field> | <b-field> | ||||
<b-input | <b-input | ||||
placeholder="User (Ohmportal)" | placeholder="User (Ohmportal)" | ||||
</b-input> | </b-input> | ||||
</b-field> | </b-field> | ||||
<b-checkbox>Eingeloggt bleiben</b-checkbox> | <b-checkbox>Eingeloggt bleiben</b-checkbox> | ||||
<div v-if="showError" style="color:red;"> Versuche es nochmal.</div> | |||||
</section> | </section> | ||||
<footer class="modal-card-foot"> | <footer class="modal-card-foot"> | ||||
<button class="button" type="button" @click="$parent.close()">Close</button> | <button class="button" type="button" @click="$parent.close()">Close</button> | ||||
<button class="button is-primary" on:click="logIn(this.Event)">Login</button> | |||||
<button class="button is-primary" @click="checkData()">Login</button> | |||||
</footer> | </footer> | ||||
</div> | </div> | ||||
</form> | |||||
</form>`, | |||||
<!--<div class="loginModal modal" tabindex="-1" role="dialog"> | |||||
<div class="modal-dialog" role="document"> | |||||
<div class="modal-content"> | |||||
<div class="modal-header"> | |||||
<h5 class="modal-title">Login</h5> | |||||
</div> | |||||
<div class="modal-body"> | |||||
<b-field> | |||||
<b-input placeholder="User (Ohmportal)" v-model=user></b-input> | |||||
</b-field> | |||||
<b-field> | |||||
<b-input type="password" placeholder="Password"></b-input> | |||||
</b-field> | |||||
</div> | |||||
<div class="modal-footer"> | |||||
<b-button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Login</b-button> | |||||
<b-button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Close</b-button> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div>-->`, | |||||
data: function () { | data: function () { | ||||
return { | return { | ||||
user: "name", | user: "name", | ||||
pwd:"password", | pwd:"password", | ||||
showError:false, | |||||
}; | }; | ||||
}, | }, | ||||
methods: { | methods: { | ||||
logIn(event){ | |||||
this.$emit('clicked', true) | |||||
checkData(){ | |||||
if(this.user === "name" && this.pwd === "password"){ | |||||
console.log("correct"); | |||||
this.$parent.close(); | |||||
}else{ | |||||
console.log("wrong"); | |||||
this.showError=true; | |||||
} | |||||
}, | }, | ||||
closeLogin (event) { | |||||
this.$emit('clicked', false) | |||||
} | |||||
logIn(){ | |||||
$parent.close(); | |||||
}, | |||||
}, | }, | ||||
mounted: function () { | |||||
//$(".loginModal").modal ('show'); | |||||
}, | |||||
}); | }); |
:key="profil.id" | :key="profil.id" | ||||
:profil="profil" | :profil="profil" | ||||
></ProfilCard> | ></ProfilCard> | ||||
<b-button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut() ">Logout</b-button> | |||||
<b-button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut()">Logout</b-button> | |||||
</div> | </div> | ||||
<div v-else-if="!isAuthentified"> | |||||
<button class="button is-primary is-medium" @click="isModalActive = true"> | |||||
Login | |||||
</button> | |||||
<!--<login-panel v-if="showLoginModal" @clicked="closeModal" ></login-panel>--> | |||||
<div v-else-if="!isAuthentified"> | |||||
<button class="button is-primary is-medium" | |||||
@click="showLoginModal = true"> | |||||
Login | |||||
</button> | |||||
<b-modal :active.sync="showLoginModal" has-modal-card> | <b-modal :active.sync="showLoginModal" has-modal-card> | ||||
<login-panel v-bind="formProps"></login-panel> | |||||
<login-panel></login-panel> | |||||
</b-modal> | </b-modal> | ||||
</div> | </div> | ||||
</div>`, | </div>`, | ||||
data: function () { | data: function () { | ||||
return { | return { | ||||
isModalActive: false, | |||||
showLoginModal: false, | |||||
isAuthentified: false, | |||||
profilcard: _profilcard, | profilcard: _profilcard, | ||||
}; | |||||
}, | |||||
methods: { | |||||
checkAuthentication (value) { | |||||
this.showLoginModal = value; | |||||
this.isAuthentified = !this.isAuthentified; | |||||
}, | |||||
}; | |||||
}, | }, | ||||
}; | }; | ||||