github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/Loggin.vue (about)

     1  <template>
     2    <v-container>
     3      <v-row>
     4        <v-col>
     5          <v-card max-width="500" class="mx-auto">
     6            <v-card-title class="primary headline">Connexion</v-card-title>
     7            <v-card-text>
     8              <v-form class="text-xs-center" @keyup.native.enter="checkPassword">
     9                <v-select
    10                  v-model="inCamp"
    11                  autocomplete="username"
    12                  filled
    13                  :items="choixCamps"
    14                  item-value="id"
    15                  label="Camp"
    16                  hide-details
    17                  class="mt-2"
    18                >
    19                  <template slot="item" slot-scope="props">
    20                    <span :style="campSelectStyle(props.item.terminated)">{{
    21                      props.item.text
    22                    }}</span>
    23                  </template>
    24                  <template slot="no-data">
    25                    <span class="pa-2"
    26                      >Aucun camp n'a été trouvé sur le serveur.</span
    27                    >
    28                  </template>
    29                </v-select>
    30                <v-checkbox
    31                  v-model="showTerminated"
    32                  label="Afficher les camps terminés"
    33                ></v-checkbox>
    34                <v-text-field
    35                  v-model="inPassword"
    36                  filled
    37                  autocomplete="current-password"
    38                  label="Mot de passe"
    39                  :append-icon="$icons[showPassword ? 'mdi-eye-off' : 'mdi-eye']"
    40                  :type="showPassword ? 'text' : 'password'"
    41                  @click:append="showPassword = !showPassword"
    42                  :error-messages="wrongPasswordMessage"
    43                  @input="wrongPasswordMessage = null"
    44                ></v-text-field>
    45              </v-form>
    46            </v-card-text>
    47            <v-card-actions>
    48              <v-spacer></v-spacer>
    49              <v-btn
    50                type="submit"
    51                @click="checkPassword"
    52                :loading="loading"
    53                class="success"
    54                :disabled="disabled"
    55                >Entrer</v-btn
    56              >
    57            </v-card-actions>
    58          </v-card>
    59        </v-col>
    60      </v-row>
    61    </v-container>
    62  </template>
    63  
    64  <script lang="ts">
    65  import Vue from "vue";
    66  import Component from "vue-class-component";
    67  import { CampMeta } from "../logic/types";
    68  import { C } from "../logic/controller";
    69  import { LogginData } from "@/logic/controller";
    70  
    71  const LogginProps = Vue.extend({
    72    props: {}
    73  });
    74  
    75  @Component({})
    76  export default class Loggin extends LogginProps {
    77    showTerminated = false;
    78  
    79    inCamp: number | null = null;
    80    inPassword = "";
    81  
    82    showPassword = false;
    83    loading = false;
    84    wrongPasswordMessage: string | null = null;
    85    camps: CampMeta[] = [];
    86  
    87    get choixCamps() {
    88      return this.camps
    89        .filter(c => (this.showTerminated ? true : !c.terminated))
    90        .map(c => ({
    91          id: c.id,
    92          text: c.label,
    93          terminated: c.terminated
    94        }));
    95    }
    96    get disabled() {
    97      return !(this.inCamp && this.inPassword);
    98    }
    99  
   100    async created() {
   101      this.camps = (await C.getIdentification()) || [];
   102    }
   103  
   104    campSelectStyle(terminated: boolean) {
   105      return {
   106        color: terminated ? "gray" : "black",
   107        fontStyle: terminated ? "italic" : ""
   108      };
   109    }
   110  
   111    async checkPassword() {
   112      if (this.inCamp == null) return;
   113  
   114      this.loading = true;
   115  
   116      const data = await C.postIdentification({
   117        id_camp: this.inCamp,
   118        password: this.inPassword
   119      });
   120      this.loading = false;
   121  
   122      if (!data) return;
   123  
   124      if (data.valide) {
   125        const dt: LogginData = data;
   126        this.$emit("loggedIn", data.camp.id, dt);
   127      } else {
   128        this.wrongPasswordMessage = "Mot de passe incorrect";
   129      }
   130    }
   131  }
   132  </script>
   133  
   134  <style scoped></style>