Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div class="input-field black-input login-wrapper border border-light">
- <form class="form-signin" @submit.prevent="login">
- <h2 class="form-signin-heading">Please sign in</h2>
- <!-- <label for="inputEmail" class="sr-only">Email address</label> -->
- <div class="field">
- <label class="label">Username</label>
- <div class="control has-icons-left has-icons-right">
- <input v-model="email" class="input" type="text" id="inputEmail" placeholder="Username" required autofocus>
- <span class="icon is-small is-left">
- <svg class="svg-inline--fa fa-user fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 0c88.366 0 160 71.634 160 160s-71.634 160-160 160S96 248.366 96 160 167.634 0 256 0zm183.283 333.821l-71.313-17.828c-74.923 53.89-165.738 41.864-223.94 0l-71.313 17.828C29.981 344.505 0 382.903 0 426.955V464c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48v-37.045c0-44.052-29.981-82.45-72.717-93.134z"></path></svg><!-- <i class="fas fa-user"></i> -->
- </span>
- </div>
- </div>
- <div class="field">
- <label class="label">Password</label>
- <div class="control has-icons-left has-icons-right">
- <input v-model="password" class="input" type="password" id="inputPassword" placeholder="Password" required >
- </div>
- </div>
- <!-- <label for="inputPassword" class="sr-only">Password</label> -->
- <!-- <span class="edit-icon"></span>
- <input v-model="password" type="password" id="inputPassword" class="" placeholder="Password" required> -->
- <button type="submit" v-bind:class="{ 'is-loading': isLoading }" class="button is-info ">Sign In</button>
- <button type="button" class="button is-danger" v-if="error">Login Failed</button>
- </form>
- </div>
- </template>
- <script>
- export default {
- name: 'Login',
- data () {
- return {
- email: '',
- password: '',
- error: false,
- isLoading: false
- }
- },
- created () {
- this.checkCurrentLoginOrRedirect()
- },
- updated () {
- this.checkCurrentLoginOrRedirect()
- },
- beforeMount(){
- console.log("before mount")
- },
- mounted(){
- console.log("mounted")
- },
- methods: {
- checkCurrentLoginOrRedirect () {
- if (localStorage.token) {
- this.$router.replace(this.$route.query.redirect || '/home')
- } else {
- this.$router.push('/')
- }
- },
- login () {
- this.isLoading = true;
- console.log(this.email)
- console.log(this.password)
- this.$http.post('/auth-token', { username: this.email, password: this.password })
- .then(request => this.loginSuccessful(request))
- .catch(() => this.loginFailed())
- },
- loginSuccessful (req) {
- console.log(req)
- if (!req.data.data.id) {
- this.loginFailed()
- return
- }
- localStorage.token = req.data.data.id
- this.error = false
- console.log("we made it")
- this.$router.push('/home')
- },
- loginFailed () {
- this.isLoading = false;
- console.log("failure ");
- this.error = 'Login failed!'
- delete localStorage.token
- }
- }
- }
- </script>
- <style lang="css">
- body {
- background: #white;
- }
- .form-signin {
- max-width: 330px;
- margin: 0 auto;
- }
- .form-signin .form-signin-heading,
- .form-signin .checkbox {
- margin-bottom: 10px;
- }
- .form-signin .checkbox {
- font-weight: normal;
- }
- .form-signin .form-control {
- position: relative;
- height: auto;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding: 10px;
- font-size: 16px;
- }
- .form-signin .form-control:focus {
- z-index: 2;
- }
- .form-signin input[type="email"] {
- margin-bottom: -1px;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- }
- .form-signin input[type="password"] {
- margin-bottom: 10px;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement