MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

added site logo

Browse Source
This commit is contained in:
victorAnumudu
2024-12-09 06:29:27 +01:00
parent 3041e3e748
commit 5e7d1672b9
10 changed files with 130 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+1 -1
View File
@@ -1,7 +1,7 @@
SKIP_PREFLIGHT_CHECK=true
REACT_APP_NODE_ENV="development"
REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
REACT_APP_MAIN_API="https://dev-api.mermsemr.com"
REACT_APP_MAIN_API="https://devapi.mermsemr.com"
REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
# Inactivity timeout/logout AT 10MINS
.env.development
+1 -1
View File
@@ -1,7 +1,7 @@
SKIP_PREFLIGHT_CHECK=true
REACT_APP_NODE_ENV="development"
REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
REACT_APP_MAIN_API="https://dev-api.mermsemr.com"
REACT_APP_MAIN_API="https://devapi.mermsemr.com/"
REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
# Inactivity timeout/logout AT 10MINS
package.json
+2
View File
@@ -4,10 +4,12 @@
"private": true,
"dependencies": {
"@popperjs/core": "^2.11.8",
"@tanstack/react-query": "^5.62.3",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"apexcharts": "^4.1.0",
"axios": "^1.7.9",
"bootstrap": "^5.3.3",
"react": "^18.3.1",
"react-apexcharts": "^1.7.0",
src/App.js
+17 -37
View File
@@ -1,47 +1,27 @@
import { Routes, Route } from 'react-router-dom';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
import AppRouters from './AppRouters';
import axios from 'axios';
// import './App.css';
import UserExist from './component/authorization/UserExist';
import AuthLayout from './component/auth/AuthLayout';
import siteLinks from './links/siteLinks';
import LoginPage from './views/LoginPage';
import SignupPage from './views/SignupPage';
import ForgetpwdPage from './views/ForgetpwdPage';
import HomePage from './views/HomePage';
import ReportsPage from './views/ReportsPage'
import CommentsPage from './views/CommentsPage'
import ContactsPage from './views/ContactsPage'
import UserPage from './views/UserPage'
import CalendarPage from './views/CalendarPage'
import SettingsPage from './views/SettingsPage'
// axios.interceptors.request.use(
// config => {
// config.headers['Authorization'] = `Bearer localStorage.getItem('access_token')`;
// config.baseURL = 'https://devapi.mermsemr.com'
// return config;
// },
// error => {
// return Promise.reject(error);
// }
// );
function App() {
const queryClient = new QueryClient()
return (
<div className="">
<Routes>
{/* auth routes wrapper */}
<Route element={<AuthLayout />}>
<Route path={siteLinks.home} element={<LoginPage />} />
<Route path={siteLinks.login} element={<LoginPage />} />
<Route path={siteLinks.signup} element={<SignupPage />} />
<Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
<Route path={siteLinks.error} element={<ForgetpwdPage />} />
</Route>
{/* protected routes */}
<Route element={<UserExist />}>
<Route path={siteLinks.dash} element={<HomePage />} />
<Route path={siteLinks.reports} element={<ReportsPage />} />
<Route path={siteLinks.comments} element={<CommentsPage />} />
<Route path={siteLinks.contacts} element={<ContactsPage />} />
<Route path={siteLinks.user} element={<UserPage />} />
<Route path={siteLinks.calendar} element={<CalendarPage />} />
<Route path={siteLinks.settings} element={<SettingsPage />} />
</Route>
</Routes>
</div>
<QueryClientProvider client={queryClient}>
<AppRouters />
</QueryClientProvider>
);
}
src/AppRouters.jsx
+47
View File
@@ -0,0 +1,47 @@
import { Routes, Route } from 'react-router-dom';
import UserExist from './component/authorization/UserExist';
import AuthLayout from './component/auth/AuthLayout';
import siteLinks from './links/siteLinks';
import LoginPage from './views/LoginPage';
import SignupPage from './views/SignupPage';
import ForgetpwdPage from './views/ForgetpwdPage';
import HomePage from './views/HomePage';
import ReportsPage from './views/ReportsPage'
import CommentsPage from './views/CommentsPage'
import ContactsPage from './views/ContactsPage'
import UserPage from './views/UserPage'
import CalendarPage from './views/CalendarPage'
import SettingsPage from './views/SettingsPage'
function AppRouters() {
return (
<div className="">
<Routes>
{/* auth routes wrapper */}
<Route element={<AuthLayout />}>
<Route path={siteLinks.home} element={<LoginPage />} />
<Route path={siteLinks.login} element={<LoginPage />} />
<Route path={siteLinks.signup} element={<SignupPage />} />
<Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
<Route path={siteLinks.error} element={<ForgetpwdPage />} />
</Route>
{/* protected routes */}
<Route element={<UserExist />}>
<Route path={siteLinks.dash} element={<HomePage />} />
<Route path={siteLinks.reports} element={<ReportsPage />} />
<Route path={siteLinks.comments} element={<CommentsPage />} />
<Route path={siteLinks.contacts} element={<ContactsPage />} />
<Route path={siteLinks.user} element={<UserPage />} />
<Route path={siteLinks.calendar} element={<CalendarPage />} />
<Route path={siteLinks.settings} element={<SettingsPage />} />
</Route>
</Routes>
</div>
);
}
export default AppRouters;
src/assets/img/_logo-light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

src/assets/img/logo-light.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

src/component/auth/Login2.jsx
+27 -4
View File
@@ -1,13 +1,36 @@
import React from 'react'
import React, { useState } from 'react'
import { useMutation } from '@tanstack/react-query'
import LoginImg from '../../assets/bg/login.svg'
import { Link, useNavigate } from 'react-router-dom'
import siteLinks from '../../links/siteLinks'
import { loginUser } from '../../services/services'
export default function Login() {
const navigate = useNavigate()
const [fields, setFields] = useState({
username: '',
password: ''
})
const handleChange = ({target:{name, value}}) => {
console.log('working')
setFields(prev => ({...prev, [name]:value}))
}
const login = useMutation({
mutationFn: (fields) => {
return loginUser('panel/auth/login', fields)
},
onError: (error) => {
console.log('error', error)
navigate('/dash') // remove later
},
})
return (
<div className="app">
<div className="app-wrap">
@@ -25,13 +48,13 @@ export default function Login() {
<div className="col-12">
<div className="form-group">
<label className="control-label">User Name*</label>
<input type="text" className="form-control" placeholder="Username" />
<input name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
</div>
</div>
<div className="col-12">
<div className="form-group">
<label className="control-label">Password*</label>
<input type="password" className="form-control" placeholder="Password" />
<input name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
</div>
</div>
<div className="col-12">
@@ -46,7 +69,7 @@ export default function Login() {
</div>
</div>
<div className="col-12 mt-3">
<button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Sign In</button>
<button type='button' onClick={()=>{login.mutate(fields)}} className="btn btn-primary text-uppercase">{login.isPending ? 'loading...' : 'Sign In'}</button>
</div>
<div className="col-12 mt-3">
<p>Don't have an account ?<Link to={siteLinks.signup}> Sign Up</Link></p>
src/component/layout/layoutcom/UserHeader.jsx
+6 -1
View File
@@ -9,6 +9,11 @@ export default function UserHeader(){
document.body.classList.toggle('sidebar-toggled')
}
const removeSidebar = (e) => {
e.preventDefault()
document.body.classList.remove('sidebar-toggled')
}
// const toggleSidebarMini = (e) => {
// e.preventDefault()
// }
@@ -23,7 +28,7 @@ export default function UserHeader(){
<img src={getImage('logo-icon.png')} className="img-fluid logo-mobile" alt="logo"/>
</a>
</div>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse"
<button onClick={removeSidebar} className="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<i className="ti ti-align-left"></i>
src/services/services.js
+29
View File
@@ -0,0 +1,29 @@
import axios from "axios"
axios.interceptors.request.use(
config => {
// config.headers = {
// Accept: "application/json",
// "Access-Control-Allow-Origin": "*",
// "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
// "Access-Control-Allow-Headers":
// "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
// "Content-Type": "application/json;charset=UTF-8",
// 'Authorization': '22222'
// };
config.headers['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
config.baseURL = process.env.REACT_APP_MAIN_API
return config;
},
error => {
return Promise.reject(error);
}
);
export const loginUser = (path, reqData) => {
let postData = {
...reqData
}
return axios.post(path, postData)
}