Laracasts Profile: manimonji

manimonji liked a comment+100 XP

2mos ago

Then you've got something mixed up. Blade templates you gave should produce doctype if it is in layout you extend. Laravel doesn't cut out your doctype.

manimonji wrote a reply+100 XP

2mos ago

Thanks, I'll look that up. Yet I think it should work, not marked as deprecated in the document page you've sent.

manimonji wrote a reply+100 XP

2mos ago

Surely the generated one doesn't have a doctype

manimonji started a new conversation+100 XP

2mos ago

I have this blade page

@extends('layouts.app')

@push('styles')
<link href="{{ asset('css/common.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.css"/>
<style>
    /* Override Driver.js font */
    .driver-popover {
        font-family: inherit !important;
    }
    .driver-popover-title {
        font-family: inherit !important;
    }
    .driver-popover-description {
        font-family: inherit !important;
    }
</style>
@endpush

@section('title', 'کمیک ها')

@section('content')
    <div class="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 px-11 py-6">
        @foreach($comics as $index => $comic)
            <a 
                href="{{ route('comics.show', ['comic' => $comic->slug]) }}" 
                class="rounded-lg p-4 border border-gray-500 bg-white min-w-0"
                @if($index === 0) id="first-comic" @endif
            >
                <img class="w-full" src="{{ $comic->cover_image_url }}" alt="{{ $comic->title }}">
                <h2 class="text-xl font-semibold">{{ $comic->title }}</h2>
                <p class="text-md">{{ $comic->description }}</p>
            </a>
        @endforeach
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.js.iife.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (localStorage.getItem('tutorial_done')) return;
    if (!document.getElementById('first-comic')) return;

    const driver = window.driver.js.driver({
        animate: true,
        overlayColor: 'rgba(0, 0, 0, 0.5)',
        onDestroyed: () => localStorage.setItem('tutorial_done', 'true')
    });

    driver.highlight({
        element: '#first-comic',
        popover: {
            title: '👆 شروع کنید!',
            description: 'برای خواندن کمیک روی این کارت کلیک کنید',
            side: 'left',
            align: 'center'
        }
    });
});
</script>
@endpush

I have the doctype in layout, this:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {{-- Swiper CSS --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

    {{-- jQuery --}}
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

	<meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- Additional styles --}}
	<style>
		@font-face {
			font-family: cinema;
			src: url({{ asset('fonts/cinema.woff2') }});
		}
		@font-face {
			font-family: vazirmatn;
			src: url({{ asset('fonts/vazirmatn.woff2') }});
		}
	</style>
    @stack('styles')

    <title>@yield('title', 'کمیکستون')</title>
	@vite('resources/css/app.css')

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	@yield('head')
</head>
<body class="font-[vazirmatn] bg-neutral-50">
    @include('partials.header')

    @yield('content')

    {{-- Swiper JS --}}
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    {{-- Additional scripts --}}
    @stack('scripts')

</body>
</html>

, but every page using this says Quirks Mode. adding it to the blade page itself instead of layout solves it. like this:

@extends('layouts.app')
<!DOCTYPE html>
@push('styles')
<link href="{{ asset('css/common.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.css"/>
<style>
    /* Override Driver.js font */
    .driver-popover {
        font-family: inherit !important;
    }
    .driver-popover-title {
        font-family: inherit !important;
    }
    .driver-popover-description {
        font-family: inherit !important;
    }
</style>
@endpush

@section('title', 'کمیک ها')

@section('content')
    <div class="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 px-11 py-6">
        @foreach($comics as $index => $comic)
            <a 
                href="{{ route('comics.show', ['comic' => $comic->slug]) }}" 
                class="rounded-lg p-4 border border-gray-500 bg-white min-w-0"
                @if($index === 0) id="first-comic" @endif
            >
                <img class="w-full" src="{{ $comic->cover_image_url }}" alt="{{ $comic->title }}">
                <h2 class="text-xl font-semibold">{{ $comic->title }}</h2>
                <p class="text-md">{{ $comic->description }}</p>
            </a>
        @endforeach
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.js.iife.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (localStorage.getItem('tutorial_done')) return;
    if (!document.getElementById('first-comic')) return;

    const driver = window.driver.js.driver({
        animate: true,
        overlayColor: 'rgba(0, 0, 0, 0.5)',
        onDestroyed: () => localStorage.setItem('tutorial_done', 'true')
    });

    driver.highlight({
        element: '#first-comic',
        popover: {
            title: '👆 شروع کنید!',
            description: 'برای خواندن کمیک روی این کارت کلیک کنید',
            side: 'left',
            align: 'center'
        }
    });
});
</script>
@endpush

page html after it's rendered:

<html dir="rtl" lang="fa">
   <head>
      <link href="http://127.0.0.1:8000/css/common.css" rel="stylesheet">
      <link href="http://127.0.0.1:8000/css/header.css" rel="stylesheet">
      <link href="http://127.0.0.1:8000/css/dashboard.css" rel="stylesheet">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
      <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <meta name="csrf-token" content="dOcPAWi9PrjnaZdw6XJL726tVUDPreaGWzyBR7JZ">
      <style>
         @font-face {
         font-family: cinema;
         src: url(http://127.0.0.1:8000/fonts/cinema.woff2);
         }
         @font-face {
         font-family: vazirmatn;
         src: url(http://127.0.0.1:8000/fonts/vazirmatn.woff2);
         }
      </style>
      <style>
         @font-face {
         font-family: cinema;
         src: url(http://127.0.0.1:8000/fonts/cinema.woff2);
         }
         @font-face {
         font-family: vazirmatn;
         src: url(http://127.0.0.1:8000/fonts/vazirmatn.woff2);
         }
      </style>
      <title>داشبورد</title>
      <script type="module" src="http://[::1]:5173/@vite/client"></script>
      <link rel="stylesheet" href="http://[::1]:5173/resources/css/app.css">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body class="font-[vazirmatn] bg-neutral-50">
      <header class="lg:px-40 px-2 sticky m-auto left-0 top-0 bg-primary-400 z-10">
         <nav class="flex justify-between">
            <ul class="flex gap-5 py-5">
               <li><a href="http://127.0.0.1:8000/comics">کمیک ها</a></li>
               <li><a href="http://127.0.0.1:8000/dashboard">داشبورد</a></li>
            </ul>
            <img class="max-h-[70px] py-3" src="http://127.0.0.1:8000/./images/logo.svg">
         </nav>
      </header>
      <main class="font-[vazirmatn]">
         <h1 class="mb-10 text-3xl font-bold">سلام 55555555!</h1>
         <div class="flex flex-col gap-4">
         </div>
         <div class="mt-8 p-6 bg-white border border-gray-300 rounded-lg shadow-sm">
            <div class="flex items-center justify-between">
               <div>
                  <h2 class="text-lg font-semibold text-gray-700">موجودی سکه</h2>
                  <p class="text-4xl font-bold text-amber-500 mt-2">0 🪙</p>
               </div>
            </div>
         </div>
         <div class="mt-10">
            <h2 class="text-xl font-bold mb-4">تاریخچه خرید</h2>
            <p class="text-gray-500 text-center py-6">هنوز هیچ اپیزودی خریداری نکرده‌اید.</p>
         </div>
         <div class="buttons mt-8 mx-auto">
            <form action="http://127.0.0.1:8000/logout" method="POST" class="w-full">
               <input type="hidden" name="_token" value="dOcPAWi9PrjnaZdw6XJL726tVUDPreaGWzyBR7JZ" autocomplete="off">                <button type="submit" class="text-center text-red-700 mx-auto block w-full">خروج از حساب کاربری</button>
            </form>
         </div>
      </main>
      <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   </body>
</html>

manimonji started a new conversation+100 XP

2mos ago

If I sign up a new user with a fake gmail then try to log out, that works. (logging out also done by a form) but If I verify my email (using the default email verification functionality in laravel) a new tab opens, and in that new tab I can't use any forms. I can't log out, I can't comment, I CAN use links and do other stuff without any problem. clicking the submit button of forms, doesn't send a request. Doesn't reload the current page and doesn't redirect. No js errors no errors in logs, no errors nowhere. nothing.

Email verification leads user to a new tab, so they can close the old tab. The thing is everything works in the old tab. Same sessions and cookies in both tabs.

I guess this doesn't help, but here's the code used for email verification:

Route::get('/email/verify', function () {
    return view('auth.verify-email');
})->middleware('auth')->name('verification.notice');

Route::post('/email/verification-notification', function (Request $request) {
    $request->user()->sendEmailVerificationNotification();
    return back()->with('message', 'Verification link sent!');
})->middleware(['auth', 'throttle:6,1'])->name('verification.send');

Route::get('/email/verify/{id}/{hash}', function (EmailVerificationRequest $request) {
    $request->fulfill();
    return redirect()->route('dashboard')->with('success', 'ایمیل با موفقیت تایید شد');
})->middleware(['auth', 'signed'])->name('verification.verify');

Also server restarts fix the problem for the users made before the restart.

I've been debugging this for hours, with and without ai. (Not surprisingly AI mostly mislead me to unrelated stuff)

Anything that relates email verification to csrf tokens, cookies, session, any variable that can be different in two tabs, helps.

Don't know what is this related to, so I put it in general

Laravel Architect

Community Pillar

Top 50

Laracasts Sensei

Laracasts Tutor

Laracasts Master

Ten Thousand Strong

Laracasts Veteran

Chatterbox

1 Year Member

Welcome To The Community

Laracasts Evangelist

Lifer

Subscriber

Pay It Forward

Full Time Learner

Start Your Engines

School In Session

First Thousand