\n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {t('Dashboard.OnuReport')}
\n\n
\n \n
\n \n
\n \n
\n \n
\n {t('Dashboard.OltReport')}
\n\n
\n \n
\n \n \n \n
\n
\n | {t('Dashboard.Slot1')} | \n{oltReport.getSlotData(1).status} | \n
|---|---|
| {t('Dashboard.Slot2')} | \n{oltReport.getSlotData(2).status} | \n
| {t('Dashboard.Slot3')} | \n{oltReport.getSlotData(3).status} | \n
| {t('Dashboard.Slot4')} | \n{oltReport.getSlotData(4).status} | \n
\n
\n \n \n \n
\n
\n | {t('Dashboard.Slot5')} | \n{oltReport.getSlotData(5).status} | \n
|---|---|
| {t('Dashboard.Slot6')} | \n{oltReport.getSlotData(6).status} | \n
| {t('Dashboard.Slot7')} | \n{oltReport.getSlotData(7).status} | \n
| {t('Dashboard.Slot8')} | \n{oltReport.getSlotData(8).status} | \n
\n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n
\n | {this.state.uptime} | \n|
| {this.state.dateTime} | \n|
| {this.state.fwVersion} | \n|
| {this.state.product} | \n|
| {this.state.serialNumber} | \n
\n
\n \n
\n \n
\n \n \n \n
\n
\n | {this.state.mgntIpAddr} | \n|
| {this.state.mgntIpMask} | \n|
| {this.state.mgntIpGateway} | \n
\n
\n \n
\n \n
\n \n
\n \n \n \n
\n
\n | {this.state.enSNMPAgent} | \n|
| {this.state.enNtpServer} | \n|
| {this.state.ntpServer} | \n
\n
\n \n Please, wait for task to done.\n
\n\n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n );\n};\n\nexport default PageLoading;\n","import React, {useEffect, useRef, useState} from 'react';\n\nconst DropdownMenu = ({size, children, containerTag}) => {\n const dropdownMenuRef = useRef(null);\n const [styles, setStyles] = useState({left: 'inherit', right: `0px`});\n const [classes, setClasses] = useState(\n `dropdown-menu dropdown-menu-right dropdown-menu-${size} show`\n );\n\n useEffect(() => {\n setClasses(\n `dropdown-menu dropdown-menu-right dropdown-menu-${size} show`\n );\n const dropdownMenuElement = dropdownMenuRef.current;\n if (dropdownMenuElement) {\n const windowWidth = document.getElementById('root').offsetWidth;\n const offsetLeft = dropdownMenuElement.getBoundingClientRect().left;\n const {offsetWidth} = dropdownMenuElement;\n const visiblePart = windowWidth - offsetLeft;\n\n if (offsetLeft < 0) {\n setStyles({\n left: 'inherit',\n right: `${offsetLeft - 5}px`\n });\n } else if (visiblePart < offsetWidth) {\n setStyles({left: 'inherit', right: `0px`});\n }\n }\n }, [dropdownMenuRef.current, size]);\n\n if (containerTag === 'ul') {\n return (\n \n T\n H\n I\n N\n K\n
\n \n T\n E\n C\n H\n N\n O\n L\n O\n G\n Y\n
\n {t(menuItem.name)}
\n {isExpandable ? (\n \n ) : null}\n \n\n {isExpandable &&\n menuItem.children.map((item) => (\n- \n
- \n
{t(item.name)}
\n \n \n
\n
\n );\n};\n\nexport default Checkbox;\n","import React, {useEffect, useState} from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n\nconst Input = ({\n className,\n value,\n icon,\n type = 'text',\n placeholder,\n autoComplete,\n onChange,\n formik,\n formikFieldProps,\n ...props\n}) => {\n const [localValue, setLocalValue] = useState(value || '');\n const [formStatus, setFormStatus] = useState(null);\n\n useEffect(() => {\n setLocalValue(value || '');\n }, [value]);\n\n useEffect(() => {\n if (onChange && localValue !== value) {\n onChange(localValue);\n }\n if (formik && formikFieldProps) {\n formik.setFieldValue(formikFieldProps.name, localValue);\n }\n }, [localValue]);\n\n useEffect(() => {\n if (\n formik.touched[formikFieldProps.name] &&\n formik.errors[formikFieldProps.name]\n ) {\n setFormStatus('is-invalid');\n return;\n }\n if (\n formik.touched[formikFieldProps.name] &&\n !formik.errors[formikFieldProps.name]\n ) {\n setFormStatus('is-valid');\n return;\n }\n setFormStatus(null);\n }, [\n formik.touched[formikFieldProps.name],\n formik.errors[formikFieldProps.name]\n ]);\n\n const onChangeHandler = (event) => {\n event.preventDefault();\n setLocalValue(event.target.value || '');\n };\n\n const printFormError = () => {\n if (\n formik.touched[formikFieldProps.name] &&\n formik.errors[formikFieldProps.name]\n ) {\n return (\n \n
\n {formik && formikFieldProps ? printFormError() : null}\n \n );\n};\n\nexport default Input;\n","import React from 'react';\nimport axios from '../utils/axios';\nimport { toast } from 'react-toastify';\nimport Translate from '../components/translate/conf';\nimport ReactDOMServer from 'react-dom/server'\nimport { Link } from 'react-router-dom'\nimport { Translation } from 'react-i18next';\nimport ModalLoading from '@app/components/modal-loading/modal-loading';\nimport { Checkbox } from '@app/components/index';\n\nexport default class OnuStatusConfigPage extends React.Component {\n\n constructor(props) {\n super(props)\n axios({\n url: '/api/onutable/' + this.props.match.params.id,\n })\n .then((response) => {\n let newData = {\n ...response.data.data,\n enableVlan: response.data.data['ucCfgONUVlanId'] != ''\n }\n this.setState(newData)\n })\n .catch((err) => console.log(err))\n }\n\n state = {\n ucCfgONUName: \"\",\n ucCfgONUReset: \"0\",\n ucCfgONUPhysicalID: \"\",\n ucCfgONUSlotIndex: \"\",\n ucCfgONUVlanId: \"\",\n id: \"\",\n mLoading: false,\n enableVlan: false,\n }\n\n handleChangeName = event => {\n this.setState({\n ucCfgONUName: event.target.value,\n });\n }\n\n handleEnableVlan = value => {\n this.setState({\n enableVlan: value,\n ucCfgONUVlanId: value ? this.state.ucCfgONUVlanId : ''\n });\n }\n\n handleChangeVlanId = event => {\n this.setState({\n ucCfgONUVlanId: event.target.value,\n });\n }\n\n handleChangeReset = event => {\n this.setState({\n ucCfgONUReset: event.target.value,\n });\n }\n\n handleConfiguration = (e) => {\n e.preventDefault();\n const vlanId = parseInt(this.state.ucCfgONUVlanId)\n if( this.state.ucCfgONUVlanId === '' || vlanId > 0 && vlanId < 4096 ){\n this.handleEnableVlan(this.state.ucCfgONUVlanId !== '')\n var bodyFormData = {\n ucCfgONUName: this.state.ucCfgONUName,\n ucCfgONUVlanId: this.state.ucCfgONUVlanId\n }\n this.setState({ mLoading: true })\n axios({\n method: 'post',\n url: '/api/onutable/' + this.state.id,\n data: bodyFormData,\n headers: { 'Content-Type': 'multipart/form-data' }\n }).then((response) => {\n if (response.data.err !== undefined && response.data.err === \"\") {\n toast.success(\n
\n ) : null}\n \n
\n \n \n \n\n
\n )\n }\n}\n","import React, { Component } from 'react'\nimport axios from './axios'\nimport Translate from '../components/translate/conf'\nimport ReactDOMServer from 'react-dom/server';\nimport 'datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js'\nimport 'datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js'\nimport { Link } from 'react-router-dom';\nimport ModalLoading from '@app/components/modal-loading/modal-loading';\nimport { Checkbox } from \"@app/components/index\";\n\nconst $ = require('jquery');\n$.DataTable = require('datatables.net');\n\nexport default class OnuPonInfoTable extends Component {\n\n constructor(props) {\n super(props)\n this.state = {\n rows: [],\n mLoading: true\n }\n }\n\n getFullOnuData = async () => {\n let onuTable = await axios.get('/api/onutable')\n let moduleOnuTable = await axios.get('/api/moduleonutable')\n if (onuTable.data.data !== undefined && moduleOnuTable.data.data !== undefined) {\n onuTable = onuTable.data.data;\n moduleOnuTable.data.data.forEach((v, i, arr) => {\n for (let j = 0; j < onuTable.length; j++) {\n if (v.ucOpticModuleOnuIndex == onuTable[j].id) {\n arr[i] = { ...v, ...onuTable[j] }\n break;\n }\n }\n })\n return moduleOnuTable;\n }\n return { data: [] };\n }\n\n getTableData = async () => {\n try {\n const res = await this.getFullOnuData()\n this.setState(\n {\n rows: res.data[\"data\"],\n mLoading: false\n },\n () => {\n const newFilterField = this.getFilterField()\n const isCheckedLowPower = this.props.match.params.filter === 'lowPower' \n $(this.tbl).DataTable({\n \"pageLength\": 128,\n \"lengthMenu\": [0, 16, 32, 64, 128, 256, 512],\n \"responsive\": true,\n \"columnDefs\": [\n {\n visible: false,\n targets: 0,\n },\n {\n width: '50%',\n targets: 1,\n className: 'th-bg-blue td-blue td-tiny'\n },\n {\n targets: [2, 3, 4, 5, 6, 7, 8],\n className: 'dt-center th-bg-blue td-blue td-tiny'\n },\n ],\n initComplete: function () {\n $('div.dataTables_filter').html(ReactDOMServer.renderToString(newFilterField));\n const obj = this;\n obj.api()\n .columns()\n .every(function () {\n var that = this;\n $('input', this.footer()).on('keyup change clear', function () {\n if (that.search() !== this.value) {\n that.search(this.value).draw();\n }\n });\n });\n $('#filterLowPower').on('click',function(e){\n const search = $(this).is(':checked') ? '-(2[7-9]|[3-9][0-9]).[./ 0-9]+' : ''\n obj.api().column(7).search(search,true,false).draw()\n })\n if( isCheckedLowPower ){\n $('#filterLowPower').trigger('click');\n }\n $('#search').on('keyup change clear',function () {\n obj.api().search(this.value).draw();\n });\n },\n });\n }\n )\n } catch (e) {\n console.log(e)\n }\n }\n\n getFilterField = () => {\n return (\n <>\n \n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
\n \n
\n
\n \n \n
\n \n )\n }\n\n componentDidMount() {\n this.getTableData();\n }\n\n tHeader = () => {\n return (\n <>\n \n \n \n \n
\n \n \n \n \n
\n ºC
mA
dBm
\n \n \n \n \n
\n );\n};\n\nexport default OnuPonInfoPage;\n","import React, { Component } from 'react'\nimport axios from './axios'\nimport Translate from '../components/translate/conf'\nimport ReactDOMServer from 'react-dom/server';\nimport 'datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js'\nimport 'datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js'\nimport { Link } from 'react-router-dom';\nimport ModalLoading from '@app/components/modal-loading/modal-loading';\n\nconst $ = require('jquery');\n$.DataTable = require('datatables.net');\n\nexport default class OltStatusTable extends Component {\n\n constructor(props) {\n super(props)\n this.state = {\n rows: [],\n mLoading: true\n }\n }\n\n getFullOltData = async () => {\n let oltTable = await axios.get('/api/olttable')\n let slotTable = await axios.get('/api/slottable')\n if( oltTable.data.data !== undefined && slotTable.data.data !== undefined ){\n oltTable = oltTable.data.data;\n slotTable.data.data.forEach((v,i,arr)=> {\n for(let j=0;j\n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n \n \n\n \n \n
\n );\n};\n\nexport default OltStatusPage;\n","\nimport React from 'react';\nimport axios from '../utils/axios';\nimport { toast } from 'react-toastify';\nimport Translate from '../components/translate/conf';\nimport ReactDOMServer from 'react-dom/server'\nimport { Link } from 'react-router-dom'\nimport { Translation } from 'react-i18next';\nimport ModalLoading from '@app/components/modal-loading/modal-loading';\nimport { Checkbox } from '@app/components/index';\n\nexport default class OltStatusConfigPage extends React.Component {\n\n constructor(props) {\n super(props)\n axios({\n url: '/api/olttable/' + this.props.match.params.id,\n })\n .then((response) => {\n const ponVlanId = [\n response.data.data['ucCfgOLTPON0VlanId'],\n response.data.data['ucCfgOLTPON1VlanId']\n ]\n const enableVlan = [\n ponVlanId[0] != '',\n ponVlanId[1] != ''\n ]\n const enDiscardUntagged = [\n enableVlan[0] ? response.data.data['ucCfgOLTPON0DisUntagged'] == '1' : false,\n enableVlan[1] ? response.data.data['ucCfgOLTPON1DisUntagged'] == '1' : false\n ]\n let newData = {\n ...response.data.data,\n enableVlan: enableVlan,\n enDiscardUntagged: enDiscardUntagged,\n ponVlanId: ponVlanId\n }\n this.setState(newData)\n })\n .catch((err) => console.log(err))\n }\n\n state = {\n ucCfgOLTName: \"\",\n oltAction: \"0\",\n ucCfgOLTMac: \"\",\n ucCfgOLTSlotIndex: \"\",\n ucCfgOLTIpAddress: \"\",\n id: \"\",\n mLoading: false,\n enableVlan: [false, false],\n enDiscardUntagged: [true, true],\n ponVlanId: ['', '']\n }\n\n handleChangeName = event => {\n this.setState({\n ucCfgOLTName: event.target.value,\n });\n }\n\n doEnableVlan = (pon, value) => {\n this.state.enableVlan[pon] = value\n this.state.ponVlanId[pon] = value ? this.state.ponVlanId[pon] : ''\n this.state.enDiscardUntagged[pon] = value\n this.setState({\n enableVlan: this.state.enableVlan,\n ponVlanId: this.state.ponVlanId,\n enDiscardUntagged: this.state.enDiscardUntagged\n });\n }\n\n handleEnableVlan0 = value => {\n this.doEnableVlan(0, value)\n }\n\n handleEnableVlan1 = value => {\n this.doEnableVlan(1, value)\n }\n\n doChangeVlanId = (pon, event) => {\n this.state.ponVlanId[pon] = event.target.value\n this.setState({\n ponVlanId: this.state.ponVlanId,\n });\n }\n\n handleChangeVlanId0 = event => {\n this.doChangeVlanId(0, event)\n }\n\n handleChangeVlanId1 = event => {\n this.doChangeVlanId(1, event)\n }\n\n doDisUntagged = (pon, value) => {\n this.state.enDiscardUntagged[pon] = value\n this.setState({\n enDiscardUntagged: this.state.enDiscardUntagged,\n });\n }\n\n handleDisUntagged0 = value => {\n this.doDisUntagged(0, value)\n }\n\n handleDisUntagged1 = value => {\n this.doDisUntagged(1, value)\n }\n\n handleChangeIPAddress = event => {\n this.setState({\n ucCfgOLTIpAddress: event.target.value,\n });\n }\n\n handleChangeReset = event => {\n this.setState({\n oltAction: event.target.value,\n });\n }\n\n doCheckVlan = pon => {\n const vlanId = parseInt(this.state.ponVlanId[pon])\n if( this.state.ponVlanId[pon] === '' || vlanId > 0 && vlanId < 4096 ){\n if( this.state.ponVlanId[pon] === '' ){\n this.doEnableVlan(pon,false)\n }\n return true\n }\n return false\n }\n\n handleConfiguration = (e) => {\n e.preventDefault();\n if ( this.doCheckVlan(0) && this.doCheckVlan(1) ) {\n var bodyFormData = {\n ucCfgOLTName: this.state.ucCfgOLTName,\n ucCfgOLTIpAddress: this.state.ucCfgOLTIpAddress,\n ucCfgOLTPON0VlanId: this.state.ponVlanId[0],\n ucCfgOLTPON0DisUntagged: this.state.enDiscardUntagged[0] ? \"1\" : \"\",\n ucCfgOLTPON1VlanId: this.state.ponVlanId[1],\n ucCfgOLTPON1DisUntagged: this.state.enDiscardUntagged[1] ? \"1\" : \"\",\n }\n this.setState({ mLoading: true })\n axios({\n method: 'post',\n url: '/api/olttable/' + this.state.id,\n data: bodyFormData,\n headers: { 'Content-Type': 'multipart/form-data' }\n }).then((response) => {\n if (response.data.err !== undefined && response.data.err === \"\") {\n toast.success(\n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n \n \n
\n \n )\n }\n \n
\n \n
\n \n
\n {t('OLT.Status.Config.Title')}
\n\n
\n - \n
- \n {t('menusidebar.label.OLT.Parent')}\n \n
- \n {t('menusidebar.label.OLT.Status')}\n \n
- \n {t('OLT.Status.Config.Title')}\n \n
\n
\n \n
\n \n
\n \n
\n {t('OLT.Status.Config.Configuration')}
\n\n
\n \n
\n \n
\n \n {t('OLT.Status.Config.Management')}
\nºC
mA
dBm
\n \n \n \n \n
\n );\n};\n\nexport default OltPonInfoPage;\n","import React, { Component } from 'react'\nimport axios from './axios'\nimport Translate from '../components/translate/conf'\nimport ReactDOMServer from 'react-dom/server';\nimport 'datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js'\nimport 'datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js'\nimport { Link } from 'react-router-dom';\nimport ModalLoading from '@app/components/modal-loading/modal-loading';\n\nconst $ = require('jquery');\n$.DataTable = require('datatables.net');\n\nexport default class OltAlarmTable extends Component {\n\n constructor(props) {\n super(props)\n this.state = {\n rows: [],\n mLoading: true\n }\n }\n\n getTableData = async () => {\n try {\n const res = await axios.get('/api/oltalarmtable')\n this.setState(\n {\n rows: res.data[\"data\"],\n mLoading: false\n },\n () => {\n $(this.tbl).DataTable({\n \"search\": {\n \"search\": this.props.match.params.filter\n },\n \"pageLength\": 50,\n \"lengthMenu\": [0, 10, 20, 30, 40, 50],\n \"responsive\": true,\n \"columnDefs\": [\n {\n visible: false,\n targets: 0,\n },\n {\n targets: [1, 2, 3, 4],\n className: 'dt-center th-bg-blue td-blue'\n },\n {\n targets: [5],\n className: 'dt-center th-bg-blue td-blue',\n render: (value) => {\n if ( value == \"On\") {\n value = ReactDOMServer.renderToString(\n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n \n \n \n \n
\n );\n};\n\nexport default OltAlarmPage;\n","\nimport React, { useEffect, useState } from \"react\";\nimport axios from '@utils/axios'\nimport { toast } from 'react-toastify';\nimport Translate from '../components/translate/conf';\nimport ReactDOMServer from 'react-dom/server';\nimport {isValidHost,isValidMask} from '@app/utils/helpers';\n\nexport default class LanAddressPage extends React.Component {\n constructor(props) {\n super(props)\n axios({\n url: '/api/systeminfo',\n }).then((response) => {\n this.setState(response.data.data)\n }).catch((err) => console.log(err))\n axios({\n url: '/api/network-interfaces',\n }).then((response) => {\n let newState = {\n options: []\n }\n for( const key in response.data.data ){\n if( key.indexOf(\"iface\") != -1 ){\n const value = response.data.data[key]\n newState.options.push()\n }\n }\n if( newState.options.length > 0 ){\n if( newState.options.length > 1 ){\n newState.displayMgntIface = true\n if( response.data.data['change-olt-network'] == true ){\n newState.displayOltIface = true\n }\n }\n this.setState(newState)\n }\n }).catch((err) => console.log(err))\n }\n\n state = {\n mgntIpAddr: '',\n mgntIpMask: '',\n mgntIpGateway: '',\n mgntIface:'',\n oltIpAddr: '',\n oltIpMask: '',\n oltIface: '',\n options: [],\n displayMgntIface: false,\n displayOltIface: false,\n }\n\n handleChangeMgntIp = event => {\n this.setState({\n mgntIpAddr: event.target.value,\n });\n }\n handleChangeMgntIpMask = event => {\n this.setState({\n mgntIpMask: event.target.value,\n });\n }\n handleChangeMgntIpGw = event => {\n this.setState({\n mgntIpGateway: event.target.value,\n });\n }\n handleChangeMgntIface = event => {\n this.setState({\n mgntIface: event.target.value,\n });\n }\n\n handleChangeOltIp = event => {\n this.setState({\n oltIpAddr: event.target.value,\n });\n }\n handleChangeOltMask = event => {\n this.setState({\n oltIpMask: event.target.value,\n });\n }\n handleChangeOltIface = event => {\n this.setState({\n oltIface: event.target.value,\n });\n }\n \n submitForm(bodyFormData){\n axios({\n method: 'post',\n url: '/api/systeminfo',\n data: bodyFormData,\n headers: { 'Content-Type': 'multipart/form-data' }\n }).then((response) => {\n if ( response.data.err !== undefined && response.data.err === \"\" ) {\n toast.success(\n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n { (localStorage.getItem('showOLTAddress') === \"true\") &&\n \n
\n \n
\n
\n \n \n
\n }\n \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n
\n \n \n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n
\n \n \n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n
\n \n \n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n\n
\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n
\n \n \n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
\n \n
\n
\n \n
\n - \n
- \n
\n \n - \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n
\n {getCurrentLanguage().key.toUpperCase()}
\n }\n menuTemplate={languages.map((language) => (\n\n \n \n \n \n \n
\n \n {template}
;\n};\n\nexport default Main;\n","import axios from '../utils/axios';\n\nexport const loginByLocal = async (username, password) => {\n var bodyFormData = {\n username: username,\n password: password,\n }\n let response = await axios({\n method: 'post',\n url: '/api/login',\n data: bodyFormData,\n headers: {'Content-Type': 'application/json' ,\n 'Authorization': `Basic ${localStorage.getItem('token')}`\n },\n })\n //handle success\n if( response.data != \"\" ){\n if( response.data.err == \"\" ){\n return response.data.token; \n } else {\n throw new Error(response.data.err); \n }\n }\n throw new Error(\"Request Server Error\");\n};\n","import React, { useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { toast } from 'react-toastify';\nimport { useFormik } from 'formik';\nimport { useTranslation } from 'react-i18next';\nimport { loginUser } from '@store/reducers/auth';\nimport { Button, Input } from '@components';\nimport { faUser, faLock } from '@fortawesome/free-solid-svg-icons';\nimport * as Yup from 'yup';\nimport * as AuthService from '../../services/auth';\nimport axios from '@utils/axios'\n\n\nconst Login = () => {\n const [isAuthLoading, setAuthLoading] = useState(false);\n const dispatch = useDispatch();\n\n const history = useHistory();\n const {t, i18n} = useTranslation();\n const [isBrFlag, setBrFlag] = useState(i18n.language == 'br');\n\n const login = async (username, password) => {\n try {\n setAuthLoading(true);\n let token = await AuthService.loginByLocal(username, password);\n toast.success(t('Login.Success'));\n dispatch(loginUser(token));\n axios.get('/api/systeminfo').then((res) => {\n if (res.data.data.fwVersion !== undefined) {\n const product = res.data.data.product\n localStorage.setItem('product', product)\n localStorage.setItem('fwVersion', res.data.data.fwVersion)\n localStorage.setItem('showSerialNumber',['G-1u','G-1u-Intr'].indexOf(product) != -1)\n localStorage.setItem('showOLTAddress',['Chassi','G-1u-Intr'].indexOf(product) == -1)\n }\n }).catch((e) => { })\n setAuthLoading(false);\n history.push('/');\n } catch (error) {\n setAuthLoading(false);\n toast.error(error.message);\n }\n };\n\n const formik = useFormik({\n initialValues: {\n username: '',\n password: ''\n },\n validationSchema: Yup.object({\n username: Yup.string()\n .required(t('Login.Required')),\n password: Yup.string()\n .min(4, t('Login.Most4Chars'))\n .max(30, t('Login.Less30Chars'))\n .required(t('Login.Required'))\n }),\n onSubmit: (values) => {\n login(values.username, values.password);\n }\n });\n\n const onClickIdiom = (value) => {\n i18n.changeLanguage(value?'br':'en')\n setBrFlag(value)\n }\n\n document.getElementById('root').classList = 'hold-transition login-page';\n\n return (\n \n
\n );\n};\n\nexport default Login;\n","import React from 'react';\nimport {Redirect, Route} from 'react-router-dom';\nimport {useSelector} from 'react-redux';\n\nconst PublicRoute = ({children, ...rest}) => {\n const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);\n const isAuthenticated = isLoggedIn || localStorage.getItem('token');\n\n return (\n \n
\n \n ![](\"/img/logo.png\")
\n
\n \n \n
\n {t('Login.SignIn')}
\n \n