How to use vue-loginservice

Add login functionality to your project in 2 minutes.

by philcal

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-loginservice.css">
<script src="https://unpkg.com/vue-loginservice@latest/dist/vue-loginservice.umd.js"></script>
<script src="https://cdnjs.com/libraries/bulma"></script>
<!-- Standard Bulma -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

<!-- LoginService styles -->
<link rel="stylesheet" href="https://unpkg.com/vue-loginservice@latest/dist/vue-loginservice.css">

<div id="app" class="has-text-centered">
  
  <!-- Already logged in -->
  <div v-if="$loginservice.user" class="has-text-left">
    You are currently logged in.
    <br>
    <br>
    <h1 class="is_title">$loginservice.user:</h1>
    <div class="box is-size-7">
      {{$loginservice.user}}
    </div>
    <button class="button  is-primary is-pulled-right" @click="logout">
    Log out
    </button>
  </div>
  
  <!-- Require login -->
  <div v-else>
    Login using <b>demo</b>/<b>demo</b>.
    <br>
    <p class="is-size-7">
      To set up your own login domain,
      see the instructions in the source code.
    <br>
    <br>
    <authservice-login/>
  </div>
</div>

CSS

body {
  background: #20262E;
  font-family: Helvetica;
}

#app {
  margin-top: 35px;
  background: #fff;
  padding: 20px;
}

.authservice-login {
  margin-top: 20px;
  margin-bottom: 40px;
}

Vue

/*
 * STEPS TO MAKE THIS YOURS...
 * 1. Clone this sandbox.
 * 2. Open an account at http://tooltwist.com.
 * 3. Define a new App and get an APIKey.
 * 4. Set the APIKey below and uncomment
 *    the register and forgot options..
 * 5. Experiment with the options
 *    (see)
 */
const options = {
  apikey: 'API1D4710WQG3NXVJQ9S2QHK6R2RS',
  version: "v2",


  hints: {
    usernames: true,
    sitename: "ToolTwist",
    login: {
      // email: false,
      // facebook: true,
      // google: true,
      // github: true,
      // linkedin: true,
      // twitter: true,
      registerMessage: "Don't have an account yet?",

      resumeURL: "/app-settings/applications"
      // failURL: '/login',
    },
    register: false,
    /*
    register: {
      password: true,
      // firstname: true,
      // middlename: true,
      // lastname: true,
      resumeURL: "/app-settings/applications"
      //termsMessage: 'Agree to our terms?',
      //termsRoute: '/terms-and-conditions'
    },
    */
    forgot: false
    /*
    forgot: {
      resumeURL: "/app-settings/account"
    }
    */
  }
};

Vue.use(window.LoginService, options);


new Vue({
  el: "#app",
  data: {
  },
  methods: {
  	logout: function(){
      this.$loginservice.logout()
    }
  }
})