docbrown/app/javascript/admin/adminModal.js
Arit Amana 08796b5cee
[Team Email Login] Refactor Authentication Provider Enable/Disable (#11185)
* Starting out

* Building away...

* Hooking buttons up

* Hook Auth Provider buttons to Array Field

* trying to fix NoNameError

* Remains InviteOnlyMode disable and tests

* Smashing remaining tasks

* Last of tasks

* add tests

* Complete specs and tests 😅

* Fix bug

* Additional guard

* pass event to functions

* Position Email Auth first

* Fix bug in Email Auth Modal

* Fix spacing issue

* Update docs for adminModal.js

* Show/hide Enabled Indicator with Enable/Undo buttons

* Complete Auth Providers functionality

* Update app/javascript/admin/controllers/config_controller.js

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>

* Update app/javascript/admin/controllers/config_controller.js

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>

* Update app/controllers/admin/configs_controller.rb

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>

* Update helper names

* better implementation of EnabledIndicator show/hide

* Small copy changes

* Update spec/helpers/authentication_helper_spec.rb

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>

* Update app/views/admin/configs/show.html.erb

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>

* Update app/helpers/authentication_helper.rb

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>
2020-11-06 18:19:34 -05:00

55 lines
2.2 KiB
JavaScript

/**
* A function to generate the HTML for a Crayons modal within the /admin/ space.
*
* @function adminModal
* @param {string} title The title of the modal.
* @param {string} body The modal's content. May use HTML tags for styling.
* @param {string} confirmBtnText The text for the modal's "Confirm" button.
* @param {string} confirmBtnAction The function that fires when "Confirm" button is clicked.
* @param {string} cancelBtnText The text for the modal's "Cancel" button.
* @param {string} cancelBtnAction The function that fires when "Cancel" button is clicked.
* @param {string} customAttr A custom data attribute name. Will be apprended to the "data-" part.
* @param {string} customAttrValue The value of the custom attribute "customAttr".
*/
const adminModal = (
title,
body,
confirmBtnText,
confirmBtnAction,
cancelBtnText,
cancelBtnAction,
customAttr = null,
customAttrValue = null,
) => `
<div class="crayons-modal crayons-modal--s">
<div class="crayons-modal__box">
<header class="crayons-modal__box__header">
<p class="fw-bold fs-l">${title}</p>
<button type="button" class="crayons-btn crayons-btn--icon crayons-btn--ghost" data-action="click->config#closeAdminConfigModal">
<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
</svg>
</button>
</header>
<div class="crayons-modal__box__body flex flex-col gap-4">
${body}
<div class="flex gap-2">
<button
class="crayons-btn crayons-btn--danger"
data-action="click->config#${confirmBtnAction}"
data-${customAttr}="${customAttrValue}">
${confirmBtnText}
</button>
<button
class="crayons-btn crayons-btn--secondary"
data-action="click->config#${cancelBtnAction}">
${cancelBtnText}
</button>
</div>
</div>
</div>
<div class="crayons-modal__overlay"></div>
</div>
`;
export default adminModal;