/home/edulekha/www/wp-content/plugins/really-simple-ssl/settings/src/Settings/MixedContentScan.js
import {Component} from "@wordpress/element";
import DataTable, { createTheme } from "react-data-table-component";
import {
ToggleControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import * as rsssl_api from "../utils/api";
import ModalControl from "../Modal/ModalControl";
import Placeholder from "../Placeholder/Placeholder";
import Icon from "../utils/Icon";
class subHeaderComponentMemo extends Component {
constructor() {
super( ...arguments );
}
render() {
return (
<select>
<option>{__("All results", "really-simple-ssl")}</option>
<option>{__("Show", "really-simple-ssl")}</option>
<option>{__("All results", "really-simple-ssl")}</option>
</select>
);
}
}
class MixedContentScan extends Component {
constructor() {
super( ...arguments );
this.nonce='';
this.state = {
data:[],
progress:0,
action:'',
state:'stop',
paused:false,
showIgnoredUrls:false,
resetPaginationToggle:false,
};
}
getScanStatus(){
return rsssl_api.runTest('scan_status', 'refresh').then( ( response ) => {
return response;
});
}
componentDidMount() {
let data = [];
let progress = 0;
let action = '';
let state = 'stop';
let completedStatus = 'never';
if (this.props.field.value.data ){
data = this.props.field.value.data;
}
if (this.props.field.value.progress ){
progress = this.props.field.value.progress;
}
if (this.props.field.value.action ){
action = this.props.field.value.action;
}
if (this.props.field.value.state ){
state = this.props.field.value.state;
}
if (this.props.field.value.completed_status ){
completedStatus = this.props.field.value.completed_status;
}
if (this.props.field.value.nonce ){
this.nonce = this.props.field.value.nonce;
}
this.setState({
completedStatus:completedStatus,
data:data,
progress:progress,
action:action,
state:state
});
}
start(e){
//add start_full option
let state = 'start';
if ( this.state.paused ) {
state = 'running';
}
this.setState({
state:'running',
paused:false,
});
rsssl_api.runTest('mixed_content_scan', state ).then( ( response ) => {
this.setState({
data:response.data,
progress:response.progress,
action:response.action,
state:response.state,
});
if ( response.state==='running' ){
this.run();
}
});
}
run(e){
if ( this.state.paused ) {
return;
}
rsssl_api.runTest('mixed_content_scan', 'running' ).then( ( response ) => {
this.setState({
completedStatus:response.completed_status,
data:response.data,
progress:response.progress,
action:response.action,
state:response.state,
});
//if scan was stopped while running, set it to stopped now.
if ( this.state.paused ) {
this.stop();
} else if ( response.state==='running' ) {
this.run();
}
});
}
toggleIgnoredUrls(e){
let {
showIgnoredUrls
} = this.state;
this.setState({
showIgnoredUrls: !showIgnoredUrls,
});
}
stop(e){
this.setState({
state: 'stop',
paused: true,
});
rsssl_api.runTest('mixed_content_scan', 'stop' ).then( ( response ) => {
this.setState({
completedStatus:response.completed_status,
data:response.data,
progress:response.progress,
action:response.action,
});
});
}
/**
* After an update, remove an item from the data array
* @param removeItem
*/
removeDataItem(removeItem){
const updatedData = this.state.data.filter(
item => item.id === removeItem.id,
);
this.setState({
data:updatedData,
});
}
render(){
let {
completedStatus,
data,
action,
progress,
state,
showIgnoredUrls,
resetPaginationToggle,
} = this.state;
let field = this.props.field;
let fieldValue = field.value;
let fields = this.props.fields;
if (!rsssl_settings.pro_plugin_active) progress=80;
columns = [];
field.columns.forEach(function(item, i) {
let newItem = {
name: item.name,
sortable: item.sortable,
grow: item.grow,
selector: row => row[item.column],
right: !!item.right,
}
columns.push(newItem);
});
if (typeof data === 'object') {
data = Object.values(data);
}
if (!Array.isArray(data) ) {
data = [];
}
completedStatus = completedStatus ? completedStatus.toLowerCase() : 'never';
let dropItem = this.props.dropItemFromModal;
for (const item of data) {
item.warningControl = <span className="rsssl-task-status rsssl-warning">{__("Warning", "really-simple-ssl")}</span>
//@todo check action for correct filter or drop action.
if ( dropItem && dropItem.url === item.blocked_url ) {
if (dropItem.action==='ignore_url'){
item.ignored = true;
} else {
item.fixed = true;
}
}
//give fix and details the url as prop
if (item.fix) {
item.fix.url = item.blocked_url;
item.fix.nonce = this.nonce;
}
if (item.details) {
item.details.url = item.blocked_url;
item.details.nonce = this.nonce;
item.details.ignored = item.ignored;
}
if (item.location.length > 0) {
if (item.location.indexOf('http://') !== -1 || item.location.indexOf('https://') !== -1) {
item.locationControl =
<a href={item.location} target="_blank">{__("View", "really-simple-ssl")}</a>
} else {
item.locationControl = item.location;
}
}
item.detailsControl = item.details && <ModalControl removeDataItem={this.removeDataItem}
handleModal={this.props.handleModal} item={item}
btnText={__("Details", "really-simple-ssl")}
btnStyle={"secondary"}
modalData={item.details}/>;
item.fixControl = item.fix && <ModalControl className={"button button-primary"}
removeDataItem={this.removeDataItem}
handleModal={this.props.handleModal} item={item}
btnText={__("Fix", "really-simple-ssl")}
btnStyle={"primary"}
modalData={item.fix}/>;
}
if ( !showIgnoredUrls ) {
data = data.filter(
item => !item.ignored,
);
}
//filter also recently fixed items
data = data.filter(
item => !item.fixed,
);
progress+='%';
let startDisabled = state === 'running';
let stopDisabled = state !== 'running';
let label = __("Show ignored URLs", 'burst-statistics')
const customStyles = {
headCells: {
style: {
paddingLeft: '0', // override the cell padding for head cells
paddingRight: '0',
},
},
cells: {
style: {
paddingLeft: '0', // override the cell padding for data cells
paddingRight: '0',
},
},
};
createTheme('really-simple-plugins', {
divider: {
default: 'transparent',
},
}, 'light');
return (
<>
<div className="rsssl-progress-container">
<div className="rsssl-progress-bar" style={{width: progress}} ></div>
</div>
{state==='running' && <div className="rsssl-current-scan-action">{action}</div>}
{data.length==0 && <>
<div className="rsssl-mixed-content-description">
{state!=='running' && completedStatus==='never' && __("No results. Start your first scan","really-simple-ssl")}
{state!=='running' && completedStatus==='completed' && __("Everything is now served over SSL","really-simple-ssl")}
</div>
{ (state ==='running' || completedStatus!=='completed') && <div className="rsssl-mixed-content-placeholder">
<div></div><div></div><div></div>
</div>
}
{ state!=='running' && completedStatus==='completed' && <div className="rsssl-shield-overlay">
<Icon name = "shield" size="80px"/>
</div> }
</>}
{ data.length>0 && <div className={'rsssl-mixed-content-datatable'}><DataTable
columns={columns}
data={data}
dense
pagination
paginationResetDefaultPage={resetPaginationToggle} // optionally, a hook to reset pagination to page 1
noDataComponent={__("No results", "really-simple-ssl")} //or your component
theme="really-simple-plugins"
customStyles={customStyles}
// subHeader
// subHeaderComponent=<subHeaderComponentMemo/>
/></div> }
<div className="rsssl-grid-item-content-footer">
<button className="button" disabled={startDisabled} onClick={ (e) => this.start(e) }>{__("Start scan","really-simple-ssl-pro")}</button>
<button className="button" disabled={stopDisabled} onClick={ (e) => this.stop(e) }>{__("Stop","really-simple-ssl-pro")}</button>
<ToggleControl
checked= { showIgnoredUrls==1 }
onChange={ (e) => this.toggleIgnoredUrls(e) }
/>
<label>{__('Show ignored URLs', 'burst-statistics')}</label>
</div>
</>
)
}
}
export default MixedContentScan;