finish register special
This commit is contained in:
10
resources/js/components/AlertBox.vue
Normal file
10
resources/js/components/AlertBox.vue
Normal file
@@ -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>
|
||||
|
||||
14
resources/js/components/Avatar.vue
Normal file
14
resources/js/components/Avatar.vue
Normal file
@@ -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>
|
||||
53
resources/js/components/InputField.vue
Normal file
53
resources/js/components/InputField.vue
Normal file
@@ -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>
|
||||
|
||||
17
resources/js/router.js
vendored
17
resources/js/router.js
vendored
@@ -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'}
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
42
resources/js/views/CssTesteur.vue
Normal file
42
resources/js/views/CssTesteur.vue
Normal file
@@ -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>
|
||||
20
resources/js/views/DashBoard.vue
Normal file
20
resources/js/views/DashBoard.vue
Normal file
@@ -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>
|
||||
|
||||
76
resources/js/views/User/UserAdmin.vue
Normal file
76
resources/js/views/User/UserAdmin.vue
Normal file
@@ -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>
|
||||
18
resources/js/views/User/UserProfil.vue
Normal file
18
resources/js/views/User/UserProfil.vue
Normal file
@@ -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