Fix autocompletion of mentions in public share auth page

The autocompletion panel is reparented to the body element and placed
using an absolute position. However, as the body element used a flex
layout the absolute position of the panel was ignored. Therefore now all
the body elements are wrapped in another div element, which becomes the
flex element and acts like the body element, so the real body element is
no longer flex and reparenting the autocompletion panel to it then works
as expected.

Besides that the CSS for the autocompletion panel were not included in
public share auth pages.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

css/merged-share-auth.scss

@@ -1,2 +1,3 @@
+@import 'At.scss';
 @import 'icons.scss';
 @import 'publicshareauth.scss'

css/publicshareauth.scss

@@ -5,9 +5,29 @@
  * the style for the adjusted layout, which is not the proper one for them, and
  * this would cause the elements to "jump" to their final position once the
  * layout was adjusted. */
-#body-login.talk-sidebar-enabled {
-	flex-direction: row;
-	align-items: stretch;
+body.talk-sidebar-enabled {
+	/* Move rules set for body by guest.scss to the wrapped body. */
+	display: unset;
+	flex-direction: unset;
+	justify-content: unset;
+	align-items: unset;
+
+	#body-login {
+		display: flex;
+		justify-content: center;
+
+		background-position: 50% 50%;
+		background-repeat: repeat;
+		background-size: 275px, contain;
+		background-attachment: fixed;
+
+		width: 100%;
+		height: 100%;
+
+		/* Changed from guest.scss. */
+		flex-direction: row;
+		align-items: stretch;
+	}
 }
 
 /* #body-login should be used to override the #content rules set in server. */

src/mainPublicShareAuthSidebar.js

@@ -51,6 +51,32 @@ Vue.prototype.OCA = OCA
 
 Vue.use(Vuex)
 
+/**
+ * Wraps all the body contents in its own container.
+ *
+ * The root element of the layout needs to be flex, but the body element can not
+ * be in order to properly place the autocompletion panel using an absolute
+ * position.
+ */
+function wrapBody() {
+	const bodyElement = document.querySelector('body')
+	const bodyWrapperElement = document.createElement('div')
+
+	while (bodyElement.childNodes.length) {
+		bodyWrapperElement.append(bodyElement.childNodes[0])
+	}
+
+	while (bodyElement.classList.length) {
+		bodyWrapperElement.classList.add(bodyElement.classList.item(0))
+		bodyElement.classList.remove(bodyElement.classList.item(0))
+	}
+
+	bodyWrapperElement.setAttribute('id', bodyElement.getAttribute('id'))
+	bodyElement.removeAttribute('id')
+
+	bodyElement.append(bodyWrapperElement)
+}
+
 function adjustLayout() {
 	const contentElement = document.createElement('div')
 	contentElement.setAttribute('id', 'content')
@@ -67,6 +93,8 @@ function adjustLayout() {
 	talkSidebarElement.setAttribute('id', 'talk-sidebar')
 	document.querySelector('body').append(talkSidebarElement)
 
+	wrapBody()
+
 	document.querySelector('body').classList.add('talk-sidebar-enabled')
 }