Add guest content component

[ChristophWurst]

For pages like

This could be used for login, login flow, 2FA, OAuth redirect pages, etc.

In a future version I could also image that there is a "fullscreen" or size prop to make the container expand to the available width/height.

[JuliaKirschenheuter]

In a future version I could also image that there is a "fullscreen" or size prop to make the container expand to the available width/height.

Sounds good!

[JuliaKirschenheuter]

Why do we need a new component https://github.com/nextcloud/nextcloud-vue/blob/4fc02b3b13df82e9a6d49713dd2055c960f4e8a4/src/components/NcGuestContent/NcGuestContent.vue for this issue?

[ChristophWurst]

Because there is no such component at the moment.

[ChristophWurst]

Acute need for the component is triggered by nextcloud/mail#7430.

[GretaD]

Code looks fine, i didnt test it with an app

[ChristophWurst]

@JuliaKirschenheuter is there any issue with the current solution?

[st3iny]

I like the idea!

However, it doesn't work out of the box with components inside our regular content container. Have a look at an example from Calendar:

At the top

Scrolled a bit down

IMO, NcGuestContent needs at least margin: 0 auto to center it and maybe height: fit-content to make it grow.

EDIT: The outer content container might also need changes to allow scrolling and prevent clipping at the bottom (taken from calendar/src/views/Appointments/Booking.vue):

#content {
	// Enable scrolling
	overflow: auto;

	// Fix box being cutoff at the bottom
	margin-bottom: 0;
	height: calc(var(--body-height) + var(--body-container-margin));
}

[ChristophWurst]

MO, NcGuestContent needs at least margin: 0 auto to center it and maybe height: fit-content to make it grow.

While you already have your fancy setup to check this 😈, could you push those styles to my branch?

[st3iny]

MO, NcGuestContent needs at least margin: 0 auto to center it and maybe height: fit-content to make it grow.

While you already have your fancy setup to check this smiling_imp, could you push those styles to my branch?

Sure thing

[st3iny]

Screenshots from Calendar appointments feature

scroll-guest-content.webm

[nickvergessen]

This is not scoped and therefore breaks files app, settings, basically any page layout by missing the bottom border: