Added @flare/tuitio-client-react in CDN app
parent
33983a785d
commit
a99436e440
2
.env
2
.env
|
|
@ -1,4 +1,4 @@
|
|||
REACT_APP_IDENTITY_AUTHENTICATION_URL=https://lab.code-rove.com/identity-server-api/identity/authenticate?UserName={username}&Password={password}
|
||||
REACT_APP_TUITIO_URL=https://lab.code-rove.com/tuitio
|
||||
REACT_APP_ENABLE_TEMPLATE_CONTENT=True
|
||||
#REACT_APP_CDN_URL=http://localhost:5050
|
||||
REACT_APP_CDN_URL=https://lab.code-rove.com/cdn
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
PUBLIC_URL=/cdn-admin/
|
||||
REACT_APP_IDENTITY_AUTHENTICATION_URL=https://lab.code-rove.com/identity-server-api/identity/authenticate?UserName={username}&Password={password}
|
||||
REACT_APP_TUITIO_URL=https://lab.code-rove.com/tuitio
|
||||
REACT_APP_ENABLE_TEMPLATE_CONTENT=False
|
||||
REACT_APP_CDN_URL=https://lab.code-rove.com/cdn
|
||||
|
|
@ -1325,9 +1325,53 @@
|
|||
}
|
||||
},
|
||||
"@flare/js-utils": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://lab.code-rove.com/public-node-registry/@flare%2fjs-utils/-/js-utils-1.0.2.tgz",
|
||||
"integrity": "sha512-49KjpcRUD6fXPC60bmCsPa8frU6wlQyI5RsjMD70zsuvk8BZFdopsETsjsCembbmzTScIhfMACU4RnimOEwg9Q=="
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://lab.code-rove.com/public-node-registry/@flare/js-utils/-/js-utils-1.0.3.tgz",
|
||||
"integrity": "sha512-VgXQHoQEVZ/71B6YQHQP8/Yd/w1smGD+kCCiNvJKZ1xMD3nkN9mjoHxIqbOJMZ2q5PZlV6gXYT7eVol8Wm+D0A=="
|
||||
},
|
||||
"@flare/tuitio-client": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client/-/tuitio-client-1.1.0.tgz",
|
||||
"integrity": "sha512-m2cYFaIdHx6eGqSo1V9Rx5sy8Zz5Y/y02OCTwuA++QceJLelUeUID+ymEts54nkG6nFxsGRBaNhpcC5lwsPMng==",
|
||||
"requires": {
|
||||
"@flare/js-utils": "^1.0.3",
|
||||
"axios": "^1.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
|
||||
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
|
||||
},
|
||||
"form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"requires": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@flare/tuitio-client-react": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.1.1.tgz",
|
||||
"integrity": "sha512-CTxc1Ra0b3RcMuHakIw5B+d/n/42N8s64avXPAWKmWfBkuOIdPJ3P9s2kpG+CV2MIBlUCPSTbfOi+Ve1pf/cig==",
|
||||
"requires": {
|
||||
"@flare/tuitio-client": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"@gar/promisify": {
|
||||
"version": "1.1.3",
|
||||
|
|
@ -3391,11 +3435,30 @@
|
|||
"integrity": "sha512-lCZN5XRuOnpG4bpMq8v0khrWtUOn+i8lZSb6wHZH56ZfbIEv6XwJV84AAueh9/zi7qPVJ/E4yz6fmsiyOmXR4w=="
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
|
||||
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10"
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"follow-redirects": {
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
|
||||
},
|
||||
"form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"requires": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"axobject-query": {
|
||||
|
|
@ -12806,6 +12869,11 @@
|
|||
"ipaddr.js": "1.9.1"
|
||||
}
|
||||
},
|
||||
"proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"prr": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
"node-fetch": "^2.6.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@flare/js-utils": "^1.0.2",
|
||||
"@flare/js-utils": "^1.0.3",
|
||||
"@flare/tuitio-client-react": "^1.1.1",
|
||||
"@material-ui/core": "^4.11.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@material-ui/lab": "^4.0.0-alpha.60",
|
||||
|
|
@ -28,7 +29,7 @@
|
|||
"@mdi/react": "^1.4.0",
|
||||
"@babel/eslint-parser": "^7.16.5",
|
||||
"apexcharts": "^3.24.0",
|
||||
"axios": "^0.19.2",
|
||||
"axios": "^1.3.4",
|
||||
"classnames": "^2.2.6",
|
||||
"font-awesome": "^4.7.0",
|
||||
"i18next": "^19.4.4",
|
||||
|
|
|
|||
|
|
@ -8,21 +8,10 @@ import Layout from "./Layout/Layout";
|
|||
import Error from "../pages/error";
|
||||
import Login from "../pages/login";
|
||||
import ServerNotAvailable from "../features/server/availability/components/ServerNotAvailable";
|
||||
|
||||
// context
|
||||
import { useUserState } from "../contexts/UserContext";
|
||||
import { useToast } from "../contexts/ToastContext";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTuitioToken } from "@flare/tuitio-client-react";
|
||||
|
||||
export default function App() {
|
||||
const { authenticated, messageCode } = useUserState();
|
||||
const { t } = useTranslation();
|
||||
const { notify } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
if (!messageCode) return;
|
||||
notify(t(messageCode), "error");
|
||||
}, [messageCode, t, notify]);
|
||||
const { valid: authenticated } = useTuitioToken();
|
||||
|
||||
return (
|
||||
<BrowserRouter basename={process.env.PUBLIC_URL || ""}>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@ import {
|
|||
useLayoutDispatch,
|
||||
toggleSidebar
|
||||
} from "../../contexts/LayoutContext";
|
||||
import { useUserDispatch, signOut } from "../../contexts/UserContext";
|
||||
import { useTuitioClient } from "@flare/tuitio-client-react";
|
||||
import { useToast } from "../../hooks";
|
||||
|
||||
const messages = [
|
||||
{
|
||||
|
|
@ -94,7 +95,6 @@ export default function Header(props) {
|
|||
// global
|
||||
var layoutState = useLayoutState();
|
||||
var layoutDispatch = useLayoutDispatch();
|
||||
var userDispatch = useUserDispatch();
|
||||
|
||||
// local
|
||||
var [mailMenu, setMailMenu] = useState(null);
|
||||
|
|
@ -104,6 +104,12 @@ export default function Header(props) {
|
|||
var [profileMenu, setProfileMenu] = useState(null);
|
||||
var [isSearchOpen, setSearchOpen] = useState(false);
|
||||
|
||||
const { error } = useToast();
|
||||
const { logout } = useTuitioClient({
|
||||
onLogoutFailed: (errorMessage) => error(errorMessage),
|
||||
onLogoutError: (err) => error(err.message)
|
||||
});
|
||||
|
||||
return (
|
||||
<AppBar position="fixed" className={classes.appBar}>
|
||||
<Toolbar className={classes.toolbar}>
|
||||
|
|
@ -320,7 +326,7 @@ export default function Header(props) {
|
|||
<Typography
|
||||
className={classes.profileMenuLink}
|
||||
color="primary"
|
||||
onClick={() => signOut(userDispatch, props.history)}
|
||||
onClick={logout}
|
||||
>
|
||||
Sign Out
|
||||
</Typography>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { makeStyles } from "@material-ui/styles";
|
||||
import { fade } from "@material-ui/core/styles/colorManipulator";
|
||||
import { alpha } from "@material-ui/core/styles";
|
||||
|
||||
export default makeStyles(theme => ({
|
||||
export default makeStyles((theme) => ({
|
||||
logotype: {
|
||||
color: "white",
|
||||
marginLeft: theme.spacing(2.5),
|
||||
|
|
@ -10,45 +10,45 @@ export default makeStyles(theme => ({
|
|||
fontSize: 18,
|
||||
whiteSpace: "nowrap",
|
||||
[theme.breakpoints.down("xs")]: {
|
||||
display: "none",
|
||||
},
|
||||
display: "none"
|
||||
}
|
||||
},
|
||||
appBar: {
|
||||
width: "100vw",
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
transition: theme.transitions.create(["margin"], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
duration: theme.transitions.duration.leavingScreen
|
||||
})
|
||||
},
|
||||
toolbar: {
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingRight: theme.spacing(2),
|
||||
paddingRight: theme.spacing(2)
|
||||
},
|
||||
hide: {
|
||||
display: "none",
|
||||
display: "none"
|
||||
},
|
||||
grow: {
|
||||
flexGrow: 1,
|
||||
flexGrow: 1
|
||||
},
|
||||
search: {
|
||||
position: "relative",
|
||||
borderRadius: 25,
|
||||
paddingLeft: theme.spacing(2.5),
|
||||
width: 36,
|
||||
backgroundColor: fade(theme.palette.common.black, 0),
|
||||
backgroundColor: alpha(theme.palette.common.black, 0),
|
||||
transition: theme.transitions.create(["background-color", "width"]),
|
||||
"&:hover": {
|
||||
cursor: "pointer",
|
||||
backgroundColor: fade(theme.palette.common.black, 0.08),
|
||||
},
|
||||
backgroundColor: alpha(theme.palette.common.black, 0.08)
|
||||
}
|
||||
},
|
||||
searchFocused: {
|
||||
backgroundColor: fade(theme.palette.common.black, 0.08),
|
||||
backgroundColor: alpha(theme.palette.common.black, 0.08),
|
||||
width: "100%",
|
||||
[theme.breakpoints.up("md")]: {
|
||||
width: 250,
|
||||
},
|
||||
width: 250
|
||||
}
|
||||
},
|
||||
searchIcon: {
|
||||
width: 36,
|
||||
|
|
@ -60,115 +60,115 @@ export default makeStyles(theme => ({
|
|||
justifyContent: "center",
|
||||
transition: theme.transitions.create("right"),
|
||||
"&:hover": {
|
||||
cursor: "pointer",
|
||||
},
|
||||
cursor: "pointer"
|
||||
}
|
||||
},
|
||||
searchIconOpened: {
|
||||
right: theme.spacing(1.25),
|
||||
right: theme.spacing(1.25)
|
||||
},
|
||||
inputRoot: {
|
||||
color: "inherit",
|
||||
width: "100%",
|
||||
width: "100%"
|
||||
},
|
||||
inputInput: {
|
||||
height: 36,
|
||||
padding: 0,
|
||||
paddingRight: 36 + theme.spacing(1.25),
|
||||
width: "100%",
|
||||
width: "100%"
|
||||
},
|
||||
messageContent: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexDirection: "column"
|
||||
},
|
||||
headerMenu: {
|
||||
marginTop: theme.spacing(7),
|
||||
marginTop: theme.spacing(7)
|
||||
},
|
||||
headerMenuList: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexDirection: "column"
|
||||
},
|
||||
headerMenuItem: {
|
||||
"&:hover, &:focus": {
|
||||
backgroundColor: theme.palette.background.light,
|
||||
backgroundColor: theme.palette.background.light
|
||||
// color: "white",
|
||||
},
|
||||
}
|
||||
},
|
||||
headerMenuButton: {
|
||||
marginLeft: theme.spacing(2),
|
||||
padding: theme.spacing(0.5),
|
||||
padding: theme.spacing(0.5)
|
||||
},
|
||||
headerMenuButtonSandwich: {
|
||||
marginLeft: 9,
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
marginLeft: 0
|
||||
},
|
||||
padding: theme.spacing(0.5),
|
||||
padding: theme.spacing(0.5)
|
||||
},
|
||||
headerMenuButtonCollapse: {
|
||||
marginRight: theme.spacing(2),
|
||||
marginRight: theme.spacing(2)
|
||||
},
|
||||
headerIcon: {
|
||||
fontSize: 28,
|
||||
color: "rgba(255, 255, 255, 0.35)",
|
||||
color: "rgba(255, 255, 255, 0.35)"
|
||||
},
|
||||
headerIconCollapse: {
|
||||
color: "white",
|
||||
color: "white"
|
||||
},
|
||||
profileMenu: {
|
||||
minWidth: 265,
|
||||
minWidth: 265
|
||||
},
|
||||
profileMenuUser: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: theme.spacing(2),
|
||||
padding: theme.spacing(2)
|
||||
},
|
||||
profileMenuItem: {
|
||||
color: theme.palette.text.hint,
|
||||
color: theme.palette.text.hint
|
||||
},
|
||||
profileMenuIcon: {
|
||||
marginRight: theme.spacing(2),
|
||||
color: theme.palette.text.hint,
|
||||
'&:hover': {
|
||||
color: theme.palette.primary.main,
|
||||
"&:hover": {
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
},
|
||||
profileMenuLink: {
|
||||
fontSize: 16,
|
||||
textDecoration: "none",
|
||||
"&:hover": {
|
||||
cursor: "pointer",
|
||||
},
|
||||
cursor: "pointer"
|
||||
}
|
||||
},
|
||||
messageNotification: {
|
||||
height: "auto",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
"&:hover, &:focus": {
|
||||
backgroundColor: theme.palette.background.light,
|
||||
},
|
||||
backgroundColor: theme.palette.background.light
|
||||
}
|
||||
},
|
||||
messageNotificationSide: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
marginRight: theme.spacing(2),
|
||||
marginRight: theme.spacing(2)
|
||||
},
|
||||
messageNotificationBodySide: {
|
||||
alignItems: "flex-start",
|
||||
marginRight: 0,
|
||||
marginRight: 0
|
||||
},
|
||||
sendMessageButton: {
|
||||
margin: theme.spacing(4),
|
||||
marginTop: theme.spacing(2),
|
||||
marginBottom: theme.spacing(2),
|
||||
textTransform: "none",
|
||||
textTransform: "none"
|
||||
},
|
||||
sendButtonIcon: {
|
||||
marginLeft: theme.spacing(2),
|
||||
marginLeft: theme.spacing(2)
|
||||
},
|
||||
purchaseBtn: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
display: 'none'
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
display: "none"
|
||||
},
|
||||
marginRight: theme.spacing(3)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export default function Widget({
|
|||
aria-owns="widget-menu"
|
||||
aria-haspopup="true"
|
||||
onClick={() => setMoreMenuOpen(true)}
|
||||
buttonRef={setMoreButtonRef}
|
||||
ref={setMoreButtonRef}
|
||||
>
|
||||
<MoreIcon />
|
||||
</IconButton>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const Widget = ({
|
|||
aria-owns="widget-menu"
|
||||
aria-haspopup="true"
|
||||
onClick={() => props.setMoreMenuOpen(true)}
|
||||
buttonRef={props.setMoreButtonRef}
|
||||
ref={props.setMoreButtonRef}
|
||||
>
|
||||
<MoreIcon />
|
||||
</IconButton>
|
||||
|
|
@ -77,7 +77,7 @@ const Widget = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const styles = theme => ({
|
||||
const styles = (theme) => ({
|
||||
widgetWrapper: {
|
||||
display: "flex",
|
||||
minHeight: "100%"
|
||||
|
|
|
|||
|
|
@ -1,100 +0,0 @@
|
|||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { authenticate, invalidate, validateToken } from "../utils/identity";
|
||||
|
||||
var UserStateContext = React.createContext();
|
||||
var UserDispatchContext = React.createContext();
|
||||
|
||||
function userReducer(state, action) {
|
||||
switch (action.type) {
|
||||
case "LOGIN_SUCCESS":
|
||||
return { ...state, ...action.payload, authenticated: true };
|
||||
case "SIGN_OUT_SUCCESS":
|
||||
return { ...state, authenticated: false };
|
||||
case "LOGIN_FAILURE":
|
||||
return {
|
||||
...state,
|
||||
authenticated: false,
|
||||
messageCode: action.payload?.messageCode
|
||||
};
|
||||
default: {
|
||||
throw new Error(`Unhandled action type: ${action.type}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function UserProvider({ children }) {
|
||||
const { valid, token } = validateToken();
|
||||
var [state, dispatch] = React.useReducer(userReducer, {
|
||||
authenticated: valid === true,
|
||||
token
|
||||
});
|
||||
|
||||
return (
|
||||
<UserStateContext.Provider value={state}>
|
||||
<UserDispatchContext.Provider value={dispatch}>
|
||||
{children}
|
||||
</UserDispatchContext.Provider>
|
||||
</UserStateContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
UserProvider.propTypes = {
|
||||
children: PropTypes.node
|
||||
};
|
||||
|
||||
function useUserState() {
|
||||
var context = React.useContext(UserStateContext);
|
||||
if (context === undefined) {
|
||||
throw new Error("useUserState must be used within a UserProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
function useUserDispatch() {
|
||||
var context = React.useContext(UserDispatchContext);
|
||||
if (context === undefined) {
|
||||
throw new Error("useUserDispatch must be used within a UserProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
function setLoginFailed(dispatch, setError, setIsLoading, messageCode) {
|
||||
dispatch({ type: "LOGIN_FAILURE", payload: { messageCode } });
|
||||
setError(true);
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
function loginUser(dispatch, login, password, history, setIsLoading, setError) {
|
||||
setError(false);
|
||||
setIsLoading(true);
|
||||
|
||||
if (!!login && !!password) {
|
||||
authenticate(login, password).then((response) => {
|
||||
if (response.status === "SUCCESS") {
|
||||
setError(null);
|
||||
setIsLoading(false);
|
||||
dispatch({ type: "LOGIN_SUCCESS", payload: { token: response.token } });
|
||||
} else if (response.status === "BAD_CREDENTIALS") {
|
||||
setLoginFailed(
|
||||
dispatch,
|
||||
setError,
|
||||
setIsLoading,
|
||||
"Login.IncorrectCredentials"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
history.push("/dashboard");
|
||||
} else {
|
||||
setLoginFailed(dispatch, setError, setIsLoading, "Login.EmptyCredentials");
|
||||
}
|
||||
}
|
||||
|
||||
function signOut(dispatch, history) {
|
||||
invalidate();
|
||||
dispatch({ type: "SIGN_OUT_SUCCESS" });
|
||||
history.push("/login");
|
||||
}
|
||||
|
||||
export { UserProvider, useUserState, useUserDispatch, loginUser, signOut };
|
||||
|
|
@ -136,7 +136,7 @@ const ResourceComponent = ({
|
|||
<TextField
|
||||
fullWidth
|
||||
multiline
|
||||
rows={2}
|
||||
minRows={2}
|
||||
id="resource-description"
|
||||
label={t("Resource.Description")}
|
||||
variant="outlined"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { LoadingText } from "../../../../components";
|
|||
import ResourceComponent from "./ResourceComponent";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import style from "../styles";
|
||||
import { useToast } from "../../../../hooks";
|
||||
|
||||
const useStyles = makeStyles(style);
|
||||
|
||||
|
|
@ -21,7 +20,6 @@ const ResourceContainer = () => {
|
|||
const params = useParams();
|
||||
const { getResource } = useResourcesApi();
|
||||
const { getMimeTypes, getResourceCategories } = useDictionariesApi();
|
||||
const { success } = useToast();
|
||||
|
||||
const isNew = useMemo(() => params.id === "new", [params.id]);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import { useUserState } from "../contexts/UserContext";
|
||||
import { useTuitioToken } from "@flare/tuitio-client-react";
|
||||
import { useCallback } from "react";
|
||||
|
||||
const useResourceSecurity = () => {
|
||||
const { token } = useUserState();
|
||||
const { token } = useTuitioToken();
|
||||
const secureUrl = useCallback(
|
||||
(url) => {
|
||||
const separator = url.includes("?") ? "&" : "?";
|
||||
const securedUrl = `${url}${separator}token=${token.raw}`;
|
||||
const securedUrl = `${url}${separator}token=${token}`;
|
||||
return securedUrl;
|
||||
},
|
||||
[token.raw]
|
||||
[token]
|
||||
);
|
||||
|
||||
return { secureUrl };
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import React, { Suspense } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { TuitioProvider } from "@flare/tuitio-client-react";
|
||||
import { ThemeProvider } from "@material-ui/styles";
|
||||
import { CssBaseline } from "@material-ui/core";
|
||||
import Themes from "./themes";
|
||||
import App from "./components/App";
|
||||
import * as serviceWorker from "./serviceWorker";
|
||||
import { LayoutProvider } from "./contexts/LayoutContext";
|
||||
import { UserProvider } from "./contexts/UserContext";
|
||||
import { ToastProvider } from "./contexts/ToastContext";
|
||||
import "./utils/i18n";
|
||||
|
||||
ReactDOM.render(
|
||||
<LayoutProvider>
|
||||
<UserProvider>
|
||||
<TuitioProvider tuitioUrl={process.env.REACT_APP_TUITIO_URL}>
|
||||
<ThemeProvider theme={Themes.default}>
|
||||
<CssBaseline />
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
|
|
@ -21,7 +21,7 @@ ReactDOM.render(
|
|||
</ToastProvider>
|
||||
</Suspense>
|
||||
</ThemeProvider>
|
||||
</UserProvider>
|
||||
</TuitioProvider>
|
||||
</LayoutProvider>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
|
|
|||
|
|
@ -18,23 +18,32 @@ import useStyles from "./styles";
|
|||
// logo
|
||||
import logo from "./logo.svg";
|
||||
import google from "../../images/google.svg";
|
||||
import { useToast } from "../../hooks";
|
||||
import { useTuitioClient } from "@flare/tuitio-client-react";
|
||||
|
||||
// context
|
||||
import { useUserDispatch, loginUser } from "../../contexts/UserContext";
|
||||
function Login() {
|
||||
const classes = useStyles();
|
||||
const [activeTabId, setActiveTabId] = useState(0);
|
||||
const [nameValue, setNameValue] = useState("");
|
||||
const [loginValue, setLoginValue] = useState("");
|
||||
const [passwordValue, setPasswordValue] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [errorEncountered, setErrorEncountered] = useState(false);
|
||||
|
||||
function Login(props) {
|
||||
var classes = useStyles();
|
||||
const { error } = useToast();
|
||||
const { login } = useTuitioClient({
|
||||
onLoginSuccess: () => setIsLoading(false),
|
||||
onLoginFailed: () => error(t("Login.IncorrectCredentials")),
|
||||
onLoginError: (err) => {
|
||||
setErrorEncountered(true);
|
||||
error(err.message);
|
||||
}
|
||||
});
|
||||
|
||||
// global
|
||||
var userDispatch = useUserDispatch();
|
||||
|
||||
// local
|
||||
var [isLoading, setIsLoading] = useState(false);
|
||||
var [error, setError] = useState(null);
|
||||
var [activeTabId, setActiveTabId] = useState(0);
|
||||
var [nameValue, setNameValue] = useState("");
|
||||
var [loginValue, setLoginValue] = useState("");
|
||||
var [passwordValue, setPasswordValue] = useState("");
|
||||
const handleLogin = () => {
|
||||
setIsLoading(true);
|
||||
login(loginValue, passwordValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid container className={classes.container}>
|
||||
|
|
@ -68,7 +77,7 @@ function Login(props) {
|
|||
<Typography className={classes.formDividerWord}>or</Typography>
|
||||
<div className={classes.formDivider} />
|
||||
</div>
|
||||
<Fade in={error}>
|
||||
<Fade in={errorEncountered}>
|
||||
<Typography color="secondary" className={classes.errorMessage}>
|
||||
Something is wrong with your login or password :(
|
||||
</Typography>
|
||||
|
|
@ -111,16 +120,7 @@ function Login(props) {
|
|||
disabled={
|
||||
loginValue.length === 0 || passwordValue.length === 0
|
||||
}
|
||||
onClick={() =>
|
||||
loginUser(
|
||||
userDispatch,
|
||||
loginValue,
|
||||
passwordValue,
|
||||
props.history,
|
||||
setIsLoading,
|
||||
setError
|
||||
)
|
||||
}
|
||||
onClick={handleLogin}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
|
|
@ -201,16 +201,7 @@ function Login(props) {
|
|||
<CircularProgress size={26} />
|
||||
) : (
|
||||
<Button
|
||||
onClick={() =>
|
||||
loginUser(
|
||||
userDispatch,
|
||||
loginValue,
|
||||
passwordValue,
|
||||
props.history,
|
||||
setIsLoading,
|
||||
setError
|
||||
)
|
||||
}
|
||||
onClick={handleLogin}
|
||||
disabled={
|
||||
loginValue.length === 0 ||
|
||||
passwordValue.length === 0 ||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,31 @@
|
|||
import defaultTheme from "./default";
|
||||
|
||||
import { createMuiTheme } from "@material-ui/core";
|
||||
import { createTheme } from "@material-ui/core/styles";
|
||||
|
||||
const overrides = {
|
||||
typography: {
|
||||
h1: {
|
||||
fontSize: "3rem",
|
||||
fontSize: "3rem"
|
||||
},
|
||||
h2: {
|
||||
fontSize: "2rem",
|
||||
fontSize: "2rem"
|
||||
},
|
||||
h3: {
|
||||
fontSize: "1.64rem",
|
||||
fontSize: "1.64rem"
|
||||
},
|
||||
h4: {
|
||||
fontSize: "1.5rem",
|
||||
fontSize: "1.5rem"
|
||||
},
|
||||
h5: {
|
||||
fontSize: "1.285rem",
|
||||
fontSize: "1.285rem"
|
||||
},
|
||||
h6: {
|
||||
fontSize: "1.142rem",
|
||||
},
|
||||
},
|
||||
fontSize: "1.142rem"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const themes = {
|
||||
default: createMuiTheme({ ...defaultTheme, ...overrides }),
|
||||
default: createTheme({ ...defaultTheme, ...overrides })
|
||||
};
|
||||
|
||||
export default themes;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
import axios from "axios";
|
||||
import i18next from "i18next";
|
||||
import { storageKeys } from "./identity";
|
||||
import { localStorage } from "@flare/js-utils";
|
||||
|
||||
const { getItem } = localStorage;
|
||||
import { fetch as fetchTuitioData } from "@flare/tuitio-client";
|
||||
|
||||
function getHeaders() {
|
||||
const token = getItem(storageKeys.TOKEN);
|
||||
const { token } = fetchTuitioData();
|
||||
const language = i18next.language;
|
||||
|
||||
return {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Basic ${token.raw}`,
|
||||
Authorization: `Tuitio ${token}`,
|
||||
"Accept-Language": `${language}`
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
import { request } from "./axios";
|
||||
import { localStorage } from "@flare/js-utils";
|
||||
|
||||
const { setItem, getItem, removeItem } = localStorage;
|
||||
|
||||
const storageKeys = {
|
||||
TOKEN: "AUTHORIZATION_TOKEN",
|
||||
USER: "USER_NAME"
|
||||
};
|
||||
|
||||
const authenticate = async (userName, password) => {
|
||||
const urlTemplate = process.env.REACT_APP_IDENTITY_AUTHENTICATION_URL;
|
||||
const url = urlTemplate
|
||||
.replace("{username}", userName)
|
||||
.replace("{password}", password);
|
||||
const options = {
|
||||
method: "post"
|
||||
};
|
||||
|
||||
const response = await request(url, options);
|
||||
if (response.status === "SUCCESS") {
|
||||
setItem(storageKeys.TOKEN, response.token);
|
||||
setItem(storageKeys.USER, userName);
|
||||
}
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
const invalidate = () => {
|
||||
const token = getItem(storageKeys.TOKEN);
|
||||
if (token) {
|
||||
removeItem(storageKeys.TOKEN);
|
||||
removeItem(storageKeys.USER);
|
||||
}
|
||||
};
|
||||
|
||||
const validateToken = () => {
|
||||
let token = getItem(storageKeys.TOKEN);
|
||||
if (!token) {
|
||||
return { valid: false };
|
||||
}
|
||||
|
||||
const valid = new Date(token.validUntil) >= new Date();
|
||||
if (!valid) {
|
||||
invalidate();
|
||||
token = null;
|
||||
}
|
||||
|
||||
return { valid, token };
|
||||
};
|
||||
|
||||
export { storageKeys, authenticate, invalidate, validateToken };
|
||||
Loading…
Reference in New Issue