Initial commit: Atomaste website
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
import {__} from "@wordpress/i18n";
|
||||
import {useEffect, useState} from "@wordpress/element";
|
||||
|
||||
const DeactivationModal = () => {
|
||||
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [RssslModal, setRssslModal] = useState(false);
|
||||
const [targetPluginLink, setTargetPluginLink] = useState(null);
|
||||
const isPremium = rsssl_modal.pro_plugin_active;
|
||||
|
||||
useEffect(() => {
|
||||
// Dynamically set the targetPluginLink based on isPremium
|
||||
const linkId = isPremium ? 'deactivate-really-simple-security-pro' : 'deactivate-really-simple-security';
|
||||
const linkElement = document.getElementById(linkId);
|
||||
setTargetPluginLink(linkElement);
|
||||
|
||||
const handleClick = (event) => {
|
||||
event.preventDefault();
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
if (linkElement) {
|
||||
linkElement.addEventListener('click', handleClick);
|
||||
}
|
||||
|
||||
// Clean up the event listener
|
||||
return () => {
|
||||
if (linkElement) {
|
||||
linkElement.removeEventListener('click', handleClick);
|
||||
}
|
||||
};
|
||||
}, [isPremium]); // Re-run this effect if isPremium changes
|
||||
|
||||
const deactivateKeepHttps = () => {
|
||||
setOpen(false);
|
||||
window.location.href = rsssl_modal.deactivate_keep_https;
|
||||
};
|
||||
|
||||
const deactivateAndRevert = () => {
|
||||
setOpen(false);
|
||||
window.location.href = rsssl_modal.deactivate_revert_https;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!RssslModal && isOpen) {
|
||||
import("../Modal/RssslModal").then(({default: LoadedRssslModal}) => {
|
||||
setRssslModal(() => LoadedRssslModal);
|
||||
});
|
||||
}
|
||||
}, [isOpen, RssslModal]);
|
||||
|
||||
const content = () => {
|
||||
return (
|
||||
<>
|
||||
{__("Please choose the correct deactivation method, and before you go; you will miss out on below and future features in Really Simple Security", "really-simple-ssl")}
|
||||
{isPremium && <> <b>Pro</b></>}
|
||||
!
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const list = isPremium ? [
|
||||
{
|
||||
'icon': 'circle-times',
|
||||
'color': 'red',
|
||||
'text': __("SSL Encryption", "really-simple-ssl"),
|
||||
},
|
||||
{
|
||||
'icon': 'circle-times',
|
||||
'color': 'red',
|
||||
'text': __("Firewall", "really-simple-ssl"),
|
||||
},
|
||||
{
|
||||
'icon': 'circle-times',
|
||||
'color': 'red',
|
||||
'text': __("Vulnerability Management", "really-simple-ssl"),
|
||||
},
|
||||
{
|
||||
'icon': 'circle-times',
|
||||
'color': 'red',
|
||||
'text': __("WordPress Hardening", "really-simple-ssl"),
|
||||
},
|
||||
{
|
||||
'icon': 'circle-times',
|
||||
'color': 'red',
|
||||
'text': __("Login Protection", "really-simple-ssl"),
|
||||
},
|
||||
{
|
||||
'icon': 'circle-times',
|
||||
'color': 'red',
|
||||
'text': __("Two-Factor Authentication", "really-simple-ssl"),
|
||||
},
|
||||
{
|
||||
'icon': 'circle-times',
|
||||
'color': 'red',
|
||||
'text': __("Limit Login Attempts", "really-simple-ssl"),
|
||||
},
|
||||
{
|
||||
'icon': 'circle-times',
|
||||
'color': 'red',
|
||||
'text': __("Visitor Protection", "really-simple-ssl"),
|
||||
},
|
||||
] :
|
||||
[
|
||||
{
|
||||
'icon': 'circle-times',
|
||||
'color': 'red',
|
||||
'text': __("SSL Encryption", "really-simple-ssl"),
|
||||
},
|
||||
{
|
||||
'icon': 'circle-times',
|
||||
'color': 'red',
|
||||
'text': __("Vulnerability Management", "really-simple-ssl"),
|
||||
},
|
||||
{
|
||||
'icon': 'circle-times',
|
||||
'color': 'red',
|
||||
'text': __("WordPress hardening", "really-simple-ssl"),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
{RssslModal && <RssslModal title={__("Are you sure?", "really-simple-ssl")}
|
||||
confirmText={__("Deactivate", "really-simple-ssl")}
|
||||
confirmAction={() => deactivateKeepHttps()}
|
||||
alternativeText={__("Deactivate and use HTTP", "really-simple-ssl")}
|
||||
alternativeAction={() => deactivateAndRevert()}
|
||||
alternativeClassName="rsssl-modal-warning"
|
||||
content={content()}
|
||||
list={list}
|
||||
isOpen={isOpen}
|
||||
setOpen={setOpen}/>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default DeactivationModal;
|
||||
@@ -0,0 +1,88 @@
|
||||
/** @jsx wp.element.createElement */
|
||||
import { Modal, Button } from "@wordpress/components";
|
||||
import {useEffect, useState} from "@wordpress/element";
|
||||
import { __ } from "@wordpress/i18n";
|
||||
import './RssslModal.scss';
|
||||
import ErrorBoundary from "../../../../settings/src/utils/ErrorBoundary";
|
||||
// import useLicense from "../../../../settings/src/Settings/License/LicenseData";
|
||||
|
||||
const RssslModal = ({title, subTitle, currentStep, buttons, content, list, confirmAction, confirmText, alternativeAction, alternativeText, alternativeClassName, isOpen, setOpen, className}) => {
|
||||
const [Icon, setIcon] = useState(null);
|
||||
// const {licenseStatus} = useLicense();
|
||||
|
||||
let pluginUrl = typeof rsssl_modal !== 'undefined' ? rsssl_modal.plugin_url : rsssl_settings.plugin_url;
|
||||
alternativeClassName = alternativeClassName ? alternativeClassName : 'rsssl-warning';
|
||||
useEffect( () => {
|
||||
if (!Icon) {
|
||||
import ("../../../../settings/src/utils/Icon").then(({default: Icon}) => {
|
||||
setIcon(() => Icon);
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
const handleLicenseClick = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
let modalCustomClass = className ? ' '+className : ""
|
||||
return (
|
||||
<>
|
||||
{isOpen && (
|
||||
<>
|
||||
<ErrorBoundary fallback={"Error loading modal"}>
|
||||
<Modal
|
||||
className={"rsssl-modal"+modalCustomClass}
|
||||
shouldCloseOnClickOutside={false}
|
||||
shouldCloseOnEsc={false}
|
||||
title={title}
|
||||
onRequestClose={() => setOpen(false)}
|
||||
open={isOpen}>
|
||||
<div className="rsssl-modal-body">
|
||||
{subTitle && (
|
||||
<p
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: subTitle
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{content && <>{content}</>}
|
||||
{list && Icon && <ul>
|
||||
{list.map((item, index) => <li key={index}><Icon name={item.icon} color={item.color}/>{item.text}</li>)}
|
||||
</ul>}
|
||||
</div>
|
||||
<div className="rsssl-modal-footer">
|
||||
<div className="rsssl-modal-footer-image">
|
||||
<img className="rsssl-logo" src={pluginUrl+"assets/img/really-simple-security-logo.svg"} alt="Really Simple Security" />
|
||||
</div>
|
||||
<div className="rsssl-modal-footer-buttons">
|
||||
{/*# If is last step of onboarding (pro), and license not valid*/}
|
||||
{/*{ rsssl_settings.pro_plugin_active && licenseStatus !== 'valid' && currentStep.id === 'pro' && (*/}
|
||||
{/* <p className={"rsssl-activate-license-text"}>*/}
|
||||
{/* {__("Please", "really-simple-ssl") + " "}*/}
|
||||
{/* <a href="#settings/license" onClick={handleLicenseClick}>*/}
|
||||
{/* {__('activate your license key', 'really-simple-ssl')}*/}
|
||||
{/* </a>*/}
|
||||
{/* {" " + __("to enable Pro features", "really-simple-ssl")}*/}
|
||||
{/* </p>*/}
|
||||
{/*)}*/}
|
||||
<Button onClick={() => setOpen(false)}>{__("Cancel", "really-simple-ssl")}</Button>
|
||||
{ buttons && <>{buttons}</>}
|
||||
{ !buttons && <>
|
||||
{alternativeText && <Button className={alternativeClassName} onClick={() => alternativeAction()}>{alternativeText}</Button>}
|
||||
{confirmText && <Button isPrimary onClick={()=> confirmAction() }>{confirmText}</Button>}
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Modal>
|
||||
</ErrorBoundary>
|
||||
</>
|
||||
|
||||
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default RssslModal;
|
||||
@@ -0,0 +1,120 @@
|
||||
@import '../../../../assets/css/variables.scss';
|
||||
.rsssl-modal {
|
||||
overflow: visible;
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
//background:var(--rsp-grey-100);
|
||||
padding:var(--rsp-spacing-m) var(--rsp-spacing-l);
|
||||
box-shadow:var(--rsp-box-shadow);
|
||||
border-radius:var(--rsp-border-radius) var(--rsp-border-radius);
|
||||
border-top:1px solid var(--rsp-grey-300);
|
||||
max-height: calc(100% - 120px); //the default wp modal limits this to minimum 600px, but this creates an ugly modal.
|
||||
margin:auto;//the default wp modal limits this to minimum 600px, but this creates an ugly modal.
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.components-modal__content {
|
||||
min-height: 250px;
|
||||
//reset default padding so we can add a footer with background
|
||||
padding:0;
|
||||
margin-top:45px;
|
||||
|
||||
& > div:nth-child(2) {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-modal-body {
|
||||
flex-grow: 1;
|
||||
padding: 12px 8px 80px 8px; //80 is for the complete footer height + margin
|
||||
@media (max-width: 768px) {
|
||||
padding: 12px 8px 180px 8px;
|
||||
|
||||
}
|
||||
p {
|
||||
margin-top:0;
|
||||
}
|
||||
ul {
|
||||
column-count: 2;
|
||||
column-gap: 20px;
|
||||
margin-bottom:0;
|
||||
li {
|
||||
display: flex;
|
||||
padding-bottom: 5px;
|
||||
|
||||
.rsssl-icon {
|
||||
margin-top: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-modal-footer {
|
||||
background-color: var(--rsp-grey-200);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--rsp-grey-400);
|
||||
padding: 20px 32px;
|
||||
//ensure the footer doesn't scroll out of sight on smaller screens.
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
.rsssl-modal-footer-buttons {
|
||||
display: flex;
|
||||
.rsssl-activate-license-text {
|
||||
margin-right: 10px;
|
||||
color: var(--rsp-red);
|
||||
}
|
||||
}
|
||||
border-bottom-left-radius: var(--rsp-border-radius) var(--rsp-border-radius);
|
||||
border-bottom-right-radius: var(--rsp-border-radius) var(--rsp-border-radius);
|
||||
img {
|
||||
width: 150px;
|
||||
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.rsssl-modal-footer-image {
|
||||
display:none;
|
||||
}
|
||||
.rsssl-modal-footer-buttons {
|
||||
width:100%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
button {
|
||||
width: 100%;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button + button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
button + a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
&:not(.is-primary) {
|
||||
border: 1px solid var(--wp-admin-theme-color, #3858e9);
|
||||
color: var(--wp-admin-theme-color, #3858e9);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.rsssl-modal-warning {
|
||||
border: 1px solid var(--rsp-red);
|
||||
color: var(--rsp-red);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import {
|
||||
render, createRoot
|
||||
} from '@wordpress/element';
|
||||
import DeactivationModal from "./components/DeactivationModal/DeactivationModal";
|
||||
document.addEventListener( 'DOMContentLoaded', () => {
|
||||
|
||||
const container = document.getElementById( 'rsssl-modal-root' );
|
||||
if ( container ) {
|
||||
if ( createRoot ) {
|
||||
createRoot( container ).render( <DeactivationModal/> );
|
||||
} else {
|
||||
render( <DeactivationModal/>, container );
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user