diff options
author | Joas Schilling <coding@schilljs.com> | 2022-07-25 11:59:46 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2022-07-25 11:59:46 +0300 |
commit | a9db23a9cba599be82f2c99e68e2e2de50bf7eaf (patch) | |
tree | 30a4de938e1252356b0728715d20c90d4cbd8a9f /src | |
parent | 0e0bca806dccb1cd5b128b6af17bbdc484a058b6 (diff) |
Fix video verification layout
Signed-off-by: Joas Schilling <coding@schilljs.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/PublicShareAuthRequestPasswordButton.vue | 42 | ||||
-rw-r--r-- | src/mainPublicShareAuthSidebar.js | 2 |
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') |