141 lines
5.4 KiB
JavaScript
141 lines
5.4 KiB
JavaScript
import { _converse, api } from '@converse/headless/core'
|
|
import { __ } from 'i18n'
|
|
import { html } from 'lit'
|
|
|
|
export const tplExternalLoginModal = (el, o) => {
|
|
// eslint-disable-next-line no-undef
|
|
const i18nRemotePeertube = __(LOC_login_remote_peertube)
|
|
// eslint-disable-next-line no-undef
|
|
const i18nRemotePeertubeUrl = __(LOC_login_remote_peertube_url)
|
|
const i18nRemotePeertubeOpen = __('OK')
|
|
const externalAuthOIDCButtonLabel = api.settings.get('livechat_external_auth_oidc_button_label')
|
|
const externalAuthOIDCUrl = api.settings.get('livechat_external_auth_oidc_url')
|
|
return html`<div class="modal-body livechat-external-login-modal">
|
|
${!externalAuthOIDCButtonLabel || !externalAuthOIDCUrl || !window.sessionStorage
|
|
? ''
|
|
: html`
|
|
<div class="livechat-external-login-modal-external-auth-oidc">
|
|
<button
|
|
class="btn btn-primary"
|
|
@click=${
|
|
(ev) => {
|
|
ev.preventDefault()
|
|
|
|
el.clearAlert()
|
|
|
|
const popup = window.open(
|
|
externalAuthOIDCUrl,
|
|
'livechat-external-auth',
|
|
'popup'
|
|
)
|
|
|
|
window.externalAuthGetResult = (data) => {
|
|
window.externalAuthGetResult = undefined
|
|
|
|
if (!data) {
|
|
// special case: when this modal is closed, used to close the popup
|
|
if (popup) { popup.close() }
|
|
return
|
|
}
|
|
|
|
console.log('Received an external authentication result...', data)
|
|
if (!data.ok) {
|
|
// eslint-disable-next-line no-undef
|
|
el.external_auth_oidc_alert_message = __(LOC_login_external_auth_alert_message) +
|
|
(data.message ? ` (${data.message})` : '')
|
|
return
|
|
}
|
|
|
|
console.info('Got external account information', data)
|
|
// Storing the token in sessionStorage.
|
|
window.sessionStorage.setItem('peertube-plugin-livechat-external-auth-oidc-token', data.token)
|
|
|
|
const reconnectMode = api.settings.get('livechat_external_auth_reconnect_mode')
|
|
if (reconnectMode === 'button-close-open') {
|
|
// Here, we click on the close button, then on the open button.
|
|
// FIXME: there is maybe a better way to do this.
|
|
try {
|
|
// But first, close the modal.
|
|
document.getElementsByClassName('livechat-external-login-modal')[0]
|
|
.closest('.modal-dialog')
|
|
.querySelector('button.close')
|
|
.click()
|
|
|
|
// As soon as disconnected, re-open:
|
|
_converse.api.listen.once('disconnected', () => {
|
|
document.getElementsByClassName('peertube-plugin-livechat-button-open')[0].click()
|
|
})
|
|
|
|
// And we close!
|
|
document.getElementsByClassName('peertube-plugin-livechat-button-close')[0].click()
|
|
} catch (err) {
|
|
// fallback... reloading window :/
|
|
console.error(err)
|
|
window.location.reload()
|
|
}
|
|
} else { // reload and other use cases...
|
|
window.location.reload()
|
|
}
|
|
}
|
|
|
|
return false
|
|
}
|
|
}
|
|
>
|
|
${externalAuthOIDCButtonLabel}
|
|
</button>
|
|
${!o.external_auth_oidc_alert_message
|
|
? ''
|
|
: html`<div class="invalid-feedback d-block">${o.external_auth_oidc_alert_message}</div>`
|
|
}
|
|
</div>
|
|
<hr>
|
|
`
|
|
}
|
|
<form class="converse-form chatroom-form" @submit=${(ev) => el.openRemotePeertube(ev)}>
|
|
<label>
|
|
${i18nRemotePeertube}
|
|
<input
|
|
type="url"
|
|
placeholder="${i18nRemotePeertubeUrl}"
|
|
class="form-control ${o.remote_peertube_alert_message ? 'is-invalid' : ''}"
|
|
name="peertube_url"
|
|
@keyup=${el.onRemotePeertubeKeyUp}
|
|
?disabled=${o.remote_peertube_state === 'loading'}
|
|
/>
|
|
</label>
|
|
<input
|
|
type="submit"
|
|
class="btn btn-primary"
|
|
value="${i18nRemotePeertubeOpen}"
|
|
?disabled=${o.remote_peertube_state === 'loading'}
|
|
/>
|
|
${
|
|
o.remote_peertube_state !== 'loading'
|
|
? ''
|
|
: html`<small class="form-text text-muted">${
|
|
// eslint-disable-next-line no-undef
|
|
__(LOC_login_remote_peertube_searching)
|
|
}</small>`
|
|
}
|
|
${!o.remote_peertube_alert_message
|
|
? ''
|
|
: html`<div class="invalid-feedback d-block">${o.remote_peertube_alert_message}</div>`
|
|
}
|
|
${!o.remote_peertube_try_anyway_url
|
|
? ''
|
|
: html`<div class="form-text">
|
|
${
|
|
// eslint-disable-next-line no-undef
|
|
__(LOC_login_remote_peertube_video_not_found_try_anyway)
|
|
}
|
|
<button class="btn btn-primary" onclick="window.location.href='${o.remote_peertube_try_anyway_url}'">${
|
|
// eslint-disable-next-line no-undef
|
|
__(LOC_login_remote_peertube_video_not_found_try_anyway_button)
|
|
}</button>
|
|
</div>`
|
|
}
|
|
</form>
|
|
</div>`
|
|
}
|