Commit b5557377 authored by Haritha Chanuka's avatar Haritha Chanuka

Upload 'WANHEDA' Front End implementation files

parent 26301f83
No preview for this file type
import React, { Component } from "react";
import { HashRouter, Route, Switch } from "react-router-dom";
import "./scss/style.scss";
import { ToastContainer } from "react-toastify";
import { connect } from "react-redux";
const loading = (
<div className="pt-3 text-center">
<div className="sk-spinner sk-spinner-pulse"></div>
</div>
);
// Containers
const TheLayout = React.lazy(() => import("./containers/TheLayout"));
// Pages
const Login = React.lazy(() => import("./views/users/Login"));
const Register = React.lazy(() => import("./views/users/Register"));
const Page404 = React.lazy(() => import("./views/pages/page404/Page404"));
const Page500 = React.lazy(() => import("./views/pages/page500/Page500"));
class App extends Component {
render() {
if (this.props.user.username) {
return (
<HashRouter>
<React.Suspense fallback={loading}>
<Switch>
<Route
exact
path="/404"
name="Page 404"
render={(props) => <Page404 {...props} />}
/>
<Route
exact
path="/500"
name="Page 500"
render={(props) => <Page500 {...props} />}
/>
<Route
path="/"
name="Home"
render={(props) => <TheLayout {...props} />}
/>
</Switch>
<ToastContainer />
</React.Suspense>
</HashRouter>
);
} else {
return (
<HashRouter>
<React.Suspense fallback={loading}>
<Switch>
<Route
exact
path="/login"
name="Login Page"
render={(props) => <Login {...props} />}
/>
<Route
exact
path="/register"
name="Register Page"
render={(props) => <Register {...props} />}
/>
<Route
exact
path="/404"
name="Page 404"
render={(props) => <Page404 {...props} />}
/>
<Route
exact
path="/500"
name="Page 500"
render={(props) => <Page500 {...props} />}
/>
</Switch>
<ToastContainer />
</React.Suspense>
</HashRouter>
);
}
}
}
const mapStateToProps = (state) => {
return {
user: state.userData.user,
};
};
export default connect(mapStateToProps, null)(App);
import React from 'react'
import { shallow } from 'enzyme/build'
import App from './App'
import ChartLineSimple from './views/charts/ChartLineSimple'
import Dashboard from './views/dashboard/Dashboard.js'
it('mounts without crashing', () => {
const wrapper = shallow(<App/>)
wrapper.unmount()
})
it('mounts dashboard without crashing', () => {
const wrapper = shallow(<Dashboard/>)
wrapper.unmount()
})
it('mounts charts without crashing', () => {
const wrapper = shallow(<ChartLineSimple/> )
wrapper.unmount()
})
import {
GET_BLACK_LIST_ERROR,
GET_BLACK_LIST_SUCCESS,
ADD_TO_BLACK_LIST_SUCCESS,
ADD_TO_BLACK_LIST_ERROR,
} from "./types";
import { SERVER_URL } from "../constant";
import axios from "axios";
import { toast } from "react-toastify";
export const getBlackListSuccess = (data) => {
return {
type: GET_BLACK_LIST_SUCCESS,
payload: data,
};
};
export const getBlackListError = (data) => {
return {
type: GET_BLACK_LIST_ERROR,
payload: data,
};
};
export const getBlackList = () => {
return (dispatch) => {
return axios
.get(`${SERVER_URL}/blacklist/getall`)
.then((response) => {
dispatch(getBlackListSuccess(response.data.result));
toast.success(response.data.message);
dispatch(getBlackListError(""));
})
.catch((error) => {
dispatch(getBlackListError("Error in getting the blacklist"));
});
};
};
// ADD TO BLACKLIST ----------------------------------------
export const addToBlackListSuccess = (data) => {
return {
type: ADD_TO_BLACK_LIST_SUCCESS,
payload: data,
};
};
export const addToBlackListError = (data) => {
return {
type: ADD_TO_BLACK_LIST_ERROR,
payload: data,
};
};
export const addToBlackList = (ip) => {
const data = { ip: ip.ip };
return (dispatch) => {
return axios
.post(`${SERVER_URL}/blacklist/add`, data)
.then((response) => {
dispatch(addToBlackListSuccess(ip));
toast.success(response.data.message);
dispatch(addToBlackListError(""));
})
.catch((error) => {
dispatch(addToBlackListError("Error in in adding to whitelist"));
});
};
};
import { GET_NOTIFICATION_SUCCESS, GET_NOTIFICATION_ERROR } from "./types";
import { SERVER_URL } from "../constant";
import axios from "axios";
import { toast } from "react-toastify";
export const getNotificationSuccess = (data) => {
return {
type: GET_NOTIFICATION_SUCCESS,
payload: data,
};
};
export const getNotificationError = (data) => {
return {
type: GET_NOTIFICATION_ERROR,
payload: data,
};
};
export const getNotification = () => {
return (dispatch) => {
return axios
.get(`${SERVER_URL}/notification/getall`)
.then((response) => {
dispatch(getNotificationSuccess(response.data.result));
toast.success(response.data.message);
dispatch(getNotificationError(""));
})
.catch((error) => {
dispatch(getNotificationError("Error in getting the notifications"));
});
};
};
//USER ACTION TYPES--------------------------------
export const USER_LOGIN_SUCCESS = "USER_LOGIN_SUCCESS";
export const USER_LOGIN_FAILED = "USER_LOGIN_FAILED";
export const USER_LOGIN_ERROR = "USER_LOGIN_ERROR";
export const USER_SIGNUP_SUCCESS = "USER_SIGNUP_SUCCESS";
export const USER_SIGNUP_FAILED = "USER_SIGNUP_FAILED";
export const USER_SIGNUP_ERROR = "USER_SIGNUP_ERROR";
export const GET_USER_PROFILE_SUCCESS = "GET_USER_PROFILE_SUCCESS";
export const GET_USER_PROFILE_ERROR = "GET_USER_PROFILE_ERROR";
export const USER_LOGOUT_SUCCESS = "USER_LOGOUT_SUCCESS";
//NOTIFICATION ACTION TYPES--------------------------------
export const GET_NOTIFICATION_SUCCESS = "GET_NOTIFICATION_SUCCESS";
export const GET_NOTIFICATION_ERROR = "GET_NOTIFICATION_ERROR";
//WHITE LIST ACTION TYPES--------------------------------
export const GET_WHITE_LIST_SUCCESS = "GET_WHITE_LIST_SUCCESS";
export const GET_WHITE_LIST_ERROR = "GET_WHITE_LIST_ERROR";
export const ADD_TO_WHITE_LIST_SUCCESS = "ADD_TO_WHITE_LIST_SUCCESS";
export const ADD_TO_WHITE_LIST_ERROR = "ADD_TO_WHITE_LIST_ERROR";
//Black LIST ACTION TYPES--------------------------------
export const GET_BLACK_LIST_SUCCESS = "GET_BLACK_LIST_SUCCESS";
export const GET_BLACK_LIST_ERROR = "GET_BLACK_LIST_ERROR";
export const ADD_TO_BLACK_LIST_SUCCESS = "ADD_TO_BLACK_LIST_SUCCESS";
export const ADD_TO_BLACK_LIST_ERROR = "ADD_TO_BLACK_LIST_ERROR";
import {
USER_LOGIN_SUCCESS,
USER_LOGIN_FAILED,
USER_LOGIN_ERROR,
USER_SIGNUP_SUCCESS,
USER_SIGNUP_FAILED,
USER_SIGNUP_ERROR,
USER_LOGOUT_SUCCESS,
GET_USER_PROFILE_SUCCESS,
GET_USER_PROFILE_ERROR,
} from "./types";
import { SERVER_URL, API_ENDPOINT, AUTH_ENDPOINT } from "../constant";
import axios from "axios";
import { history } from "../index";
import { toast } from "react-toastify";
//LOGIN-----------------------------
export const userLoginSuccess = (data) => {
return {
type: USER_LOGIN_SUCCESS,
payload: data,
};
};
export const userLoginFailed = (data) => {
return {
type: USER_LOGIN_FAILED,
payload: data,
};
};
export const userLoginError = (data) => {
return {
type: USER_LOGIN_ERROR,
payload: data,
};
};
export const userLogin = (user) => {
const data = {
email: user.email,
password: user.password,
};
return (dispatch) => {
return axios
.post(`${SERVER_URL}/user/login`, data)
.then((response) => {
if (!response.data.result.username) {
dispatch(userLoginFailed(response.data.result));
return;
}
const headers = {
username: response.data.result.username,
};
data.headers = headers;
data.username = response.data.result.username;
dispatch(userLoginFailed(""));
dispatch(userLoginSuccess(data));
toast.success("Loged successfully");
history.push("/");
})
.catch((error) => {
dispatch(userLoginFailed(error.message));
toast.error(error.message, {
position: "top-center",
});
});
};
};
//LOGOUT-------------------------------------
export const userLogoutSuccess = () => {
return {
type: USER_LOGOUT_SUCCESS,
};
};
export const userLogout = () => {
return (dispatch) => {
dispatch(userLogoutSuccess());
history.push("/login");
};
};
//SIGN UP-----------------------------
export const userSignUpSuccess = (data) => {
return {
type: USER_SIGNUP_SUCCESS,
payload: data,
};
};
export const userSignUpFailed = (data) => {
return {
type: USER_SIGNUP_FAILED,
payload: data,
};
};
export const userSignUpError = (data) => {
return {
type: USER_SIGNUP_ERROR,
payload: data,
};
};
export const userSignUp = (user) => {
const data = {
username: user.username,
email: user.email,
password: user.password,
};
return (dispatch) => {
return axios
.post(`${SERVER_URL}/user/register`, data)
.then((response) => {
const headers = {
username: user.username,
};
data.headers = headers;
dispatch(userSignUpError(""));
dispatch(userSignUpSuccess(data));
toast.success("Account Created Successfully");
history.push("/");
})
.catch((error) => {
dispatch(userSignUpError(error.response.data.message));
toast.error(error.response.data.message, {
position: "top-center",
});
});
};
};
//GET PROFILE DETAILS-----------------------------
export const getProfileSuccess = (data) => {
return {
type: GET_USER_PROFILE_SUCCESS,
payload: data,
};
};
export const getProfileError = (data) => {
return {
type: GET_USER_PROFILE_ERROR,
payload: data,
};
};
export const getProfile = (header) => {
return (dispatch) => {
return axios
.get(`${SERVER_URL}/${AUTH_ENDPOINT}/profile`, {
headers: header,
})
.then((response) => {
dispatch(getProfileError(""));
dispatch(getProfileSuccess(response.data));
})
.catch((error) => {
dispatch(getProfileError(error.message));
toast.error(error.message, {
position: "top-center",
});
});
};
};
import {
GET_WHITE_LIST_ERROR,
GET_WHITE_LIST_SUCCESS,
ADD_TO_WHITE_LIST_ERROR,
ADD_TO_WHITE_LIST_SUCCESS,
} from "./types";
import { SERVER_URL } from "../constant";
import axios from "axios";
import { toast } from "react-toastify";
//GET WHITELIST -----------------------------------------
export const getWhiteListSuccess = (data) => {
return {
type: GET_WHITE_LIST_SUCCESS,
payload: data,
};
};
export const getWhiteListError = (data) => {
return {
type: GET_WHITE_LIST_ERROR,
payload: data,
};
};
export const getWhiteList = () => {
return (dispatch) => {
return axios
.get(`${SERVER_URL}/whitelist/getall`)
.then((response) => {
dispatch(getWhiteListSuccess(response.data.result));
toast.success(response.data.message);
dispatch(getWhiteListError(""));
})
.catch((error) => {
dispatch(getWhiteListError("Error in getting the whitelist"));
});
};
};
// ADD TO WHITELIST ----------------------------------------
export const addToWhiteListSuccess = (data) => {
return {
type: ADD_TO_WHITE_LIST_SUCCESS,
payload: data,
};
};
export const addToWhiteListError = (data) => {
return {
type: ADD_TO_WHITE_LIST_ERROR,
payload: data,
};
};
export const addToWhiteList = (ip) => {
const data = { ip: ip.ip };
return (dispatch) => {
return axios
.post(`${SERVER_URL}/whitelist/add`, data)
.then((response) => {
dispatch(addToWhiteListSuccess(ip));
toast.success(response.data.message);
dispatch(addToWhiteListError(""));
})
.catch((error) => {
dispatch(addToWhiteListError("Error in in adding to whitelist"));
});
};
};
import { sygnet } from './sygnet'
import { logo } from './logo'
import { logoNegative } from './logo-negative'
import {
cibSkype,
cibFacebook,
cibTwitter,
cibLinkedin,
cibFlickr,
cibTumblr,
cibXing,
cibGithub,
cibStackoverflow,
cibYoutube,
cibDribbble,
cibInstagram,
cibPinterest,
cibVk,
cibYahoo,
cibBehance,
cibReddit,
cibVimeo,
cibCcMastercard,
cibCcVisa,
cibStripe,
cibPaypal,
cibGooglePay,
cibCcAmex
} from '@coreui/icons'
import {
cifUs,
cifBr,
cifIn,
cifFr,
cifEs,
cifPl
} from '@coreui/icons'
import {
cilAlignCenter,
cilAlignLeft,
cilAlignRight,
cilApplicationsSettings,
cilArrowRight,
cilArrowTop,
cilAsterisk,
cilBan,
cilBasket,
cilBell,
cilBold,
cilBookmark,
cilCalculator,
cilCalendar,
cilCloudDownload,
cilChartPie,
cilCheck,
cilChevronBottom,
cilChevronLeft,
cilChevronRight,
cilChevronTop,
cilCircle,
cilCheckCircle,
cilCode,
cilCommentSquare,
cilCreditCard,
cilCursor,
cilCursorMove,
cilDrop,
cilDollar,
cilEnvelopeClosed,
cilEnvelopeLetter,
cilEnvelopeOpen,
cilEuro,
cilGlobeAlt,
cilGrid,
cilFile,
cilFullscreen,
cilFullscreenExit,
cilGraph,
cilHome,
cilInbox,
cilIndentDecrease,
cilIndentIncrease,
cilInputPower,
cilItalic,
cilJustifyCenter,
cilJustifyLeft,
cilLaptop,
cilLayers,
cilLightbulb,
cilList,
cilListNumbered,
cilListRich,
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMap,
cilMoon,
cilNotes,
cilOptions,
cilPaperclip,
cilPaperPlane,
cilPencil,
cilPeople,
cilPhone,
cilPrint,
cilPuzzle,
cilSave,
cilScrubber,
cilSettings,
cilShare,
cilShareAll,
cilShareBoxed,
cilShieldAlt,
cilSpeech,
cilSpeedometer,
cilSpreadsheet,
cilStar,
cilSun,
cilTags,
cilTask,
cilTrash,
cilUnderline,
cilUser,
cilUserFemale,
cilUserFollow,
cilUserUnfollow,
cilX,
cilXCircle,
cilWarning
} from '@coreui/icons'
export const icons = Object.assign({}, {
sygnet,
logo,
logoNegative
}, {
cilAlignCenter,
cilAlignLeft,
cilAlignRight,
cilApplicationsSettings,
cilArrowRight,
cilArrowTop,
cilAsterisk,
cilBan,
cilBasket,
cilBell,
cilBold,
cilBookmark,
cilCalculator,
cilCalendar,
cilCloudDownload,
cilChartPie,
cilCheck,
cilChevronBottom,
cilChevronLeft,
cilChevronRight,
cilChevronTop,
cilCircle,
cilCheckCircle,
cilCode,
cilCommentSquare,
cilCreditCard,
cilCursor,
cilCursorMove,
cilDrop,
cilDollar,
cilEnvelopeClosed,
cilEnvelopeLetter,
cilEnvelopeOpen,
cilEuro,
cilGlobeAlt,
cilGrid,
cilFile,
cilFullscreen,
cilFullscreenExit,
cilGraph,
cilHome,
cilInbox,
cilIndentDecrease,
cilIndentIncrease,
cilInputPower,
cilItalic,
cilJustifyCenter,
cilJustifyLeft,
cilLaptop,
cilLayers,
cilLightbulb,
cilList,
cilListNumbered,
cilListRich,
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMap,
cilMoon,
cilNotes,
cilOptions,
cilPaperclip,
cilPaperPlane,
cilPencil,
cilPeople,
cilPhone,
cilPrint,
cilPuzzle,
cilSave,
cilScrubber,
cilSettings,
cilShare,
cilShareAll,
cilShareBoxed,
cilShieldAlt,
cilSpeech,
cilSpeedometer,
cilSpreadsheet,
cilStar,
cilSun,
cilTags,
cilTask,
cilTrash,
cilUnderline,
cilUser,
cilUserFemale,
cilUserFollow,
cilUserUnfollow,
cilX,
cilXCircle,
cilWarning
}, {
cifUs,
cifBr,
cifIn,
cifFr,
cifEs,
cifPl
}, {
cibSkype,
cibFacebook,
cibTwitter,
cibLinkedin,
cibFlickr,
cibTumblr,
cibXing,
cibGithub,
cibStackoverflow,
cibYoutube,
cibDribbble,
cibInstagram,
cibPinterest,
cibVk,
cibYahoo,
cibBehance,
cibReddit,
cibVimeo,
cibCcMastercard,
cibCcVisa,
cibStripe,
cibPaypal,
cibGooglePay,
cibCcAmex
})
export const logoNegative = ['608 134', `
<title>coreui react pro logo</title>
<g>
<g style="fill:#80d0ff;">
<path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
<path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
<path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
<path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
<path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
<path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
<path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
<path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
</g>
<g style="fill:#fff;">
<g>
<path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
<path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
</g>
<g>
<path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
<path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
<path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
<path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
<path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
<rect x="307.835" y="46" width="8" height="38" rx="1"/>
</g>
</g>
</g>
`]
export const logo = ['608 134', `
<title>coreui react pro</title>
<g>
<g style="fill:#00a1ff">
<path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
<path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
<path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
<path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
<path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
<path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
<path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
<path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
</g>
<g style="fill:#3c4b64">
<g>
<path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
<path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
</g>
<g>
<path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
<path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
<path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
<path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
<path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
<rect x="307.835" y="46" width="8" height="38" rx="1"/>
</g>
</g>
</g>
`]
export const sygnet = ['160 160', `
<title>coreui logo</title>
<g>
<g style="fill:#fff;">
<path d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
<path d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
</g>
</g>
`]
export const SERVER_URL = "http://127.0.0.1:5000";
export const API_ENDPOINT = "api";
export const AUTH_ENDPOINT = "auth";
import React, { Suspense } from 'react'
import {
Redirect,
Route,
Switch
} from 'react-router-dom'
import { CContainer, CFade } from '@coreui/react'
// routes config
import routes from '../routes'
const loading = (
<div className="pt-3 text-center">
<div className="sk-spinner sk-spinner-pulse"></div>
</div>
)
const TheContent = () => {
return (
<main className="c-main">
<CContainer fluid>
<Suspense fallback={loading}>
<Switch>
{routes.map((route, idx) => {
return route.component && (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
<CFade>
<route.component {...props} />
</CFade>
)} />
)
})}
<Redirect from="/" to="/dashboard" />
</Switch>
</Suspense>
</CContainer>
</main>
)
}
export default React.memo(TheContent)
import React from 'react'
import { CFooter } from '@coreui/react'
const TheFooter = () => {
return (
<CFooter fixed={false}>
<div>
<a href="https://coreui.io" target="_blank" rel="noopener noreferrer">CoreUI</a>
<span className="ml-1">&copy; 2020 creativeLabs.</span>
</div>
<div className="mfs-auto">
<span className="mr-1">Powered by</span>
<a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">CoreUI for React</a>
</div>
</CFooter>
)
}
export default React.memo(TheFooter)
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
CHeader,
CToggler,
CHeaderBrand,
CHeaderNav,
CHeaderNavItem,
CHeaderNavLink,
CSubheader,
CBreadcrumbRouter,
CLink
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
// routes config
import routes from '../routes'
import {
TheHeaderDropdown,
TheHeaderDropdownMssg,
TheHeaderDropdownNotif,
TheHeaderDropdownTasks
} from './index'
const TheHeader = () => {
const dispatch = useDispatch()
const sidebarShow = useSelector(state => state.sidebarShow)
const toggleSidebar = () => {
const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
dispatch({type: 'set', sidebarShow: val})
}
const toggleSidebarMobile = () => {
const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
dispatch({type: 'set', sidebarShow: val})
}
return (
<CHeader withSubheader>
<CToggler
inHeader
className="ml-md-3 d-lg-none"
onClick={toggleSidebarMobile}
/>
<CToggler
inHeader
className="ml-3 d-md-down-none"
onClick={toggleSidebar}
/>
<CHeaderBrand className="mx-auto d-lg-none" to="/">
<CIcon name="logo" height="48" alt="Logo"/>
</CHeaderBrand>
<CHeaderNav className="d-md-down-none mr-auto">
<CHeaderNavItem className="px-3" >
<CHeaderNavLink to="/dashboard">Dashboard</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem className="px-3">
<CHeaderNavLink to="/users">Users</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem className="px-3">
<CHeaderNavLink>Settings</CHeaderNavLink>
</CHeaderNavItem>
</CHeaderNav>
<CHeaderNav className="px-3">
<TheHeaderDropdownNotif/>
<TheHeaderDropdownTasks/>
<TheHeaderDropdownMssg/>
<TheHeaderDropdown/>
</CHeaderNav>
<CSubheader className="px-3 justify-content-between">
<CBreadcrumbRouter
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
routes={routes}
/>
<div className="d-md-down-none mfe-2 c-subheader-nav">
<CLink className="c-subheader-nav-link"href="#">
<CIcon name="cil-speech" alt="Settings" />
</CLink>
<CLink
className="c-subheader-nav-link"
aria-current="page"
to="/dashboard"
>
<CIcon name="cil-graph" alt="Dashboard" />&nbsp;Dashboard
</CLink>
<CLink className="c-subheader-nav-link" href="#">
<CIcon name="cil-settings" alt="Settings" />&nbsp;Settings
</CLink>
</div>
</CSubheader>
</CHeader>
)
}
export default TheHeader
import React from "react";
import { connect } from "react-redux";
import { userLogout } from "../action/user.actions";
import {
CBadge,
CDropdown,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CImg,
} from "@coreui/react";
import CIcon from "@coreui/icons-react";
const TheHeaderDropdown = (props) => {
const handleLogout = () => {
props.onLogout();
};
return (
<CDropdown inNav className="c-header-nav-items mx-2" direction="down">
<CDropdownToggle className="c-header-nav-link" caret={false}>
<div className="c-avatar">
<CImg
src={"avatars/6.jpg"}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
</div>
</CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem header tag="div" color="light" className="text-center">
<strong>Account</strong>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-bell" className="mfe-2" />
Updates
<CBadge color="info" className="mfs-auto">
42
</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-envelope-open" className="mfe-2" />
Messages
<CBadge color="success" className="mfs-auto">
42
</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-task" className="mfe-2" />
Tasks
<CBadge color="danger" className="mfs-auto">
42
</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-comment-square" className="mfe-2" />
Comments
<CBadge color="warning" className="mfs-auto">
42
</CBadge>
</CDropdownItem>
<CDropdownItem header tag="div" color="light" className="text-center">
<strong>Settings</strong>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-user" className="mfe-2" />
Profile
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-settings" className="mfe-2" />
Settings
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-credit-card" className="mfe-2" />
Payments
<CBadge color="secondary" className="mfs-auto">
42
</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-file" className="mfe-2" />
Projects
<CBadge color="primary" className="mfs-auto">
42
</CBadge>
</CDropdownItem>
<CDropdownItem divider />
<CDropdownItem onClick={handleLogout}>
<CIcon name="cil-lock-locked" className="mfe-2" />
Log Out{" "}
</CDropdownItem>
</CDropdownMenu>
</CDropdown>
);
};
const mapStateToProps = (state) => {
return {
user: state.userData.user || [],
};
};
const mapDispatchToProps = (dispatch) => {
return {
onLogout: () => {
dispatch(userLogout());
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(TheHeaderDropdown);
import React from 'react'
import {
CBadge,
CDropdown,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CImg
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const TheHeaderDropdownMssg = () => {
const itemsCount = 4
return (
<CDropdown
inNav
className="c-header-nav-item mx-2"
direction="down"
>
<CDropdownToggle className="c-header-nav-link" caret={false}>
<CIcon name="cil-envelope-open" /><CBadge shape="pill" color="info">{itemsCount}</CBadge>
</CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem
header
tag="div"
color="light"
>
<strong>You have {itemsCount} messages</strong>
</CDropdownItem>
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 mr-3 float-left">
<div className="c-avatar">
<CImg
src={'avatars/7.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-success"></span>
</div>
</div>
<div>
<small className="text-muted">John Doe</small>
<small className="text-muted float-right mt-1">Just now</small>
</div>
<div className="text-truncate font-weight-bold">
<span className="fa fa-exclamation text-danger"></span> Important message
</div>
<div className="small text-muted text-truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
</div>
</div>
</CDropdownItem>
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 mr-3 float-left">
<div className="c-avatar">
<CImg
src={'avatars/6.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-warning"></span>
</div>
</div>
<div>
<small className="text-muted">Jane Dovve</small>
<small className="text-muted float-right mt-1">5 minutes ago</small>
</div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
</div>
</div>
</CDropdownItem>
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 mr-3 float-left">
<div className="c-avatar">
<CImg
src={'avatars/5.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-danger"></span>
</div>
</div>
<div>
<small className="text-muted">Janet Doe</small>
<small className="text-muted float-right mt-1">1:52 PM</small>
</div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
</div>
</div>
</CDropdownItem>
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 mr-3 float-left">
<div className="c-avatar">
<CImg
src={'avatars/4.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-info"></span>
</div>
</div>
<div>
<small className="text-muted">Joe Doe</small>
<small className="text-muted float-right mt-1">4:03 AM</small>
</div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
</div>
</div>
</CDropdownItem>
<CDropdownItem href="#" className="text-center border-top"><strong>View all messages</strong></CDropdownItem>
</CDropdownMenu>
</CDropdown>
)
}
export default TheHeaderDropdownMssg
\ No newline at end of file
import React from 'react'
import {
CBadge,
CDropdown,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CProgress
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const TheHeaderDropdownNotif = () => {
const itemsCount = 5
return (
<CDropdown
inNav
className="c-header-nav-item mx-2"
>
<CDropdownToggle className="c-header-nav-link" caret={false}>
<CIcon name="cil-bell"/>
<CBadge shape="pill" color="danger">{itemsCount}</CBadge>
</CDropdownToggle>
<CDropdownMenu placement="bottom-end" className="pt-0">
<CDropdownItem
header
tag="div"
className="text-center"
color="light"
>
<strong>You have {itemsCount} notifications</strong>
</CDropdownItem>
<CDropdownItem><CIcon name="cil-user-follow" className="mr-2 text-success" /> New user registered</CDropdownItem>
<CDropdownItem><CIcon name="cil-user-unfollow" className="mr-2 text-danger" /> User deleted</CDropdownItem>
<CDropdownItem><CIcon name="cil-chart-pie" className="mr-2 text-info" /> Sales report is ready</CDropdownItem>
<CDropdownItem><CIcon name="cil-basket" className="mr-2 text-primary" /> New client</CDropdownItem>
<CDropdownItem><CIcon name="cil-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem>
<CDropdownItem
header
tag="div"
color="light"
>
<strong>Server</strong>
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="text-uppercase mb-1">
<small><b>CPU Usage</b></small>
</div>
<CProgress size="xs" color="info" value={25} />
<small className="text-muted">348 Processes. 1/4 Cores.</small>
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="text-uppercase mb-1">
<small><b>Memory Usage</b></small>
</div>
<CProgress size="xs" color="warning" value={70} />
<small className="text-muted">11444GB/16384MB</small>
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="text-uppercase mb-1">
<small><b>SSD 1 Usage</b></small>
</div>
<CProgress size="xs" color="danger" value={90} />
<small className="text-muted">243GB/256GB</small>
</CDropdownItem>
</CDropdownMenu>
</CDropdown>
)
}
export default TheHeaderDropdownNotif
\ No newline at end of file
import React from 'react'
import {
CBadge,
CDropdown,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CProgress
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const TheHeaderDropdownTasks = () => {
const itemsCount = 5
return (
<CDropdown
inNav
className="c-header-nav-item mx-2"
>
<CDropdownToggle className="c-header-nav-link" caret={false}>
<CIcon name="cil-list" />
<CBadge shape="pill" color="warning">{itemsCount}</CBadge>
</CDropdownToggle>
<CDropdownMenu placement="bottom-end" className="pt-0">
<CDropdownItem
header
tag="div"
className="text-center"
color="light"
>
<strong>You have {itemsCount} pending tasks</strong>
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="small mb-1">Upgrade NPM &amp; Bower <span
className="float-right"><strong>0%</strong></span></div>
<CProgress size="xs" color="info" value={0} />
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="small mb-1">ReactJS Version <span className="float-right"><strong>25%</strong></span></div>
<CProgress size="xs" color="danger" value={25} />
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="small mb-1">VueJS Version <span className="float-right"><strong>50%</strong></span></div>
<CProgress size="xs" color="warning" value={50} />
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="small mb-1">Add new layouts <span className="float-right"><strong>75%</strong></span></div>
<CProgress size="xs" color="info" value={75} />
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="small mb-1">Angular 2 Cli Version <span className="float-right"><strong>100%</strong></span></div>
<CProgress size="xs" color="success" value={100} />
</CDropdownItem>
<CDropdownItem className="text-center border-top"><strong>View all tasks</strong></CDropdownItem>
</CDropdownMenu>
</CDropdown>
)
}
export default TheHeaderDropdownTasks
\ No newline at end of file
import React from 'react'
import {
TheContent,
TheSidebar,
TheFooter,
TheHeader
} from './index'
const TheLayout = () => {
return (
<div className="c-app c-default-layout">
<TheSidebar/>
<div className="c-wrapper">
<TheHeader/>
<div className="c-body">
<TheContent/>
</div>
<TheFooter/>
</div>
</div>
)
}
export default TheLayout
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import {
CCreateElement,
CSidebar,
CSidebarBrand,
CSidebarNav,
CSidebarNavDivider,
CSidebarNavTitle,
CSidebarMinimizer,
CSidebarNavDropdown,
CSidebarNavItem,
} from "@coreui/react";
import CIcon from "@coreui/icons-react";
// sidebar nav config
import navigation from "./_nav";
const TheSidebar = () => {
const dispatch = useDispatch();
const show = useSelector((state) => state.sideBarData.sidebarShow);
return (
<CSidebar
show={show}
onShowChange={(val) => dispatch({ type: "set", sidebarShow: val })}
>
<CSidebarBrand className="d-md-down-none" to="/">
<CIcon
className="c-sidebar-brand-full"
name="logo-negative"
height={35}
/>
<CIcon
className="c-sidebar-brand-minimized"
name="sygnet"
height={35}
/>
</CSidebarBrand>
<CSidebarNav>
<CCreateElement
items={navigation}
components={{
CSidebarNavDivider,
CSidebarNavDropdown,
CSidebarNavItem,
CSidebarNavTitle,
}}
/>
</CSidebarNav>
<CSidebarMinimizer className="c-d-md-down-none" />
</CSidebar>
);
};
export default React.memo(TheSidebar);
import React from "react";
import CIcon from "@coreui/icons-react";
export default [
{
_tag: "CSidebarNavItem",
name: "Dashboard",
to: "/dashboard",
icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon" />,
},
{
_tag: "CSidebarNavItem",
name: "White List",
to: "/ip-manager/whitelist",
icon: "cil-drop",
},
{
_tag: "CSidebarNavItem",
name: "Black List",
to: "/ip-manager/blacklist",
icon: "cil-pencil",
},
{
_tag: "CSidebarNavDivider",
},
];
import TheContent from './TheContent'
import TheFooter from './TheFooter'
import TheHeader from './TheHeader'
import TheHeaderDropdown from './TheHeaderDropdown'
import TheHeaderDropdownMssg from './TheHeaderDropdownMssg'
import TheHeaderDropdownNotif from './TheHeaderDropdownNotif'
import TheHeaderDropdownTasks from './TheHeaderDropdownTasks'
import TheLayout from './TheLayout'
import TheSidebar from './TheSidebar'
export {
TheContent,
TheFooter,
TheHeader,
TheHeaderDropdown,
TheHeaderDropdownMssg,
TheHeaderDropdownNotif,
TheHeaderDropdownTasks,
TheLayout,
TheSidebar
}
import "react-app-polyfill/ie11"; // For IE 11 support
import "react-app-polyfill/stable";
import "./polyfill";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { icons } from "./assets/icons";
import { Provider } from "react-redux";
import store from "./store";
import { BrowserRouter as Router } from "react-router-dom";
import { createBrowserHistory } from "history";
export const history = createBrowserHistory({ forceRefresh: true });
React.icons = icons;
ReactDOM.render(
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
/*
* required polyfills
*/
import "core-js";
import 'core-js/features/set/map';
import 'core-js/features/map';
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol'
// import 'core-js/es6/object'
// import 'core-js/es6/function'
// import 'core-js/es6/parse-int'
// import 'core-js/es6/parse-float'
// import 'core-js/es6/number'
// import 'core-js/es6/math'
// import 'core-js/es6/string'
// import 'core-js/es6/date'
// import 'core-js/es6/array'
// import 'core-js/es6/regexp'
// import 'core-js/es6/map'
// import 'core-js/es6/weak-map'
// import 'core-js/es6/set'
// import 'core-js/es7/object'
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect'
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
// import 'core-js/es7/reflect'
// CustomEvent() constructor functionality in IE9, IE10, IE11
(function () {
if ( typeof window.CustomEvent === "function" ) return false
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined }
var evt = document.createEvent( 'CustomEvent' )
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail )
return evt
}
CustomEvent.prototype = window.Event.prototype
window.CustomEvent = CustomEvent
})()
import {
GET_BLACK_LIST_SUCCESS,
GET_BLACK_LIST_ERROR,
ADD_TO_BLACK_LIST_ERROR,
ADD_TO_BLACK_LIST_SUCCESS,
} from "../action/types";
const blacklistInitialState = {
blacklist: [],
};
const blackListReducer = (state = blacklistInitialState, action) => {
switch (action.type) {
case GET_BLACK_LIST_SUCCESS:
return { ...state, blacklist: action.payload };
case GET_BLACK_LIST_ERROR:
return { ...state, error: action.payload };
case ADD_TO_BLACK_LIST_SUCCESS:
return { ...state, blacklist: [...state.blacklist, action.payload] };
case ADD_TO_BLACK_LIST_ERROR:
return { ...state, error: action.payload };
default:
return state;
}
};
export default blackListReducer;
import { combineReducers } from "redux";
import userReducer from "./userReducer";
import sidebarReducer from "./sidebarReducer";
import notificationReducer from "./notificationReducer";
import whitelistReducre from "./whitelistReducer";
import blacklistReducre from "./blacklistReducer";
export default combineReducers({
sideBarData: sidebarReducer,
userData: userReducer,
notificationData: notificationReducer,
whitelistData: whitelistReducre,
blacklistData: blacklistReducre,
});
import {
GET_NOTIFICATION_SUCCESS,
GET_NOTIFICATION_ERROR,
} from "../action/types";
const notificationInitialState = {
notification: [],
};
const notificationReducer = (state = notificationInitialState, action) => {
switch (action.type) {
case GET_NOTIFICATION_SUCCESS:
return { ...state, notification: action.payload };
case GET_NOTIFICATION_ERROR:
return { ...state, error: action.payload };
default:
return state;
}
};
export default notificationReducer;
import { createStore } from "redux";
const initialState = {
sidebarShow: "responsive",
};
const sidebarReducer = (state = initialState, { type, ...rest }) => {
switch (type) {
case "set":
return { ...state, ...rest };
default:
return state;
}
};
export default sidebarReducer;
import {
USER_LOGIN_SUCCESS,
USER_LOGIN_FAILED,
USER_LOGIN_ERROR,
USER_LOGOUT_SUCCESS,
USER_SIGNUP_SUCCESS,
USER_SIGNUP_FAILED,
USER_SIGNUP_ERROR,
GET_USER_PROFILE_SUCCESS,
GET_USER_PROFILE_ERROR,
} from "../action/types";
const userInitialState = {
user: [],
profile: [],
error: "",
};
const userReducer = (state = userInitialState, action) => {
switch (action.type) {
case USER_LOGIN_SUCCESS:
return { ...state, user: action.payload };
case USER_LOGIN_FAILED:
return { ...state, error: action.payload };
case USER_LOGIN_ERROR:
return { ...state, error: action.payload };
case USER_SIGNUP_SUCCESS:
return { ...state, user: action.payload };
case USER_SIGNUP_FAILED:
return { ...state, error: action.payload };
case USER_SIGNUP_ERROR:
return { ...state, error: action.payload };
case GET_USER_PROFILE_SUCCESS:
return { ...state, profile: action.payload };
case GET_USER_PROFILE_ERROR:
return { ...state, error: action.payload };
case USER_LOGOUT_SUCCESS:
return { ...state, user: [] };
default:
return state;
}
};
export default userReducer;
import {
GET_WHITE_LIST_SUCCESS,
GET_WHITE_LIST_ERROR,
ADD_TO_WHITE_LIST_ERROR,
ADD_TO_WHITE_LIST_SUCCESS,
} from "../action/types";
const whitelistInitialState = {
whitelist: [],
};
const whitelistReducer = (state = whitelistInitialState, action) => {
switch (action.type) {
case GET_WHITE_LIST_SUCCESS:
return { ...state, whitelist: action.payload };
case GET_WHITE_LIST_ERROR:
return { ...state, error: action.payload };
case ADD_TO_WHITE_LIST_SUCCESS:
return { ...state, whitelist: [...state.whitelist, action.payload] };
case ADD_TO_WHITE_LIST_ERROR:
return { ...state, error: action.payload };
default:
return state;
}
};
export default whitelistReducer;
import React from 'react'
import { CLink } from '@coreui/react'
const DocsLink = props => {
const {
name,
text,
...rest
} = props
const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
return (
<div className="card-header-actions">
<CLink
{...rest}
href={href}
rel="noreferrer noopener"
target="_blank"
className="card-header-action"
>
<small className="text-muted">{ text || 'docs' }</small>
</CLink>
</div>
)
}
export default React.memo(DocsLink)
\ No newline at end of file
import DocsLink from './DocsLink'
export {
DocsLink
}
\ No newline at end of file
import React from "react";
const Dashboard = React.lazy(() => import("./views/dashboard/Dashboard"));
const Whitelist = React.lazy(() => import("./views/ipmanager/Whitelist"));
const Blacklist = React.lazy(() => import("./views/ipmanager/Blacklist"));
const Users = React.lazy(() => import("./views/users/Users"));
const User = React.lazy(() => import("./views/users/User"));
const routes = [
{ path: "/", exact: true, name: "Home" },
{ path: "/dashboard", name: "Dashboard", component: Dashboard },
{ path: "/whitelist", name: "IP Manager", component: Whitelist, exact: true },
{ path: "/ip-manager/whitelist", name: "White List", component: Whitelist },
{ path: "/ip-manager/blacklist", name: "Black List", component: Blacklist },
{ path: "/users", exact: true, name: "Users", component: Users },
{ path: "/users/:id", exact: true, name: "User Details", component: User },
];
export default routes;
// Here you can add other styles
// If you want to override variables do it here
@import "variables";
// Import CoreUI styles
@import "~@coreui/coreui/scss/coreui.scss";
// If you want to add something do it here
@import "custom";
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://goo.gl/SC7cgQ'
);
});
} else {
// Is not local host. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.');
// Execute callback
if (config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
if (global.document) {
document.createRange = () => ( {
setStart: () => {},
setEnd: () => {},
commonAncestorContainer: {
nodeName: 'BODY',
ownerDocument: document,
},
});
}
import { applyMiddleware, createStore, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const saveToLocalStorage = (state) => {
try {
const serializedState = JSON.stringify(state);
localStorage.setItem("state", serializedState);
} catch (e) {
console.log(e);
}
};
const loadFromLocalStorage = () => {
try {
const serializedState = localStorage.getItem("state");
if (serializedState === null) {
return undefined;
}
return JSON.parse(serializedState);
} catch (err) {
console.log(err);
return undefined;
}
};
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const persistedState = loadFromLocalStorage();
const store = createStore(
rootReducer,
persistedState,
composeEnhancers(applyMiddleware(thunk))
);
store.subscribe(() => saveToLocalStorage(store.getState()));
export default store;
import React from "react";
import PropTypes from "prop-types";
import { CChartBar } from "@coreui/react-chartjs";
const ChartBarSimple = (props) => {
const {
backgroundColor,
pointHoverBackgroundColor,
dataPoints,
label,
pointed,
...attributes
} = props;
const defaultDatasets = (() => {
return [
{
data: dataPoints,
label: label,
barPercentage: 0.5,
categoryPercentage: 1,
},
];
})();
const defaultOptions = (() => {
return {
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [
{
display: false,
},
],
yAxes: [
{
display: false,
},
],
},
};
})();
// render
return (
<CChartBar
{...attributes}
datasets={defaultDatasets}
options={defaultOptions}
labels={label}
/>
);
};
ChartBarSimple.propTypes = {
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
className: PropTypes.string,
//
backgroundColor: PropTypes.string,
pointHoverBackgroundColor: PropTypes.string,
dataPoints: PropTypes.array,
label: PropTypes.string,
pointed: PropTypes.bool,
};
ChartBarSimple.defaultProps = {
backgroundColor: "rgba(0,0,0,.2)",
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
label: "Sales",
};
export default ChartBarSimple;
import React from "react";
import PropTypes from "prop-types";
import { CChartLine } from "@coreui/react-chartjs";
const ChartLineSimple = (props) => {
const {
borderColor,
backgroundColor,
pointHoverBackgroundColor,
dataPoints,
label,
pointed,
...attributes
} = props;
const pointHoverColor = (() => {
if (pointHoverBackgroundColor) {
return pointHoverBackgroundColor;
} else if (backgroundColor !== "transparent") {
return backgroundColor;
}
return borderColor;
})();
const defaultDatasets = (() => {
return [
{
data: dataPoints,
label,
},
];
})();
const pointedOptions = (() => {
return {
scales: {
xAxes: [
{
offset: true,
gridLines: {
color: "transparent",
zeroLineColor: "transparent",
},
ticks: {
fontSize: 2,
fontColor: "transparent",
},
},
],
yAxes: [
{
display: false,
ticks: {
display: false,
min: Math.min.apply(Math, dataPoints) - 5,
max: Math.max.apply(Math, dataPoints) + 5,
},
},
],
},
elements: {
line: {
borderWidth: 1,
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
},
};
})();
const straightOptions = (() => {
return {
scales: {
xAxes: [
{
display: false,
},
],
yAxes: [
{
display: false,
},
],
},
elements: {
line: {
borderWidth: 2,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
},
},
};
})();
const defaultOptions = (() => {
const options = pointed ? pointedOptions : straightOptions;
return Object.assign({}, options, {
maintainAspectRatio: false,
legend: {
display: false,
},
});
})();
const computedDatasets = (() => {})();
const computedOptions = (() => {})();
// render
return (
<CChartLine
{...attributes}
datasets={computedDatasets}
options={computedOptions}
labels={label}
/>
);
};
ChartLineSimple.propTypes = {
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
className: PropTypes.string,
//
borderColor: PropTypes.string,
backgroundColor: PropTypes.string,
pointHoverBackgroundColor: PropTypes.string,
dataPoints: PropTypes.array,
label: PropTypes.string,
pointed: PropTypes.bool,
};
ChartLineSimple.defaultProps = {
borderColor: "rgba(255,255,255,.55)",
backgroundColor: "transparent",
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
label: "Sales",
};
export default ChartLineSimple;
import React from 'react'
import {
CCard,
CCardBody,
CCardGroup,
CCardHeader
} from '@coreui/react'
import {
CChartBar,
CChartLine,
CChartDoughnut,
CChartRadar,
CChartPie,
CChartPolarArea
} from '@coreui/react-chartjs'
import { DocsLink } from 'src/reusable'
const Charts = () => {
return (
<CCardGroup columns className = "cols-2" >
<CCard>
<CCardHeader>
Bar Chart
<DocsLink href="http://www.chartjs.org"/>
</CCardHeader>
<CCardBody>
<CChartBar
datasets={[
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]}
labels="months"
options={{
tooltips: {
enabled: true
}
}}
/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Doughnut Chart
</CCardHeader>
<CCardBody>
<CChartDoughnut
datasets={[
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]}
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
options={{
tooltips: {
enabled: true
}
}}
/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Line Chart
</CCardHeader>
<CCardBody>
<CChartLine
datasets={[
{
label: 'Data One',
backgroundColor: 'rgb(228,102,81,0.9)',
data: [30, 39, 10, 50, 30, 70, 35]
},
{
label: 'Data Two',
backgroundColor: 'rgb(0,216,255,0.9)',
data: [39, 80, 40, 35, 40, 20, 45]
}
]}
options={{
tooltips: {
enabled: true
}
}}
labels="months"
/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Pie Chart
</CCardHeader>
<CCardBody>
<CChartPie
datasets={[
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]}
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
options={{
tooltips: {
enabled: true
}
}}
/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Polar Area Chart
</CCardHeader>
<CCardBody>
<CChartPolarArea
datasets={[
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.2)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
]}
options={{
aspectRatio: 1.5,
tooltips: {
enabled: true
}
}}
labels={[
'Eating', 'Drinking', 'Sleeping', 'Designing',
'Coding', 'Cycling', 'Running'
]}
/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Radar Chart
</CCardHeader>
<CCardBody>
<CChartRadar
datasets={[
{
label: '2019',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
tooltipLabelColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: '2020',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
tooltipLabelColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
]}
options={{
aspectRatio: 1.5,
tooltips: {
enabled: true
}
}}
labels={[
'Eating', 'Drinking', 'Sleeping', 'Designing',
'Coding', 'Cycling', 'Running'
]}
/>
</CCardBody>
</CCard>
</CCardGroup>
)
}
export default Charts
import React from "react";
import { CChartLine } from "@coreui/react-chartjs";
import {
getStyle,
hexToRgba,
} from "src/views/ipmanager/colors/node_modules/@coreui/utils";
const brandSuccess = getStyle("success") || "#4dbd74";
const brandInfo = getStyle("info") || "#20a8d8";
const brandDanger = getStyle("danger") || "#f86c6b";
const MainChartExample = (attributes) => {
const random = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
const defaultDatasets = (() => {
let elements = 27;
const data1 = [];
const data2 = [];
const data3 = [];
for (let i = 0; i <= elements; i++) {
data1.push(random(50, 200));
data2.push(random(80, 100));
data3.push(65);
}
return [
{
label: "My First dataset",
backgroundColor: hexToRgba(brandInfo, 10),
borderColor: brandInfo,
pointHoverBackgroundColor: brandInfo,
borderWidth: 2,
data: data1,
},
{
label: "My Second dataset",
backgroundColor: "transparent",
borderColor: brandSuccess,
pointHoverBackgroundColor: brandSuccess,
borderWidth: 2,
data: data2,
},
{
label: "My Third dataset",
backgroundColor: "transparent",
borderColor: brandDanger,
pointHoverBackgroundColor: brandDanger,
borderWidth: 1,
borderDash: [8, 5],
data: data3,
},
];
})();
const defaultOptions = (() => {
return {
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [
{
gridLines: {
drawOnChartArea: false,
},
},
],
yAxes: [
{
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
stepSize: Math.ceil(250 / 5),
max: 250,
},
gridLines: {
display: true,
},
},
],
},
elements: {
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
};
})();
// render
return (
<CChartLine
{...attributes}
datasets={defaultDatasets}
options={defaultOptions}
labels={[
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa",
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa",
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa",
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa",
"Su",
]}
/>
);
};
export default MainChartExample;
import React, { useEffect, useState, lazy } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { getNotification } from "../../action/notification.actions";
import {
CBadge,
CCard,
CCardBody,
CCardHeader,
CCol,
CRow,
CDataTable,
} from "@coreui/react";
const Dashboard = (props) => {
const fields = ["ip", "message", "time"];
useEffect(() => {
props.onGetNotification();
}, []);
return (
<CRow>
<CCol>
<CCard>
<CCardHeader>Activites</CCardHeader>
<CCardBody>
<CDataTable
items={props.notifications}
fields={fields}
itemsPerPage={10}
pagination
scopedSlots={{
status: (item) => (
<td>
<CBadge color={"red"}>{item.status}</CBadge>
</td>
),
}}
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
);
};
const mapStateToProps = (state) => {
return {
error: state.notificationData.error || "",
notifications: state.notificationData.notification || [],
};
};
const mapDispatchToProps = (dispatch) => {
return {
onGetNotification: () => {
dispatch(getNotification());
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { getBlackList, addToBlackList } from "../../action/blacklist.actions";
import {
CCard,
CCardHeader,
CCardBody,
CRow,
CCol,
CDataTable,
CBadge,
CInput,
CButton,
} from "@coreui/react";
const BlackList = (props) => {
const fields = ["ip"];
const [ip, setIp] = useState([]);
useEffect(() => {
props.onGetBlacklist();
}, []);
const handleAddToBlackList = (e) => {
e.preventDefault();
const ip_data = {
ip: ip,
};
setIp("");
props.onAddToBlackList(ip_data);
};
return (
<CRow>
<CCol xs="12" lg="8">
<CCard>
<CCardHeader>Black List</CCardHeader>
<CCardBody>
<CDataTable
items={props.blacklist}
fields={fields}
itemsPerPage={10}
pagination
scopedSlots={{
status: (item) => (
<td>
<CBadge color={"red"}>{item.status}</CBadge>
</td>
),
}}
/>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="4">
<CCard>
<CCardHeader>Add to Black List</CCardHeader>
<CCardBody>
<CInput
type="text"
id="ip"
name="ip"
value={ip}
onChange={(e) => {
setIp(e.target.value);
}}
placeholder="Enter an IP Address.."
required
/>
<CButton
color={"info"}
className="m-2"
onClick={handleAddToBlackList}
>
Add
</CButton>
</CCardBody>
</CCard>
</CCol>
</CRow>
);
};
const mapStateToProps = (state) => {
return {
error: state.blacklistData.error || "",
blacklist: state.blacklistData.blacklist || [],
};
};
const mapDispatchToProps = (dispatch) => {
return {
onGetBlacklist: () => {
dispatch(getBlackList());
},
onAddToBlackList: (ip) => {
dispatch(addToBlackList(ip));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(BlackList);
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { getWhiteList, addToWhiteList } from "../../action/whitelist.actions";
import {
CRow,
CCol,
CCard,
CCardHeader,
CCardBody,
CDataTable,
CBadge,
CInput,
CButton,
} from "@coreui/react";
const Whitelist = (props) => {
const fields = ["ip"];
const [ip, setIp] = useState("");
useEffect(() => {
props.onGetWhitelist();
}, []);
const handleAddToWhiteList = (e) => {
e.preventDefault();
const ip_data = {
ip: ip,
};
setIp("");
props.onAddToWhiteList(ip_data);
};
return (
<CRow>
<CCol xs="12" lg="8">
<CCard>
<CCardHeader>White List</CCardHeader>
<CCardBody>
<CDataTable
items={props.whitelist}
fields={fields}
itemsPerPage={10}
pagination
scopedSlots={{
status: (item) => (
<td>
<CBadge color={"red"}>{item.status}</CBadge>
</td>
),
}}
/>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="4">
<CCard>
<CCardHeader>Add to White List</CCardHeader>
<CCardBody>
<CInput
type="text"
placeholder="Add a valid IP Address.."
autoComplete="ip"
onChange={(e) => setIp(e.target.value)}
required
/>
<CButton
color={"info"}
className="m-2"
onClick={handleAddToWhiteList}
>
Add
</CButton>
</CCardBody>
</CCard>
</CCol>
</CRow>
);
};
const mapStateToProps = (state) => {
return {
error: state.whitelistData.error || "",
whitelist: state.whitelistData.whitelist || [],
};
};
const mapDispatchToProps = (dispatch) => {
return {
onGetWhitelist: () => {
dispatch(getWhiteList());
},
onAddToWhiteList: (ip) => {
dispatch(addToWhiteList(ip));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Whitelist);
import React from 'react'
import {
CButton,
CCol,
CContainer,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupAppend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const Page404 = () => {
return (
<div className="c-app c-default-layout flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="6">
<div className="clearfix">
<h1 className="float-left display-3 mr-4">404</h1>
<h4 className="pt-3">Oops! You{'\''}re lost.</h4>
<p className="text-muted float-left">The page you are looking for was not found.</p>
</div>
<CInputGroup className="input-prepend">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupAppend>
<CButton color="info">Search</CButton>
</CInputGroupAppend>
</CInputGroup>
</CCol>
</CRow>
</CContainer>
</div>
)
}
export default Page404
import React from 'react'
import {
CButton,
CCol,
CContainer,
CInput,
CInputGroup,
CInputGroupAppend,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const Page500 = () => {
return (
<div className="c-app c-default-layout flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="6">
<span className="clearfix">
<h1 className="float-left display-3 mr-4">500</h1>
<h4 className="pt-3">Houston, we have a problem!</h4>
<p className="text-muted float-left">The page you are looking for is temporarily unavailable.</p>
</span>
<CInputGroup className="input-prepend">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupAppend>
<CButton color="info">Search</CButton>
</CInputGroupAppend>
</CInputGroup>
</CCol>
</CRow>
</CContainer>
</div>
)
}
export default Page500
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { userLogin, userLoginError } from "../../action/user.actions";
import {
CButton,
CCard,
CCardBody,
CCardGroup,
CCol,
CContainer,
CForm,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow,
} from "@coreui/react";
import CIcon from "@coreui/icons-react";
const Login = (props) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
useEffect(() => {
props.onLoginError("");
}, []);
const handleSignIn = (e) => {
e.preventDefault();
const user = {
email: email,
password: password,
};
setEmail("");
setPassword("");
props.onLogin(user);
};
return (
<div className="c-app c-default-layout flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="8">
<CCardGroup>
<CCard className="p-4">
<CCardBody>
<CForm>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput
type="email"
placeholder="Email"
autoComplete="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput
type="password"
placeholder="Password"
autoComplete="current-password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</CInputGroup>
{props.error ? (
<p style={{ color: "red" }}> {props.error} </p>
) : (
""
)}
<CRow>
<CCol xs="6">
<CButton
color="primary"
className="px-4"
onClick={handleSignIn}
>
Login
</CButton>
</CCol>
<CCol xs="6" className="text-right">
<CButton color="link" className="px-0">
Forgot password?
</CButton>
</CCol>
</CRow>
</CForm>
</CCardBody>
</CCard>
<CCard
className="text-white bg-primary py-5 d-md-down-none"
style={{ width: "44%" }}
>
<CCardBody className="text-center">
<div>
<h2>Sign up</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>
<Link to="/register">
<CButton
color="primary"
className="mt-3"
active
tabIndex={-1}
>
Register Now!
</CButton>
</Link>
</div>
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
</div>
);
};
const mapStateToProps = (state) => {
return {
error: state.userData.error || "",
};
};
const mapDispatchToProps = (dispatch) => {
return {
onLogin: (user) => {
dispatch(userLogin(user));
},
onLoginError: (message) => {
dispatch(userLoginError(message));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);
import React, { useState } from "react";
import { connect } from "react-redux";
import { userSignUp, userSignUpError } from "../../action/user.actions";
import {
CButton,
CCard,
CCardBody,
CCardFooter,
CCol,
CContainer,
CForm,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow,
} from "@coreui/react";
import CIcon from "@coreui/icons-react";
import { toast } from "react-toastify";
const Register = (props) => {
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const handleSignUp = (e) => {
e.preventDefault();
props.onSignupError("");
if (username == "") {
props.onSignupError("Enter valid username");
return;
}
if (email == "") {
props.onSignupError("Enter valid email");
return;
}
if (password == "") {
props.onSignupError("Enter valid password");
return;
}
if (password == confirmPassword) {
const data = {
email: email,
password: password,
username: username,
};
props.onSignup(data);
} else {
toast.error("Password Don't match");
props.onSignupError("Password don't match");
}
};
return (
<div className="c-app c-default-layout flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="9" lg="7" xl="6">
<CCard className="mx-4">
<CCardBody className="p-4">
<CForm>
<h1>Register</h1>
<p className="text-muted">Create your account</p>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput
type="text"
placeholder="Username"
autoComplete="username"
onChange={(e) => setUsername(e.target.value)}
required
/>
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>@</CInputGroupText>
</CInputGroupPrepend>
<CInput
type="email"
placeholder="Email"
autoComplete="email"
onChange={(e) => setEmail(e.target.value)}
required
/>
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput
type="password"
placeholder="Password"
autoComplete="new-password"
required
onChange={(e) => setPassword(e.target.value)}
/>
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput
type="password"
placeholder="Repeat password"
autoComplete="new-password"
onChange={(e) => setConfirmPassword(e.target.value)}
required
/>
</CInputGroup>
{props.error ? (
<p style={{ color: "red" }}> {props.error} </p>
) : (
""
)}
<CButton color="success" block onClick={handleSignUp}>
Create Account
</CButton>
</CForm>
</CCardBody>
<CCardFooter className="p-4">
<CRow>
<CCol xs="12" sm="6">
<CButton className="btn-facebook mb-1" block>
<span>facebook</span>
</CButton>
</CCol>
<CCol xs="12" sm="6">
<CButton className="btn-twitter mb-1" block>
<span>twitter</span>
</CButton>
</CCol>
</CRow>
</CCardFooter>
</CCard>
</CCol>
</CRow>
</CContainer>
</div>
);
};
const mapStateToProps = (state) => {
return {
error: state.userData.error || "",
};
};
const mapDispatchToProps = (dispatch) => {
return {
onSignup: (user) => {
dispatch(userSignUp(user));
},
onSignupError: (error) => {
dispatch(userSignUpError(error));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Register);
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import usersData from './UsersData'
const User = ({match}) => {
const user = usersData.find( user => user.id.toString() === match.params.id)
const userDetails = user ? Object.entries(user) :
[['id', (<span><CIcon className="text-muted" name="cui-icon-ban" /> Not found</span>)]]
return (
<CRow>
<CCol lg={6}>
<CCard>
<CCardHeader>
User id: {match.params.id}
</CCardHeader>
<CCardBody>
<table className="table table-striped table-hover">
<tbody>
{
userDetails.map(([key, value], index) => {
return (
<tr key={index.toString()}>
<td>{`${key}:`}</td>
<td><strong>{value}</strong></td>
</tr>
)
})
}
</tbody>
</table>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default User
import React, { useState, useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
import {
CBadge,
CCard,
CCardBody,
CCardHeader,
CCol,
CDataTable,
CRow,
CPagination
} from '@coreui/react'
import usersData from './UsersData'
const getBadge = status => {
switch (status) {
case 'Active': return 'success'
case 'Inactive': return 'secondary'
case 'Pending': return 'warning'
case 'Banned': return 'danger'
default: return 'primary'
}
}
const Users = () => {
const history = useHistory()
const queryPage = useLocation().search.match(/page=([0-9]+)/, '')
const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1)
const [page, setPage] = useState(currentPage)
const pageChange = newPage => {
currentPage !== newPage && history.push(`/users?page=${newPage}`)
}
useEffect(() => {
currentPage !== page && setPage(currentPage)
}, [currentPage, page])
return (
<CRow>
<CCol xl={6}>
<CCard>
<CCardHeader>
Users
<small className="text-muted"> example</small>
</CCardHeader>
<CCardBody>
<CDataTable
items={usersData}
fields={[
{ key: 'name', _classes: 'font-weight-bold' },
'registered', 'role', 'status'
]}
hover
striped
itemsPerPage={5}
activePage={page}
clickableRows
onRowClick={(item) => history.push(`/users/${item.id}`)}
scopedSlots = {{
'status':
(item)=>(
<td>
<CBadge color={getBadge(item.status)}>
{item.status}
</CBadge>
</td>
)
}}
/>
<CPagination
activePage={page}
onActivePageChange={pageChange}
pages={5}
doubleArrows={false}
align="center"
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Users
const usersData = [
{id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
{id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'}
]
export default usersData
This diff is collapsed.
import React from 'react';
import PropTypes from 'prop-types';
import { CWidgetBrand, CRow, CCol } from '@coreui/react';
import CIcon from '@coreui/icons-react';
import ChartLineSimple from '../charts/ChartLineSimple';
const WidgetsBrand = ({withCharts})=>{
// render
return withCharts ?
<CRow>
<CCol sm="6" lg="3">
<CWidgetBrand
color="facebook"
rightHeader="89k"
rightFooter="friends"
leftHeader="459"
leftFooter="feeds"
>
<CIcon
name="cib-facebook"
height="52"
className="my-4"
/>
<ChartLineSimple
className="position-absolute w-100 h-100"
backgroundColor="rgba(255,255,255,.1)"
dataPoints={[65, 59, 84, 84, 51, 55, 40]}
label="Friends"
labels="months"
/>
</CWidgetBrand>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
color="twitter"
rightHeader="973k"
rightFooter="followers"
leftHeader="1.792"
leftFooter="tweets"
>
<CIcon
name="cib-twitter"
height="52"
className="my-4"
/>
<ChartLineSimple
className="position-absolute w-100 h-100"
backgroundColor="rgba(255,255,255,.1)"
dataPoints={[1, 13, 9, 17, 34, 41, 38]}
label="Followers"
labels="months"
/>
</CWidgetBrand>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
color="linkedin"
rightHeader="500+"
rightFooter="contracts"
leftHeader="292"
leftFooter="feeds"
>
<CIcon
name="cib-linkedin"
height="52"
className="my-4"
/>
<ChartLineSimple
className="position-absolute w-100 h-100"
backgroundColor="rgba(255,255,255,.1)"
dataPoints={[78, 81, 80, 45, 34, 12, 40]}
label="Contracts"
labels="months"
/>
</CWidgetBrand>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
rightHeader="12"
rightFooter="events"
leftHeader="4"
leftFooter="meetings"
color="gradient-warning"
>
<CIcon
name="cil-calendar"
height="52"
className="my-4"
/>
<ChartLineSimple
className="position-absolute w-100 h-100"
backgroundColor="rgba(255,255,255,.1)"
dataPoints={[35, 23, 56, 22, 97, 23, 64]}
label="Followers"
labels="months"
/>
</CWidgetBrand>
</CCol>
</CRow> :
<CRow>
<CCol sm="6" lg="3">
<CWidgetBrand
color="facebook"
rightHeader="89k"
rightFooter="friends"
leftHeader="459"
leftFooter="feeds"
>
<CIcon
name="cib-facebook"
height="56"
className="my-4"
/>
</CWidgetBrand>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
color="twitter"
rightHeader="973k"
rightFooter="followers"
leftHeader="1.792"
leftFooter="tweets"
>
<CIcon
name="cib-twitter"
height="56"
className="my-4"
/>
</CWidgetBrand>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
color="linkedin"
rightHeader="500+"
rightFooter="contracts"
leftHeader="292"
leftFooter="feeds"
>
<CIcon
name="cib-linkedin"
height="56"
className="my-4"
/>
</CWidgetBrand>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
rightHeader="12"
rightFooter="events"
leftHeader="4"
leftFooter="meetings"
color="gradient-warning"
>
<CIcon
name="cil-calendar"
height="56"
className="my-4"
/>
</CWidgetBrand>
</CCol>
</CRow>
}
WidgetsBrand.propTypes = {
withCharts: PropTypes.bool
}
export default WidgetsBrand
import React from 'react'
import {
CWidgetDropdown,
CRow,
CCol,
CDropdown,
CDropdownMenu,
CDropdownItem,
CDropdownToggle
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import ChartLineSimple from '../charts/ChartLineSimple'
import ChartBarSimple from '../charts/ChartBarSimple'
const WidgetsDropdown = () => {
// render
return (
<CRow>
<CCol sm="6" lg="3">
<CWidgetDropdown
color="gradient-primary"
header="9.823"
text="Members online"
footerSlot={
<ChartLineSimple
pointed
className="c-chart-wrapper mt-3 mx-3"
style={{height: '70px'}}
dataPoints={[65, 59, 84, 84, 51, 55, 40]}
pointHoverBackgroundColor="primary"
label="Members"
labels="months"
/>
}
>
<CDropdown>
<CDropdownToggle color="transparent">
<CIcon name="cil-settings"/>
</CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CWidgetDropdown>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
color="gradient-info"
header="9.823"
text="Members online"
footerSlot={
<ChartLineSimple
pointed
className="mt-3 mx-3"
style={{height: '70px'}}
dataPoints={[1, 18, 9, 17, 34, 22, 11]}
pointHoverBackgroundColor="info"
options={{ elements: { line: { tension: 0.00001 }}}}
label="Members"
labels="months"
/>
}
>
<CDropdown>
<CDropdownToggle caret={false} color="transparent">
<CIcon name="cil-location-pin"/>
</CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CWidgetDropdown>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
color="gradient-warning"
header="9.823"
text="Members online"
footerSlot={
<ChartLineSimple
className="mt-3"
style={{height: '70px'}}
backgroundColor="rgba(255,255,255,.2)"
dataPoints={[78, 81, 80, 45, 34, 12, 40]}
options={{ elements: { line: { borderWidth: 2.5 }}}}
pointHoverBackgroundColor="warning"
label="Members"
labels="months"
/>
}
>
<CDropdown>
<CDropdownToggle color="transparent">
<CIcon name="cil-settings"/>
</CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CWidgetDropdown>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
color="gradient-danger"
header="9.823"
text="Members online"
footerSlot={
<ChartBarSimple
className="mt-3 mx-3"
style={{height: '70px'}}
backgroundColor="rgb(250, 152, 152)"
label="Members"
labels="months"
/>
}
>
<CDropdown>
<CDropdownToggle caret className="text-white" color="transparent">
<CIcon name="cil-settings"/>
</CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CWidgetDropdown>
</CCol>
</CRow>
)
}
export default WidgetsDropdown
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment