friloo
662756bc75
Adds an "M365 Login" menu entry with a Microsoft-style icon and one submenu per tab (Connection, Button, Security). The active tab is taken from the URL, kept in the post-save redirect and highlighted in the submenu. Notices are printed explicitly because top-level pages do not include options-head.php. Links, docs and screenshots updated. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JJxAHYdMfKPoN4koRc4Ci2
355 lines
12 KiB
JavaScript
355 lines
12 KiB
JavaScript
/* global jQuery, wp, m365LoginAdmin */
|
|
( function ( $ ) {
|
|
'use strict';
|
|
|
|
var cfg = window.m365LoginAdmin || {};
|
|
var i18n = cfg.i18n || {};
|
|
|
|
$( function () {
|
|
var $preview = $( '#m365-preview' );
|
|
|
|
/* ---------------- Tabs ---------------- */
|
|
var $tabs = $( '.m365-admin__tab' );
|
|
var $panels = $( '.m365-admin__panel' );
|
|
|
|
function activate( name ) {
|
|
$tabs.removeClass( 'is-active' ).attr( 'aria-selected', 'false' ).filter( '[data-tab="' + name + '"]' ).addClass( 'is-active' ).attr( 'aria-selected', 'true' );
|
|
$panels.removeClass( 'is-active' ).filter( '[data-panel="' + name + '"]' ).addClass( 'is-active' );
|
|
try {
|
|
window.localStorage.setItem( 'm365LoginTab', name );
|
|
} catch ( e ) {}
|
|
// Keep the URL (and the post-save redirect) on this tab.
|
|
var $referer = $( '#m365-referer' );
|
|
if ( $referer.length && window.history && window.history.replaceState ) {
|
|
var url = new URL( window.location.href );
|
|
if ( 'connection' === name ) {
|
|
url.searchParams.delete( 'tab' );
|
|
} else {
|
|
url.searchParams.set( 'tab', name );
|
|
}
|
|
url.searchParams.delete( 'settings-updated' );
|
|
window.history.replaceState( null, '', url.toString() );
|
|
$referer.val( url.pathname + url.search );
|
|
}
|
|
}
|
|
|
|
$tabs.on( 'click', function () {
|
|
activate( $( this ).data( 'tab' ) );
|
|
} );
|
|
|
|
var initial = $( '.m365-admin__tabs' ).data( 'initial-tab' );
|
|
if ( initial && $tabs.filter( '[data-tab="' + initial + '"]' ).length ) {
|
|
activate( initial );
|
|
} else {
|
|
try {
|
|
var saved = window.localStorage.getItem( 'm365LoginTab' );
|
|
if ( saved && $tabs.filter( '[data-tab="' + saved + '"]' ).length ) {
|
|
activate( saved );
|
|
}
|
|
} catch ( e ) {}
|
|
}
|
|
|
|
// Jump to the tab that contains a validation error.
|
|
var $error = $( '.settings-error' ).first();
|
|
if ( $error.length && $error.text().toLowerCase().indexOf( 'tenant' ) !== -1 ) {
|
|
activate( 'connection' );
|
|
}
|
|
|
|
/* ---------------- Live preview ---------------- */
|
|
function setVar( name, value ) {
|
|
$preview[ 0 ].style.setProperty( '--m365-' + name, value );
|
|
}
|
|
|
|
function updateIcon() {
|
|
var show = $( '[data-preview="show-icon"]' ).is( ':checked' );
|
|
var url = $.trim( $( '#m365-icon-url' ).val() );
|
|
var $icon = $( '#m365-preview-icon' );
|
|
var $thumb = $( '#m365-icon-thumb' );
|
|
|
|
$icon.toggleClass( 'is-hidden', ! show );
|
|
|
|
if ( url ) {
|
|
var $img = $( '<img>', { src: url, alt: '' } );
|
|
$icon.empty().append( $img );
|
|
$thumb.empty().append( $img.clone() );
|
|
} else {
|
|
$icon.html( cfg.defaultLogo || '' );
|
|
$thumb.html( cfg.defaultLogo || '' );
|
|
}
|
|
}
|
|
|
|
$( '[data-preview="text"]' ).on( 'input', function () {
|
|
$( '#m365-preview-text' ).text( $( this ).val() );
|
|
} );
|
|
|
|
$( '[data-preview="divider"]' ).on( 'input', function () {
|
|
var val = $.trim( $( this ).val() );
|
|
$( '#m365-preview-divider' ).text( val ).closest( '.m365-login__divider' ).toggleClass( 'is-hidden', ! val );
|
|
} ).trigger( 'input' );
|
|
|
|
$( '[data-preview="show-icon"], #m365-icon-url' ).on( 'change input', updateIcon );
|
|
|
|
$( '[data-preview="radius"]' ).on( 'input change', function () {
|
|
setVar( 'radius', $( this ).val() + 'px' );
|
|
$( '#m365-radius-value' ).text( $( this ).val() + ' px' );
|
|
} );
|
|
|
|
$( '.m365-color' ).wpColorPicker( {
|
|
change: function ( event, ui ) {
|
|
var key = $( event.target ).data( 'preview' );
|
|
var color = ui.color.toString();
|
|
setVar( key.replace( '_', '-' ), color );
|
|
},
|
|
clear: function ( event ) {
|
|
var $input = $( event.target ).closest( '.wp-picker-container' ).find( '.m365-color' );
|
|
setVar( $input.data( 'preview' ).replace( '_', '-' ), $input.data( 'default-color' ) );
|
|
}
|
|
} );
|
|
|
|
$( '.m365-preset' ).on( 'click', function () {
|
|
var preset = $( this ).data( 'preset' );
|
|
if ( ! preset ) {
|
|
return;
|
|
}
|
|
$.each( preset, function ( key, value ) {
|
|
$( '#m365-button_' + key ).wpColorPicker( 'color', value );
|
|
} );
|
|
} );
|
|
|
|
/* ---------------- Media library ---------------- */
|
|
var frame;
|
|
$( '#m365-icon-choose' ).on( 'click', function ( e ) {
|
|
e.preventDefault();
|
|
if ( ! window.wp || ! wp.media ) {
|
|
return;
|
|
}
|
|
if ( ! frame ) {
|
|
frame = wp.media( {
|
|
title: i18n.chooseIcon || '',
|
|
button: { text: i18n.useIcon || '' },
|
|
library: { type: 'image' },
|
|
multiple: false
|
|
} );
|
|
frame.on( 'select', function () {
|
|
var attachment = frame.state().get( 'selection' ).first().toJSON();
|
|
var url = attachment.url;
|
|
if ( attachment.sizes && attachment.sizes.thumbnail && attachment.mime !== 'image/svg+xml' ) {
|
|
url = attachment.sizes.thumbnail.url;
|
|
}
|
|
$( '#m365-icon-url' ).val( url ).trigger( 'input' );
|
|
} );
|
|
}
|
|
frame.open();
|
|
} );
|
|
|
|
$( '#m365-icon-reset' ).on( 'click', function ( e ) {
|
|
e.preventDefault();
|
|
$( '#m365-icon-url' ).val( '' ).trigger( 'input' );
|
|
} );
|
|
|
|
/* ---------------- Auth method switch ---------------- */
|
|
function applyMethod() {
|
|
var method = $( 'input[name$="[auth_method]"]:checked' ).val() || 'secret';
|
|
$( '.m365-method__option' ).removeClass( 'is-selected' ).filter( '[data-method="' + method + '"]' ).addClass( 'is-selected' );
|
|
$( '.m365-auth-panel' ).removeClass( 'is-active' ).filter( '[data-method="' + method + '"]' ).addClass( 'is-active' );
|
|
}
|
|
$( 'input[name$="[auth_method]"]' ).on( 'change', applyMethod );
|
|
applyMethod();
|
|
|
|
/* ---------------- Certificate generation ---------------- */
|
|
$( '#m365-cert-generate' ).on( 'click', function () {
|
|
var $btn = $( this );
|
|
var $out = $( '#m365-cert-result' );
|
|
if ( $btn.data( 'replace' ) && ! window.confirm( i18n.confirmCert ) ) {
|
|
return;
|
|
}
|
|
$btn.prop( 'disabled', true );
|
|
$out.removeClass( 'is-success is-error' ).prop( 'hidden', false ).text( i18n.generating || '…' );
|
|
|
|
$.post( cfg.ajaxUrl, { action: cfg.certAction, nonce: cfg.nonce, op: 'generate' } ).done( function ( res ) {
|
|
if ( res && res.success ) {
|
|
$out.addClass( 'is-success' ).text( res.data.message );
|
|
window.setTimeout( function () { window.location.reload(); }, 800 );
|
|
} else {
|
|
$out.addClass( 'is-error' ).text( ( res && res.data && res.data.message ) || i18n.testFailed );
|
|
$btn.prop( 'disabled', false );
|
|
}
|
|
} ).fail( function () {
|
|
$out.addClass( 'is-error' ).text( i18n.testFailed );
|
|
$btn.prop( 'disabled', false );
|
|
} );
|
|
} );
|
|
|
|
$( '#m365-cert-remove' ).on( 'change', function () {
|
|
if ( this.checked && ! window.confirm( i18n.confirmCertRemove ) ) {
|
|
this.checked = false;
|
|
}
|
|
} );
|
|
|
|
$( '#m365-cert-paste-toggle' ).on( 'click', function ( e ) {
|
|
e.preventDefault();
|
|
$( '#m365-cert-paste' ).prop( 'hidden', function ( i, v ) { return ! v; } );
|
|
} );
|
|
|
|
/* ---------------- Secret visibility ---------------- */
|
|
$( '.m365-toggle-secret' ).on( 'click', function () {
|
|
var $input = $( '#m365-client-secret' );
|
|
var show = 'password' === $input.attr( 'type' );
|
|
$input.attr( 'type', show ? 'text' : 'password' );
|
|
$( this ).find( '.dashicons' ).toggleClass( 'dashicons-visibility', ! show ).toggleClass( 'dashicons-hidden', show );
|
|
} );
|
|
|
|
/* ---------------- Copy redirect URI ---------------- */
|
|
$( '.m365-copy__button' ).on( 'click', function () {
|
|
var $btn = $( this );
|
|
var text = $( '#' + $btn.data( 'copy' ) ).text();
|
|
var done = function () {
|
|
$btn.text( i18n.copied || 'Copied!' );
|
|
window.setTimeout( function () {
|
|
$btn.text( i18n.copy || 'Copy' );
|
|
}, 1500 );
|
|
};
|
|
if ( navigator.clipboard && navigator.clipboard.writeText ) {
|
|
navigator.clipboard.writeText( text ).then( done );
|
|
} else {
|
|
var $tmp = $( '<textarea>' ).val( text ).appendTo( 'body' ).select();
|
|
try {
|
|
document.execCommand( 'copy' );
|
|
} catch ( e ) {}
|
|
$tmp.remove();
|
|
done();
|
|
}
|
|
} );
|
|
|
|
/* ---------------- Entra group picker ---------------- */
|
|
var $groupList = $( '#m365-group-list' );
|
|
var $groupResults = $( '#m365-group-results' );
|
|
var optionName = ( $( '#m365-tenant' ).attr( 'name' ) || '' ).replace( /\[tenant_id\]$/, '' );
|
|
|
|
function escapeHtml( str ) {
|
|
return $( '<div>' ).text( str || '' ).html();
|
|
}
|
|
|
|
function refreshGroupList() {
|
|
$groupList.toggleClass( 'is-empty', 0 === $groupList.children( 'li' ).length );
|
|
}
|
|
|
|
function addGroup( id, name ) {
|
|
id = ( id || '' ).toLowerCase();
|
|
if ( ! /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test( id ) ) {
|
|
return;
|
|
}
|
|
if ( $groupList.find( 'li[data-id="' + id + '"]' ).length ) {
|
|
return;
|
|
}
|
|
var $li = $( '<li class="m365-group-chip">' ).attr( 'data-id', id );
|
|
$li.append( $( '<span class="m365-group-chip__name">' ).text( name || id ) );
|
|
$li.append( $( '<code class="m365-group-chip__id">' ).text( id ) );
|
|
$li.append( $( '<input type="hidden">' ).attr( 'name', optionName + '[allowed_groups][' + id + ']' ).val( name || id ) );
|
|
$li.append( $( '<button type="button" class="m365-group-chip__remove" aria-label="' + escapeHtml( i18n.remove ) + '">×</button>' ) );
|
|
$groupList.append( $li );
|
|
refreshGroupList();
|
|
}
|
|
|
|
$groupList.on( 'click', '.m365-group-chip__remove', function () {
|
|
$( this ).closest( 'li' ).remove();
|
|
refreshGroupList();
|
|
} );
|
|
refreshGroupList();
|
|
|
|
function searchGroups() {
|
|
var query = $.trim( $( '#m365-group-search' ).val() );
|
|
$groupResults.prop( 'hidden', false ).removeClass( 'is-error' ).html( '<p class="m365-group-results__status">' + escapeHtml( i18n.searching ) + '</p>' );
|
|
|
|
$.post( cfg.ajaxUrl, {
|
|
action: cfg.groupAction,
|
|
nonce: cfg.nonce,
|
|
query: query
|
|
} ).done( function ( res ) {
|
|
if ( ! res || ! res.success ) {
|
|
var msg = ( res && res.data && res.data.message ) || i18n.testFailed;
|
|
$groupResults.addClass( 'is-error' ).html( '<p class="m365-group-results__status">' + escapeHtml( msg ) + '</p>' );
|
|
// Allow adding a pasted GUID even when Graph is unavailable.
|
|
if ( /^[0-9a-f-]{36}$/i.test( query ) ) {
|
|
$groupResults.append( buildResult( { id: query, name: query, type: '', description: '' } ) );
|
|
}
|
|
return;
|
|
}
|
|
var groups = res.data.groups || [];
|
|
if ( ! groups.length ) {
|
|
$groupResults.html( '<p class="m365-group-results__status">' + escapeHtml( i18n.noGroups ) + '</p>' );
|
|
return;
|
|
}
|
|
$groupResults.empty();
|
|
$.each( groups, function ( i, g ) {
|
|
$groupResults.append( buildResult( g ) );
|
|
} );
|
|
} ).fail( function () {
|
|
$groupResults.addClass( 'is-error' ).html( '<p class="m365-group-results__status">' + escapeHtml( i18n.testFailed ) + '</p>' );
|
|
} );
|
|
}
|
|
|
|
function buildResult( g ) {
|
|
var $row = $( '<div class="m365-group-result">' );
|
|
var $meta = $( '<div class="m365-group-result__meta">' );
|
|
$meta.append( $( '<strong>' ).text( g.name ) );
|
|
if ( g.type ) {
|
|
$meta.append( $( '<span class="m365-group-result__type">' ).text( g.type ) );
|
|
}
|
|
$meta.append( $( '<code>' ).text( g.id ) );
|
|
if ( g.description ) {
|
|
$meta.append( $( '<em>' ).text( g.description ) );
|
|
}
|
|
var $btn = $( '<button type="button" class="button button-small">' ).text( i18n.add ).on( 'click', function () {
|
|
addGroup( g.id, g.name );
|
|
$( this ).prop( 'disabled', true );
|
|
} );
|
|
if ( $groupList.find( 'li[data-id="' + ( g.id || '' ).toLowerCase() + '"]' ).length ) {
|
|
$btn.prop( 'disabled', true );
|
|
}
|
|
return $row.append( $meta ).append( $btn );
|
|
}
|
|
|
|
$( '#m365-group-search-btn' ).on( 'click', searchGroups );
|
|
$( '#m365-group-search' ).on( 'keydown', function ( e ) {
|
|
if ( 'Enter' === e.key ) {
|
|
e.preventDefault();
|
|
searchGroups();
|
|
}
|
|
} );
|
|
|
|
/* ---------------- Fallback key ---------------- */
|
|
$( '#m365-fallback-regenerate' ).on( 'change', function () {
|
|
if ( this.checked && ! window.confirm( i18n.confirmKey ) ) {
|
|
this.checked = false;
|
|
}
|
|
} );
|
|
|
|
/* ---------------- Test tenant ---------------- */
|
|
$( '#m365-test' ).on( 'click', function () {
|
|
var $btn = $( this );
|
|
var $out = $( '#m365-test-result' );
|
|
var label = $btn.text();
|
|
|
|
$btn.prop( 'disabled', true ).text( i18n.testing || '…' );
|
|
$out.removeClass( 'is-success is-error' ).prop( 'hidden', true ).empty();
|
|
|
|
$.post( cfg.ajaxUrl, {
|
|
action: cfg.action,
|
|
nonce: cfg.nonce,
|
|
tenant: $( '#m365-tenant' ).val()
|
|
} ).done( function ( res ) {
|
|
if ( res && res.success ) {
|
|
$out.addClass( 'is-success' ).text( res.data.message ).append( $( '<code>' ).text( res.data.issuer ) );
|
|
} else {
|
|
$out.addClass( 'is-error' ).text( ( res && res.data && res.data.message ) || i18n.testFailed || '' );
|
|
}
|
|
} ).fail( function () {
|
|
$out.addClass( 'is-error' ).text( i18n.testFailed || '' );
|
|
} ).always( function () {
|
|
$btn.prop( 'disabled', false ).text( label );
|
|
$out.prop( 'hidden', false );
|
|
} );
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|