Login.vue

<template>
  <div>
    <div class="row">
      <div class="fourteen wide column">
        <img
          class="ui centered small image"
          src="@/assets/img/logo-neogeo-circle.png"
        />
        <h2 class="ui center aligned icon header">
          <div class="content">
            {{ APPLICATION_NAME }}
            <div class="sub header">{{ APPLICATION_ABSTRACT }}</div>
          </div>
        </h2>
      </div>
    </div>
    <div class="row">
      <div class="six wide column">
        <h3 class="ui horizontal divider header">CONNEXION</h3>

        <div v-if="form.errors" class="ui warning message">
          <div class="header">
            Les informations d'identification sont incorrectes.
          </div>
          NB: Seuls les comptes actifs peuvent se connecter.
        </div>

        <form class="ui form" role="form" type="post" @submit.prevent="login">
          <!-- {% csrf_token %} -->
          <!-- // todo : check if working or usefull, not sure...-->
          <input name="csrfmiddlewaretoken" :value="$store.csrftoken" type="hidden" />

          <div class="ui stacked secondary segment">
            <div class="six field required">
              <div class="ui left icon input">
                <i class="user icon"></i>
                <input
                  v-model="username_value"
                  type="text"
                  name="username"
                  placeholder="Utilisateur"
                />
              </div>
            </div>
            <div class="six field required">
              <div class="ui left icon input">
                <i class="lock icon"></i>
                <input
                  v-model="password_value"
                  type="password"
                  name="password"
                  placeholder="Mot de passe"
                />
              </div>
            </div>
            <button class="ui fluid large teal submit button" type="submit">
              Login
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username_value: null,
      password_value: null,
      logged: false,
      form: {
        errors: null,
      },
    };
  },
  computed: {
    LOGO_PATH: () => process.env.VUE_APP_LOGO_PATH,
    APPLICATION_NAME: () => process.env.VUE_APP_APPLICATION_NAME,
    APPLICATION_ABSTRACT: () => process.env.VUE_APP_APPLICATION_ABSTRACT,
  },
  methods: {
    login() {
      this.$store.dispatch("LOGIN", {
        username: this.username_value,
        password: this.password_value,
      });
    },
  },
};
</script>