Add sign-up link to the login page (#92)

.env.example

@@ -45,10 +45,10 @@ NEXT_PUBLIC_VERSION=
 NEXT_PUBLIC_ENVIRONMENT=
 
 # =============================================================================
-# `NEXT_PRIVATE_ZEPLIN_WEB_APP_BASE_URL`:
+# `NEXT_PUBLIC_ZEPLIN_WEB_APP_BASE_URL`:
 #     The url of Zeplin web app. "https://app.zeplin.io" by default
 # =============================================================================
-NEXT_PRIVATE_ZEPLIN_WEB_APP_BASE_URL=
+NEXT_PUBLIC_ZEPLIN_WEB_APP_BASE_URL=
 
 # =============================================================================
 # `NEXT_PRIVATE_ZEPLIN_MAC_APP_URL_SCHEME`:

src/client/containers/ConfigurationContainer/components/Login/Login.tsx

@@ -1,36 +1,70 @@
 import React, { FunctionComponent } from "react";
 import { Button, Flex, Text, ErrorIcon } from "@fluentui/react-northstar";
+import { ZEPLIN_WEB_APP_BASE_URL } from "../../../../lib/config";
 
 interface LoginProps {
     error?: string;
     onButtonClick: () => void;
 }
 
+const signupURL = new URL(ZEPLIN_WEB_APP_BASE_URL);
+signupURL.pathname = `signup`;
+
 export const Login: FunctionComponent<LoginProps> = ({ error, onButtonClick }) => (
-    <Flex fill column gap="gap.large">
-        <div />
-        <Flex fill column gap="gap.medium">
-            <Text size="large" weight="semibold">
-                One more step before finishing connection
-            </Text>
-            <Text>
-                Once proceeding, we will ask you to authorize Microsoft Teams access through a separate window. Once
-                it’s authorized, you can do more advanced settings on the Microsoft Teams channel linked with Zeplin.
-            </Text>
-            {error && (
-                <Flex fill gap="gap.smaller">
-                    <ErrorIcon size="large" />
-                    <Text error>
-                        {error}
-                    </Text>
-                </Flex>
-            )}
+    <Flex fill column gap="gap.medium">
+        <Flex fill column gap="gap.large">
+            <div />
+            <Flex fill column gap="gap.medium">
+                <Text size="large" weight="semibold">
+                    One more step before finishing connection
+                </Text>
+                <Text>
+                    Once proceeding, we will ask you to authorize Microsoft Teams access through a separate window. Once
+                    it’s authorized, you can do more advanced settings on the Microsoft Teams channel linked with
+                    Zeplin. If you’re not a Zeplin user, you can sign up from <Text
+                        as="a"
+                        color="brand"
+                        href={signupURL.toString()}
+                        target="_blank"
+                        styles={{
+                            "textDecoration": "none",
+                            ":hover": {
+                                textDecoration: "underline"
+                            }
+                        }}>
+                        here
+                    </Text>.
+                </Text>
+                {error && (
+                    <Flex fill gap="gap.smaller">
+                        <ErrorIcon size="large" />
+                        <Text error>
+                            {error}
+                        </Text>
+                    </Flex>
+                )}
+            </Flex>
+            <div>
+                <Button
+                    primary
+                    content="Log in Zeplin"
+                    onClick={(): void => onButtonClick()} />
+            </div>
         </Flex>
-        <div>
-            <Button
-                primary
-                content="Log in Zeplin"
-                onClick={(): void => onButtonClick()} />
-        </div>
+        <Text>
+        You can learn more about the integration from <Text
+                as="a"
+                color="brand"
+                href="https://zpl.io/msteams-integration-help"
+                target="_blank"
+                styles={{
+                    "textDecoration": "none",
+                    ":hover": {
+                        textDecoration: "underline"
+                    }
+                }}>
+                here
+            </Text>.
+        </Text>
     </Flex>
 );

src/client/lib/config.ts

@@ -5,4 +5,6 @@ export const ENVIRONMENT = process.env.NEXT_PUBLIC_ENVIRONMENT;
 export const IS_DEV = process.env.NODE_ENV !== "production";
 export const IS_SENTRY_ENABLED = process.env.NEXT_PUBLIC_IS_SENTRY_ENABLED
     ? process.env.NEXT_PUBLIC_IS_SENTRY_ENABLED.toLowerCase() === "true"
-    : !IS_DEV;
+    : !IS_DEV;
+export const ZEPLIN_WEB_APP_BASE_URL = process.env.NEXT_PUBLIC_ZEPLIN_WEB_APP_BASE_URL ??
+    "https://app.zeplin.io";

src/server/config.ts

@@ -34,7 +34,7 @@ export const {
     NEXT_PRIVATE_ZEPLIN_CLIENT_SECRET: ZEPLIN_CLIENT_SECRET,
     NEXT_PRIVATE_MONGO_URL: MONGO_URL = "mongodb://localhost:27017/zeplin-microsoft-teams-app",
     NEXT_PRIVATE_BASE_URL: BASE_URL,
-    NEXT_PRIVATE_ZEPLIN_WEB_APP_BASE_URL: ZEPLIN_WEB_APP_BASE_URL = "https://app.zeplin.io",
+    NEXT_PUBLIC_ZEPLIN_WEB_APP_BASE_URL: ZEPLIN_WEB_APP_BASE_URL = "https://app.zeplin.io",
     NEXT_PRIVATE_ZEPLIN_MAC_APP_URL_SCHEME: ZEPLIN_MAC_APP_URL_SCHEME = "zpl"
 } = process.env;