finish register special
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div v-bind:class="'alert-' + type" class="p-1">{{ message }}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AlertBox",
|
||||
props: ['type', 'message']
|
||||
}
|
||||
</script>
|
||||
@@ -3,7 +3,9 @@
|
||||
<Nav />
|
||||
<div class="flex">
|
||||
<SideBar />
|
||||
<router-view class="main"></router-view>
|
||||
<main>
|
||||
<router-view class="main"></router-view>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<img v-if="avatar" src="avatar" alt="alt" class="avatar" v-bind:class="'avatar' + size">
|
||||
<span v-else class="avatar" v-bind:class="'avatar-' + size">{{ alt[0] }}</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Avatar",
|
||||
props: ['avatar', 'alt', 'size']
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<label :for="name" class="pb-1">{{ label }}</label>
|
||||
<input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()">
|
||||
<p class="text-alert" v-text="errorMessage()">Error Here</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "InputField",
|
||||
props: [
|
||||
'name', 'type', 'label', 'placeholder', 'errors', 'data',
|
||||
],
|
||||
data: function () {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasError: function () {
|
||||
return this.errors && this.errors[this.name] && this.errors[this.name].length > 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateField: function () {
|
||||
this.clearErrors(this.name)
|
||||
this.$emit('update:field', this.value)
|
||||
},
|
||||
errorMessage: function () {
|
||||
if (this.hasError) {
|
||||
return this.errors[this.name][0]
|
||||
}
|
||||
},
|
||||
clearErrors: function () {
|
||||
if (this.hasError) {
|
||||
this.errors[this.name] = null
|
||||
}
|
||||
},
|
||||
errorClassObject: function () {
|
||||
return {
|
||||
'error-field': this.hasError
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: function (val) {
|
||||
this.value = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,32 +1,56 @@
|
||||
<template>
|
||||
<nav class="flex-between flex-center py-1 px-2">
|
||||
<router-link to="/">Logo</router-link>
|
||||
<router-link v-if="authUser" :to="'/users/' + authUser.data.user_id">Me</router-link>
|
||||
<router-link v-if="authUser" :to="'/profil'" class="flex-center">
|
||||
<Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
|
||||
{{ authUser.data.attributes.name }}
|
||||
</router-link>
|
||||
<form v-if="authUser">
|
||||
<input type="search" name="search" placeholder="Search">
|
||||
<input type="submit" value="S">
|
||||
</form>
|
||||
<router-link to="/connexion">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo"><path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/></svg>
|
||||
</router-link>
|
||||
<div>
|
||||
<router-link to="/dashboard">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">
|
||||
<title>Paramètres</title>
|
||||
<path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/>
|
||||
</svg>
|
||||
</router-link>
|
||||
<a href="#" @click.prevent="logout" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">
|
||||
<title>Déconnexion</title>
|
||||
<path d="M21 3h-3.8c-.7 0-1.3-.6-1.3-1.3S16.5.4 17.2.4h5.1c.7 0 1.3.6 1.3 1.3v20.5c0 .7-.6 1.3-1.3 1.3h-5.1c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3H21V3zm-6.9 7.7L8.6 5.2c-.5-.5-.6-1.3-.1-1.8s1.3-.5 1.8 0l7.7 7.7c.8.8.2 2.2-.9 2.2H1.8c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3h12.3zm-1.6 4.8c.5-.5 1.3-.4 1.8.1s.4 1.3-.1 1.8l-3.8 3.2c-.5.5-1.3.4-1.8-.1-.6-.5-.5-1.3 0-1.7l3.9-3.3z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Avatar from "./Avatar";
|
||||
|
||||
export default {
|
||||
name: "Nav",
|
||||
components: {
|
||||
Avatar
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
authUser: 'authUser'
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// axios.get('/api/auth-user')
|
||||
// .then(res => {
|
||||
// this.user = res.data
|
||||
// })
|
||||
methods: {
|
||||
logout: function () {
|
||||
axios.post('logout')
|
||||
.then(res => {
|
||||
if(res.status ===302 || 401) {
|
||||
window.location.href = '/login'
|
||||
}
|
||||
}).catch(error => {
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Vendored
+16
-1
@@ -1,7 +1,9 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Home from "./views/Home"
|
||||
// import UserShow from "./views/Users/Show"
|
||||
import Profil from "./views/User/UserProfil";
|
||||
import DashBoard from "./views/DashBoard";
|
||||
import CssTesteur from "./views/CssTesteur";
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@@ -13,5 +15,18 @@ export default new VueRouter({
|
||||
path: '/', name: 'home', component: Home,
|
||||
meta: { title: 'Home'}
|
||||
},
|
||||
{
|
||||
path: '/profil', name: 'profil', component: Profil,
|
||||
meta: { title: 'Profil'}
|
||||
},
|
||||
{
|
||||
path: '/dashboard', name: 'dashboard', component: DashBoard,
|
||||
meta: { title: 'Dashboard'}
|
||||
},
|
||||
|
||||
{
|
||||
path: '/css-testeur', name: 'css-testeur', component: CssTesteur,
|
||||
meta: { title: 'css-testeur'}
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="m-2">
|
||||
<h1>testeur CSS</h1>
|
||||
<h2>testeur CSS</h2>
|
||||
<h3>testeur CSS</h3>
|
||||
<h4>testeur CSS</h4>
|
||||
<h5>testeur CSS</h5>
|
||||
<h6>testeur CSS</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
|
||||
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do <italic>eiusmod tempor incididunt</italic> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
|
||||
<div class="py-1">
|
||||
<a href="#" class="btn">Boutton</a>
|
||||
<a href="#" class="btn-primary">Boutton primary</a>
|
||||
<a href="#" class="btn-secondary">Boutton secondary</a>
|
||||
<a href="#" class="btn-alert">Boutton alert</a>
|
||||
</div>
|
||||
<div class="py-1">
|
||||
<a href="#" class="btn">X</a>
|
||||
<a href="#" class="btn-primary">X</a>
|
||||
<a href="#" class="btn-secondary">X</a>
|
||||
<a href="#" class="btn-alert">X</a>
|
||||
</div>
|
||||
<form>
|
||||
<label>Test label</label>
|
||||
<input type="text" placeholder="Test placeholder">
|
||||
<input type="number">
|
||||
<input type="checkbox">
|
||||
<select>
|
||||
<option>test 1</option>
|
||||
<option>test 2</option>
|
||||
<option>test 3</option>
|
||||
</select>
|
||||
<input type="submit">
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CssTesteur"
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="m-2">
|
||||
<div class="flex-between">
|
||||
<h1 class="mb-3">Administration</h1>
|
||||
<router-link to="/logout">Déconnexion</router-link>
|
||||
</div>
|
||||
<UserAdmin />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserAdmin from "./User/UserAdmin";
|
||||
|
||||
export default {
|
||||
name: "DashBoard",
|
||||
components: {
|
||||
UserAdmin
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<h1>Home</h1>
|
||||
<div>
|
||||
<h1>Home</h1>
|
||||
<router-link to="/css-testeur">Css Testeur</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex mb-4">
|
||||
<div class="avatar mr-2">
|
||||
<Avatar :avatar="authUser.data.attributes.avatar" size="large" :alt="authUser.data.attributes.name" />
|
||||
</div>
|
||||
<div class="flex-col flex-center">
|
||||
<div><strong>{{ authUser.data.attributes.name }}</strong></div>
|
||||
<div><strong>{{ authUser.data.attributes.email }}</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="authUser.data.attributes.is_admin">
|
||||
<h2 class="mb-1">Ajouter un membre</h2>
|
||||
<AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
|
||||
<form @submit.prevent="addMember">
|
||||
<InputField name="name" type="text" label="Nom du nouveau membre" placeholder="Nom" @update:field="form.name = $event" :errors="errors" />
|
||||
<InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" @update:field="form.email = $event" :errors="errors" />
|
||||
<button>Ajouter</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
import Avatar from "../../components/Avatar";
|
||||
import AlertBox from "../../components/AlertBox";
|
||||
import InputField from "../../components/InputField";
|
||||
|
||||
export default {
|
||||
name: "UserAdmin",
|
||||
components: {
|
||||
Avatar, AlertBox, InputField,
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
email: '',
|
||||
},
|
||||
alertType: '',
|
||||
alertMessage: '',
|
||||
errors: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
authUser: 'authUser',
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
addMember: function () {
|
||||
console.log('addMember')
|
||||
if(this.form.name.length <= 4 && this.form.name.email <= 12) {
|
||||
axios.post('/api/users', {name: this.form.name, email: this.form.email})
|
||||
.then(res => {
|
||||
console.log(res)
|
||||
this.form.name = ''
|
||||
this.form.email = ''
|
||||
this.alertType = 'success'
|
||||
this.alertMessage = `${res.data.data.attributes.name} a bien été créé`
|
||||
})
|
||||
.catch(errors => {
|
||||
console.log(errors)
|
||||
this.alertType = 'error'
|
||||
this.alertMessage = `L'utilisateur n'a pas été créé`
|
||||
})
|
||||
} else {
|
||||
this.alertType = 'error'
|
||||
this.alertMessage = `Le formulaire n'est pas correctement renseigné.`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>{{ authUser.data.attributes.name }}</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "Profil",
|
||||
computed: {
|
||||
...mapGetters({
|
||||
authUser: 'authUser',
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user