Веб-компонент Авторизация Состоит из двух новых HTML-тегов
Для гостя <cb-m1-auth-guest> И для авторизованного пользователя <cb-m1-auth-user> На странице появится один из двух элементов, в зависимости от условия авторизован пользователь или нет.
<% if(!cb.UserManager.isAuth(req)) { %>
<cb-m1-auth-guest>
<button class="cb-button cb-neutral" data-progress>
<%= cb.system.text.auth.panelEnter[LANG]%>
</button>
</cb-m1-auth-guest>
<% } %>
<% if(cb.UserManager.isAuth(req)) { %>
<cb-m1-auth-user></cb-m1-auth-user>
<% } %>
Кастомизация Эти элементы не требуют дополнительной настройки, хотя возможна небольшая кастомизация не затрагивающая работу компонента. Делайте её после комментариев customization.
/public/components/auth/index.js// GUEST
const setupGuest = async el => {
const openMenuAndLoadAll = async () => {
if (!isLoaded) {
isLoaded = true
cb.setupButton(button)
const {progress} = button
progress.hidden = false
const folder = '/components/auth/guest/'
await cb.loadAll(folder + 'loader')
cb.system.utils.authGuestSetup(button)
progress.hidden = true
// customization guest dialog
const dialog = button.previousElementSibling
dialog.addEventListener('silentLoginLoaded', () => {
// customization silentLogin tablist
})
cb.system.utils.authGuestDialogSetup(dialog)
// const container = dialog.querySelector('[auth-screen="login"]')
// await cb.system.utils.authGuestOauthSetup(button.dataset.auth, container, folder)
}
const dialog = button.previousElementSibling
dialog.dialogElement.showModal()
}
const button = el.querySelector('button')
let isLoaded
button.addEventListener('click', openMenuAndLoadAll)
cb.system.authShow = openMenuAndLoadAll
}
customElements.define(
'cb-m1-auth-guest',
class extends HTMLElement {
async connectedCallback() {
await cb.setupOnce(this, setupGuest)
}
}
)
// USER
const setupUser = async el => {
cb.system.authMenu = el.parentNode
//load component instantly
await Promise.all([cb.interfaceLoaded(), cb.loadAll('/components/auth/user/loader')])
const {auth, msg} = cb.system.text
const user = cb.system.user
if (user) {
cb.system.utils.authUserSetup(el)
cb.system.utils.authLogOutSetup(el)
cb.system.auth.remaindToSetPassword(90, '/account/password')
// customization user
if (user._system.isContentManager) {
el.firstElementChild.insertAdjacentHTML('afterend', /*html*/ `
<button class="cb-option cb-cmsoff" role="menuitem" data-value="editpage" onclick="cb.system.goToEdit()">${cb.icon('edit', 'cb-neutral') + auth.edit}</button>
<a class="cb-option" role="menuitem" href="/">
${cb.icon('home', 'cb-neutral') + msg.homePage}
</a>
<a class="cb-option" role="menuitem" href="${cb.cmsUrl}">
${cb.icon('apps', 'cb-neutral') + auth.siteManagement}
</a>
`)
}
}
}
customElements.define(
'cb-m1-auth-user',
class extends HTMLElement {
async connectedCallback() {
await cb.setupOnce(this, setupUser)
this.dispatchEvent(new CustomEvent('connect'))
}
disconnectedCallback() {
this.dispatchEvent(new CustomEvent('disconnect'))
}
}
)
