SignIn.vue

<template>
  <div>
    <div class="sign-in-container">
      <div class="sign-in-header">
        <img alt="logo" src="@/assets/logo_pigma.png"/>
      </div>
      <div class="sign-in-form">
        <h5 class="title">Saississez vos identifiants PIGMA</h5>
        <form>
          <div class="form-row">
            <input
              v-model="form.username"
              class="form-control"
              type="text"
              placeholder="Nom d'utilisateur"
              v-on:keydown.enter.prevent="submit"
            >
          </div>
          <div class="form-row">
            <div class="input-group flex-nowrap">
              <input
                v-model="form.password"
                class="form-control"
                :type="showPassword ? 'text' : 'password'"
                placeholder="Mot de passe"
                v-on:keydown.enter.prevent="submit"
              >
              <span
                v-if="!showPassword"
                class="input-group-text"
              >
                <b-icon
                  icon="eye-fill"
                  @click="showPassword = !showPassword"
                />
              </span>
              <span
                v-else
                class="input-group-text"
              >
                <b-icon
                  icon="eye-slash-fill"
                  @click="showPassword = !showPassword"
                />
              </span>
            </div>
          </div>
          <div class="form-row">
            <div v-if="error" class="form-row">
              <span class="form-errors">{{ error }}</span>
            </div>
          </div>
          <div class="form-row">
            <b-button
              :pressed="btnPressed"
              :disabled="(!username || !password)"
              @click.prevent="submit"
              variant="primary"
              block
            >
              Se connecter
            </b-button>
          </div>
          <div class="form-row">
            <div class="btn-group-vertical">
              <router-link
                to="/signup"
                custom
              >
                Pas encore de compte ?
              </router-link>
              <router-link
                to="/forgottenpwd"
                custom
              >
                Mot de passe oublié ?
              </router-link>
            </div>
          </div>
        </form>
      </div>
    </div>
    <small class="footer">
      <p>Propulsé par <a href="https://www.neogeo.fr/" target="_blank" rel="noopener">Neogeo-Technologies</a></p>
    </small>
  </div>
</template>

<script>

import {
  mapState,
  mapActions,
  mapMutations,
} from 'vuex';

const signInActions = [
  'POST_SIGNIN'
];
const signInMutations = [
  'SET_LOGGED',
  'SET_NEXT',
  'SET_USERNAME',
  'SET_PASSWORD',
];

export default {
  name: 'SignIn',

  data() {
    return {
      showPassword: false,
      btnPressed: false,
      form: {
        username: null,
        password: null
      }
    };
  },

  computed: {
    ...mapState('sign-in', [
      'username',
      'password',
      'logged',
      'error',
      'next',
    ])
  },

  watch: {
    form: {
      deep: true,
      handler(newValue) {
        this.SET_USERNAME(newValue.username);
        this.SET_PASSWORD(newValue.password);
      }
    },

    logged() {
      if (this.logged && this.next) {
        window.location.href = this.next;
      }
    }
  },

  created() {
    this.SET_NEXT(this.$route.query.next || process.env.VUE_APP_NEXT_DEFAULT);
  },

  methods: {
    ...mapActions('sign-in', signInActions),
    ...mapMutations('sign-in', signInMutations),
    async submit() {
      this.btnPressed = true;
      await this.POST_SIGNIN();
    },
  },
};
</script>

<style lang="less" scoped>
.sign-in-container {
  margin: auto;
  width: 480px;
  height: fit-content;

  .sign-in-header {
    margin: 0 1rem 1rem 1rem;
    img {
      width: 440px;
    }
  }

  .sign-in-form {
    margin: 5rem 1rem;

    h5.title {
      color: #373b3d;
    }

    form {
      margin: 2rem 0.25rem;

      .form-row {
        margin-bottom: 1.25em;

        .input-group {
          span {
            cursor: pointer;
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            border-left: none
          }
        }
      }

      .row {
        .col-7 {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          .checkbox {
            label {
              small {
                cursor: pointer !important;
                input {
                  cursor: pointer !important;
                }
              }
            }
          }
        }

        .col-5 {
          button {
            float: right;
          }
        }
      }

      .btn-group-vertical {
        margin-top: 2rem;

        a {
          text-decoration: none;
        }
      }
    }
  }
}

.form-errors {
  color: #EB0600 !important;
}

.form-success {
  color: #30C963 !important;
}

.footer {
  position: absolute;
  bottom: 0;
  font-size: small;
}

.footer a {
  text-decoration: none;
}
</style>