Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Password confirmation middleware results in modal page #97

Closed
faustbrian opened this issue Jan 5, 2020 · 4 comments
Closed

Password confirmation middleware results in modal page #97

faustbrian opened this issue Jan 5, 2020 · 4 comments

Comments

@faustbrian
Copy link

@faustbrian faustbrian commented Jan 5, 2020

I just ran into an odd issue which isn't too after thinking about how Inertia works. I have a controller that is protected with the password.confirm middleware but because that middleware performs a redirect to a page that doesn't return an Inertia page it seems to get opened in a modal and after the user confirms their password it redirects inside of the modal even though the page it goes to would be an Inertia page.

Would the out of the box RequirePassword middleware have to be replaced with something that plays nice with Inertia or is there a way around this behaviour? Replacing the password confirmation form with an Inertia page would probably also be a solution but would mean that I need to modify the auth controllers.

Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;

class InvoiceController extends Controller
{
    public function __construct()
    {
        $this->middleware('password.confirm');
    }
}

Result
Screenshot 2020-01-05 at 7 23 36

@faustbrian

This comment has been minimized.

Copy link
Author

@faustbrian faustbrian commented Jan 5, 2020

The following resolves it but feels rather hacky as I need to touch some framework code that I usually don't need to touch at all.

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ConfirmsPasswords;
use Inertia\Inertia;

class ConfirmPasswordController extends Controller
{
    use ConfirmsPasswords;

    protected $redirectTo = '/app';

    public function __construct()
    {
        $this->middleware('auth');
    }

    public function showConfirmForm()
    {
        return Inertia::render('Auth/ConfirmPassword');
    }
}
<template>
  <div class="card is-real">
    <h2 class="card-title">
      Confirm Password
    </h2>

    <div class="card-content">
      <form
        class="spaced-y-4"
        @submit.prevent="confirmPassword"
      >
        <div class="alert-info">
          Please confirm your password before continuing.
        </div>

        <text-input
          v-model="form.password"
          :errors="$page.errors.password"
          label="Password"
          type="password"
        />

        <div class="form-buttons">
          <a
            class="mr-4 text-sm text-gray-600 hover:text-gray-900"
            href="/password/reset"
          >
            Forgot Your Password?
          </a>

          <button
            type="submit"
            class="btn-primary"
          >
            Confirm Password
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import Layout from '@/Shared/Layouts/Auth';
import TextInput from '@/Shared/Form/TextInput';

export default {
    layout: Layout,
    components: { TextInput },
    data() {
        return {
            form: {
                password: null,
            },
        };
    },
    methods: {
        confirmPassword() {
            this.$inertia.post(this.$route('password.confirm'), this.form);
        },
    },
};
</script>
@faustbrian faustbrian changed the title Middleware results in duplicate page in modal Password confirmation middleware results in modal page Jan 5, 2020
@rodrigopedra

This comment has been minimized.

Copy link
Contributor

@rodrigopedra rodrigopedra commented Jan 5, 2020

I guess customizing the controllers is the way to go as you can see in the PingCRM sample app:

https://github.com/inertiajs/pingcrm/blob/master/app/Http/Controllers/Auth/LoginController.php#L36-L39

For me it makes sense as in practice one is telling the framework to render a custom view

@faustbrian

This comment has been minimized.

Copy link
Author

@faustbrian faustbrian commented Jan 6, 2020

Yeah that's the route I went with, just turned all auth views into inertia pages. Just felt odd having to do it.

@faustbrian faustbrian closed this Jan 6, 2020
@reinink

This comment has been minimized.

Copy link
Collaborator

@reinink reinink commented Jan 6, 2020

Just felt odd having to do it.

Don't let it feel odd. That's totally the right way to do this. The default Laravel auth scaffolding is designed for a server-side rendered app, so it only makes sense that you'd have to tweak this slightly for Inertia.js.

In fact, Taylor Otwell is already working on some changes to the auth scaffolding to make it easier to get up and running with other frameworks (Vue/React/Livewire/Inertia).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.