<!-- Code from creedon - add some CSS to rename text by @tuanphan for member on Forum -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!--
begin member area log in dialog change
License : < https://tinyurl.com/s872fb68 >
Version : 0.3.0
SS Versions : 7.1, 7.0
Fluid
Engine
Compatible : Not Applicable
Note : the signUp setting does not apply to the join dialog of a
member site
Copyright : 2023-2024 Thomas Creedon
Tom's Web Consulting < http://www.tomsWeb.consulting/ >
-->
<x-twc-malidc-style style="display : none;">
<!-- Tweak code by @tuanphan -->
.twc-malidc h1 {
visibility: hidden;
font-size: 0px;
}
.twc-malidc h1:before {
visibility: visible;
content: "Welcome to Career Compass Online!";
display: block;
font-size: 20px;
}
a.twc-malidc-request-reset span {
font-size: 0;
}
a.twc-malidc-request-reset span:before {
content: "Forgot password? Click here";
font-size: 12px;
}
a.twc-malidc-create {
display: none;
}
[data-test="login-button"] span {
font-size: 0;
}
[data-test="login-button"] span:before {
content: "Log In";
font-size: 12px;
}
</x-twc-malidc-style>
<script>
// initialize twc module
window.twc = ( ( self ) => self ) ( window.twc || { } );
twc.malidc = ( ( self ) => { // initialize twc malidc sub-module
self
.title = {
signIn : 'Login',
signUp : '[ optional, enter sign up title text here between single quotes replacing square brackets ]',
};
return self;
} ) ( twc.malidc || { } );
</script>
<!-- do not change anything below, there be the borg here -->
<script>
( ( ) => {
const
version = '0.3.0',
s = `Member Area Log In Dialog Change v${ version }
License < https://tinyurl.com/s872fb68 >
© 2023-2024 Thomas Creedon
Tom's Web Consulting < http://www.tomsWeb.consulting >`
.replace ( /^\s+/gm, '' );
console.log ( s );
// bail if no mutation observer available
if ( ! ( 'MutationObserver' in window ) ) return;
// initialize twc malidc callbacks sub-module
twc.malidc.callbacks =
( ( self ) => self ) ( twc.malidc.callbacks || [ ] );
const callback = ( ) => {
const
accountFrameIdValue = 'accountFrame',
callback = ( mutations ) => {
const callback = ( mutation ) => {
// bail if no nodes added
if ( ! mutation.addedNodes.length ) return;
const
element = mutation.addedNodes [ 0 ],
id = element.id;
// bail if not account frame
if ( id != `${ accountFrameIdValue }` ) return;
const baseUrl = `${ location.protocol }//${ location.host }`
let url = element
.getAttribute ( 'src' );
url = new URL ( url, baseUrl )
.pathname;
const isLogin = url.startsWith ( '/account/frame' );
if ( ! isLogin ) return; // bail if not log in
load ( element );
};
mutations.forEach ( callback );
}, // end callback
codeKey = 'twc-malidc',
config = {
childList : true
},
load = ( element ) => {
const
callback = ( event ) => {
const
element = event.target,
pathname = element
.contentWindow
.location
.pathname,
b = pathname
.startsWith ( '/account/frame/login' );
if ( ! b ) return; // bail if not log in
const
dcmnt = element.contentDocument,
id = 'user-account-login-root',
callback = ( mutations ) => {
const callback = ( mutation ) => {
processMutationRecord ( mutation );
};
mutations.forEach ( callback );
},
config = {
childList : true
},
node = dcmnt
.getElementById ( `${ id }` )
.lastChild,
observer = new MutationObserver ( callback ),
processMutationRecord = ( mutation ) => {
// bail if no nodes added
if ( ! mutation.addedNodes.length ) return;
const node = mutation.addedNodes [ 0 ];
let selector = 'button[type="submit"]' +
'[data-test="login-button"]';
const isSignIn = node.querySelector ( selector ) !== null;
selector = 'button[type="submit"]' +
'[data-test="create-account-create-button"]';
const isSignUp = node.querySelector ( selector ) !== null;
// bail if not sign in or up
if ( ! ( isSignIn || isSignUp ) ) return;
const
anchorClassAdd = ( key ) => {
const
selector = `[ href="/account/login/${ key }" ]`,
element = dcmnt.querySelector ( selector );
if ( element !== null )
element.classList.add ( `${ codeKey }-${ key }` );
return element;
},
attributeNameClass = `data-${ codeKey }-class`,
classAdd = ( element, classes ) => {
const callback = ( clss ) => {
element
.classList
.add ( clss );
};
classes
.split ( ' ' )
.forEach ( callback );
},
classRemove = ( element ) => {
const classList = element.classList
for ( const clss of classList ) {
const isCodeClass =
clss.startsWith ( `${ codeKey }-` );
if ( ! isCodeClass ) continue; // continue
classList.remove ( clss );
}
},
config = {
attributes : true,
subtree : true
},
isSignUpJoin = dcmnt
.querySelector ( 'h1' )
.textContent
.startsWith ( 'Join ' ),
options = twc.malidc,
callbacks = options.callbacks;
let callback = ( mutations ) => {
const callback = ( mutation ) => {
// bail if attribute not class
if ( mutation.attributeName != 'class' ) return;
const
element = mutation.target
className = element
.getAttribute ( attributeNameClass );
// bail data class attribute is null
if ( className === null ) return;
const classNames = className
.split ( ' ' );
for ( const className of classNames ) {
const
classList = element.classList,
b = classList
.contains ( className );
if ( b ) break; // bail if class already added
classList
.add ( className );
}
};
mutations.forEach ( callback );
}; // end callback
let
dialogType,
element,
s;
const observer = new MutationObserver ( callback );
callback = ( element ) => {
const dataTest = element
.getAttribute ( 'data-test' );
switch ( dataTest ) {
case 'create-account-password' :
value = `${ valuePrefix }` +
`${ codeKey }-sign-up-password`;
break;
case 'create-account-confirm-password' :
value = `${ valuePrefix }` +
`${ codeKey }-sign-up-password-confirm`;
break;
case 'login-password' :
value = `${ valuePrefix }` +
`${ codeKey }-sign-in-password`;
break;
}
const parentElement = element
.parentElement
.parentElement;
classRemove ( parentElement );
classAdd ( parentElement, value );
parentElement
.setAttribute ( attributeNameClass, value );
};
// set dialog type
switch ( true ) {
case isSignUpJoin :
dialogType = 'sign-up-join';
break;
case isSignIn :
dialogType = 'sign-in';
break;
case isSignUp :
dialogType = 'sign-up';
break;
}
// begin code and login type class add
element = dcmnt
.getElementById ( `${ id }` );
const
classList = element.classList,
className2 = `${ codeKey }-${ dialogType }`;
let className = `${ codeKey }`;
classRemove ( element );
classList
.add ( className, className2 );
// end code and login type class add
const title = ( ) => {
if ( isSignUpJoin ) return; // bail if join
const p = new RegExp ( '^\\[.+\\]$' );
switch ( true ) {
case isSignIn :
s = options
.title
.signIn;
break;
case isSignUp :
s = options
.title
.signUp;
break;
}
const change = ! p.test ( s );
if ( change )
dcmnt
.getElementsByTagName ( 'h1' )
[ 0 ]
.textContent
=
s;
};
title ( );
// begin email class add
let value = `${ codeKey }-email`;
selector = 'form input[ type="email" ]';
element = dcmnt.querySelector ( selector );
if ( element !== null )
element
.parentElement
.parentElement
.setAttribute ( attributeNameClass, value );
// end email class add
// begin password class add
selector = 'form input[ type="password" ]';
const valuePrefix = `${ codeKey }-password `;
dcmnt
.querySelectorAll ( selector )
.forEach ( callback );
// end password class add
switch ( true ) {
case isSignIn :
// begin sign in again class add
element = dcmnt
.getElementsByTagName ( 'h3' )
[ 0 ];
if ( element !== undefined )
element
.classList
.add ( `${ codeKey }-sign-in-again-text` );
// end sign in again class add
// begin sign in email text class add
let text = 'Sign in with';
element = dcmnt.querySelectorAll ( 'form span' );
element = [ ...element ]
.filter ( n => n.textContent.startsWith ( text ) )
[ 0 ];
if ( element !== undefined ) {
s = `${ codeKey }-sign-in-email-text`;
element
.parentElement
.classList
.add ( s );
}
// end sign in email text class add
element = anchorClassAdd ( 'request-reset' );
element = anchorClassAdd ( 'create' );
// begin not you class add
selector = 'footer [ href="#" ]';
element = dcmnt.querySelector ( selector );
if ( element !== null ) {
s = `${ codeKey }-not-you`;
element
.classList
.add ( s );
}
// end not you class add
break;
case isSignUp :
// begin first name class add
value = `${ codeKey }-name-first`;
selector = 'form input[ type="text" ]' +
'[ data-test="create-account-first-name" ]';
element = dcmnt.querySelector ( selector );
if ( element !== null )
element
.parentElement
.parentElement
.setAttribute ( attributeNameClass, value );
// end first name class add
let parentElement;
// begin last name class add
value = `${ codeKey }-name-last`;
selector = 'form input[ type="text" ]' +
'[ data-test="create-account-last-name" ]';
element = dcmnt.querySelector ( selector );
if ( element !== null ) {
parentElement = element
.parentElement
.parentElement;
parentElement
.classList
.add ( value );
parentElement
.setAttribute ( attributeNameClass, value );
}
// end last name class add
// begin name class add
value = `${ codeKey }-name`;
parentElement = parentElement
.parentElement;
parentElement
.classList
.add ( value );
parentElement
.setAttribute ( attributeNameClass, value );
// end name class add
break;
}
if ( callbacks.length ) {
callback = ( callback ) => {
try {
callback ( dcmnt, dialogType );
} catch ( error ) {
const s = `${ codeKey } callback error`;
console.error ( s, error );
}
};
callbacks.forEach ( callback );
}
// start listening for changes in element
element = dcmnt.querySelector ( 'form' );
observer.observe ( element, config );
};
// begin css add
const
p = new RegExp ( '^\s+\[.+\]\s+$' ),
isAdd = ! p.test ( css );
if ( isAdd ) {
const style = dcmnt.createElement ( 'style' );
style.innerHTML = css;
dcmnt.body.append ( style );
}
// end css add
// begin make a pass over the panel already on the DOM
const mutation = {
addedNodes : [
node
]
};
processMutationRecord ( mutation );
// end make a pass over the panel already on the DOM
// start listening for changes in specified element
observer.observe ( node, config );
},
css = document
.getElementsByTagName ( `x-${ codeKey }-style` )
[ 0 ]
.textContent;
element
.addEventListener ( 'load', callback );
},
observer = new MutationObserver ( callback ),
selector = `#${ accountFrameIdValue }`,
element = document
.querySelector ( selector );
/*
if the account frame is already on the DOM, load. if not, then watch for
it to appear on DOM and load
*/
if ( element !== null ) {
const baseUrl = `${ location.protocol }//${ location.host }`;
let url = element
.getgAttribute ( 'src' );
url = new URL ( url, baseUrl )
.pathname;
const isSignIn = url.startsWith ( '/account/frame' );
if ( isSignIn )
load ( element );
}
// start listening for changes in specified element
observer.observe ( document.body, config );
};
document
.addEventListener ( 'DOMContentLoaded', callback );
} ) ( );
</script>
<!-- end member area log in dialog change -->