added license banner (#833)

* added license banner and NEXT_PUBLIC_LICENSE_CONSENT in .env.example. agree to hide the banner

* minor changes to license banner

* added /ee/ to tailwind purge config

* wip
This commit is contained in:
Peer Richelsen 2021-10-01 00:42:08 +01:00 committed by GitHub
parent 30163f0a78
commit 860db6c959
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 119 additions and 45 deletions

View file

@ -1,3 +1,12 @@
# Set this value to 'agree' to accept our license:
# LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE
#
# Summary of terms:
# - The codebase has to stay open source, whether it was modified or not
# - You can not repackage or sell the codebase
# - Acquire a commercial license to remove these terms by emailing: license@cal.com
NEXT_PUBLIC_LICENSE_CONSENT=''
# DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>/<db-name>'
DATABASE_URL="postgresql://postgres:@localhost:5432/calendso?schema=public"

View file

@ -1,42 +0,0 @@
import { GiftIcon } from "@heroicons/react/outline";
export default function DonateBanner() {
if (location.hostname.endsWith(".cal.com")) {
return null;
}
return (
<>
<div className="h-12" />
<div className="fixed inset-x-0 bottom-0">
<div className="bg-blue-600">
<div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
<div className="flex items-center justify-between flex-wrap">
<div className="w-0 flex-1 flex items-center">
<span className="flex p-2 rounded-lg bg-blue-600">
<GiftIcon className="h-6 w-6 text-white" aria-hidden="true" />
</span>
<p className="ml-3 font-medium text-white truncate">
<span className="md:hidden">Support the ongoing development</span>
<span className="hidden md:inline">
You&apos;re using the free self-hosted version. Support the ongoing development by making
a donation.
</span>
</p>
</div>
<div className="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
<a
target="_blank"
rel="noreferrer"
href="https://cal.com/donate"
className="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 bg-white hover:bg-blue-50">
Donate
</a>
</div>
</div>
</div>
</div>
</div>
</>
);
}

View file

@ -15,6 +15,7 @@ import { useRouter } from "next/router";
import React, { Fragment, ReactNode, useEffect } from "react";
import { Toaster } from "react-hot-toast";
import LicenseBanner from "@ee/components/LicenseBanner";
import HelpMenuItemDynamic from "@ee/lib/intercom/HelpMenuItemDynamic";
import classNames from "@lib/classNames";
@ -241,6 +242,7 @@ export default function Shell(props: {
{/* add padding to content for mobile navigation*/}
<div className="block md:hidden pt-12" />
</div>
<LicenseBanner />
</main>
</div>
</div>

View file

@ -1,4 +1,5 @@
import { ExclamationIcon } from "@heroicons/react/outline";
import { CheckIcon } from "@heroicons/react/solid";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import React, { PropsWithChildren } from "react";
@ -8,9 +9,9 @@ import { Button } from "@components/ui/Button";
export type ConfirmationDialogContentProps = {
confirmBtnText?: string;
cancelBtnText?: string;
onConfirm: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
title: string;
variety?: "danger" /* no others yet */;
variety?: "danger" | "warning" | "success";
};
export default function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
@ -26,6 +27,16 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
<ExclamationIcon className="w-5 h-5 text-red-600" />
</div>
)}
{variety === "warning" && (
<div className="text-center p-2 rounded-full mx-auto bg-orange-100">
<ExclamationIcon className="w-5 h-5 text-orange-600" />
</div>
)}
{variety === "success" && (
<div className="text-center p-2 rounded-full mx-auto bg-green-100">
<CheckIcon className="w-5 h-5 text-green-600" />
</div>
)}
</div>
)}
<div>

View file

@ -0,0 +1,90 @@
import { XIcon } from "@heroicons/react/outline";
import { BadgeCheckIcon } from "@heroicons/react/solid";
import { Dialog, DialogTrigger } from "@components/Dialog";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
export default function LicenseBanner() {
/*
Set this value to 'agree' to accept our license:
LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE
Summary of terms:
- The codebase has to stay open source, whether it was modified or not
- You can not repackage or sell the codebase
- Acquire a commercial license to remove these terms by emailing: license@cal.com
NEXT_PUBLIC_LICENSE_CONSENT=''
*/
if (process.env.NEXT_PUBLIC_LICENSE_CONSENT === "agree") {
return null;
}
return (
<div className="fixed left-0 md:left-56 bottom-0 inset-x-0 pb-2 sm:pb-5">
<div className="max-w-7xl mx-auto px-2 sm:px-8">
<div className="p-2 rounded-sm bg-green-600 shadow-lg sm:p-3">
<div className="flex items-center justify-between flex-wrap">
<div className="w-0 flex-1 flex items-center">
<span className="flex p-2 rounded-sm bg-green-800">
<BadgeCheckIcon className="h-6 w-6 text-white" aria-hidden="true" />
</span>
<p className="ml-3 font-medium text-white truncate">
<span className="inline">
Accept our license by changing the .env variable{" "}
<span className="bg-gray-50 bg-opacity-20 px-1">NEXT_PUBLIC_LICENSE_CONSENT</span> to
&apos;I agree&apos;.
</span>
</p>
</div>
<div className="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
<Dialog>
<DialogTrigger asChild>
<button className="rounded-sm w-full flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium text-green-600 bg-white hover:bg-green-50">
Accept License
</button>
</DialogTrigger>
<DialogContent />
</Dialog>
</div>
<div className="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
<Dialog>
<DialogTrigger asChild>
<button className="-mr-1 flex p-2 rounded-sm hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-white">
<span className="sr-only">Dismiss</span>
<XIcon className="h-6 w-6 text-white" aria-hidden="true" />
</button>
</DialogTrigger>
<DialogContent />
</Dialog>
</div>
</div>
</div>
</div>
</div>
);
function DialogContent() {
return (
<ConfirmationDialogContent
variety="success"
title="Open .env and agree to our License"
confirmBtnText="I've changed my .env"
cancelBtnText="Cancel">
To remove this banner, please open your .env file and change the{" "}
<span className="bg-green-400 text-green-500 bg-opacity-20 p-[2px]">NEXT_PUBLIC_LICENSE_CONSENT</span>{" "}
variable to &apos;agree&apos;.
<h2 className="mt-8 mb-2 text-black font-cal">Summary of terms:</h2>
<ul className="ml-5 list-disc">
<li>The codebase has to stay open source, whether it was modified or not</li>
<li>You can not repackage or sell the codebase</li>
<li>
Acquire a commercial license to remove these terms by emailing:{" "}
<a className="text-blue-500 underline" href="mailto:license@cal.com">
license@cal.com
</a>
</li>
</ul>
</ConfirmationDialogContent>
);
}
}

View file

@ -1,6 +1,10 @@
module.exports = {
mode: "jit",
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
purge: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./ee/components/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
extend: {