Fix video verification layout

Signed-off-by: Joas Schilling <coding@schilljs.com>

2 files changed, 13 insertions, 31 deletions

diff --git a/src/PublicShareAuthRequestPasswordButton.vue b/src/PublicShareAuthRequestPasswordButton.vue
index edd7e0109..86d3456a1 100644
--- a/src/PublicShareAuthRequestPasswordButton.vue
+++ b/src/PublicShareAuthRequestPasswordButton.vue
@@ -23,13 +23,14 @@
 		<!-- "submit-wrapper" is used to mimic the login button and thus get
 			automatic colouring of the confirm icon by the Theming app. -->
 		<div id="submit-wrapper" class="request-password-wrapper">
-			<input id="request-password-button"
-				class="primary button-vue"
-				type="button"
-				:value="t('spreed', 'Request password')"
+			<Button id="request-password-button"
+				type="primary"
+				:wide="true"
 				:disabled="isRequestInProgress"
-				@click="requestPassword">
-			<div class="icon" :class="iconClass" />
+				@click="requestPassword"
+				@keydown.enter="requestPassword">
+				{{ t('spreed', 'Request password') }}
+			</Button>
 		</div>
 		<p v-if="hasRequestFailed" class="warning error-message">
 			{{ t('spreed', 'Error requesting the password.') }}
@@ -38,6 +39,7 @@
 </template>
 
 <script>
+import Button from '@nextcloud/vue/dist/Components/Button'
 import { getPublicShareAuthConversationToken } from './services/publicShareAuthService.js'
 import browserCheck from './mixins/browserCheck.js'
 import '@nextcloud/dialogs/styles/toast.scss'
@@ -46,6 +48,10 @@ export default {
 
 	name: 'PublicShareAuthRequestPasswordButton',
 
+	components: {
+		Button,
+	},
+
 	mixins: [
 		browserCheck,
 	],
@@ -102,27 +108,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-/* Request password button has the appearance of the log in button */
-.request-password-wrapper {
-	position: relative;
-	width: 280px;
-	margin: 16px auto;
-}
-
-.request-password-wrapper .icon {
-	position: absolute;
-	right: 23px;
-	pointer-events: none;
-}
-
-input#request-password-button {
-	width: 269px;
-	padding: 10px 10px;
-}
-
-input#request-password-button:disabled ~ .icon {
-	opacity: 0.5;
-}
-</style>
diff --git a/src/mainPublicShareAuthSidebar.js b/src/mainPublicShareAuthSidebar.js
index 87e7ea0e0..07d251013 100644
--- a/src/mainPublicShareAuthSidebar.js
+++ b/src/mainPublicShareAuthSidebar.js
@@ -106,7 +106,7 @@ function adjustLayout() {
 
 	const requestPasswordElement = document.createElement('div')
 	requestPasswordElement.setAttribute('id', 'request-password')
-	document.querySelector('main').appendChild(requestPasswordElement)
+	document.querySelector('.guest-box').appendChild(requestPasswordElement)
 
 	const talkSidebarElement = document.createElement('div')
 	talkSidebarElement.setAttribute('id', 'talk-sidebar')