diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 2d255cd00..988d08276 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -1675,6 +1675,10 @@ "context": "button", "string": "Delete" }, + "src_dot_demo": { + "context": "notification message after log in", + "string": "Just to let you know... You're in demo mode. You can play around with the dashboard but can't save changes." + }, "src_dot_description": { "string": "Description" }, diff --git a/src/auth/AuthProvider.tsx b/src/auth/AuthProvider.tsx index 8cbe0b6df..e5e470b0d 100644 --- a/src/auth/AuthProvider.tsx +++ b/src/auth/AuthProvider.tsx @@ -1,14 +1,14 @@ -import { maybe } from "@saleor/misc"; -import React from "react"; -import { useIntl } from "react-intl"; - +import { DEMO_MODE } from "@saleor/config"; import useNotifier from "@saleor/hooks/useNotifier"; +import { maybe } from "@saleor/misc"; import { isSupported as isCredentialsManagementAPISupported, login as loginWithCredentialsManagementAPI, saveCredentials } from "@saleor/utils/credentialsManagement"; +import React from "react"; import { MutationFunction, MutationResult } from "react-apollo"; +import { useIntl } from "react-intl"; import { UserContext } from "./"; import { @@ -20,7 +20,12 @@ import { RefreshToken, RefreshTokenVariables } from "./types/RefreshToken"; import { TokenAuth, TokenAuthVariables } from "./types/TokenAuth"; import { User } from "./types/User"; import { VerifyToken, VerifyTokenVariables } from "./types/VerifyToken"; -import { getAuthToken, removeAuthToken, setAuthToken } from "./utils"; +import { + displayDemoMessage, + getAuthToken, + removeAuthToken, + setAuthToken +} from "./utils"; interface AuthProviderOperationsProps { children: (props: { @@ -37,13 +42,11 @@ const AuthProviderOperations: React.FC = ({ const intl = useIntl(); const notify = useNotifier(); - const handleLogin = () => - notify({ - text: intl.formatMessage({ - defaultMessage: - "Just to let you know... You're in demo mode. You can play around with the dashboard but can't save changes." - }) - }); + const handleLogin = () => { + if (DEMO_MODE) { + displayDemoMessage(intl, notify); + } + }; return ( @@ -89,7 +92,7 @@ interface AuthProviderProps { MutationFunction, MutationResult ]; - onLogin: () => void; + onLogin?: () => void; } interface AuthProviderState { @@ -153,7 +156,9 @@ class AuthProvider extends React.Component< tokenAuthFn({ variables: { email, password } }).then(result => { if (result && !result.data.tokenCreate.errors.length) { - onLogin(); + if (!!onLogin) { + onLogin(); + } saveCredentials(result.data.tokenCreate.user, password); } }); diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx index 4faa17853..60f1d9d19 100644 --- a/src/auth/components/LoginPage/LoginPage.tsx +++ b/src/auth/components/LoginPage/LoginPage.tsx @@ -4,6 +4,7 @@ import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import Form from "@saleor/components/Form"; import { FormSpacer } from "@saleor/components/FormSpacer"; +import { DEMO_MODE } from "@saleor/config"; import { commonMessages } from "@saleor/intl"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -53,14 +54,16 @@ const LoginCard: React.FC = props => { const classes = useStyles(props); const intl = useIntl(); + let initialFormData = { email: "", password: "" }; + if (DEMO_MODE) { + initialFormData = { + email: "admin@example.com", + password: "admin" + }; + } + return ( -
+ {({ change: handleChange, data, submit: handleSubmit }) => ( <> {error && ( diff --git a/src/auth/utils.ts b/src/auth/utils.ts index f2ed57e85..72ebf3a45 100644 --- a/src/auth/utils.ts +++ b/src/auth/utils.ts @@ -1,3 +1,7 @@ +import { UseNotifierResult } from "@saleor/hooks/useNotifier"; +import { commonMessages } from "@saleor/intl"; +import { IntlShape } from "react-intl"; + const TOKEN_STORAGE_KEY = "dashboardAuth"; export const getAuthToken = () => @@ -13,3 +17,12 @@ export const removeAuthToken = () => { localStorage.removeItem(TOKEN_STORAGE_KEY); sessionStorage.removeItem(TOKEN_STORAGE_KEY); }; + +export const displayDemoMessage = ( + intl: IntlShape, + notify: UseNotifierResult +) => { + notify({ + text: intl.formatMessage(commonMessages.demo) + }); +}; diff --git a/src/config.ts b/src/config.ts index 90b81e7c8..6dee3beb2 100644 --- a/src/config.ts +++ b/src/config.ts @@ -2,7 +2,7 @@ import packageInfo from "../package.json"; import { SearchVariables } from "./hooks/makeSearch"; import { ListSettings, ListViews, Pagination } from "./types"; -export const APP_MOUNT_URI = process.env.APP_MOUNT_URI || "/"; +export const APP_MOUNT_URI = process.env.APP_MOUNT_URI; export const API_URI = process.env.API_URI; export const DEFAULT_INITIAL_SEARCH_DATA: SearchVariables = { @@ -90,3 +90,5 @@ export const defaultListSettings: AppListViewSettings = { }; export const APP_VERSION = packageInfo.version; +export const DEMO_MODE = process.env.DEMO_MODE === "true"; +export const GTM_ID = process.env.GTM_ID; diff --git a/src/index.tsx b/src/index.tsx index 0b99b5ff7..45625ac19 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,5 @@ +import Navigator from "@saleor/components/Navigator"; +import useAppState from "@saleor/hooks/useAppState"; import { defaultDataIdFromObject, InMemoryCache } from "apollo-cache-inmemory"; import { ApolloClient } from "apollo-client"; import { ApolloLink } from "apollo-link"; @@ -9,12 +11,10 @@ import React from "react"; import { ApolloProvider } from "react-apollo"; import { render } from "react-dom"; import ErrorBoundary from "react-error-boundary"; +import TagManager from "react-gtm-module"; import { useIntl } from "react-intl"; import { BrowserRouter, Route, Switch } from "react-router-dom"; -import Navigator from "@saleor/components/Navigator"; -import useAppState from "@saleor/hooks/useAppState"; -import TagManager from "react-gtm-module"; import AttributeSection from "./attributes"; import { attributeSection } from "./attributes/urls"; import Auth, { getAuthToken, removeAuthToken } from "./auth"; diff --git a/src/intl.ts b/src/intl.ts index 479b630dc..43c150b65 100644 --- a/src/intl.ts +++ b/src/intl.ts @@ -10,6 +10,11 @@ export const commonMessages = defineMessages({ dashboard: { defaultMessage: "Dashboard" }, + demo: { + defaultMessage: + "Just to let you know... You're in demo mode. You can play around with the dashboard but can't save changes.", + description: "notification message after log in" + }, description: { defaultMessage: "Description" },