Add team preference to use logo for branding (#4285)

* feat: add team preference to use logo for branding

* fix: allow on cloud version too

.env.sample

@@ -167,9 +167,6 @@ SMTP_REPLY_EMAIL=
 SMTP_TLS_CIPHERS=
 SMTP_SECURE=true
 
-# Custom logo that displays on the authentication screen, scaled to height: 60px
-# TEAM_LOGO=https://example.com/images/logo.png
-
 # The default interface language. See translate.getoutline.com for a list of
 # available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US

app.json

@@ -199,10 +199,6 @@
       "description": "A sentry tunnel URL for bypassing ad blockers in the UI (optional)",
       "required": false
     },
-    "TEAM_LOGO": {
-      "description": "A logo that will be displayed on the signed out home page",
-      "required": false
-    },
     "DEFAULT_LANGUAGE": {
       "value": "en_US",
       "description": "The default interface language. See translate.getoutline.com for a list of available language codes and their rough percentage translated.",

app/hooks/useAuthorizedSettingsConfig.ts

@@ -130,7 +130,7 @@ const useAuthorizedSettingsConfig = () => {
         name: t("Features"),
         path: "/settings/features",
         component: Features,
-        enabled: can.update && team.collaborativeEditing,
+        enabled: can.update,
         group: t("Team"),
         icon: BeakerIcon,
       },

app/scenes/Login/index.tsx

@@ -174,8 +174,8 @@ function Login({ children }: Props) {
       <Centered align="center" justify="center" gap={12} column auto>
         <PageTitle title={t("Login")} />
         <Logo>
-          {env.TEAM_LOGO && !isCloudHosted ? (
+          {config.logo ? (
-            <TeamLogo src={env.TEAM_LOGO} />
+            <TeamLogo src={config.logo} />
           ) : (
             <OutlineLogo size={38} fill="currentColor" />
           )}

app/scenes/Settings/Features.tsx

@@ -57,6 +57,22 @@ function Features() {
           />
         </SettingRow>
       )}
+      {team.avatarUrl && (
+        <SettingRow
+          name="publicBranding"
+          label={t("Public branding")}
+          description={t(
+            "Show your team’s logo on public pages like login and shared documents."
+          )}
+        >
+          <Switch
+            id="publicBranding"
+            name="publicBranding"
+            checked={!!team.preferences?.publicBranding}
+            onChange={handlePreferenceChange}
+          />
+        </SettingRow>
+      )}
     </Scene>
   );
 }

app/stores/AuthStore.ts

@@ -29,6 +29,7 @@ type Provider = {
 
 export type Config = {
   name?: string;
+  logo?: string;
   hostname?: string;
   providers: Provider[];
 };

server/env.ts

@@ -197,11 +197,6 @@ export class Environment {
   @IsOptional()
   public DEPLOYMENT = this.toOptionalString(process.env.DEPLOYMENT);
 
-  /**
-   * Custom company logo that displays on the authentication screen.
-   */
-  public TEAM_LOGO = process.env.TEAM_LOGO;
-
   /**
    * The default interface language. See translate.getoutline.com for a list of
    * available language codes and their percentage translated.

server/presenters/env.ts

@@ -16,7 +16,6 @@ export default function present(env: Environment): PublicEnv {
     ENVIRONMENT: env.ENVIRONMENT,
     SENTRY_DSN: env.SENTRY_DSN,
     SENTRY_TUNNEL: env.SENTRY_TUNNEL,
-    TEAM_LOGO: env.TEAM_LOGO,
     SLACK_CLIENT_ID: env.SLACK_CLIENT_ID,
     SLACK_APP_ID: env.SLACK_APP_ID,
     MAXIMUM_IMPORT_SIZE: env.MAXIMUM_IMPORT_SIZE,

server/routes/api/auth.ts

@@ -54,6 +54,7 @@ router.post("auth.config", async (ctx) => {
       ctx.body = {
         data: {
           name: team.name,
+          logo: team.preferences?.publicBranding ? team.avatarUrl : undefined,
           providers: filterProviders(team),
         },
       };
@@ -74,6 +75,7 @@ router.post("auth.config", async (ctx) => {
       ctx.body = {
         data: {
           name: team.name,
+          logo: team.preferences?.publicBranding ? team.avatarUrl : undefined,
           hostname: ctx.request.hostname,
           providers: filterProviders(team),
         },
@@ -95,6 +97,7 @@ router.post("auth.config", async (ctx) => {
       ctx.body = {
         data: {
           name: team.name,
+          logo: team.preferences?.publicBranding ? team.avatarUrl : undefined,
           hostname: ctx.request.hostname,
           providers: filterProviders(team),
         },

shared/i18n/locales/en_US/translation.json

@@ -659,6 +659,8 @@
   "Manage optional and beta features. Changing these settings will affect the experience for all members of the workspace.": "Manage optional and beta features. Changing these settings will affect the experience for all members of the workspace.",
   "Seamless editing": "Seamless editing",
   "When enabled documents are always editable for team members that have permission. When disabled there is a separate editing view.": "When enabled documents are always editable for team members that have permission. When disabled there is a separate editing view.",
+  "Public branding": "Public branding",
+  "Show your team’s logo on public pages like login and shared documents.": "Show your team’s logo on public pages like login and shared documents.",
   "New group": "New group",
   "Groups can be used to organize and manage the people on your team.": "Groups can be used to organize and manage the people on your team.",
   "All groups": "All groups",

shared/types.ts

@@ -12,7 +12,6 @@ export type PublicEnv = {
   ENVIRONMENT: string;
   SENTRY_DSN: string | undefined;
   SENTRY_TUNNEL: string | undefined;
-  TEAM_LOGO: string | undefined;
   SLACK_CLIENT_ID: string | undefined;
   SLACK_APP_ID: string | undefined;
   MAXIMUM_IMPORT_SIZE: number;
@@ -57,6 +56,8 @@ export type UserPreferences = { [key in UserPreference]?: boolean };
 export enum TeamPreference {
   /** Whether documents have a separate edit mode instead of seamless editing. */
   SeamlessEdit = "seamlessEdit",
+  /** Whether to use team logo across the app for branding. */
+  PublicBranding = "publicBranding",
 }
 
 export type TeamPreferences = { [key in TeamPreference]?: boolean };