add register page

hn-vue/package-lock.json

@@ -11021,6 +11021,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuelidate": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.6.tgz",
+      "integrity": "sha512-suzIuet1jGcyZ4oUSW8J27R2tNrJ9cIfklAh63EbAkFjE380iv97BAiIeolRYoB9bF9usBXCu4BxftWN1Dkn3g=="
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

hn-vue/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-router": "^3.4.9"
+    "vue-router": "^3.4.9",
+    "vuelidate": "^0.7.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

hn-vue/src/Layout.vue

@@ -2,6 +2,8 @@
   <div>
     <nav>
       <router-link :to="{ name: 'links' }">Derniers liens publiés</router-link>
+      /
+      <router-link :to="{ name: 'register' }">Créer un compte</router-link>
     </nav>
     <router-view></router-view>
   </div>

hn-vue/src/api.js

@@ -15,6 +15,10 @@ class Api {
     return this._get(`/api/links/${id}/comments`);
   }
 
+  register(data) {
+    return this._post("/api/accounts", data);
+  }
+
   _get(path) {
     return fetch(this.baseUrl + path, {
       headers: {
@@ -28,6 +32,27 @@ class Api {
       return r.json();
     });
   }
+
+  _post(path, data) {
+    return fetch(this.baseUrl + path, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    }).then((r) => {
+      if (!r.ok) {
+        return Promise.reject(new Error("Erreur dans la requête"));
+      }
+
+      if (r.status === 204) {
+        return r;
+      }
+
+      return r.json();
+    });
+  }
 }
 
 export default new Api(process.env.VUE_APP_API_URL);

hn-vue/src/components/Textfield.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="field" :class="{ 'field--has-error': field.$error }">
+    <label :for="fieldid" v-if="label">{{ label }}</label>
+    <input :type="type" :id="fieldid" v-model="field.$model" />
+
+    <template v-if="field.$error">
+      <span v-if="!field.required">Ce champ est requis</span>
+      <span v-if="field.sameAs != null && !field.sameAs"
+        >Ce champ doit être égal au champ {{ field.$params.sameAs.eq }}</span
+      >
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: String,
+    field: Object,
+    type: {
+      type: String,
+      default: "text",
+    },
+  },
+  computed: {
+    fieldid() {
+      return `textfield_${this._uid}`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.field--has-error input {
+  border-color: red;
+}
+</style>

hn-vue/src/main.js

@@ -1,8 +1,10 @@
 import Vue from "vue";
+import Vuelidate from "vuelidate";
 import Layout from "./Layout.vue";
 import createRouter from "./router";
 
 Vue.config.productionTip = false;
+Vue.use(Vuelidate);
 
 const router = createRouter();
 

hn-vue/src/pages/Register.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <h1>Créer un compte</h1>
+    <form @submit.prevent="register">
+      <error v-if="err" :error="err" />
+      <textfield label="Nom d'utilisateur" :field="$v.username" />
+      <textfield label="Mot de passe" type="password" :field="$v.password" />
+      <textfield
+        label="Confirmation de mot de passe"
+        type="password"
+        :field="$v.confirmPassword"
+      />
+
+      <button type="submit" :disabled="$v.$invalid">Créer un compte</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import Textfield from "../components/Textfield";
+import Error from "../components/Error";
+import { required, sameAs } from "vuelidate/lib/validators";
+import api from "../api";
+
+export default {
+  components: { Textfield, Error },
+  data() {
+    return {
+      err: null,
+      username: "",
+      password: "",
+      confirmPassword: "",
+    };
+  },
+  methods: {
+    async register() {
+      this.err = null;
+
+      try {
+        await api.register({
+          username: this.username,
+          password: this.password,
+          confirmPassword: this.confirmPassword,
+        });
+        this.$router.push({ name: "links" });
+      } catch (e) {
+        this.err = e;
+      }
+    },
+  },
+  validations: {
+    username: {
+      required,
+    },
+    password: {
+      required,
+    },
+    confirmPassword: {
+      required,
+      sameAs: sameAs("password"),
+    },
+  },
+};
+</script>

hn-vue/src/router.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import Links from "./pages/Links.vue";
+import Register from "./pages/Register.vue";
 import LinkDetail from "./pages/LinkDetail.vue";
 
 Vue.use(VueRouter);
@@ -15,6 +16,7 @@ export default function createRouter() {
         component: LinkDetail,
         props: true,
       },
+      { path: "/register", name: "register", component: Register },
       { path: "*", redirect: "/" },
     ],
   });

vue2/src/components/AForm.vue

@@ -35,7 +35,7 @@
 
 <script>
 import Incrementer from "./Incrementer";
-import { required } from "vuelidate/lib/validators";
+import { required, sameAs } from "vuelidate/lib/validators";
 
 export default {
   components: { Incrementer },
@@ -62,6 +62,7 @@ export default {
         },
         lastname: {
           required,
+          sameAs: sameAs("firstname"),
           // sameAs: (v) => v === this.firstname,
         },
       };