custom login page like aimeos.com/profile (/admin, /login, /profile)

Help for integrating the Laravel package
Forum rules
Always add your Laravel, Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
samvara
Posts: 5
Joined: 14 Mar 2023, 09:04

custom login page like aimeos.com/profile (/admin, /login, /profile)

Post by samvara » 21 Jun 2023, 08:52

Hello and tx for ideas: I would like to set up a custom login page including the shop-layout

just like this one:
https://aimeos.com/profile

Merci beaucoup

kdim95
Advanced
Posts: 213
Joined: 26 Aug 2022, 12:17

Re: custom login page like aimeos.com/profile (/admin, /login, /profile)

Post by kdim95 » 21 Jun 2023, 10:16

I'm also interested in this.

It looks like the aimeos site uses a TYPO3 extension for the login page, but we are working with Laravel here:
https://docs.typo3.org/c/typo3/cms-felo ... Index.html

I've personally overriden the login and register page routes only when the pages are opened with GET.

If it's POST, it should handled by breeze and works.

I made a custom AuthController, which helps for displaying my custom login and register views.

But I'm not particularly fond of my solution, I don't know how to get errors from breeze if the login fails.

I also don't know how to add custom code for checking the password strength, check what characters it contains with regex, etc. My current solution could definitely use some improvement.

I hope we can get some details on how to get a custom login page working while preserving the header and footer of the site.

User avatar
aimeos
Administrator
Posts: 8262
Joined: 01 Jan 1970, 00:00

Re: custom login page like aimeos.com/profile (/admin, /login, /profile)

Post by aimeos » 21 Jun 2023, 14:46

The login page is a pure Laravel page and it's usually located in ./resource/views/auth/ directory. If you "extend" it from the shop base blade page, you will get the same layout but things like categories, basket, locale selector will be missing.
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

samvara
Posts: 5
Joined: 14 Mar 2023, 09:04

Re: custom login page like aimeos.com/profile (/admin, /login, /profile)

Post by samvara » 22 Jun 2023, 15:25

thanks for the tips.

Yet, I didn't manage to make it work. Please check my approach, tx for a hint :idea:


Start
I started to follow aimeos' suggestion, and added a copy to my folder:
custom-theme/views/auth/login.blade.php


1st try:

put in a hello world:
<span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }} hello world</span>

it was still showing the "old" login page.


2nd try:

I added the code below to the file (custom-theme/views/auth/login.blade.php)
to extend it from there. (tiny text is original resources/views/auth/login.blade.php)

Yet: it is still showing the old page.


@extends('xx::base')

@section('aimeos_header')
<title>{{ __( 'Profile') }}</title>
@stop

@section('aimeos_body')
<div class="container-fluid">

<x-guest-layout>
<x-auth-card>
<!-- Session Status -->
<x-auth-session-status class="mb-4" :status="session('status')" />

<!-- Validation Errors -->
<x-auth-validation-errors class="mb-4" :errors="$errors" />

<form method="POST" action="{{ airoute('login') }}">
@csrf

<!-- Email Address -->
<div>
<x-label for="email" :value="__('Email')" />

<x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
</div>

<!-- Password -->
<div class="mt-4">
<x-label for="password" :value="__('Password')" />

<x-input id="password" class="block mt-1 w-full"
type="password"
name="password"
required autocomplete="current-password" />
</div>

<!-- Remember Me -->
<div class="block mt-4">
<label for="remember_me" class="inline-flex items-center">
<input id="remember_me" type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="remember">
<span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }} hello world</span>
</label>
</div>

<div class="flex items-center justify-end mt-4">
@if (Route::has('password.request'))
<a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ airoute('password.request') }}">
{{ __('Forgot your password?') }}
</a>
@endif

<x-button class="ml-3">
{{ __('Log in') }}
</x-button>
</div>
</form>
</x-auth-card>
</x-guest-layout>

</div>
@stop
Last edited by samvara on 22 Jun 2023, 15:27, edited 1 time in total.

MirkoDz
Posts: 4
Joined: 18 Sep 2024, 08:02

Re: custom login page like aimeos.com/profile (/admin, /login, /profile)

Post by MirkoDz » 18 Sep 2024, 08:06

Has anyone managed to fix the issue with the auth (or any other) pages and include all the header options? I also only managed to extend the base layout, then header does not contain any options except the dropdown profile.

User avatar
aimeos
Administrator
Posts: 8262
Joined: 01 Jan 1970, 00:00

Re: custom login page like aimeos.com/profile (/admin, /login, /profile)

Post by aimeos » 18 Sep 2024, 11:46

That' difficult because the Aimeos components are not added by the Laravel login page controller/action
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

jafo66
Posts: 65
Joined: 06 Mar 2024, 04:42

Re: custom login page like aimeos.com/profile (/admin, /login, /profile)

Post by jafo66 » 23 Sep 2024, 05:11

We were able to make our own Vue pages for login and registration that submit to the Laravel login / register routes. With a little work, we were able to get the error messages returning properly because they used Inertia.

Is this what you were looking for?

MirkoDz
Posts: 4
Joined: 18 Sep 2024, 08:02

Re: custom login page like aimeos.com/profile (/admin, /login, /profile)

Post by MirkoDz » 04 Oct 2024, 10:33

For header links to appear in my custom AppLayout, the same way Aimeos renders header, I included this so it works for me!
Than this layout component can be used for all other laravel pages.

<?php

namespace App\View\Components;

use Illuminate\View\View;
use Aimeos\Shop\Facades\Shop;
use Illuminate\View\Component;

class AppLayout extends Component
{
/**
* Get the view / contents that represents the component.
*/
public function render(): View
{
$params = ['page' => 'page-account-index'];

foreach (app('config')->get('shop.page.account-index') as $name) {
$params['aiheader'][$name] = Shop::get($name)->header();
$params['aibody'][$name] = Shop::get($name)->body();
}

return view('layouts.app', [
'aiheader' => $params['aiheader'],
'aibody' => $params['aibody'],
]);
}
}

Post Reply