Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/DeleteUserModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ const deleteAccount = () => {
/>
<Button
:loading="deleting"
label="Delete Account"
label="Delete account"
severity="danger"
@click="deleteAccount"
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/primevue/menu/Breadcrumb.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
import { ref, useTemplateRef } from 'vue';
import Breadcrumb, { type BreadcrumbPassThroughOptions, type BreadcrumbProps } from 'primevue/breadcrumb';
import { ChevronRight } from 'lucide-vue-next';
import type { ExtendedMenuItem } from '@/types';
import type { MenuItem } from '@/types';
import { ptViewMerge } from '@/utils';

interface ExtendedBreadcrumbProps extends Omit<BreadcrumbProps, 'model'> {
model: ExtendedMenuItem[];
model?: MenuItem[] | undefined;
}
const componentProps = defineProps<ExtendedBreadcrumbProps>();

Expand Down
4 changes: 2 additions & 2 deletions src/components/primevue/menu/Menu.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<script setup lang="ts">
import { useTemplateRef } from 'vue';
import Menu, { type MenuProps } from 'primevue/menu';
import type { ExtendedMenuItem } from '@/types';
import type { MenuItem } from '@/types';
import { ptViewMerge } from '@/utils';

interface ExtendedMenuProps extends Omit<MenuProps, 'model'> {
model: ExtendedMenuItem[];
model?: MenuItem[] | undefined;
}
const componentProps = defineProps<ExtendedMenuProps>();

Expand Down
4 changes: 2 additions & 2 deletions src/components/primevue/menu/MenuBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
import { useTemplateRef } from 'vue';
import Menubar, { type MenubarProps } from 'primevue/menubar';
import { ChevronDown, ChevronRight } from 'lucide-vue-next';
import type { ExtendedMenuItem } from '@/types';
import type { MenuItem } from '@/types';
import { ptViewMerge } from '@/utils';
interface ExtendedMenubarProps extends Omit<MenubarProps, 'model'> {
model: ExtendedMenuItem[];
model?: MenuItem[] | undefined;
}
const componentProps = withDefaults(
defineProps<ExtendedMenubarProps>(),
Expand Down
4 changes: 2 additions & 2 deletions src/components/primevue/menu/PanelMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
import { useTemplateRef } from 'vue';
import PanelMenu, { type PanelMenuPassThroughOptions, type PanelMenuProps } from 'primevue/panelmenu';
import { ChevronDown, ChevronRight } from 'lucide-vue-next';
import type { ExtendedMenuItem } from '@/types';
import type { MenuItem } from '@/types';
import { ptViewMerge } from '@/utils';

interface ExtendedPanelMenuProps extends Omit<PanelMenuProps, 'model'> {
model: ExtendedMenuItem[];
model?: MenuItem[] | undefined;
}
const componentProps = defineProps<ExtendedPanelMenuProps>();

Expand Down
2 changes: 1 addition & 1 deletion src/composables/useAppLayout.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function useAppLayout() {
separator: true,
},
{
label: 'Log Out',
label: 'Log out',
lucideIcon: LogOut,
command: () => authStore.logout(),
},
Expand Down
63 changes: 44 additions & 19 deletions src/layouts/GuestAuthLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,51 @@ import ApplicationLogo from '@/components/ApplicationLogo.vue';
</script>

<template>
<Container>
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
<div>
<RouterLink to="/">
<ApplicationLogo class="w-15 h-15 fill-current text-surface-900 dark:text-surface-0" />
</RouterLink>
</div>
<div
v-if="$slots.message"
class="w-full sm:max-w-md mt-6 px-4 sm:px-0"
<Container class="min-h-svh flex flex-col justify-center items-center">
<div>
<RouterLink to="/">
<ApplicationLogo class="w-12 h-12 fill-current text-surface-900 dark:text-surface-0" />
</RouterLink>
</div>
<div
v-if="$slots.message"
class="w-full sm:max-w-lg mt-6 px-4 sm:px-0"
>
<slot name="message" />
</div>
<div class="w-full sm:max-w-lg mt-6">
<Card
pt:caption:class="space-y-2"
pt:body:class="p-6 sm:p-8 space-y-6"
>
<slot name="message" />
</div>
<div class="w-full sm:max-w-md mt-6">
<Card>
<template #content>
<slot />
</template>
</Card>
</div>
<template
v-if="$slots.header"
#header
>
<slot name="header" />
</template>
<template
v-if="$slots.title"
#title
>
<slot name="title" />
</template>
<template
v-if="$slots.subtitle"
#subtitle
>
<slot name="subtitle" />
</template>
<template #content>
<slot />
</template>
<template
v-if="$slots.footer"
#footer
>
<slot name="footer" />
</template>
</Card>
</div>
</Container>
</template>
4 changes: 2 additions & 2 deletions src/types/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { DataTableFilterMetaData } from 'primevue';
import { MenuItem } from 'primevue/menuitem';
import { MenuItem as PrimeVueMenuItem } from 'primevue/menuitem';
import type { LucideIcon } from 'lucide-vue-next';

export interface User {
Expand All @@ -13,7 +13,7 @@ export type PrimeVueDataFilters = {
[key: string]: DataTableFilterMetaData;
};

export interface ExtendedMenuItem extends MenuItem {
export interface MenuItem extends PrimeVueMenuItem {
route?: string;
lucideIcon?: LucideIcon;
}
11 changes: 6 additions & 5 deletions src/views/Welcome.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script setup>
import Container from '@/components/Container.vue';
import { useAuthStore } from '@/stores/auth';
import { LayoutGrid, LogIn, Settings, UserPlus } from 'lucide-vue-next';

Expand All @@ -7,14 +8,14 @@ await authStore.fetchUser();
</script>

<template>
<main>
<div class="h-screen flex items-center justify-center">
<Container fluid>
<div class="min-h-svh flex items-center justify-center">
<Card pt:body:class="p-4 py-6 sm:p-12">
<template #content>
<div class="text-center md:text-left">
<section>
<span class="block text-6xl font-bold mb-1">Laravel API</span>
<div class="text-6xl text-primary font-bold mb-4">
<span class="block text-6xl font-bold text-red-500 dark:text-red-400 mb-1">Laravel API</span>
<div class="text-6xl text-primary font-bold text-green-500 dark:text-green-400 mb-4">
+ PrimeVue
</div>
<p class="mt-0 mb-2 text-muted-color leading-normal">
Expand Down Expand Up @@ -83,5 +84,5 @@ await authStore.fetchUser();
</template>
</Card>
</div>
</main>
</COntainer>
</template>
35 changes: 27 additions & 8 deletions src/views/auth/ForgotPassword.vue
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,24 @@ onMounted(() => {
</Message>
</template>

<div class="mb-6 text-sm text-muted-color">
Forgot your password? No problem. Just let us know your email address and we will email you a password reset
link that will allow you to choose a new one.
</div>
<template #title>
<div class="text-center">
Forgot password
</div>
</template>

<template #subtitle>
<div class="text-center">
Enter your email address to receive a password reset link
</div>
</template>

<form
class="space-y-6"
class="space-y-6 sm:space-y-8"
@submit.prevent="submit"
>
<div class="flex flex-col gap-2">
<label for="email">Email</label>
<label for="email">Email address</label>
<InputText
id="email"
ref="email-input"
Expand All @@ -77,13 +84,25 @@ onMounted(() => {
<InputErrors :errors="validationErrors?.email" />
</div>

<div class="flex justify-end items-center">
<div>
<Button
type="submit"
label="Email Password Reset Link"
label="Email password reset link"
:loading="loading"
fluid
/>
</div>

<div class="text-center">
<span class="text-muted-color mr-1">Or, return to</span>
<RouterLink :to="{ name: 'login' }">
<Button
class="p-0"
variant="link"
label="log in"
/>
</RouterLink>
</div>
</form>
</GuestAuthLayout>
</template>
52 changes: 40 additions & 12 deletions src/views/auth/Login.vue
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,25 @@ onMounted(() => {
{{ flashMessages.success }}
</Message>
</template>

<template #title>
<div class="text-center">
Log in to your account
</div>
</template>

<template #subtitle>
<div class="text-center">
Enter your email and password below to log in
</div>
</template>

<form
class="space-y-6"
class="space-y-6 sm:space-y-8"
@submit.prevent="submit"
>
<div class="flex flex-col gap-2">
<label for="email">Email</label>
<label for="email">Email address</label>
<InputText
id="email"
ref="email-input"
Expand All @@ -85,7 +98,16 @@ onMounted(() => {
</div>

<div class="flex flex-col gap-2">
<label for="password">Password</label>
<div class="flex items-center justify-between">
<label for="password">Password</label>
<RouterLink :to="{ name: 'forgotPassword' }">
<Button
class="p-0"
variant="link"
label="Forgot your password?"
/>
</RouterLink>
</div>
<Password
v-model="formData.password"
:invalid="Boolean(validationErrors?.password)"
Expand Down Expand Up @@ -113,19 +135,25 @@ onMounted(() => {
</div>
</div>

<div class="flex justify-end items-center pt-2">
<RouterLink
:to="{ name: 'forgotPassword' }"
class="mr-4 underline text-muted-color hover:text-color"
>
Forgot your password?
</RouterLink>
<div>
<Button
type="submit"
label="Log In"
:loading="loading"
type="submit"
label="Log in"
fluid
/>
</div>

<div class="text-center">
<span class="text-muted-color mr-1">Don't have an account?</span>
<RouterLink :to="{ name: 'register' }">
<Button
class="p-0"
variant="link"
label="Sign up"
/>
</RouterLink>
</div>
</form>
</GuestAuthLayout>
</template>
38 changes: 28 additions & 10 deletions src/views/auth/Register.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,20 @@ onMounted(() => {

<template>
<GuestAuthLayout>
<template #title>
<div class="text-center">
Create an account
</div>
</template>

<template #subtitle>
<div class="text-center">
Enter your details below to create your account
</div>
</template>

<form
class="space-y-6"
class="space-y-6 sm:space-y-8"
@submit.prevent="submit"
>
<div class="flex flex-col gap-2">
Expand All @@ -63,7 +75,7 @@ onMounted(() => {
</div>

<div class="flex flex-col gap-2">
<label for="email">Email</label>
<label for="email">Email address</label>
<InputText
id="email"
v-model="formData.email"
Expand Down Expand Up @@ -105,19 +117,25 @@ onMounted(() => {
<InputErrors :errors="validationErrors?.password_confirmation" />
</div>

<div class="flex justify-end items-center pt-2">
<RouterLink
:to="{ name: 'login' }"
class="mr-4 underline text-muted-color hover:text-color"
>
Already registered?
</RouterLink>
<div>
<Button
type="submit"
label="Register"
label="Create Account"
:loading="loading"
fluid
/>
</div>

<div class="text-center">
<span class="text-muted-color mr-1">Already have an account?</span>
<RouterLink :to="{ name: 'login' }">
<Button
class="p-0"
variant="link"
label="Log in"
/>
</RouterLink>
</div>
</form>
</GuestAuthLayout>
</template>
Loading