Cree une page login


#1

Bonjour,

Je suis donc encore débutant dans dans le domaine et j’ai besoin d’aide.

Donc voila je veux crée une page web avec un login, mon but c’est lorsque l’utilisateur va rentre les “bons” nom de compte et mot de passe lorsqu’il va clique sur le bouton se connecter il va etre rediriger vers un autre site web grace a url.

Voici mes codes:

json file : c’est le file qui va contenir les bons username et password

{
“username”: “xxx”,
“password”: “xxxx”,
“deviceUniversalId”: “xxx”,
“deviceName”: “xxxx”,
“deviceType”: “xxxxx”
}

html code : je vous montre juste la partie du code qui nous interesse :

 <div class="row">
    <div class="col-md-6">
      <div class="box box-primary" id="loginForm">
        <div class="box-header with-border">
          <h3 class="box-title">Login</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->

          <div class="box-body">
            <div class="form-group">
              <label for="username1">User name</label>
              <input type="text" class="form-control" id="username1" placeholder="User name">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
          </div>
          <!-- /.box-body -->

          <div class="box-footer">
            <button type="submit" class="btn btn-primary" v-on:click="submitButtonAction">Submit</button>
          </div>

      </div>
    </div>
  </div>

  <div id="app"></div>


</section>

–>

Vuejs : justement ici je bloque je ne sais plus quoi faire.

Merci beaucoup de votre aide,


#2

Il faut “binder” chacun de tes inputs à un modèle/variable avec v-model

<input v-model="username" type="text" class="form-control" id="username1" placeholder="User name">
...
<input v-model="password" type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

et l’utiliser dans ton JS

export default {
  data: () => ({
    username: '',
    password: '',
  }),
  methods: {
    submitButtonAction () {
      // do something with this.username & this.password
    }
  }
}