nouffer/FBSAdminTool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update login sso address

Browse Source
This commit is contained in:
Mohamed Nouffer
2022-05-30 13:06:22 +05:30
parent 485f73d940
commit 11df1b1b03
93 changed files with 3002 additions and 2972 deletions
Download Patch File Download Diff File Expand all files Collapse all files

600
src/views/BoxDisplacemen/index.js
View File

@ -1,300 +1,300 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
CCard,
CCardBody,
CCardHeader,
CCol,
CRow,
CDropdown,
CDropdownDivider,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
/////
CButton,
CCardFooter,
CForm,
CFormGroup,
CFormText,
CTextarea,
CInput,
CInputFile,
CInputCheckbox,
CInputRadio,
CLabel,
CSelect,
CSwitch,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function Index() {
const baseUrl = "https://natnats.mobilous.com/";
const [data, setData] = useState([]);
const [report, setReport] = useState('');
const [selectedcons, setSelectedCons] = useState('');
const [graph, setGraph] = useState(false);
const [startDate, setStartDate] = useState(null);
const [validDates, setValidDates] = useState([]);
const [downloadUrl, setDownloadUrl] = useState('');
useEffect(() => {
async function fetchData() {
// You can await here
const result = await axios('https://natnats.mobilous.com/getConstructionList');
setData(result.data);
}
fetchData();
}, []);
useEffect(() => {
async function fetchData() {
// You can await here
if(selectedcons !== "" && report !== "" && isDate() == true) {
const result = await axios('https://fbssso.ts.bizside.biz/getDateToHaveData?construction_id=' + selectedcons + '&sheetname=' + report);
setValidDates(result.data.record);
}
}
fetchData();
}, [report, selectedcons]);
function getDateWithFormat(date) {
var thisDate = date;
var dd = String(date.getDate()).padStart(2, '0');
var mm = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = date.getFullYear();
thisDate = yyyy + '-' + mm + '-' + dd
return thisDate;
}
function setingReport(e){
setReport(e.target.value);
setStartDate(null);
setDownloadUrl('');
}
function setingSelectedCons(e) {
setSelectedCons(e.target.value);
setStartDate(null);
setDownloadUrl('');
}
function setingGraph(e){
console.log("setting report" + downloadUrl);
setGraph(e.target.checked);
setDownloadUrl('');
}
function doGetReport(){
console.log(isDownload());
console.log(downloadUrl);
if(report == "" || selectedcons == ""){
alert("建設とレポートの両方を選択してください");
return;
}
var url = "";
if(startDate !== null){
if(graph){
url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons+ "&construction_date="+getDateWithFormat(startDate)+"&graph=true";
}
else{
url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons+ "&construction_date="+getDateWithFormat(startDate);
}
setDownloadUrl(url);
//downloadReport(url);
}
else {
if(graph){
url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons+"&graph=true";
}
else{
url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons;
}
setDownloadUrl(url);
//downloadReport(url);
}
}
// function downloadReport(url) {
// console.log(url);
// fetch(url)
// .then(response => {
// console.log(response)
// const filename = response.headers.get('Content-Disposition').split('filename=')[1];
// response.blob().then(blob => {
// let url = window.URL.createObjectURL(blob);
// let a = document.createElement('a');
// a.href = url;
// a.download = filename;
// a.click();
// });
// });
// }
// function downloadReport(url) {
// axios({
// url: url, //your url
// method: 'GET',
// responseType: 'blob', // important
// }).then((response) => {
// // const url = window.URL.createObjectURL(new Blob([response.data]));
// // const link = document.createElement('a');
// // link.href = url;
// // //link.setAttribute('download', 'file.xls'); //or any other extension
// // //document.body.appendChild(link);
// // link.click();
// const filename = response.headers
// .get("content-disposition")
// .split('"')[1];
// const text = response.text();
// console.log(filename)
// console.log(text)
// //return { filename, text };
// });
// }
const checkAvilable = (date) => {
if(validDates === undefined){
return false;
}
var thisDate = getDateWithFormat(date);
if(validDates.includes(thisDate)){
return true;
}
else{
return false;
}
};
function isDownload() {
if(isDate() === false && report !== '' && selectedcons !== '') {
return true;
}
else{
if(startDate !== null) {
return true;
}
}
return false;
}
function isDate() {
if(report === 'BoxDisplacement' || report === 'MachineControl' || report === 'MachineSheet'){
return true;
}
else {
return false;
}
}
return (
<CRow>
<CCol xs="12" sm="12" md="12">
<CCard>
<CCardHeader>
レポート
</CCardHeader>
<CCardBody>
<CSelect custom name="cons_select" id="cons_select" onChange={setingSelectedCons}>
" <option value=''>-- 工事名 --</option>"+
{
data.map((cc, index) => {
return(
<option key={cc.construction_id} value={cc.construction_id}>{cc.construction_name}</option>
)
})
}
</CSelect>
<CCard>
<CCardBody>
<CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
<CFormGroup row>
<CCol md="3">
<CLabel htmlFor="select">レポート種類</CLabel>
</CCol>
<CCol xs="12" md="9">
<CSelect custom name="select" id="select" onChange={setingReport} value={report}>
<option value="">-- レポート種類 --</option>
<option value="BoxDisplacement">函体変位表</option>
<option value="MachineControl">オープンシールドマシン管理日報</option>
<option value="Measurement">函底高・偏位量測定一覧表</option>
<option value="CheckSheet">工程内検査表</option>
<option value="Injection">裏込注入材料受払い簿</option>
</CSelect>
</CCol>
</CFormGroup>
{isDate() === true ?
<CFormGroup row>
<CCol md="3">
<CLabel htmlFor="select">報告日</CLabel>
</CCol>
<CCol xs="12" md="9">
<DatePicker
dateFormat="yyyy/MM/dd"
selected={startDate}
onChange={(date) => setStartDate(date)}
filterDate={checkAvilable}
placeholderText='日付を選択'
/>
</CCol>
</CFormGroup>
:
<div></div>
}
{report == 'MachineControl' ?
<CFormGroup variant="checkbox" className="checkbox">
<CInputCheckbox
id="checkbox1"
name="checkbox1"
checked = {graph}
value='graph'
onChange={setingGraph}
/>
<CLabel variant="checkbox" className="form-check-label" htmlFor="checkbox1">グラフの有無</CLabel>
</CFormGroup>
:
("")}
</CForm>
</CCardBody>
<CCardFooter>
{isDownload() === true ?
<p>
<CButton type="submit" size="sm" color="primary" onClick={doGetReport}><CIcon name="cil-scrubber" /> ダウンロード</CButton>
<br/>
{downloadUrl === '' ?
<p></p>
:
<a href={downloadUrl}>Download</a>
}
</p>
:
<CButton disabled type="submit" size="sm" color="primary" onClick={doGetReport}><CIcon name="cil-scrubber" /> ダウンロード</CButton>
}
</CCardFooter>
</CCard>
</CCardBody>
</CCard>
</CCol>
<CCol xs="1" sm="1" md="1">
</CCol>
</CRow>
);
}
export default Index
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
CCard,
CCardBody,
CCardHeader,
CCol,
CRow,
CDropdown,
CDropdownDivider,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
/////
CButton,
CCardFooter,
CForm,
CFormGroup,
CFormText,
CTextarea,
CInput,
CInputFile,
CInputCheckbox,
CInputRadio,
CLabel,
CSelect,
CSwitch,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function Index() {
const baseUrl = "https://natnats.mobilous.com/";
const [data, setData] = useState([]);
const [report, setReport] = useState('');
const [selectedcons, setSelectedCons] = useState('');
const [graph, setGraph] = useState(false);
const [startDate, setStartDate] = useState(null);
const [validDates, setValidDates] = useState([]);
const [downloadUrl, setDownloadUrl] = useState('');
useEffect(() => {
async function fetchData() {
// You can await here
const result = await axios('https://natnats.mobilous.com/getConstructionList');
setData(result.data);
}
fetchData();
}, []);
useEffect(() => {
async function fetchData() {
// You can await here
if(selectedcons !== "" && report !== "" && isDate() == true) {
const result = await axios('https://fbssso.ts.bizside.biz/getDateToHaveData?construction_id=' + selectedcons + '&sheetname=' + report);
setValidDates(result.data.record);
}
}
fetchData();
}, [report, selectedcons]);
function getDateWithFormat(date) {
var thisDate = date;
var dd = String(date.getDate()).padStart(2, '0');
var mm = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = date.getFullYear();
thisDate = yyyy + '-' + mm + '-' + dd
return thisDate;
}
function setingReport(e){
setReport(e.target.value);
setStartDate(null);
setDownloadUrl('');
}
function setingSelectedCons(e) {
setSelectedCons(e.target.value);
setStartDate(null);
setDownloadUrl('');
}
function setingGraph(e){
console.log("setting report" + downloadUrl);
setGraph(e.target.checked);
setDownloadUrl('');
}
function doGetReport(){
console.log(isDownload());
console.log(downloadUrl);
if(report == "" || selectedcons == ""){
alert("建設とレポートの両方を選択してください");
return;
}
var url = "";
if(startDate !== null){
if(graph){
url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons+ "&construction_date="+getDateWithFormat(startDate)+"&graph=true";
}
else{
url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons+ "&construction_date="+getDateWithFormat(startDate);
}
setDownloadUrl(url);
//downloadReport(url);
}
else {
if(graph){
url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons+"&graph=true";
}
else{
url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons;
}
setDownloadUrl(url);
//downloadReport(url);
}
}
// function downloadReport(url) {
// console.log(url);
// fetch(url)
// .then(response => {
// console.log(response)
// const filename = response.headers.get('Content-Disposition').split('filename=')[1];
// response.blob().then(blob => {
// let url = window.URL.createObjectURL(blob);
// let a = document.createElement('a');
// a.href = url;
// a.download = filename;
// a.click();
// });
// });
// }
// function downloadReport(url) {
// axios({
// url: url, //your url
// method: 'GET',
// responseType: 'blob', // important
// }).then((response) => {
// // const url = window.URL.createObjectURL(new Blob([response.data]));
// // const link = document.createElement('a');
// // link.href = url;
// // //link.setAttribute('download', 'file.xls'); //or any other extension
// // //document.body.appendChild(link);
// // link.click();
// const filename = response.headers
// .get("content-disposition")
// .split('"')[1];
// const text = response.text();
// console.log(filename)
// console.log(text)
// //return { filename, text };
// });
// }
const checkAvilable = (date) => {
if(validDates === undefined){
return false;
}
var thisDate = getDateWithFormat(date);
if(validDates.includes(thisDate)){
return true;
}
else{
return false;
}
};
function isDownload() {
if(isDate() === false && report !== '' && selectedcons !== '') {
return true;
}
else{
if(startDate !== null) {
return true;
}
}
return false;
}
function isDate() {
if(report === 'BoxDisplacement' || report === 'MachineControl' || report === 'MachineSheet'){
return true;
}
else {
return false;
}
}
return (
<CRow>
<CCol xs="12" sm="12" md="12">
<CCard>
<CCardHeader>
レポート
</CCardHeader>
<CCardBody>
<CSelect custom name="cons_select" id="cons_select" onChange={setingSelectedCons}>
" <option value=''>-- 工事名 --</option>"+
{
data.map((cc, index) => {
return(
<option key={cc.construction_id} value={cc.construction_id}>{cc.construction_name}</option>
)
})
}
</CSelect>
<CCard>
<CCardBody>
<CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
<CFormGroup row>
<CCol md="3">
<CLabel htmlFor="select">レポート種類</CLabel>
</CCol>
<CCol xs="12" md="9">
<CSelect custom name="select" id="select" onChange={setingReport} value={report}>
<option value="">-- レポート種類 --</option>
<option value="BoxDisplacement">函体変位表</option>
<option value="MachineControl">オープンシールドマシン管理日報</option>
<option value="Measurement">函底高・偏位量測定一覧表</option>
<option value="CheckSheet">工程内検査表</option>
<option value="Injection">裏込注入材料受払い簿</option>
</CSelect>
</CCol>
</CFormGroup>
{isDate() === true ?
<CFormGroup row>
<CCol md="3">
<CLabel htmlFor="select">報告日</CLabel>
</CCol>
<CCol xs="12" md="9">
<DatePicker
dateFormat="yyyy/MM/dd"
selected={startDate}
onChange={(date) => setStartDate(date)}
filterDate={checkAvilable}
placeholderText='日付を選択'
/>
</CCol>
</CFormGroup>
:
<div></div>
}
{report == 'MachineControl' ?
<CFormGroup variant="checkbox" className="checkbox">
<CInputCheckbox
id="checkbox1"
name="checkbox1"
checked = {graph}
value='graph'
onChange={setingGraph}
/>
<CLabel variant="checkbox" className="form-check-label" htmlFor="checkbox1">グラフの有無</CLabel>
</CFormGroup>
:
("")}
</CForm>
</CCardBody>
<CCardFooter>
{isDownload() === true ?
<p>
<CButton type="submit" size="sm" color="primary" onClick={doGetReport}><CIcon name="cil-scrubber" /> ダウンロード</CButton>
<br/>
{downloadUrl === '' ?
<p></p>
:
<a href={downloadUrl}>Download</a>
}
</p>
:
<CButton disabled type="submit" size="sm" color="primary" onClick={doGetReport}><CIcon name="cil-scrubber" /> ダウンロード</CButton>
}
</CCardFooter>
</CCard>
</CCardBody>
</CCard>
</CCol>
<CCol xs="1" sm="1" md="1">
</CCol>
</CRow>
);
}
export default Index

34
src/views/Injection/index.js
View File

@ -1,17 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
function Injecttion(props) {
return (
<div>
Injection
</div>
)
}
Injecttion.propTypes = {
}
export default Injecttion
import React from 'react'
import PropTypes from 'prop-types'
function Injecttion(props) {
return (
<div>
Injection
</div>
)
}
Injecttion.propTypes = {
}
export default Injecttion

22
src/views/MachineControl/index.js
View File

@ -1,11 +1,11 @@
import React from 'react'
function MachineControl() {
return (
<div>
Machine Control
</div>
)
}
export default MachineControl
import React from 'react'
function MachineControl() {
return (
<div>
Machine Control
</div>
)
}
export default MachineControl

22
src/views/MachineSheet/index.js
View File

@ -1,11 +1,11 @@
import React from 'react'
function MachineSheet() {
return (
<div>
Machine Sheet
</div>
)
}
export default MachineSheet
import React from 'react'
function MachineSheet() {
return (
<div>
Machine Sheet
</div>
)
}
export default MachineSheet

22
src/views/Measurement/index.js
View File

@ -1,11 +1,11 @@
import React from 'react'
function index() {
return (
<div>
Measurement
</div>
)
}
export default index
import React from 'react'
function index() {
return (
<div>
Measurement
</div>
)
}
export default index

172
src/views/Uploader/index.js
View File

@ -1,86 +1,86 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
CCol,
CFormGroup,
CInput,
CInputFile,
CLabel,
CButton,
CCard,
CCardHeader,
CCardBody,
CCardFooter,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
function Uploader(props) {
const [file, setFile] = useState(null);
function onChangeHandler(e) {
setFile(e.target.files[0])
}
function onClickHandler(e) {
let data = new FormData()
data.append('file', file);
const chk = file.name.trim();
const collator = new Intl.Collator('ja');
const order1 = collator.compare('ini_工程内検査票.xlsx', chk);
const order2 = collator.compare('ini_データ入力シート.xlsx', chk);
if(order1 === 0 || order2 === 0)
{
// axios.post("https://fsbsso.sumasen.net/upload?email=" + props.email, {
// body: data,
// headers: {'Content-Type': 'multipart/form-data' }
// })
axios.post("https://fbssso.ts.bizside.biz/upload?email=" + props.email, data)
.then(res => { // then print response status
console.log(res.statusText)
if (res.statusText == 'OK') {
alert("正常にアップロードされました");
}
else if(res.status == 204){
alert("初期設定の読み込みに失敗しました");
}
});
}
else {
alert("指定されたファイル名" + file.name + "が間違っています。ini_工程内検査表.xlsx または ini_データ入力シート.xlsx のどちらかに名前を変更してください。");
return
}
//console.log(file.name);
//console.log('calling upload');
}
return (
<div>
<CCard >
<CCardHeader>
アップロード
</CCardHeader>
<CCardBody >
<CFormGroup row>
<CCol md = "3">
<CLabel htmlFor = "date-input" > アップロードするファイルを選んでください < /CLabel>
</CCol >
<CCol xs = "12"md = "9" >
<CInputFile type = "file"onChange = { onChangeHandler } id = "file-input" name = "file-input" / >
</CCol>
</CFormGroup >
<CCardFooter >
<CButton type = "submit"
onClick = { onClickHandler }
size = "sm"
color = "primary" > < CIcon name = "cil-scrubber" / > アップロード </CButton>
</CCardFooter>
</CCardBody>
</CCard>
</div>
)
}
export default Uploader
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
CCol,
CFormGroup,
CInput,
CInputFile,
CLabel,
CButton,
CCard,
CCardHeader,
CCardBody,
CCardFooter,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
function Uploader(props) {
const [file, setFile] = useState(null);
function onChangeHandler(e) {
setFile(e.target.files[0])
}
function onClickHandler(e) {
let data = new FormData()
data.append('file', file);
const chk = file.name.trim();
const collator = new Intl.Collator('ja');
const order1 = collator.compare('ini_工程内検査票.xlsx', chk);
const order2 = collator.compare('ini_データ入力シート.xlsx', chk);
if(order1 === 0 || order2 === 0)
{
// axios.post("https://fsbsso.sumasen.net/upload?email=" + props.email, {
// body: data,
// headers: {'Content-Type': 'multipart/form-data' }
// })
axios.post("https://fbssso.ts.bizside.biz/upload?email=" + props.email, data)
.then(res => { // then print response status
console.log(res.statusText)
if (res.statusText == 'OK') {
alert("正常にアップロードされました");
}
else if(res.status == 204){
alert("初期設定の読み込みに失敗しました");
}
});
}
else {
alert("指定されたファイル名" + file.name + "が間違っています。ini_工程内検査表.xlsx または ini_データ入力シート.xlsx のどちらかに名前を変更してください。");
return
}
//console.log(file.name);
//console.log('calling upload');
}
return (
<div>
<CCard >
<CCardHeader>
アップロード
</CCardHeader>
<CCardBody >
<CFormGroup row>
<CCol md = "3">
<CLabel htmlFor = "date-input" > アップロードするファイルを選んでください < /CLabel>
</CCol >
<CCol xs = "12"md = "9" >
<CInputFile type = "file"onChange = { onChangeHandler } id = "file-input" name = "file-input" / >
</CCol>
</CFormGroup >
<CCardFooter >
<CButton type = "submit"
onClick = { onClickHandler }
size = "sm"
color = "primary" > < CIcon name = "cil-scrubber" / > アップロード </CButton>
</CCardFooter>
</CCardBody>
</CCard>
</div>
)
}
export default Uploader

72
src/views/dashboard/Dashboard.js
View File

@ -1,36 +1,36 @@
import React, { lazy } from 'react'
import CIcon from '@coreui/icons-react'
import {
CCol,
CFormGroup,
CInput,
CInputFile,
CLabel,
CButton,
CCard,
CCardHeader,
CCardBody,
CCardFooter,
} from '@coreui/react'
const Dashboard = (props) => {
return (
<div >
<CCard className="bg-info">
<CCardBody >
<div className="text-white text-center card bg-info">
<div className="card-body">
<blockquote className="card-bodyquote">
<h3>ワンタイムパスワード :{props.userid}</h3>
<a target="_blank" href="https://natnats.mobilous.com/appexe/natnats/23/bin/mobileweb2/index.html#page_44022"><h1>FBS Web app</h1></a>
</blockquote>
</div>
</div>
</CCardBody>
</CCard>
</div>
)
}
export default Dashboard
import React, { lazy } from 'react'
import CIcon from '@coreui/icons-react'
import {
CCol,
CFormGroup,
CInput,
CInputFile,
CLabel,
CButton,
CCard,
CCardHeader,
CCardBody,
CCardFooter,
} from '@coreui/react'
const Dashboard = (props) => {
return (
<div >
<CCard className="bg-info">
<CCardBody >
<div className="text-white text-center card bg-info">
<div className="card-body">
<blockquote className="card-bodyquote">
<h3>ワンタイムパスワード :{props.userid}</h3>
<a target="_blank" href="https://natnats.mobilous.com/appexe/natnats/23/bin/mobileweb2/index.html#page_44022"><h1>FBS Web app</h1></a>
</blockquote>
</div>
</div>
</CCardBody>
</CCard>
</div>
)
}
export default Dashboard

20
src/views/downloader.js
View File

@ -1,10 +1,10 @@
import * as React from 'react';
function Downloader(props) {
return (
<div style={{display: 'none'}}>
<iframe src={props.iframeSrc} />
</div>
);
}
export default Downloader
import * as React from 'react';
function Downloader(props) {
return (
<div style={{display: 'none'}}>
<iframe src={props.iframeSrc} />
</div>
);
}
export default Downloader

156
src/views/pages/login/Login.js
View File

@ -1,78 +1,78 @@
import React from 'react'
import { Link } from 'react-router-dom'
import {
CButton,
CCard,
CCardBody,
CCardGroup,
CCol,
CContainer,
CForm,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const Login = () => {
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="text" placeholder="Username" autoComplete="username" />
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Password" autoComplete="current-password" />
</CInputGroup>
<CRow>
<CCol xs="6">
<CButton color="primary" className="px-4">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>
)
}
export default Login
import React from 'react'
import { Link } from 'react-router-dom'
import {
CButton,
CCard,
CCardBody,
CCardGroup,
CCol,
CContainer,
CForm,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const Login = () => {
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="text" placeholder="Username" autoComplete="username" />
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Password" autoComplete="current-password" />
</CInputGroup>
<CRow>
<CCol xs="6">
<CButton color="primary" className="px-4">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>
)
}
export default Login

88
src/views/pages/page404/Page404.js
View File

@ -1,44 +1,44 @@
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,
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

88
src/views/pages/page500/Page500.js
View File

@ -1,44 +1,44 @@
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 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

160
src/views/pages/register/Register.js
View File

@ -1,80 +1,80 @@
import React from 'react'
import {
CButton,
CCard,
CCardBody,
CCardFooter,
CCol,
CContainer,
CForm,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const Register = () => {
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" />
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>@</CInputGroupText>
</CInputGroupPrepend>
<CInput type="text" placeholder="Email" autoComplete="email" />
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Password" autoComplete="new-password" />
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Repeat password" autoComplete="new-password" />
</CInputGroup>
<CButton color="success" block>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>
)
}
export default Register
import React from 'react'
import {
CButton,
CCard,
CCardBody,
CCardFooter,
CCol,
CContainer,
CForm,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const Register = () => {
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" />
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>@</CInputGroupText>
</CInputGroupPrepend>
<CInput type="text" placeholder="Email" autoComplete="email" />
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Password" autoComplete="new-password" />
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Repeat password" autoComplete="new-password" />
</CInputGroup>
<CButton color="success" block>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>
)
}
export default Register

22
src/views/secret/index.js
View File

@ -1,11 +1,11 @@
import React from 'react'
function Secret() {
return (
<div>
This is a protected page
</div>
)
}
export default Secret
import React from 'react'
function Secret() {
return (
<div>
This is a protected page
</div>
)
}
export default Secret

131
src/views/sso/index.js
View File

@ -1,63 +1,68 @@
import React from 'react'
import axios from 'axios';
import { Link } from 'react-router-dom'
import {
CButton,
CCard,
CCardBody,
CCardGroup,
CCol,
CContainer,
CForm,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
function Sso() {
function launchsso() {
console.log("launch sso");
window.open("https://fbssso.ts.bizside.biz/Shibboleth.sso/Login", "_self");
}
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>ログイン</h1>
<p className="text-muted">SSOでサインインするには、ここをクリックしてください</p>
<CRow>
<CCol>
<CButton color="primary" className="px-4" onClick={launchsso}>SSOでログイン</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>ログイン方法</h2>
<p>これはSSOログインを使用します。リンクをクリックすると、SSOログインページにリダイレクトされます。</p>
</div>
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
</div>
)
}
export default Sso
import React from 'react'
import axios from 'axios';
import { Link } from 'react-router-dom'
import {
CButton,
CCard,
CCardBody,
CCardGroup,
CCol,
CContainer,
CForm,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
function Sso() {
// function launchsso() {
// console.log("launch sso");
// window.open("https://fbssso.ts.bizside.biz/Shibboleth.sso/Login", "_self");
// }
function launchsso() {
console.log("launch sso");
window.open("https://fbssso.bizside.biz/Shibboleth.sso/Login", "_self");
}
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>ログイン</h1>
<p className="text-muted">SSOでサインインするには、ここをクリックしてください</p>
<CRow>
<CCol>
<CButton color="primary" className="px-4" onClick={launchsso}>SSOでログイン</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>ログイン方法</h2>
<p>これはSSOログインを使用します。リンクをクリックすると、SSOログインページにリダイレクトされます。</p>
</div>
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
</div>
)
}
export default Sso

82
src/views/users/User.js
View File

@ -1,41 +1,41 @@
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 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

172
src/views/users/Users.js
View File

@ -1,86 +1,86 @@
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
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

58
src/views/users/UsersData.js
View File

@ -1,29 +1,29 @@
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
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