diff --git a/src/assets/style.scss b/src/assets/style.scss
index 48dc7f6a7a16ab933f1dce2a464f54259276b4fc..4e64fd1f9729e9cab20d97462dbf9a04cff5c64b 100644
--- a/src/assets/style.scss
+++ b/src/assets/style.scss
@@ -1,6 +1,24 @@
// Import Bulma's core
@import "~bulma/sass/utilities/_all";
+$primary: #642ec9;
+$primary-invert: findColorInvert($primary);
+$colors: (
+ "white": ($white, $black),
+ "black": ($black, $white),
+ "light": ($light, $light-invert),
+ "dark": ($dark, $dark-invert),
+ "primary": ($primary, $primary-invert),
+ "info": ($info, $info-invert),
+ "success": ($success, $success-invert),
+ "warning": ($warning, $warning-invert),
+ "danger": ($danger, $danger-invert)
+);
+
+$link: $primary;
+$link-invert: $primary-invert;
+$link-focus-border: $primary;
+
$body-background-color: #f2f2f2;
@import "~bulma";
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2eb21763ed1cdbfd910542c281885543719e51cb
--- /dev/null
+++ b/src/components/LoginForm.vue
@@ -0,0 +1,73 @@
+<template>
+ <form action="">
+ <div class="modal-card" style="width: auto">
+ <header class="modal-card-head">
+ <p class="modal-card-title">Se connecter</p>
+ </header>
+ <section class="modal-card-body">
+ <b-field label="Email">
+ <b-input type="email" v-model="email" placeholder="email" required/>
+ </b-field>
+
+ <b-field label="Mot de passe">
+ <b-input type="password" v-model="password" password-reveal placeholder="mot de passe" required/>
+ </b-field>
+
+ <b-button class="is-text is-small">mot de passe oublié ?</b-button >
+
+ </section>
+ <footer class="modal-card-foot">
+ <button class="button is-primary" @click="onLogin">Connexion</button>
+ </footer>
+ </div>
+ </form>
+</template>
+
+<script>
+export default {
+ name: 'LoginForm',
+ data () {
+ return {
+ email: '',
+ password: ''
+ }
+ },
+ methods: {
+ async onLogin () {
+ var response = await this.login(this.email, this.password)
+ if (response.token !== null) {
+ await localStorage.setItem('token', response.token)
+ this.$parent.close()
+ this.$router.push({ name: 'Account', params: { account: response } })
+ } else {
+ this.$buefy.toast.open('Email ou mot de passe incorect')
+ }
+ },
+ async login (email, password) {
+ const url = this.$serverurl + 'auth'
+ try {
+ const response = await fetch(
+ url, {
+ method: 'POST',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ email: email,
+ password: password
+ })
+ }
+ )
+ return await response.json()
+ } catch (error) {
+ return null
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 6af307fdeb8c1055ee6246c2ac6d683752b685ff..c070578e5b41bad390a365498e0b886b331e542a 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,61 +1,89 @@
<template>
- <b-navbar type="is-dark" wrapper-class="container">
- <template slot="brand">
- <b-navbar-item tag="router-link" :to="{ path: '/' }">
- <img
- src="mozen_logo_w.png"
- alt="Mozen"
- >
- </b-navbar-item>
- </template>
- <template slot="start">
- <b-navbar-item tag="div">
- <b-field>
- <b-input placeholder="Rechercher..."
- type="search"
- icon="magnify"
- v-model="search"
- v-on:keyup.enter.native="onSearch"
- >
- </b-input>
- </b-field>
- </b-navbar-item>
- </template>
- <template slot="end">
- <b-navbar-item tag="router-link" :to="{ path: '/' }">
- Home
- </b-navbar-item>
- <b-navbar-item tag="router-link" :to="{ name: 'Search' }">
- Rechercher
- </b-navbar-item>
- <b-navbar-item tag="router-link" :to="{ name: 'Docs' }">
- Documentation
- </b-navbar-item>
- <b-navbar-item tag="router-link" :to="{ name: 'About' }">
- <b-icon icon="help-circle-outline"/>
- </b-navbar-item>
- <b-navbar-item tag="div">
- <div class="buttons">
- <a class="button is-inverted">
- <strong>Connexion</strong>
- </a>
- </div>
- </b-navbar-item>
- </template>
- </b-navbar>
+ <div>
+ <b-navbar type="is-dark" wrapper-class="container">
+ <template slot="brand">
+ <b-navbar-item tag="router-link" :to="{ path: '/' }">
+ <img
+ src="mozen_logo_w.png"
+ alt="Mozen"
+ >
+ </b-navbar-item>
+ </template>
+ <template slot="start">
+ <b-navbar-item tag="div">
+ <b-field>
+ <b-input placeholder="Rechercher..."
+ type="search"
+ icon="magnify"
+ v-model="search"
+ v-on:keyup.enter.native="onSearch"
+ >
+ </b-input>
+ </b-field>
+ </b-navbar-item>
+ </template>
+ <template slot="end">
+ <b-navbar-item tag="router-link" :to="{ path: '/' }">
+ Home
+ </b-navbar-item>
+ <b-navbar-item tag="router-link" :to="{ name: 'Search' }">
+ Rechercher
+ </b-navbar-item>
+ <b-navbar-item tag="router-link" :to="{ name: 'Docs' }">
+ Documentation
+ </b-navbar-item>
+ <b-navbar-item tag="router-link" :to="{ name: 'About' }">
+ <b-icon icon="help-circle-outline"/>
+ </b-navbar-item>
+ <b-navbar-item tag="div">
+ <div class="buttons">
+ <b-button @click="openRegisterPrompt" type="is-primary">
+ <strong>S'inscrire</strong>
+ </b-button>
+ <b-button @click="openLoginPrompt" type="is-light">
+ Se connecter
+ </b-button>
+ </div>
+ </b-navbar-item>
+ </template>
+ </b-navbar>
+
+ <b-modal :active.sync="isLoginModalActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
+ <LoginForm/>
+ </b-modal>
+
+ <b-modal :active.sync="isRegisterModalActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
+ <RegisterForm/>
+ </b-modal>
+ </div>
</template>
<script>
+import LoginForm from '@/components/LoginForm.vue'
+import RegisterForm from '@/components/RegisterForm.vue'
+
export default {
name: 'Navbar',
+ components: {
+ LoginForm,
+ RegisterForm
+ },
data () {
return {
+ isLoginModalActive: false,
+ isRegisterModalActive: false,
search: ''
}
},
methods: {
onSearch () {
this.$router.push({ name: 'Search', query: { n: this.search }, force: true })
+ },
+ openLoginPrompt () {
+ this.isLoginModalActive = true
+ },
+ openRegisterPrompt () {
+ this.isRegisterModalActive = true
}
}
}
diff --git a/src/components/RegisterForm.vue b/src/components/RegisterForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1ce52a575987d49fe513511d35343b91af33e4e9
--- /dev/null
+++ b/src/components/RegisterForm.vue
@@ -0,0 +1,48 @@
+<template>
+ <form action="">
+ <div class="modal-card" style="width: auto">
+ <header class="modal-card-head">
+ <p class="modal-card-title">S'inscrire</p>
+ </header>
+ <section class="modal-card-body">
+ <b-field label="Email">
+ <b-input type="email" v-model="email" placeholder="email" required/>
+ </b-field>
+
+ <b-field label="Nom d'utilisateur">
+ <b-input v-model="username" placeholder="nom d'utilisateur" required/>
+ </b-field>
+
+ <b-field label="Mot de passe">
+ <b-input type="password" v-model="password" password-reveal placeholder="mot de passe" required/>
+ </b-field>
+
+ <b-field label="Confirmer le mot de passe">
+ <b-input type="password" v-model="passwordConfirm" password-reveal placeholder="mot de passe" required/>
+ </b-field>
+
+ </section>
+ <footer class="modal-card-foot">
+ <button class="button is-primary">Créer un compte</button>
+ </footer>
+ </div>
+ </form>
+</template>
+
+<script>
+export default {
+ name: 'RegisterForm',
+ data () {
+ return {
+ email: '',
+ username: '',
+ password: '',
+ passwordConfirm: ''
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 9d5e6e3f9bce28d40f08e3b052249e14e7777636..7cad3e91c8f4677a3eab25187dff6adb34185260 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,6 +29,12 @@ const routes = [
path: '/model',
name: 'Model',
component: () => import('../views/Model.vue')
+ },
+ {
+ path: '/account',
+ name: 'Account',
+ component: () => import('../views/Account.vue'),
+ props: true
}
]
diff --git a/src/views/Account.vue b/src/views/Account.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b05134dfe14e3c16763ce2b3b6904531d7306f75
--- /dev/null
+++ b/src/views/Account.vue
@@ -0,0 +1,18 @@
+<template>
+ <div class="account container">
+ <h1 class="title">Bienvenue {{account.username}}</h1>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Account',
+ props: ['account'],
+ methods: {
+ }
+}
+</script>
+
+<style scoped>
+
+</style>