Skip to content

Commit

Permalink
Refactor layout structure to use GeneralLayout in post creation, edit…
Browse files Browse the repository at this point in the history 
…ing, and listing pages; update dashboard and profile pages for consistent layout usage
  • Loading branch information
@abdessamadbettal
abdessamadbettal committed Dec 17, 2024
1 parent bdbb0f4 commit 46d1954
Show file tree
Hide file tree
Showing 14 changed files with 543 additions and 508 deletions.
63 changes: 33 additions & 30 deletions resources/js/Pages/Auth/ConfirmPassword.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import InputLabel from '@/Components/Forms/InputLabel.vue';
import Button from '@/Components/Button.vue';
import TextInput from '@/Components/Forms/TextInput.vue';
import { Head, useForm } from '@inertiajs/vue3';
import GeneralLayout from '@/Layouts/GeneralLayout.vue';
const form = useForm({
password: '',
Expand All @@ -18,37 +19,39 @@ const submit = () => {
</script>

<template>
<GuestLayout>
<Head title="Confirm Password" />
<GeneralLayout>
<GuestLayout>
<Head title="Confirm Password" />

<div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
This is a secure area of the application. Please confirm your
password before continuing.
</div>

<form @submit.prevent="submit">
<div>
<InputLabel for="password" value="Password" />
<TextInput
id="password"
type="password"
class="mt-1 block w-full"
v-model="form.password"
required
autocomplete="current-password"
autofocus
/>
<InputError class="mt-2" :message="form.errors.password" />
<div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
This is a secure area of the application. Please confirm your
password before continuing.
</div>

<div class="mt-4 flex justify-end">
<Button
class="ms-4"
:isLoading="form.processing"
>
Confirm
</Button>
</div>
</form>
</GuestLayout>
<form @submit.prevent="submit">
<div>
<InputLabel for="password" value="Password" />
<TextInput
id="password"
type="password"
class="mt-1 block w-full"
v-model="form.password"
required
autocomplete="current-password"
autofocus
/>
<InputError class="mt-2" :message="form.errors.password" />
</div>

<div class="mt-4 flex justify-end">
<Button
class="ms-4"
:isLoading="form.processing"
>
Confirm
</Button>
</div>
</form>
</GuestLayout>
</GeneralLayout>
</template>
71 changes: 37 additions & 34 deletions resources/js/Pages/Auth/ForgotPassword.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import InputLabel from '@/Components/Forms/InputLabel.vue';
import Button from '@/Components/Button.vue';
import TextInput from '@/Components/Forms/TextInput.vue';
import { Head, useForm } from '@inertiajs/vue3';
import GeneralLayout from '@/Layouts/GeneralLayout.vue';
defineProps({
Expand All @@ -23,44 +24,46 @@ const submit = () => {
</script>

<template>
<GuestLayout>
<Head :title="$t('auth.forgot_password')" />
<GeneralLayout>
<GuestLayout>
<Head :title="$t('auth.forgot_password')" />

<div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
{{ $t('auth.forgot_password_message') }}
</div>
<div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
{{ $t('auth.forgot_password_message') }}
</div>

<div
v-if="status"
class="mb-4 text-sm font-medium text-green-600 dark:text-green-400"
>
{{ status }}
</div>
<div
v-if="status"
class="mb-4 text-sm font-medium text-green-600 dark:text-green-400"
>
{{ status }}
</div>

<form @submit.prevent="submit">
<div>
<InputLabel for="email" :value="$t('auth.email')" />
<form @submit.prevent="submit">
<div>
<InputLabel for="email" :value="$t('auth.email')" />

<TextInput
id="email"
type="email"
class="mt-1 block w-full"
v-model="form.email"
required
autofocus
autocomplete="username"
/>
<TextInput
id="email"
type="email"
class="mt-1 block w-full"
v-model="form.email"
required
autofocus
autocomplete="username"
/>

<InputError class="mt-2" :message="form.errors.email" />
</div>
<InputError class="mt-2" :message="form.errors.email" />
</div>

<div class="mt-4 flex items-center justify-end">
<Button
:isLoading="form.processing"
>
{{ $t('auth.email_password_reset_link') }}
</Button>
</div>
</form>
</GuestLayout>
<div class="mt-4 flex items-center justify-end">
<Button
:isLoading="form.processing"
>
{{ $t('auth.email_password_reset_link') }}
</Button>
</div>
</form>
</GuestLayout>
</GeneralLayout>
</template>
129 changes: 66 additions & 63 deletions resources/js/Pages/Auth/Login.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Button from '@/Components/Button.vue';
import TextInput from '@/Components/Forms/TextInput.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import ProvidersAuth from './Partials/ProvidersAuth.vue';
import GeneralLayout from '@/Layouts/GeneralLayout.vue';
defineProps({
Expand All @@ -33,70 +34,72 @@ const submit = () => {
</script>

<template>
<GuestLayout>
<Head :title="$t('auth.login')" />

<div v-if="status" class="mb-4 text-sm font-medium text-green-600">
{{ status }}
</div>

<ProvidersAuth />

<form @submit.prevent="submit">
<div>
<InputLabel for="email" :value="$t('auth.email')" />

<TextInput
id="email"
type="email"
class="mt-1 block w-full"
v-model="form.email"
required
autofocus
autocomplete="username"
/>

<InputError class="mt-2" :message="form.errors.email" />
</div>

<div class="mt-4">
<InputLabel for="password" :value="$t('auth.password')" />

<TextInput
id="password"
type="password"
class="mt-1 block w-full"
v-model="form.password"
required
autocomplete="current-password"
/>
<GeneralLayout>
<GuestLayout>
<Head :title="$t('auth.login')" />

<InputError class="mt-2" :message="form.errors.password" />
<div v-if="status" class="mb-4 text-sm font-medium text-green-600">
{{ status }}
</div>

<div class="mt-4 block">
<label class="flex items-center">
<Checkbox name="remember" v-model:checked="form.remember" />
<span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ $t('auth.remember_me') }}</span>
</label>
</div>

<div class="mt-4 flex items-center justify-end">
<Link
v-if="canResetPassword"
:href="route('password.request')"
class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800"
>
{{ $t('auth.forgot_password') }}
</Link>

<Button
class="ms-4"
:isLoading="form.processing"
>
{{ $t('auth.login') }}
</Button>
</div>
</form>
</GuestLayout>
<ProvidersAuth />

<form @submit.prevent="submit">
<div>
<InputLabel for="email" :value="$t('auth.email')" />

<TextInput
id="email"
type="email"
class="mt-1 block w-full"
v-model="form.email"
required
autofocus
autocomplete="username"
/>

<InputError class="mt-2" :message="form.errors.email" />
</div>

<div class="mt-4">
<InputLabel for="password" :value="$t('auth.password')" />

<TextInput
id="password"
type="password"
class="mt-1 block w-full"
v-model="form.password"
required
autocomplete="current-password"
/>

<InputError class="mt-2" :message="form.errors.password" />
</div>

<div class="mt-4 block">
<label class="flex items-center">
<Checkbox name="remember" v-model:checked="form.remember" />
<span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ $t('auth.remember_me') }}</span>
</label>
</div>

<div class="mt-4 flex items-center justify-end">
<Link
v-if="canResetPassword"
:href="route('password.request')"
class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800"
>
{{ $t('auth.forgot_password') }}
</Link>

<Button
class="ms-4"
:isLoading="form.processing"
>
{{ $t('auth.login') }}
</Button>
</div>
</form>
</GuestLayout>
</GeneralLayout>
</template>
Loading

0 comments on commit 46d1954

Please sign in to comment.