Commit e9b61355 authored by Ashen Udayanga Sudugala's avatar Ashen Udayanga Sudugala

Merge branch 'revert-6a6e1800' into 'master'

Revert "Merge branch 'Haritha' into 'master'"

See merge request !3
parents 6a6e1800 11101ea1
# Importing the libraries
import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
from sklearn.impute import SimpleImputer
# Importing the dataset
dataset = pd.read_csv("/Users/harithachanuka/Documents/SLIIT/Research/Harry/Wanheda_Server/MobileBotNet/packet_data.csv", encoding='latin-1')
X = dataset.iloc[:, [1,3]].values
y = dataset.iloc[:, 5].values
# Encoding categorical data-ForX
from sklearn.preprocessing import LabelEncoder, OneHotEncoder
labelencoder_X_S = LabelEncoder()
X[:, 0] = labelencoder_X_S.fit_transform(X[:, 0])
labelencoder_X_P = LabelEncoder()
X[:, 1] = labelencoder_X_P.fit_transform(X[:, 1])
labelencoder_y = LabelEncoder()
y = labelencoder_y.fit_transform(y)
# Splitting the dataset into the Training set and Test set
from sklearn.model_selection import train_test_split
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size = 0.25, random_state = 0)
# Feature Scaling
from sklearn.preprocessing import StandardScaler
sc_X = StandardScaler()
X_train = sc_X.fit_transform(X_train)
X_test = sc_X.transform(X_test)
# Fitting classifier to the Training set
from sklearn.naive_bayes import GaussianNB
classifier = GaussianNB()
classifier.fit(X_train, y_train)
# Predicting the Test set results
y_pred = classifier.predict(X_test)
# Create confusion metrics to check the performance of algorithm
from sklearn.metrics import confusion_matrix
cm = confusion_matrix(y_test, y_pred)
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
# -*- coding: utf-8 -*-
"""Navindu.ipynb"""
# Importing the libraries
# Fundamental package for scientific computing
import numpy as np
# Plotting library
import matplotlib.pyplot as plt
# Data manipulation and analysis library
import pandas as pd
# Completing missing values
from sklearn.impute import SimpleImputer
# Encode target labels with value between 0 and n_classes-1
from sklearn.preprocessing import LabelEncoder, OneHotEncoder
# Applies transformers to columns of an array or pandas DataFrame
from sklearn.compose import ColumnTransformer
# Split arrays or matrices into random train and test subsets
from sklearn.model_selection import train_test_split
# Standardize features by removing the mean and scaling to unit variance
from sklearn.preprocessing import StandardScaler
# Logistic Regression classifier
from sklearn.linear_model import LogisticRegression
# Compute confusion matrix to evaluate the accuracy of a classification
from sklearn.metrics import confusion_matrix
# Accuracy classification score
from sklearn.metrics import accuracy_score
# Build a text report showing the main classification metrics
from sklearn.metrics import classification_report
# Data visualization library based on matplotlib
import seaborn as sns
# Importing the dataset
dataset = pd.read_csv('/Users/harithachanuka/Documents/SLIIT/Research/Harry/Wanheda_Server/Slowloris/SlowlorisDATASET.numbers')
# Read in data and display first 5 rows
dataset.head()
# Drop the dataset
dataset = dataset.dropna()
#Data cleaning
dataset.isnull().sum()
#Encoding categarical data
from sklearn.preprocessing import LabelEncoder, OneHotEncoder
labelencoder_Y = LabelEncoder()
dataset.iloc[:, 78] = labelencoder_Y.fit_transform(dataset.iloc[:, 78])
dataset.shape
dataset = dataset[~dataset.isin([np.isnan]).any(1)].astype(np.float64)
dataset = dataset[~dataset.isin([np.isinf]).any(1)].astype(np.float64)
dataset = dataset.mask(np.isinf(dataset))
dataset = dataset.dropna()
dataset.shape
#returns a boolean array of the X
np.any(np.isinf(dataset))
#detect numpy arrays of different data types
np.any(np.isnan(dataset))
#get all colomns without last colomn in X axis and get last colomn in y axis
X = dataset.iloc[:, :-1].values
y = dataset.iloc[:, 78].values
dataset.info()
y
df = pd.DataFrame(data=X)
df
#Spliting the dataset into the training set and test set
from sklearn.model_selection import train_test_split
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size = 0.2, random_state = 0)
#feature scaling
from sklearn.preprocessing import StandardScaler
sc_X = StandardScaler()
X_train = sc_X.fit_transform(X_train)
X_test = sc_X.transform(X_test)
y_train.shape
#fitting simple linear regression to the training set
from sklearn.linear_model import LinearRegression
regressor = LinearRegression()
regressor.fit(X_train, y_train)
#predecting the data
y_pred = regressor.predict(X_test)
print(y_pred)
X_train.shape
y_train.shape
#visual plot
plt.scatter(X_train, y_train, color = 'red')
plt.plot(X_train, y_train, color = 'red')
plt.plot(X_test, y_pred, color = 'blue')
plt.title('Slowloris Attack')
plt.xlabel('Flow Duration')
plt.ylabel('Total Length')
plt.show()
\ No newline at end of file
from datetime import datetime
from flask import Flask, jsonify, request, make_response
from flask_restful import Resource, Api
from flask_cors import CORS, cross_origin
from flask_pymongo import PyMongo
import pickle
import pandas as pd
import numpy as np
app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'
app.config['SECRET_KEY'] = 'thisisthesecretkey'
app.config['MONGO_URI'] = 'mongodb://haritha:haritha123@cluster0-shard-00-00.wb9fh.mongodb.net:27017,cluster0-shard-00-01.wb9fh.mongodb.net:27017,cluster0-shard-00-02.wb9fh.mongodb.net:27017/WANHEDA?ssl=true&replicaSet=atlas-80gv2b-shard-0&authSource=admin&retryWrites=true&w=majority'
mongo = PyMongo(app)
# Feature Scaling
from sklearn.preprocessing import LabelEncoder, OneHotEncoder
from sklearn.compose import ColumnTransformer
mobileBotNet = pickle.load(open('models/mobileBotNet.sav','rb'))
slowloris = pickle.load(open('models/slowloris.sav','rb'))
ntpamplification = pickle.load(open('models/ntpamplification.sav','rb'))
@app.route('/', methods=['GET'])
def call_api():
return jsonify("Welcome to WANHEADA")
@app.route('/mobilebotnet/predict', methods=['POST'])
def mobilebotnet_predict():
source = request.json['source']
protocol = request.json['protocol']
X = pd.DataFrame({'Source': source, 'Protocol': protocol}, index=[4])
X = X.to_numpy()
labelencoder_X_T = LabelEncoder()
X[:, 0] = labelencoder_X_T.fit_transform(X[:, 0])
labelencoder_X_S = LabelEncoder()
X[:, 1] = labelencoder_X_S.fit_transform(X[:, 1])
result = mobileBotNet.predict(X)
if(int(result[0]) == 0):
notification = mongo.db.notification
notification.insert({'ip': source, 'message': 'Mobile botnet attack. Blocked by WANHEDA', 'time': datetime.datetime.now()})
return jsonify(int(result[0]))
@app.route('/volumetrice/predict', methods=['POST'])
def volumetrice_predict():
data = request.json
X = pd.DataFrame({'Time': 400.393403, 'Source': "192.162.78.90", 'Destination': "122.142.8.10", 'Protocol': "ARP",
'Length': 412}, index=[4])
source = request.json['source']
protocol = request.json['protocol']
X = X.to_numpy()
labelencoder_X_T = LabelEncoder()
X[:, 0] = labelencoder_X_T.fit_transform(X[:, 0])
labelencoder_X_S = LabelEncoder()
X[:, 1] = labelencoder_X_S.fit_transform(X[:, 1])
labelencoder_X_D = LabelEncoder()
X[:, 2] = labelencoder_X_D.fit_transform(X[:, 2])
labelencoder_X_P = LabelEncoder()
X[:, 3] = labelencoder_X_P.fit_transform(X[:, 3])
result = mobileBotNet.predict(data)
if (int(result[0]) == 0):
notification = mongo.db.notification
notification.insert(
{'ip': source, 'message': 'Volumetrice attack. Blocked by WANHEDA', 'time': datetime.datetime.now()})
return jsonify(result)
@app.route('/slowloris/predict', methods=['POST'])
def slowloris_predict():
source = request.json['source']
flow_duration = request.json['flow_duration']
bwd_packets = request.json['bwd_packets']
X = pd.DataFrame({'Flow Duration': flow_duration,'Total Length of Bwd Packets': bwd_packets}, index=[4])
result = slowloris.predict(X)
if(int(result[0])<0.5):
notification = mongo.db.notification
notification.insert({'ip': source, 'message': 'Slowloris attack. Blocked by WANHEDA', 'time': datetime.datetime.now()})
return jsonify(int(result[0]))
@app.route('/ntpAmplification/predict', methods=['POST'])
def ntpAmplification_predict():
Source = request.json['source']
Source_Port = request.json['source_port']
Destination_Port = request.json['destination_port']
X = pd.DataFrame({'Source Port': Source_Port, 'Destination Port': Destination_Port}, index=[4])
result = ntpamplification.predict(X)
if(int(result[0]) == 0):
notification = mongo.db.notification
notification.insert({'ip': Source, 'message': 'NtpAmplification attack. Blocked by WANHEDA', 'time': datetime.datetime.now()})
return jsonify(int(result[0]))
@app.route('/whitelist/check', methods=['POST'])
def whitelist_check():
ip = request.json['ip']
whitelist = mongo.db.whitelist
s = whitelist.find_one({'ip': ip})
if s:
output = {'ip': s['ip']}
else:
output = "false"
return jsonify({'result': output})
@app.route('/whitelist/getall', methods=['GET'])
def get_all_whitelist():
whitelist = mongo.db.whitelist
output = []
for s in whitelist.find():
output.append({'ip': s['ip']})
return jsonify({'result': output})
@app.route('/whitelist/add', methods=['POST'])
def add_to_whitelist():
whitelist = mongo.db.whitelist
ip = request.json['ip']
ip_id = whitelist.insert({'ip': ip})
new_ip = whitelist.find_one({'_id': ip_id})
output = {'ip': new_ip['ip']}
return jsonify({'result': output})
@app.route('/whitelist/delete', methods=['POST'])
def delete_from_whitelist():
ip = request.json['ip']
whitelist = mongo.db.whitelist
s = whitelist.find_one({'ip': ip})
if s:
ip_id = whitelist.delete_one({'ip': ip})
output = {'ip': ip}
else:
output = "false"
return jsonify({'result': output})
@app.route('/blacklist/check', methods=['POST'])
def blacklist_check():
ip = request.json['ip']
blacklist = mongo.db.blacklist
s = blacklist.find_one({'ip': ip})
if s:
notification = mongo.db.notification
notification.insert({'ip': ip, 'message': 'Black listed ip address tried to access the protected server.',
'time': datetime.datetime.now()})
output = {'ip': s['ip']}
else:
output = "false"
return jsonify({'result': output})
@app.route('/blacklist/getall', methods=['GET'])
def get_all_blacklist():
blacklist = mongo.db.blacklist
output = []
for s in blacklist.find():
output.append({'ip': s['ip']})
return jsonify({'result': output})
@app.route('/blacklist/add', methods=['POST'])
def add_to_blacklist():
blacklist = mongo.db.blacklist
ip = request.json['ip']
ip_id = blacklist.insert({'ip': ip})
new_ip = blacklist.find_one({'_id': ip_id})
output = {'ip': new_ip['ip']}
return jsonify({'result': output})
@app.route('/blacklist/delete', methods=['POST'])
def delete_from_blacklist():
ip = request.json['ip']
blacklist = mongo.db.whitelist
s = blacklist.find_one({'ip': ip})
if s:
ip_id = blacklist.delete_one({'ip': ip})
output = {'ip': ip}
else:
output = "false"
return jsonify({'result': output})
@app.route('/user/register', methods=['POST'])
def add_user():
user = mongo.db.user
username = request.json['username']
email = request.json['email']
password = request.json['password']
s = user.find_one({'email': email})
if s:
return jsonify({'result':"false"})
user_id = user.insert({'username': username,'email':email,'password':password})
new_user = user.find_one({'_id': user_id})
output = {'username': new_user['username'],'email':new_user['email'],'password':new_user['password']}
return jsonify({'result': output})
@app.route('/user/login', methods=['POST'])
def user_login():
print(request.json)
email = request.json['email']
password = request.json['password']
user = mongo.db.user
s = user.find_one({'email': email})
if s:
if (password == s['password']):
output = {'username': s['username'],'password':s['password'],'email':s['email']}
else:
output = "Wrong Password"
else:
output = "user not found"
return jsonify({'result': output})
@app.route('/isValidIp', methods=['POST'])
def is_valid_ip():
source_ip=request.json['source_ip']
protocol = request.json['protocol']
flow_duration = request.json['flow_duration']
bwd_packets = request.json['bwd_packets']
Source_Port = request.json['source_port']
Destination_Port = request.json['destination_port']
notification = mongo.db.notification
#check for the white list
whitelist = mongo.db.whitelist
w = whitelist.find_one({'ip': source_ip})
if w:
return jsonify({'result': True})
#check for the black list
blacklist = mongo.db.blacklist
b = blacklist.find_one({'ip': source_ip})
if b:
notification.insert({'ip': source_ip,'message': 'Black listed ip address tried to access the protected server.','time': datetime.datetime.now()})
return jsonify({'result': False})
#check for mobile Bot net
X = pd.DataFrame({'Source': source_ip, 'Protocol': protocol}, index=[4])
X = X.to_numpy()
labelencoder_X_T = LabelEncoder()
X[:, 0] = labelencoder_X_T.fit_transform(X[:, 0])
labelencoder_X_S = LabelEncoder()
X[:, 1] = labelencoder_X_S.fit_transform(X[:, 1])
result = mobileBotNet.predict(X)
if (int(result[0]) == 0):
notification = mongo.db.notification
notification.insert(
{'ip': source_ip, 'message': 'Mobile botnet attack. Blocked by WANHEDA', 'time': datetime.datetime.now()})
return jsonify({'result': False})
#check for the slowris
X = pd.DataFrame({'Flow Duration': flow_duration, 'Total Length of Bwd Packets': bwd_packets}, index=[4])
result = slowloris.predict(X)
if (int(result[0]) < 0.5):
notification = mongo.db.notification
notification.insert(
{'ip': source_ip, 'message': 'Slowloris attack. Blocked by WANHEDA', 'time': datetime.datetime.now()})
return jsonify({'result': False})
#check for ntpamplification
X = pd.DataFrame({'Source Port': Source_Port, 'Destination Port': Destination_Port}, index=[4])
result = ntpamplification.predict(X)
if (int(result[0]) == 0):
notification = mongo.db.notification
notification.insert(
{'ip': source_ip, 'message': 'NtpAmplification attack. Blocked by WANHEDA', 'time': datetime.datetime.now()})
return jsonify({'result': True})
@app.route('/notification/getall', methods=['GET'])
def get_all_notification():
notification = mongo.db.notification
output = []
for s in notification.find():
output.append({'ip': s['ip'],'message':s['message'],'time':s['time']})
return jsonify({'result': output})
if __name__ == '__main__':
app.run(debug=True)
import pickle
from Volumetric.volumetric import model
from Slowloris.slowlorisModel import regressor
from MobileBotNet.mobileBotNetModel import classifier
from NTPAmplification.ntpamplification import classifierSVC
pickle.dump(classifier, open('models/mobileBotNet.sav', 'wb'))
pickle.dump(regressor, open('models/slowloris.sav', 'wb'))
pickle.dump(classifierSVC,open('models/ntpamplification.sav','wb'))
pickle.dump(model,open('models/volumetric.sav', 'wb'))
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;
// 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
import React from 'react'
import {
CCardGroup,
CCardFooter,
CCol,
CLink,
CRow,
CWidgetProgress,
CWidgetIcon,
CWidgetProgressIcon,
CWidgetSimple,
CProgress,
} from '@coreui/react'
import WidgetsBrand from './WidgetsBrand'
import WidgetsDropdown from './WidgetsDropdown'
import ChartLineSimple from '../charts/ChartLineSimple'
import ChartBarSimple from '../charts/ChartBarSimple'
import CIcon from '@coreui/icons-react'
const Widgets = () => {
return (
<>
<WidgetsDropdown />
<CRow>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress color="success" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress color="info" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress color="warning" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
<CProgress color="danger" animated size="xs" className="my-3" value={75}/>
</CWidgetProgress>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress inverse color="success" variant="inverse" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress inverse color="info" variant="inverse" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress inverse color="warning" variant="inverse" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress inverse color="danger" variant="inverse" value={95} header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
</CRow>
<CRow>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="primary">
<CIcon width={24} name="cil-settings"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="info">
<CIcon width={24} name="cil-user"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="warning">
<CIcon width={24} name="cil-moon"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="danger">
<CIcon width={24} name="cil-bell"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
<CIcon width={24} name="cil-settings"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="info" iconPadding={false}>
<CIcon width={24} name="cil-laptop"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="warning" iconPadding={false}>
<CIcon width={24} name="cil-moon"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="danger" iconPadding={false}>
<CIcon width={24} name="cil-bell"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="4">
<CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
<CIcon width={24} name="cil-settings" className="mx-5"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="4">
<CWidgetIcon text="income" header="$1.999,50" color="info" iconPadding={false}>
<CIcon width={24} name="cil-laptop" className="mx-5"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="4">
<CWidgetIcon
text="income"
header="$1.999,50"
color="warning"
iconPadding={false}
footerSlot={
<CCardFooter className="card-footer px-3 py-2">
<CLink
className="font-weight-bold font-xs btn-block text-muted"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
View more
<CIcon name="cil-arrow-right" className="float-right" width="16"/>
</CLink>
</CCardFooter>
}
>
<CIcon width={24} name="cil-moon" className="mx-5"/>
</CWidgetIcon>
</CCol>
</CRow>
<WidgetsBrand/>
<WidgetsBrand withCharts/>
<CCardGroup className="mb-4">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="gradient-info"
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="385"
text="New Clients"
color="gradient-success"
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="gradient-warning"
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="gradient-danger"
progressSlot={
<CProgress color="danger" size="xs" value={75} animated className="my-3"
/>}
>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
</CCardGroup>
<CCardGroup className="mb-4">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="gradient-info"
inverse
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="385"
text="New Clients"
color="gradient-success"
inverse
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="gradient-warning"
inverse
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="gradient-primary"
inverse
>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="gradient-danger"
inverse
>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
</CCardGroup>
<CRow>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="gradient-info"
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="385"
text="New Clients"
color="gradient-success"
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="gradient-warning"
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="gradient-primary"
>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="gradient-danger"
>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="972"
text="comments"
color="gradient-info"
>
<CIcon name="cil-speech" height="36"/>
</CWidgetProgressIcon>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="gradient-info"
inverse
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="385"
text="New Clients"
color="gradient-success"
inverse
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="gradient-warning"
inverse
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="gradient-primary"
inverse
>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="gradient-danger"
inverse
>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="972"
text="comments"
color="gradient-info"
inverse
>
<CIcon name="cil-speech" height="36"/>
</CWidgetProgressIcon>
</CCol>
</CRow>
<CRow>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="success"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="success"/>
</CWidgetSimple>
</CCol>
</CRow>
</>
)
}
export default Widgets
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