before symfony/security-bundle update
This commit is contained in:
.eslintrcTODO
assets
config/packages
package.jsonpostcss.config.jstailwind.config.jstemplates
webpack.config.jsyarn.lock@ -13,9 +13,18 @@
|
||||
<the-sidebar/>
|
||||
</div>
|
||||
<div class="col-xl-9">
|
||||
<router-view
|
||||
@user-authenticated="onUserAuthenticated"
|
||||
/>
|
||||
<suspense>
|
||||
<template #default>
|
||||
<router-view
|
||||
@user-authenticated="onUserAuthenticated"
|
||||
/>
|
||||
</template>
|
||||
<template #fallback>
|
||||
<div class="loading">
|
||||
loading …
|
||||
</div>
|
||||
</template>
|
||||
</suspense>
|
||||
</div>
|
||||
<div class="col mt-2"/>
|
||||
</div>
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineEmits } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
|
||||
const username = ref('')
|
||||
|
||||
@ -1,122 +1,45 @@
|
||||
<template>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-top">
|
||||
<router-link
|
||||
class="navbar-brand"
|
||||
:to="{ name: 'Home' }"
|
||||
>
|
||||
<img
|
||||
src="/build/images/24unix/24_logo_bg_96x96.png"
|
||||
class="img-fluid"
|
||||
alt="24unix.net"
|
||||
<nav
|
||||
class="
|
||||
grid fixed inset-x-0 top-0 flex-wrap justify-between items-center py-0 leading-6 border-b
|
||||
@border-orange-400 opacity-90 md:flex-nowrap md:justify-start md:px-24 box-border
|
||||
bg-neutral-800 text-stone-300 grid-cols-2 place-content-around"
|
||||
style="z-index: 1030;"
|
||||
>
|
||||
<div>
|
||||
<router-link
|
||||
class="py-1 mr-4 text-xl leading-7 text-white whitespace-nowrap cursor-pointer box-border
|
||||
hover:text-white focus:text-white"
|
||||
:to="{ name: 'Home' }"
|
||||
>
|
||||
</router-link>
|
||||
<button
|
||||
class="navbar-toggler border-0"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#CollapsingNavbar"
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
<div
|
||||
id="CollapsingNavbar"
|
||||
class="collapse navbar-collapse"
|
||||
>
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<div v-if="isLoggedIn">
|
||||
<button
|
||||
v-if="isLoggedIn"
|
||||
data-bs-target="#dropdown-menu"
|
||||
data-bs-toggle="dropdown"
|
||||
class="btn btn-primary button-login dropdown-toggle ml-auto mb-2 mr-5"
|
||||
:to="{ name: 'Home'}"
|
||||
>
|
||||
{{ user.username }}
|
||||
</button>
|
||||
<div
|
||||
id="dropdown-menu"
|
||||
class="dropdown-menu dropdown-menu-dark dropdown-menu-end"
|
||||
aria-labelledby="navbar-dropdown"
|
||||
>
|
||||
<router-link
|
||||
:to="{name: 'Profile'}"
|
||||
class="dropdown-item"
|
||||
href="/profile"
|
||||
>
|
||||
<span
|
||||
class="fa fa-lg fa-fw fa-user"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Profile
|
||||
</router-link>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
>
|
||||
<span
|
||||
class="fa fa-lg fa-fw fa-wrench"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Settings</a>
|
||||
<div class="dropdown-divider"/>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="/admin"
|
||||
>
|
||||
<span
|
||||
class="fa fa-lg fa-fw fa-cog"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Administration
|
||||
</a>
|
||||
<div class="dropdown-divider"/>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="/logout"
|
||||
>
|
||||
<span
|
||||
class="fa fa-lg fa-fw fa-sign-out"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-else
|
||||
class="btn btn-outline-primary"
|
||||
>
|
||||
<router-link :to="{ name: 'LoginForm'}">
|
||||
<span
|
||||
class="fa fa-sign-in fa-lg fa-fw"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Login
|
||||
</router-link>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<img
|
||||
src="/build/images/24unix/24_logo_bg_96x96.png"
|
||||
class="align-middle box-border"
|
||||
alt="24unix.net"
|
||||
>
|
||||
</router-link>
|
||||
</div>
|
||||
<!--
|
||||
<span
|
||||
class="fa fa-lg fa-fw fa-wrench"
|
||||
aria-hidden="true"
|
||||
/> Settings
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-divider/>
|
||||
<b-dropdown-item @click="logout">
|
||||
<span
|
||||
class="fa fa-lg fa-fw fa-sign-out"
|
||||
aria-hidden="true"
|
||||
/> Logout
|
||||
</b-dropdown-item>
|
||||
-->
|
||||
<div class="text-end">
|
||||
<router-link
|
||||
id="buttonLogin"
|
||||
class="inline-block py-1 px-3 mt-6 text-base font-normal leading-normal text-center
|
||||
text-black align-middle bg-orange-400 rounded border border-orange-400 border-solid
|
||||
cursor-pointer select-none box-border hover:border-orange-400 hover:bg-orange-400 hover:text-black
|
||||
focus:border-orange-400 focus:bg-orange-400 focus:text-black"
|
||||
:to="{ name: 'LoginForm' }"
|
||||
role="button"
|
||||
style="text-decoration: none; transition: none 0s ease 0s; list-style: outside none none;"
|
||||
>
|
||||
<span class="fa fa-sign-in fa-lg fa-fw"></span> Log In
|
||||
</router-link>
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
import 'vue-navigation-bar/dist/vue-navigation-bar.css'
|
||||
|
||||
@ -132,6 +55,11 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const isLoggedIn = () => (!!this.user)
|
||||
let showDropdown = ref(false)
|
||||
const toggleDropDown = () => {
|
||||
console.log('toggle', showDropdown)
|
||||
showDropdown.value = !showDropdown.value
|
||||
}
|
||||
|
||||
/*
|
||||
const logout = () => ({
|
||||
|
||||
@ -1,33 +1,44 @@
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
m-2
|
||||
gap-2
|
||||
items-center
|
||||
shadow-md
|
||||
w-1/4
|
||||
flex-grow
|
||||
rounded
|
||||
overflow-hidden
|
||||
"
|
||||
style="border: 1px solid #eee"
|
||||
>
|
||||
<img
|
||||
src="https://via.placeholder.com/150"
|
||||
style="background: #cccccc"
|
||||
width="150"
|
||||
height="150"
|
||||
alt="placeholder"
|
||||
>
|
||||
<router-link :to="{ name: 'BlogPost', params: { id: post.id } }">
|
||||
{{ post.title }}<br>
|
||||
User: {{ post.userId }}
|
||||
</router-link>
|
||||
<div>
|
||||
<!-- media -->
|
||||
<div class="h-64 w-auto md:w-1/2">
|
||||
<img
|
||||
class="inset-0 h-full w-full object-cover object-center"
|
||||
src="/build/images/tracer_schmolle150x150.png"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<!-- content -->
|
||||
<div class="w-full py-4 px-6 text-gray-800 flex flex-col justify-between">
|
||||
<h3 class="font-semibold text-lg leading-tight truncate">
|
||||
{{ post.title }}
|
||||
</h3>
|
||||
<p class="mt-2">
|
||||
{{ post.body.split('.')[0] }} …
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 uppercase tracking-wide font-semibold mt-2">
|
||||
{{ post.createdAt.toLocaleString('de-DE') }}
|
||||
</p>
|
||||
<p v-if="blogUser">
|
||||
{{ blogUser }}
|
||||
</p>
|
||||
<p class="font-normal text-gray-700 mb-3">
|
||||
dddd
|
||||
</p>
|
||||
<router-link
|
||||
:to="{ name: 'BlogPost', params: { id: post.id } }"
|
||||
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300
|
||||
font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
|
||||
>
|
||||
Read more
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
console.log('BlogCard')
|
||||
import useResource from '@/composables/useResource'
|
||||
|
||||
const props = defineProps({
|
||||
post: {
|
||||
type: Object,
|
||||
@ -35,4 +46,10 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
const post = { ...props.post }
|
||||
|
||||
const { items: blogUser, fetchOne } = useResource('users')
|
||||
fetchOne(post.user)
|
||||
|
||||
console.log("blug user", post.user)
|
||||
console.log(blogUser.value)
|
||||
</script>
|
||||
|
||||
@ -1,34 +1,37 @@
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
m-2
|
||||
gap-2
|
||||
items-center
|
||||
shadow-md
|
||||
w-1/4
|
||||
flex-grow
|
||||
rounded
|
||||
overflow-hidden
|
||||
"
|
||||
style="border: 1px solid #eee"
|
||||
>
|
||||
BlogIndex
|
||||
|
||||
<BlogCard
|
||||
v-for="post in blogPosts"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
/>
|
||||
<div class="pt-6 pb-12 bg-gray-300">
|
||||
<div
|
||||
id="card"
|
||||
class=""
|
||||
>
|
||||
<h2 class="text-center font-serif uppercase text-4xl xl:text-5xl">
|
||||
Recent Articles
|
||||
</h2>
|
||||
<!-- container for all cards -->
|
||||
<div class="container w-100 lg:w-4/5 mx-auto flex flex-col">
|
||||
<BlogCard
|
||||
v-for="post in blogPosts"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
class="
|
||||
flex flex-col md:flex-row overflow-hidden bg-white rounded-lg
|
||||
shadow-xl mt-4 w-100 mx-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup async>
|
||||
|
||||
import useResource from '@/composables/useResource'
|
||||
//import useUser from '@/composables/useUser'
|
||||
import BlogCard from '@/components/blog/BlogCard'
|
||||
|
||||
const { items: blogPosts, fetchAll } = useResource('https://jsonplaceholder.typicode.com/posts')
|
||||
const {
|
||||
items: blogPosts,
|
||||
fetchAll
|
||||
} = useResource('users/1/blogPosts')
|
||||
fetchAll()
|
||||
|
||||
</script>
|
||||
|
||||
@ -32,20 +32,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { watch } from 'vue'
|
||||
<script setup async>
|
||||
import { useRoute } from 'vue-router'
|
||||
import useResource from '@/composables/useResource'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const { item: blogPost, fetchOne: fetchOneBlog } = useResource('https://jsonplaceholder.typicode.com/posts')
|
||||
fetchOneBlog(route.params.id)
|
||||
await fetchOneBlog(route.params.id)
|
||||
|
||||
const { item: user, fetchOne: fetchOneUser } = useResource('https://jsonplaceholder.typicode.com/users')
|
||||
watch(
|
||||
() => ({ ...blogPost.value }),
|
||||
() => fetchOneUser(blogPost.value.userId)
|
||||
)
|
||||
fetchOneUser(blogPost.value.userId)
|
||||
|
||||
</script>
|
||||
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
}
|
||||
|
||||
.tabs-header li.selected:hover {
|
||||
border-color: $body-color;
|
||||
/*border-color: $body-color; */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -2,13 +2,18 @@ import { ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
|
||||
export default function useResource(resource) {
|
||||
|
||||
console.log('useBlog')
|
||||
axios.defaults.headers.common['app-id'] = '628cbf673800f869ed218152' // for all requests
|
||||
|
||||
const apiBaseUrl = 'https://628cc5c6a3fd714fd03914c2.mockapi.io/api/'
|
||||
const items = ref([])
|
||||
const item = ref(null)
|
||||
const fetchAll = async () => {
|
||||
await axios
|
||||
.get(resource)
|
||||
.get(apiBaseUrl + resource)
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
items.value = response.data
|
||||
})
|
||||
}
|
||||
|
||||
@ -6,8 +6,6 @@ import '../styles/ckeditor.css'
|
||||
import 'fork-awesome/scss/fork-awesome.scss'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
import 'bootstrap/dist/js/bootstrap'
|
||||
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user