From a9d98d44cdd9989028a4a24fedd2cfb739594acd Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 6 Dec 2022 13:05:27 +0530 Subject: [PATCH 01/20] add branding for ce --- app/client/package.json | 2 +- app/client/public/index.html | 2 +- app/client/src/AppRouter.tsx | 5 +- app/client/src/LandingScreen.tsx | 2 +- app/client/src/ce/actions/settingsAction.ts | 7 +- app/client/src/ce/constants/messages.ts | 57 ++++- .../src/ce/pages/AdminSettings/Main.tsx | 2 +- .../config/authentication/AuthPage.tsx | 8 +- .../config/branding/UpgradeBanner.tsx | 46 ++++ .../AdminSettings/config/branding/index.tsx | 15 ++ .../config/branding/useBrandingForm.tsx | 13 ++ .../ce/pages/AdminSettings/config/index.ts | 2 + .../ce/pages/AdminSettings/config/types.ts | 2 + .../pages/AppViewer/BackToHomeButton.tsx | 2 +- app/client/src/ce/pages/UserAuth/Login.tsx | 40 ++-- app/client/src/ce/pages/UserAuth/SignUp.tsx | 43 ++-- app/client/src/ce/reducers/tenantReducer.ts | 25 ++- app/client/src/ce/sagas/SuperUserSagas.tsx | 31 ++- .../src/ce/selectors/tenantSelectors.tsx | 10 + .../ColorPickerComponentV2.test.tsx | 7 + .../ColorPickerComponentV2.tsx | 26 +++ .../config/branding/UpgradeBanner.tsx | 3 + .../AdminSettings/config/branding/index.tsx | 1 + .../config/branding/useBrandingForm.tsx | 1 + .../ee/pages/AppViewer/BackToHomeButton.tsx | 3 + .../src/pages/AppViewer/AppViewerHeader.tsx | 6 +- app/client/src/pages/Editor/EditorHeader.tsx | 4 +- .../src/pages/Settings/FormGroup/Button.tsx | 2 +- .../pages/Settings/FormGroup/ColorInput.tsx | 198 +++++++++++++++++ .../pages/Settings/FormGroup/ImageInput.tsx | 101 +++++++++ .../Settings/config/branding/BrandingPage.tsx | 92 ++++++++ .../Settings/config/branding/SettingsForm.tsx | 159 ++++++++++++++ .../config/branding/previews/AppPreview.tsx | 28 +++ .../branding/previews/DashboardPreview.tsx | 40 ++++ .../branding/previews/DashboardThumbnail.tsx | 23 ++ .../config/branding/previews/EmailPreview.tsx | 56 +++++ .../branding/previews/FaviconPreview.tsx | 33 +++ .../config/branding/previews/LinkPreview.tsx | 23 ++ .../config/branding/previews/LoginPreview.tsx | 50 +++++ .../branding/previews/NotFoundPreview.tsx | 37 ++++ .../config/branding/previews/PreviewBox.tsx | 29 +++ .../config/branding/previews/index.tsx | 74 +++++++ app/client/src/pages/UserAuth/Container.tsx | 38 ++++ app/client/src/pages/UserAuth/FooterLinks.tsx | 45 ++-- .../src/pages/UserAuth/ForgotPassword.tsx | 17 +- .../src/pages/UserAuth/ResetPassword.tsx | 22 +- .../src/pages/UserAuth/StyledComponents.tsx | 1 - app/client/src/pages/UserAuth/index.tsx | 43 ++-- app/client/src/pages/common/AppHeader.tsx | 3 +- app/client/src/pages/common/ClientError.tsx | 60 ------ app/client/src/pages/common/ErrorPage.tsx | 8 +- .../src/pages/common/ErrorPageHeader.tsx | 10 +- .../pages/common/ErrorPages/ClientError.tsx | 44 ++++ .../src/pages/common/ErrorPages/Page.tsx | 29 +++ .../pages/common/ErrorPages/PageNotFound.tsx | 51 +++++ .../pages/common/ErrorPages/ServerTimeout.tsx | 34 +++ .../common/ErrorPages/ServerUnavailable.tsx | 34 +++ app/client/src/pages/common/PageHeader.tsx | 26 +-- app/client/src/pages/common/ServerTimeout.tsx | 53 ----- .../src/pages/common/ServerUnavailable.tsx | 50 ----- app/client/src/utils/BrandingUtils.ts | 202 ++++++++++++++++++ .../src/utils/hooks/useBrandingTheme.ts | 38 ++++ app/client/yarn.lock | 8 +- 63 files changed, 1777 insertions(+), 349 deletions(-) create mode 100644 app/client/src/ce/pages/AdminSettings/config/branding/UpgradeBanner.tsx create mode 100644 app/client/src/ce/pages/AdminSettings/config/branding/index.tsx create mode 100644 app/client/src/ce/pages/AdminSettings/config/branding/useBrandingForm.tsx rename app/client/src/{ => ce}/pages/AppViewer/BackToHomeButton.tsx (91%) create mode 100644 app/client/src/ee/pages/AdminSettings/config/branding/UpgradeBanner.tsx create mode 100644 app/client/src/ee/pages/AdminSettings/config/branding/index.tsx create mode 100644 app/client/src/ee/pages/AdminSettings/config/branding/useBrandingForm.tsx create mode 100644 app/client/src/ee/pages/AppViewer/BackToHomeButton.tsx create mode 100644 app/client/src/pages/Settings/FormGroup/ColorInput.tsx create mode 100644 app/client/src/pages/Settings/FormGroup/ImageInput.tsx create mode 100644 app/client/src/pages/Settings/config/branding/BrandingPage.tsx create mode 100644 app/client/src/pages/Settings/config/branding/SettingsForm.tsx create mode 100644 app/client/src/pages/Settings/config/branding/previews/AppPreview.tsx create mode 100644 app/client/src/pages/Settings/config/branding/previews/DashboardPreview.tsx create mode 100644 app/client/src/pages/Settings/config/branding/previews/DashboardThumbnail.tsx create mode 100644 app/client/src/pages/Settings/config/branding/previews/EmailPreview.tsx create mode 100644 app/client/src/pages/Settings/config/branding/previews/FaviconPreview.tsx create mode 100644 app/client/src/pages/Settings/config/branding/previews/LinkPreview.tsx create mode 100644 app/client/src/pages/Settings/config/branding/previews/LoginPreview.tsx create mode 100644 app/client/src/pages/Settings/config/branding/previews/NotFoundPreview.tsx create mode 100644 app/client/src/pages/Settings/config/branding/previews/PreviewBox.tsx create mode 100644 app/client/src/pages/Settings/config/branding/previews/index.tsx create mode 100644 app/client/src/pages/UserAuth/Container.tsx delete mode 100644 app/client/src/pages/common/ClientError.tsx create mode 100644 app/client/src/pages/common/ErrorPages/ClientError.tsx create mode 100644 app/client/src/pages/common/ErrorPages/Page.tsx create mode 100644 app/client/src/pages/common/ErrorPages/PageNotFound.tsx create mode 100644 app/client/src/pages/common/ErrorPages/ServerTimeout.tsx create mode 100644 app/client/src/pages/common/ErrorPages/ServerUnavailable.tsx delete mode 100644 app/client/src/pages/common/ServerTimeout.tsx delete mode 100644 app/client/src/pages/common/ServerUnavailable.tsx create mode 100644 app/client/src/utils/BrandingUtils.ts create mode 100644 app/client/src/utils/hooks/useBrandingTheme.ts diff --git a/app/client/package.json b/app/client/package.json index 8f735d2a1f2..db6b2954b42 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -46,7 +46,7 @@ "cypress-log-to-output": "^1.1.2", "dayjs": "^1.10.6", "deep-diff": "^1.0.2", - "design-system": "npm:@appsmithorg/design-system@1.0.34", + "design-system": "npm:@appsmithorg/design-system@1.0.33-alpha.7", "downloadjs": "^1.4.7", "draft-js": "^0.11.7", "exceljs-lightweight": "^1.14.0", diff --git a/app/client/public/index.html b/app/client/public/index.html index a14fd12f76d..8a659c0a136 100755 --- a/app/client/public/index.html +++ b/app/client/public/index.html @@ -13,7 +13,7 @@ left: 0; top: 0; height: 4px; - background: #D36500; + background: #D7D7D7; transition: all ease-in 0.3s; } diff --git a/app/client/src/AppRouter.tsx b/app/client/src/AppRouter.tsx index b9e86b7722f..60a017c1988 100644 --- a/app/client/src/AppRouter.tsx +++ b/app/client/src/AppRouter.tsx @@ -35,7 +35,7 @@ import LandingScreen from "./LandingScreen"; import UserAuth from "pages/UserAuth"; import Users from "pages/users"; import ErrorPage from "pages/common/ErrorPage"; -import PageNotFound from "pages/common/PageNotFound"; +import PageNotFound from "pages/common/ErrorPages/PageNotFound"; import PageLoadingBar from "pages/common/PageLoadingBar"; import ErrorPageHeader from "pages/common/ErrorPageHeader"; import { getCurrentThemeDetails, ThemeMode } from "selectors/themeSelectors"; @@ -64,6 +64,7 @@ import { getCurrentTenant } from "@appsmith/actions/tenantActions"; import { getDefaultAdminSettingsPath } from "@appsmith/utils/adminSettingsHelpers"; import { getCurrentUser as getCurrentUserSelector } from "selectors/usersSelectors"; import { getTenantPermissions } from "@appsmith/selectors/tenantSelectors"; +import useBrandingTheme from "utils/hooks/useBrandingTheme"; /* We use this polyfill to show emoji flags @@ -116,6 +117,8 @@ function AppRouter(props: { changeAppBackground(props.currentTheme); }, [props.currentTheme]); + useBrandingTheme(); + const user = useSelector(getCurrentUserSelector); const tenantPermissions = useSelector(getTenantPermissions); diff --git a/app/client/src/LandingScreen.tsx b/app/client/src/LandingScreen.tsx index e557bedf125..bf66ac8a81c 100755 --- a/app/client/src/LandingScreen.tsx +++ b/app/client/src/LandingScreen.tsx @@ -6,7 +6,7 @@ import { ANONYMOUS_USERNAME, User } from "constants/userConstants"; import { Redirect } from "react-router"; import { APPLICATIONS_URL, AUTH_LOGIN_URL, BASE_URL } from "constants/routes"; import PageLoadingBar from "pages/common/PageLoadingBar"; -import ServerUnavailable from "pages/common/ServerUnavailable"; +import ServerUnavailable from "pages/common/ErrorPages/ServerUnavailable"; type Props = { user?: User; diff --git a/app/client/src/ce/actions/settingsAction.ts b/app/client/src/ce/actions/settingsAction.ts index 26044624430..6301b1f594f 100644 --- a/app/client/src/ce/actions/settingsAction.ts +++ b/app/client/src/ce/actions/settingsAction.ts @@ -1,8 +1,11 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; -export const saveSettings = (settings: Record) => ({ +export const saveSettings = (settings: any, needsRestart = false) => ({ type: ReduxActionTypes.SAVE_ADMIN_SETTINGS, - payload: settings, + payload: { + settings, + needsRestart, + }, }); export const retryServerRestart = () => ({ diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 90ba84f95f3..6da6491ac18 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -53,8 +53,6 @@ export const FORM_VALIDATION_PASSWORD_RULE = () => `Please provide a password between 6 and 42 characters`; export const FORM_VALIDATION_INVALID_PASSWORD = FORM_VALIDATION_PASSWORD_RULE; -export const LOGIN_PAGE_SUBTITLE = () => `Use your workspace email`; -export const LOGIN_PAGE_TITLE = () => `Sign in to your account`; export const LOGIN_PAGE_EMAIL_INPUT_LABEL = () => `Email`; export const LOGIN_PAGE_PASSWORD_INPUT_LABEL = () => `Password`; export const LOGIN_PAGE_EMAIL_INPUT_PLACEHOLDER = () => @@ -65,7 +63,9 @@ export const LOGIN_PAGE_INVALID_CREDS_ERROR = () => `It looks like you may have entered incorrect/invalid credentials. Please try again or reset password using the button below.`; export const LOGIN_PAGE_INVALID_CREDS_FORGOT_PASSWORD_LINK = () => `Reset Password`; -export const NEW_TO_APPSMITH = () => `New to Appsmith?`; +export const NEW_TO_APPSMITH = () => `Don't have an account?`; +export const LOGIN_PAGE_TITLE = () => `Sign in`; +export const LOGIN_PAGE_SUBTITLE = () => `Sign in to your account`; export const LOGIN_PAGE_LOGIN_BUTTON_TEXT = () => `sign in`; export const LOGIN_PAGE_FORGOT_PASSWORD_TEXT = () => `Forgot Password`; @@ -337,7 +337,22 @@ export const WIDGET_BIND_HELP = () => export const BACK_TO_HOMEPAGE = () => "Go back to homepage"; +// error pages +export const PAGE_NOT_FOUND_TITLE = () => "404"; export const PAGE_NOT_FOUND = () => "Page not found"; +export const PAGE_SERVER_UNAVAILABLE_ERROR_CODE = () => "503"; +export const PAGE_SERVER_UNAVAILABLE_TITLE = () => + "Appsmith server is unavailable"; +export const PAGE_SERVER_UNAVAILABLE_DESCRIPTION = () => + "Please try again later"; +export const PAGE_SERVER_TIMEOUT_ERROR_CODE = () => "504"; +export const PAGE_SERVER_TIMEOUT_TITLE = () => + "Appsmith server is taking too long to respond"; +export const PAGE_SERVER_TIMEOUT_DESCRIPTION = () => + `Please retry after some time`; +export const PAGE_CLIENT_ERROR_TITLE = () => "Whoops something went wrong!"; +export const PAGE_CLIENT_ERROR_DESCRIPTION = () => + "This is embarrassing, please contact Appsmith support for help"; // comments export const POST = () => "Post"; @@ -1131,6 +1146,42 @@ export const DANGER_ZONE = () => "Danger Zone"; export const DISCONNECT_AUTH_METHOD = () => "Disconnect"; export const DISCONNECT_CONFIRMATION = () => "Are you sure?"; +// Branding +export const ADMIN_BRANDING_SETTINGS_TITLE = () => "Branding"; +export const ADMIN_BRANDING_SETTINGS_SUBTITLE = () => + "Set your organization's logo and brand colors."; +export const ADMIN_BRANDING_SETTINGS_UPGRADE_TEXT = () => + "Your changes cannot be saved unless you upgrade your account"; +export const ADMIN_BRANDING_UPGRADE_BANNER_TITLE = () => + "Brand your organisation"; +export const ADMIN_BRANDING_UPGRADE_BANNER_SUBTITLE = () => + "Branding is only available via our enterprise plan. You can experiment with branding via the playground below, but your changes will not be saved unless your account is upgraded."; +export const ADMIN_BRANDING_LOGO_SIZE_ERROR = () => `Logo should be below 2MB`; +export const ADMIN_BRANDING_LOGO_DIMENSION_ERROR = () => + `Logo should be atleast 256px in height`; +export const ADMIN_BRANDING_LOGO_FORMAT_ERROR = () => + `Allowed formats for logo are svg, png and jpeg`; +export const ADMIN_BRANDING_LOGO_REQUIREMENT = () => + `Upload a 100KB - 2MB .SVG .PNG or .JPEG.`; +export const ADMIN_BRANDING_FAVICON_DIMENSION_ERROR = () => + `Favicon should be max 32px in width and 32px in height`; +export const ADMIN_BRANDING_FAVICON_SIZE_ERROR = () => + `Favicon should be below 2MB`; +export const ADMIN_BRANDING_FAVICON_FORMAT_ERROR = () => + `Allowed formats for favicon are png and ico`; +export const ADMIN_BRANDING_FAVICON_REQUIREMENT = () => + `Upload a 32 x 32 .ICO, .JPG or .PNG file.`; +export const ADMIN_BRANDING_COLOR_TOOLTIP_PRIMARY = () => + `Used on buttons, links, and other interactive elements.`; +export const ADMIN_BRANDING_COLOR_TOOLTIP_BACKGROUND = () => + `Used as background color for the auth pages`; +export const ADMIN_BRANDING_COLOR_TOOLTIP_HOVER = () => + `Used as hover color for the button.`; +export const ADMIN_BRANDING_COLOR_TOOLTIP_FONT = () => + `Used as text color for the buttons.`; +export const ADMIN_BRANDING_COLOR_TOOLTIP_DISABLED = () => + `Used as background color for disabled buttons.`; + // Guided tour // -- STEPS --- export const STEP_ONE_TITLE = () => diff --git a/app/client/src/ce/pages/AdminSettings/Main.tsx b/app/client/src/ce/pages/AdminSettings/Main.tsx index b73901fabee..541ece19fa0 100644 --- a/app/client/src/ce/pages/AdminSettings/Main.tsx +++ b/app/client/src/ce/pages/AdminSettings/Main.tsx @@ -36,7 +36,7 @@ const Main = () => { /* Old, still working flow; config, factory based */ if (!!wrapperCategory?.component) { const { component: WrapperCategoryComponent } = wrapperCategory; - return ; + return ; } else if ( !Object.values(SettingCategories).includes(category) || (subCategory && !Object.values(SettingCategories).includes(subCategory)) diff --git a/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx b/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx index d72e6ee66ee..dd92ec79455 100644 --- a/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx +++ b/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx @@ -21,23 +21,23 @@ import AnalyticsUtil from "utils/AnalyticsUtil"; const { intercomAppID } = getAppsmithConfigs(); -const Wrapper = styled.div` +export const Wrapper = styled.div` flex-basis: calc(100% - ${(props) => props.theme.homePage.leftPane.width}px); padding-top: 40px; height: calc(100vh - ${(props) => props.theme.homePage.header}px); overflow: auto; `; -const SettingsFormWrapper = styled.div``; +export const SettingsFormWrapper = styled.div``; -const SettingsHeader = styled.h2` +export const SettingsHeader = styled.h2` font-size: 24px; font-weight: 500; text-transform: capitalize; margin-bottom: 0; `; -const SettingsSubHeader = styled.div` +export const SettingsSubHeader = styled.div` font-size: 14px; margin-bottom: 0; `; diff --git a/app/client/src/ce/pages/AdminSettings/config/branding/UpgradeBanner.tsx b/app/client/src/ce/pages/AdminSettings/config/branding/UpgradeBanner.tsx new file mode 100644 index 00000000000..436759eeeda --- /dev/null +++ b/app/client/src/ce/pages/AdminSettings/config/branding/UpgradeBanner.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { Button } from "design-system"; + +import { + ADMIN_BRANDING_UPGRADE_BANNER_SUBTITLE, + ADMIN_BRANDING_UPGRADE_BANNER_TITLE, + createMessage, +} from "@appsmith/constants/messages"; +import useOnUpgrade from "utils/hooks/useOnUpgrade"; +import { + SettingsHeader, + SettingsSubHeader, +} from "@appsmith/pages/AdminSettings/config/authentication/AuthPage"; + +const UpgradeBanner = () => { + const { onUpgrade } = useOnUpgrade({}); + + return ( +
+
+
+
+ Enterprise +
+ + {createMessage(ADMIN_BRANDING_UPGRADE_BANNER_TITLE)} + + + {createMessage(ADMIN_BRANDING_UPGRADE_BANNER_SUBTITLE)} + +
+ +
+
+ ); +}; + +export default UpgradeBanner; diff --git a/app/client/src/ce/pages/AdminSettings/config/branding/index.tsx b/app/client/src/ce/pages/AdminSettings/config/branding/index.tsx new file mode 100644 index 00000000000..b93f7dcbf25 --- /dev/null +++ b/app/client/src/ce/pages/AdminSettings/config/branding/index.tsx @@ -0,0 +1,15 @@ +import { + AdminConfigType, + SettingCategories, + SettingTypes, +} from "@appsmith/pages/AdminSettings/config/types"; +import BrandingPage from "pages/Settings/config/branding/BrandingPage"; + +export const config: AdminConfigType = { + type: SettingCategories.BRANDING, + controlType: SettingTypes.PAGE, + canSave: false, + title: "Branding", + icon: "pantone", + component: BrandingPage, +}; diff --git a/app/client/src/ce/pages/AdminSettings/config/branding/useBrandingForm.tsx b/app/client/src/ce/pages/AdminSettings/config/branding/useBrandingForm.tsx new file mode 100644 index 00000000000..5dea0ffdbbe --- /dev/null +++ b/app/client/src/ce/pages/AdminSettings/config/branding/useBrandingForm.tsx @@ -0,0 +1,13 @@ +/* eslint-disable */ +//@ts-nocheck +export const useBrandingForm = (props: any) => { + /* eslint-disable */ + //@ts-nocheck + const onSubmit = (data: any) => { + // + }; + + return { + onSubmit, + }; +}; diff --git a/app/client/src/ce/pages/AdminSettings/config/index.ts b/app/client/src/ce/pages/AdminSettings/config/index.ts index b9c86751be7..0a0a10711b1 100644 --- a/app/client/src/ce/pages/AdminSettings/config/index.ts +++ b/app/client/src/ce/pages/AdminSettings/config/index.ts @@ -6,6 +6,7 @@ import { config as MapsConfig } from "pages/Settings/config/googleMaps"; import { config as VersionConfig } from "pages/Settings/config/version"; import { config as AdvancedConfig } from "pages/Settings/config/advanced"; import { config as Authentication } from "@appsmith/pages/AdminSettings/config/authentication"; +import { config as BrandingConfig } from "@appsmith/pages/AdminSettings/config/branding"; ConfigFactory.register(GeneralConfig); ConfigFactory.register(EmailConfig); @@ -13,5 +14,6 @@ ConfigFactory.register(MapsConfig); ConfigFactory.register(Authentication); ConfigFactory.register(AdvancedConfig); ConfigFactory.register(VersionConfig); +ConfigFactory.register(BrandingConfig); export default ConfigFactory; diff --git a/app/client/src/ce/pages/AdminSettings/config/types.ts b/app/client/src/ce/pages/AdminSettings/config/types.ts index cab1d806b37..54a5bb79fa2 100644 --- a/app/client/src/ce/pages/AdminSettings/config/types.ts +++ b/app/client/src/ce/pages/AdminSettings/config/types.ts @@ -108,6 +108,7 @@ export const SettingCategories = { GITHUB_AUTH: "github-auth", AUDIT_LOGS: "audit-logs", ACCESS_CONTROL: "access-control", + BRANDING: "branding", }; export const SettingSubCategories = { @@ -127,4 +128,5 @@ export type AdminConfigType = { canSave: boolean; isConnected?: boolean; icon?: string; + needsUpgrade?: boolean; }; diff --git a/app/client/src/pages/AppViewer/BackToHomeButton.tsx b/app/client/src/ce/pages/AppViewer/BackToHomeButton.tsx similarity index 91% rename from app/client/src/pages/AppViewer/BackToHomeButton.tsx rename to app/client/src/ce/pages/AppViewer/BackToHomeButton.tsx index cabd61bdfcc..df2998943ce 100644 --- a/app/client/src/pages/AppViewer/BackToHomeButton.tsx +++ b/app/client/src/ce/pages/AppViewer/BackToHomeButton.tsx @@ -10,7 +10,7 @@ function BackToHomeButton() { return ( { @@ -124,23 +123,24 @@ export function Login(props: LoginFormProps) { forgotPasswordURL += `?email=${props.emailValue}`; } + const footerSection = !disableLoginForm && ( +
+ {createMessage(NEW_TO_APPSMITH)} + + {createMessage(LOGIN_PAGE_SIGN_UP_LINK_TEXT)} + +
+ ); + return ( - <> - -

{createMessage(LOGIN_PAGE_TITLE)}

- - {!disableLoginForm && ( - - {createMessage(NEW_TO_APPSMITH)} - - {createMessage(LOGIN_PAGE_SIGN_UP_LINK_TEXT)} - - - )} + {showError && ( )} - + ); } diff --git a/app/client/src/ce/pages/UserAuth/SignUp.tsx b/app/client/src/ce/pages/UserAuth/SignUp.tsx index bfe4c169079..4801177de2a 100644 --- a/app/client/src/ce/pages/UserAuth/SignUp.tsx +++ b/app/client/src/ce/pages/UserAuth/SignUp.tsx @@ -7,14 +7,9 @@ import { useHistory, useLocation, withRouter, + Link, } from "react-router-dom"; -import { - AuthCardHeader, - AuthCardNavLink, - SpacedSubmitForm, - FormActions, - SignUpLinkSection, -} from "pages/UserAuth/StyledComponents"; +import { SpacedSubmitForm, FormActions } from "pages/UserAuth/StyledComponents"; import { SIGNUP_PAGE_TITLE, SIGNUP_PAGE_EMAIL_INPUT_LABEL, @@ -28,6 +23,7 @@ import { SIGNUP_PAGE_SUBMIT_BUTTON_TEXT, ALREADY_HAVE_AN_ACCOUNT, createMessage, + SIGNUP_PAGE_SUBTITLE, } from "@appsmith/constants/messages"; import FormTextField from "components/utils/ReduxFormTextField"; import ThirdPartyAuth from "@appsmith/pages/UserAuth/ThirdPartyAuth"; @@ -53,6 +49,7 @@ import { useScript, ScriptStatus, AddScriptTo } from "utils/hooks/useScript"; import { withTheme } from "styled-components"; import { Theme } from "constants/DefaultTheme"; import { getIsSafeRedirectURL } from "utils/helpers"; +import Container from "pages/UserAuth/Container"; declare global { interface Window { @@ -151,21 +148,25 @@ export function SignUp(props: SignUpFormProps) { } }; + const footerSection = ( +
+ {createMessage(ALREADY_HAVE_AN_ACCOUNT)} + + {createMessage(SIGNUP_PAGE_LOGIN_LINK_TEXT)} + +
+ ); + return ( - <> + {showError && } - -

{createMessage(SIGNUP_PAGE_TITLE)}

- - - {createMessage(ALREADY_HAVE_AN_ACCOUNT)} - - {createMessage(SIGNUP_PAGE_LOGIN_LINK_TEXT)} - - {socialLoginList.length > 0 && ( )} @@ -220,7 +221,7 @@ export function SignUp(props: SignUpFormProps) { )} - + ); } diff --git a/app/client/src/ce/reducers/tenantReducer.ts b/app/client/src/ce/reducers/tenantReducer.ts index a025ce2d3af..0edc639ad95 100644 --- a/app/client/src/ce/reducers/tenantReducer.ts +++ b/app/client/src/ce/reducers/tenantReducer.ts @@ -3,17 +3,32 @@ import { ReduxActionErrorTypes, ReduxActionTypes, } from "@appsmith/constants/ReduxActionConstants"; +import { createBrandColorsFromPrimaryColor } from "utils/BrandingUtils"; import { createReducer } from "utils/ReducerUtils"; export interface TenantReduxState { userPermissions: string[]; - tenantConfiguration: Record; + tenantConfiguration: Record; new: boolean; } +export const defaultBrandingConfig = { + brandFaviconUrl: + "https://res.cloudinary.com/dwpfockn8/image/upload/v1597920848/favicons/favicon-orange_pxfmdc.ico", + brandColors: { + ...createBrandColorsFromPrimaryColor("#F86A2B"), + }, + brandLogoUrl: + "https://global-uploads.webflow.com/61531b23c347e4fbd4a84209/61531b23c347e41e24a8423e_Logo.svg", +}; + export const initialState: TenantReduxState = { userPermissions: [], - tenantConfiguration: {}, + tenantConfiguration: { + brandColors: { + ...createBrandColorsFromPrimaryColor("#000"), + }, + }, new: false, }; @@ -23,7 +38,11 @@ export const handlers = { action: ReduxAction, ) => ({ ...state, - ...action.payload, + userPermissions: action.payload.userPermissions, + tenantConfiguration: { + ...defaultBrandingConfig, + ...action.payload.tenantConfiguration, + }, }), [ReduxActionErrorTypes.FETCH_CURRENT_TENANT_CONFIG_ERROR]: ( state: TenantReduxState, diff --git a/app/client/src/ce/sagas/SuperUserSagas.tsx b/app/client/src/ce/sagas/SuperUserSagas.tsx index c5a4fad9916..c1ef4bc3b1f 100644 --- a/app/client/src/ce/sagas/SuperUserSagas.tsx +++ b/app/client/src/ce/sagas/SuperUserSagas.tsx @@ -57,9 +57,13 @@ export function* FetchAdminSettingsErrorSaga() { } export function* SaveAdminSettingsSaga( - action: ReduxAction>, + action: ReduxAction<{ + settings: Record; + needsRestart: boolean; + }>, ) { - const settings = action.payload; + const { needsRestart, settings } = action.payload; + try { const response: ApiResponse = yield call( UserApi.saveAdminSettings, @@ -75,13 +79,22 @@ export function* SaveAdminSettingsSaga( yield put({ type: ReduxActionTypes.SAVE_ADMIN_SETTINGS_SUCCESS, }); - yield put({ - type: ReduxActionTypes.FETCH_ADMIN_SETTINGS_SUCCESS, - payload: settings, - }); - yield put({ - type: ReduxActionTypes.RESTART_SERVER_POLL, - }); + + if (needsRestart) { + // if tenant settings are saved, we need to fetch the tenant settings again + yield put({ + type: ReduxActionTypes.FETCH_CURRENT_TENANT_CONFIG, + }); + } else { + yield put({ + type: ReduxActionTypes.FETCH_ADMIN_SETTINGS_SUCCESS, + payload: settings, + }); + + yield put({ + type: ReduxActionTypes.RESTART_SERVER_POLL, + }); + } } else { yield put({ type: ReduxActionTypes.SAVE_ADMIN_SETTINGS_ERROR, diff --git a/app/client/src/ce/selectors/tenantSelectors.tsx b/app/client/src/ce/selectors/tenantSelectors.tsx index ce35412c835..ecf09abcfa6 100644 --- a/app/client/src/ce/selectors/tenantSelectors.tsx +++ b/app/client/src/ce/selectors/tenantSelectors.tsx @@ -3,3 +3,13 @@ import { AppState } from "@appsmith/reducers"; export const getTenantPermissions = (state: AppState) => { return state.tenant?.userPermissions; }; + +/** + * selects the tenant config + * + * @param state + * @returns + */ +export const getTenantConfig = (state: AppState) => { + return state.tenant?.tenantConfiguration; +}; diff --git a/app/client/src/components/propertyControls/ColorPickerComponentV2.test.tsx b/app/client/src/components/propertyControls/ColorPickerComponentV2.test.tsx index 01bbbaa1b90..57990742002 100644 --- a/app/client/src/components/propertyControls/ColorPickerComponentV2.test.tsx +++ b/app/client/src/components/propertyControls/ColorPickerComponentV2.test.tsx @@ -31,6 +31,13 @@ const store = mockStore({ }, }, }, + tenant: { + userPermissions: [], + tenantConfiguration: { + brandColors: {}, + }, + new: false, + }, }); const getTestComponent = (handleOnChange: any = undefined) => ( diff --git a/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx b/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx index 72caa0db396..52bfa8188fa 100644 --- a/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx +++ b/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx @@ -26,6 +26,7 @@ import { extractColorsFromString } from "utils/helpers"; import { TAILWIND_COLORS } from "constants/ThemeConstants"; import useDSEvent from "utils/hooks/useDSEvent"; import { DSEventTypes } from "utils/AppsmithUtils"; +import { getTenantConfig } from "ce/selectors/tenantSelectors"; const FocusTrap = require("focus-trap-react"); const MAX_COLS = 10; @@ -107,6 +108,7 @@ interface ColorPickerPopupProps { function ColorPickerPopup(props: ColorPickerPopupProps) { const themeColors = useSelector(getSelectedAppThemeProperties).colors; + const brandColors = useSelector(getTenantConfig).brandColors; const widgets = useSelector(getWidgets); const DSLStringified = JSON.stringify(widgets); const applicationColors = useMemo(() => { @@ -178,6 +180,30 @@ function ColorPickerPopup(props: ColorPickerPopupProps) { )} + {brandColors && Object.keys(brandColors).length > 0 && ( +
+

Brand Colors

+
+ {Object.keys(brandColors).map( + (colorKey: string, colorIndex: number) => ( +
{ + setColor(brandColors[colorKey]); + setIsOpen(false); + changeColor(brandColors[colorKey], !e.isTrusted); + }} + style={{ backgroundColor: brandColors[colorKey] }} + tabIndex={colorIndex === 0 ? 0 : -1} + /> + ), + )} +
+
+ )} {showApplicationColors && applicationColors.length > 0 && (

Application Colors

diff --git a/app/client/src/ee/pages/AdminSettings/config/branding/UpgradeBanner.tsx b/app/client/src/ee/pages/AdminSettings/config/branding/UpgradeBanner.tsx new file mode 100644 index 00000000000..77985ca2445 --- /dev/null +++ b/app/client/src/ee/pages/AdminSettings/config/branding/UpgradeBanner.tsx @@ -0,0 +1,3 @@ +export * from "ce/pages/AdminSettings/config/branding/UpgradeBanner"; +import { default as CE_UpgradeBanner } from "ce/pages/AdminSettings/config/branding/UpgradeBanner"; +export default CE_UpgradeBanner; diff --git a/app/client/src/ee/pages/AdminSettings/config/branding/index.tsx b/app/client/src/ee/pages/AdminSettings/config/branding/index.tsx new file mode 100644 index 00000000000..c843c95b78e --- /dev/null +++ b/app/client/src/ee/pages/AdminSettings/config/branding/index.tsx @@ -0,0 +1 @@ +export * from "ce/pages/AdminSettings/config/branding/index"; diff --git a/app/client/src/ee/pages/AdminSettings/config/branding/useBrandingForm.tsx b/app/client/src/ee/pages/AdminSettings/config/branding/useBrandingForm.tsx new file mode 100644 index 00000000000..0a683c3b0f4 --- /dev/null +++ b/app/client/src/ee/pages/AdminSettings/config/branding/useBrandingForm.tsx @@ -0,0 +1 @@ +export * from "ce/pages/AdminSettings/config/branding/useBrandingForm"; diff --git a/app/client/src/ee/pages/AppViewer/BackToHomeButton.tsx b/app/client/src/ee/pages/AppViewer/BackToHomeButton.tsx new file mode 100644 index 00000000000..647c96dda49 --- /dev/null +++ b/app/client/src/ee/pages/AppViewer/BackToHomeButton.tsx @@ -0,0 +1,3 @@ +export * from "ce/pages/AppViewer/BackToHomeButton"; +import { default as CE_BackToHomeButton } from "ce/pages/AppViewer/BackToHomeButton"; +export default CE_BackToHomeButton; diff --git a/app/client/src/pages/AppViewer/AppViewerHeader.tsx b/app/client/src/pages/AppViewer/AppViewerHeader.tsx index 9f1ead7d595..9cde3e8c6e9 100644 --- a/app/client/src/pages/AppViewer/AppViewerHeader.tsx +++ b/app/client/src/pages/AppViewer/AppViewerHeader.tsx @@ -30,7 +30,7 @@ import Button from "./AppViewerButton"; import MenuIcon from "remixicon-react/MenuFillIcon"; import CloseIcon from "remixicon-react/CloseFillIcon"; import PageMenu from "./PageMenu"; -import BackToHomeButton from "./BackToHomeButton"; +import BackToHomeButton from "@appsmith/pages/AppViewer/BackToHomeButton"; import TourCompletionMessage from "pages/Editor/GuidedTour/TourCompletionMessage"; import { useHref } from "pages/Editor/utils"; import { builderURL } from "RouteBuilder"; @@ -94,7 +94,7 @@ export function AppViewerHeader(props: AppViewerHeaderProps) { <>