54 lines
1.8 KiB
React
54 lines
1.8 KiB
React
|
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;
|
||
|
|
},
|
||
|
|
};
|
||
|
|
};
|