feat: add login button to guest welcome window

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
This commit is contained in:
DorraJaouad 2024-08-12 13:59:19 +02:00
parent 242a70bd34
commit 82c2fecedf
3 changed files with 61 additions and 2 deletions

View file

@ -35,6 +35,16 @@
<Check :size="20" />
</template>
</NcButton>
<div class="separator" />
<div class="login-info">
<span> {{ t('spreed', 'Do you already have an account?') }}</span>
<NcButton type="secondary"
:href="getLoginUrl()">
{{ t('spreed', 'Login') }}
</NcButton>
</div>
</div>
</NcModal>
</template>
@ -43,6 +53,7 @@
import Check from 'vue-material-design-icons/CheckBold.vue'
import { t } from '@nextcloud/l10n'
import { generateUrl } from '@nextcloud/router'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
@ -108,6 +119,13 @@ export default {
handleChooseUserName() {
this.guestNameStore.submitGuestUsername(this.token, this.guestUserName)
},
getLoginUrl() {
const currentUrl = window.location.pathname
const loginBaseUrl = generateUrl('/login')
const redirectUrl = encodeURIComponent(currentUrl)
return `${loginBaseUrl}?redirect_url=${redirectUrl}`
},
},
}
</script>
@ -137,4 +155,16 @@ export default {
.submit-button {
margin: 0 auto;
}
.login-info {
display: flex;
align-items: center;
gap: calc(var(--default-grid-baseline) * 2);
padding-top: calc(var(--default-grid-baseline) * 2);
}
.separator {
margin: calc(var(--default-grid-baseline) * 5) 0 var(--default-grid-baseline);
border-top: 1px solid;
}
</style>

View file

@ -30,7 +30,7 @@
use-extended-markdown />
</div>
</div>
<SetGuestUsername v-if="currentUserIsGuest" />
<SetGuestUsername v-if="currentUserIsGuest" class="guest-info" />
</div>
</template>
@ -139,4 +139,10 @@ export default {
}
}
.guest-info {
display: flex;
flex-direction: column;
align-items: center;
}
</style>

View file

@ -10,7 +10,7 @@
<NcButton v-if="!isEditingUsername"
@click="handleEditUsername">
{{ t('spreed', 'Edit') }}
{{ t('spreed', 'Edit display name') }}
<template #icon>
<Pencil :size="20" />
</template>
@ -27,6 +27,14 @@
@trailing-button-click="handleChooseUserName"
@keydown.enter="handleChooseUserName"
@keydown.esc="handleEditUsername" />
<div class="login-info">
<span> {{ t('spreed', 'Do you already have an account?') }}</span>
<NcButton type="secondary"
:href="getLoginUrl()">
{{ t('spreed', 'Login') }}
</NcButton>
</div>
</div>
</template>
@ -36,6 +44,7 @@ import escapeHtml from 'escape-html'
import Pencil from 'vue-material-design-icons/Pencil.vue'
import { t } from '@nextcloud/l10n'
import { generateUrl } from '@nextcloud/router'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
@ -127,6 +136,13 @@ export default {
})
}
},
getLoginUrl() {
const currentUrl = window.location.pathname
const loginBaseUrl = generateUrl('/login')
const redirectUrl = encodeURIComponent(currentUrl)
return `${loginBaseUrl}?redirect_url=${redirectUrl}`
},
},
}
@ -143,4 +159,11 @@ export default {
}
}
.login-info {
display: flex;
align-items: center;
gap: calc(var(--default-grid-baseline) * 2);
padding-top: calc(var(--default-grid-baseline) * 2);
}
</style>