hanyuu/assets/oauth2.js/header/user.jsx

53 lines
1.8 KiB
JavaScript

const HanyuuOAuth2UserGuiseHeader = function(guise) {
const element = <div class="oauth2-userhead-guise">
<div class="oauth2-userhead-guise-avatar">
<div class="oauth2-userhead-guise-avatar-image">
<img src={guise.avatar_uri} alt=""/>
</div>
</div>
<div class="oauth2-userhead-guise-text">
<p>Are you <a href={guise.profile_uri} target="_blank" style={`color: ${guise.colour}`}>{guise.name}</a> and did you mean to use your own account?</p>
<p><a href={guise.revert_uri} target="_blank">Click here</a> and reload this page.</p>
</div>
</div>;
return {
get element() { return element; },
get visible() { return !element.classList.contains('hidden'); },
set visible(state) {
element.classList.toggle('hidden', !state);
},
};
};
const HanyuuOAuth2UserHeader = function(user) {
const element = <div class="oauth2-userhead">
<div class="oauth2-userhead-main">
<div class="oauth2-userhead-main-avatar">
<div class="oauth2-userhead-main-avatar-image">
<img src={user.avatar_uri} alt=""/>
</div>
</div>
<div class="oauth2-userhead-main-name">
<a href={user.profile_uri} target="_blank">{user.name}</a>
</div>
</div>
</div>;
let guiseInfo;
if(user.guise) {
guiseInfo = new HanyuuOAuth2UserGuiseHeader(user.guise);
element.appendChild(guiseInfo.element);
}
return {
get element() { return element; },
get guiseVisible() { return guiseInfo?.visible === true; },
set guiseVisible(state) {
if(guiseInfo !== undefined)
guiseInfo.visible = state;
},
};
};