website: add tooltips to comparison table (#6402)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

website/package-lock.json

@@ -22,6 +22,7 @@
                 "react-dom": "^17.0.2",
                 "react-feather": "^2.0.10",
                 "react-toggle": "^4.1.3",
+                "react-tooltip": "^5.19.0",
                 "remark-github": "^11.2.4"
             },
             "devDependencies": {
@@ -2688,6 +2689,19 @@
                 "node": ">=16.14"
             }
         },
+        "node_modules/@floating-ui/core": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+            "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g=="
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "1.4.5",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.5.tgz",
+            "integrity": "sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==",
+            "dependencies": {
+                "@floating-ui/core": "^1.3.1"
+            }
+        },
         "node_modules/@hapi/hoek": {
             "version": "9.3.0",
             "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -10576,6 +10590,19 @@
                 "react-dom": ">= 15.3.0 < 19"
             }
         },
+        "node_modules/react-tooltip": {
+            "version": "5.19.0",
+            "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.19.0.tgz",
+            "integrity": "sha512-NSUk77GMpxYKHFKJVNHL++QQXRuH2QW1qDrXPtJnp2s/MJvUnU73N5TTADwDyrO2+xGlr0xHhjvQphkF60cMEA==",
+            "dependencies": {
+                "@floating-ui/dom": "^1.0.0",
+                "classnames": "^2.3.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.14.0",
+                "react-dom": ">=16.14.0"
+            }
+        },
         "node_modules/readable-stream": {
             "version": "3.6.2",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -15639,6 +15666,19 @@
                 "tslib": "^2.4.0"
             }
         },
+        "@floating-ui/core": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+            "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g=="
+        },
+        "@floating-ui/dom": {
+            "version": "1.4.5",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.5.tgz",
+            "integrity": "sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==",
+            "requires": {
+                "@floating-ui/core": "^1.3.1"
+            }
+        },
         "@hapi/hoek": {
             "version": "9.3.0",
             "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -21320,6 +21360,15 @@
                 "classnames": "^2.2.5"
             }
         },
+        "react-tooltip": {
+            "version": "5.19.0",
+            "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.19.0.tgz",
+            "integrity": "sha512-NSUk77GMpxYKHFKJVNHL++QQXRuH2QW1qDrXPtJnp2s/MJvUnU73N5TTADwDyrO2+xGlr0xHhjvQphkF60cMEA==",
+            "requires": {
+                "@floating-ui/dom": "^1.0.0",
+                "classnames": "^2.3.0"
+            }
+        },
         "readable-stream": {
             "version": "3.6.2",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",

website/package.json

@@ -29,6 +29,7 @@
         "react-dom": "^17.0.2",
         "react-feather": "^2.0.10",
         "react-toggle": "^4.1.3",
+        "react-tooltip": "^5.19.0",
         "remark-github": "^11.2.4"
     },
     "browserslist": {

website/src/components/Comparison/index.tsx

@@ -1,11 +1,21 @@
 import React from "react";
 import { Check, X, AlertTriangle } from "react-feather";
 import "./style.css";
+import "react-tooltip/dist/react-tooltip.css";
+import { Tooltip } from "react-tooltip";
 
-function Comparison() {
+export default function Comparison() {
+    const tooltipAvailableThirdParty = "Available as a third-party extension";
+    const tooltipPlanned = "Planned as a future feature";
+    const tooltipRequiresLicense =
+        "Requires additional licenses/not included in base tier";
+    const toolRequiresProductAADS =
+        "Requires additional product: Azure AD Domain Services";
+    const toolRequiresProductWAP =
+        "Requires additional product: Web Application Proxy";
     return (
         <>
-            <a name="comparison"></a>
+            <a id="comparison"></a>
             <h1 className="header">Why authentik?</h1>
             <div className="table-responsive">
                 <div className="table">
@@ -89,7 +99,12 @@ function Comparison() {
                                     <Check></Check>
                                 </td>
                                 <td className="result warning">
-                                    <AlertTriangle></AlertTriangle>
+                                    <AlertTriangle
+                                        className="tooltip"
+                                        data-tooltip-content={
+                                            tooltipAvailableThirdParty
+                                        }
+                                    ></AlertTriangle>
                                 </td>
                                 <td className="result failed">
                                     <X></X>
@@ -119,7 +134,12 @@ function Comparison() {
                                     <X></X>
                                 </td>
                                 <td className="result warning">
-                                    <AlertTriangle></AlertTriangle>
+                                    <AlertTriangle
+                                        className="tooltip"
+                                        data-tooltip-content={
+                                            toolRequiresProductAADS
+                                        }
+                                    ></AlertTriangle>
                                 </td>
                                 <td className="result passed">
                                     <Check></Check>
@@ -137,7 +157,12 @@ function Comparison() {
                                     <Check></Check>
                                 </td>
                                 <td className="result warning">
-                                    <AlertTriangle></AlertTriangle>
+                                    <AlertTriangle
+                                        className="tooltip"
+                                        data-tooltip-content={
+                                            tooltipAvailableThirdParty
+                                        }
+                                    ></AlertTriangle>
                                 </td>
                                 <td className="result failed">
                                     <X></X>
@@ -268,10 +293,18 @@ function Comparison() {
                             <tr>
                                 <td className="row-label">SCIM</td>
                                 <td className="result warning authentik">
-                                    <AlertTriangle></AlertTriangle>
+                                    <AlertTriangle
+                                        className="tooltip"
+                                        data-tooltip-content={tooltipPlanned}
+                                    ></AlertTriangle>
                                 </td>
                                 <td className="result warning">
-                                    <AlertTriangle></AlertTriangle>
+                                    <AlertTriangle
+                                        className="tooltip"
+                                        data-tooltip-content={
+                                            tooltipAvailableThirdParty
+                                        }
+                                    ></AlertTriangle>
                                 </td>
                                 <td className="result failed">
                                     <X></X>
@@ -427,13 +460,23 @@ function Comparison() {
                                     <Check></Check>
                                 </td>
                                 <td className="result warning">
-                                    <AlertTriangle></AlertTriangle>
+                                    <AlertTriangle
+                                        className="tooltip"
+                                        data-tooltip-content={
+                                            tooltipRequiresLicense
+                                        }
+                                    ></AlertTriangle>
                                 </td>
                                 <td className="result passed">
                                     <Check></Check>
                                 </td>
                                 <td className="result warning">
-                                    <AlertTriangle></AlertTriangle>
+                                    <AlertTriangle
+                                        className="tooltip"
+                                        data-tooltip-content={
+                                            tooltipRequiresLicense
+                                        }
+                                    ></AlertTriangle>
                                 </td>
                                 <td className="result passed">
                                     <Check></Check>
@@ -469,10 +512,20 @@ function Comparison() {
                                     <Check></Check>
                                 </td>
                                 <td className="result warning">
-                                    <AlertTriangle></AlertTriangle>
+                                    <AlertTriangle
+                                        className="tooltip"
+                                        data-tooltip-content={
+                                            tooltipAvailableThirdParty
+                                        }
+                                    ></AlertTriangle>
                                 </td>
                                 <td className="result warning">
-                                    <AlertTriangle></AlertTriangle>
+                                    <AlertTriangle
+                                        className="tooltip"
+                                        data-tooltip-content={
+                                            toolRequiresProductWAP
+                                        }
+                                    ></AlertTriangle>
                                 </td>
                                 <td className="result passed">
                                     <Check></Check>
@@ -483,16 +536,15 @@ function Comparison() {
                                 <td className="result failed">
                                     <X></X>
                                 </td>
-                                <td className="result warning">
+                                <td className="result passed">
-                                    <AlertTriangle></AlertTriangle>
+                                    <Check></Check>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
+                    <Tooltip anchorSelect=".tooltip" place="top" />
                 </div>
             </div>
         </>
     );
 }
-
-export default Comparison;

website/src/pages/legal/terms.md

@@ -24,7 +24,7 @@ The Software and Other Authentik Materials are collectively referred to herein a
 
 "Host" means each individual machine (real or virtual, including servers, containers, workstations, smartphones, POS, industrial controls, gateways, sensors, IoT endpoints, or any other physical or simulated computing interface or machine) of Customer and/or its Affiliates (including, without limitation, employees, agents or consultants thereof) with access to Licensed Materials hereunder.
 
-1.2 Subject to the terms hereof, Authentik will provide reasonable support to Customer for the Licensed Materials as set forth at https://authentikdm.com, for the support plan selected and paid for by Customer. Notwithstanding anything to the contrary, in the event that Customer does not reasonably comply with written specifications or instructions from Authentik’s service engineers regarding any support issue or request (including without limitation, failure to make backups of Customer’s Licensed Materials) (each, a “Support Issue”), Authentik may terminate its support obligations to Customer with respect to such Support Issue upon fifteen (15) days’ written notice if Customer does not cure such noncompliance within the notice period.
+1.2 Subject to the terms hereof, Authentik will provide reasonable support to Customer for the Licensed Materials as set forth at https://goauthentik.io, for the support plan selected and paid for by Customer. Notwithstanding anything to the contrary, in the event that Customer does not reasonably comply with written specifications or instructions from Authentik’s service engineers regarding any support issue or request (including without limitation, failure to make backups of Customer’s Licensed Materials) (each, a “Support Issue”), Authentik may terminate its support obligations to Customer with respect to such Support Issue upon fifteen (15) days’ written notice if Customer does not cure such noncompliance within the notice period.
 
 1.2.1 Authentik will use reasonable commercial efforts to respond to support questions by phone or email during the next business day. The number of support questions is not limited.
 
@@ -58,7 +58,7 @@ The Software and Other Authentik Materials are collectively referred to herein a
 
 ## 5. PAYMENT OF FEES
 
-5.1 Unless and until Authentik and Customer have executed a quote document specifically referencing this Agreement with respect to amounts due on account of the Licensed Materials (a “Quote”, which is hereby incorporated by reference, if applicable), and unless Customer’s subscription to (and payment with respect to) the Licensed Materials has been made on Customer’s behalf by a reseller, Customer will pay Authentik the applicable fees as set forth at https://authentikdm.com (the “Pricing”) for the Licensed Materials selected and/or used by Customer (the “Fees”) without any right of set-off or deduction. On each anniversary of the Effective Date, Authentik will invoice Customer (or its reseller, if applicable) with respect to any and all additional Customer Hosts of the Licensed Materials beyond those for whom Customer has pre-paid, as of such date (and for whom the Fees due pursuant to such invoice will be the then-current per-year Host fee with respect to the year just ended, and the then current per-year Host fee with respect to all subsequent years, unless otherwise agreed in writing by both parties (collectively, a “True-Up”)). For Customers that have pre-paid all Fees for multi-year subscriptions for Licensed Materials pursuant to a Quote, on each anniversary of the Effective Date during the term of this Agreement, (i) a new license key will be provided, and (ii) a True-Up will be conducted. All additional Hosts purchased shall be co-terminated through the end of the original Subscription period.
+5.1 Unless and until Authentik and Customer have executed a quote document specifically referencing this Agreement with respect to amounts due on account of the Licensed Materials (a “Quote”, which is hereby incorporated by reference, if applicable), and unless Customer’s subscription to (and payment with respect to) the Licensed Materials has been made on Customer’s behalf by a reseller, Customer will pay Authentik the applicable fees as set forth at https://goauthentik.io (the “Pricing”) for the Licensed Materials selected and/or used by Customer (the “Fees”) without any right of set-off or deduction. On each anniversary of the Effective Date, Authentik will invoice Customer (or its reseller, if applicable) with respect to any and all additional Customer Hosts of the Licensed Materials beyond those for whom Customer has pre-paid, as of such date (and for whom the Fees due pursuant to such invoice will be the then-current per-year Host fee with respect to the year just ended, and the then current per-year Host fee with respect to all subsequent years, unless otherwise agreed in writing by both parties (collectively, a “True-Up”)). For Customers that have pre-paid all Fees for multi-year subscriptions for Licensed Materials pursuant to a Quote, on each anniversary of the Effective Date during the term of this Agreement, (i) a new license key will be provided, and (ii) a True-Up will be conducted. All additional Hosts purchased shall be co-terminated through the end of the original Subscription period.
 
 5.2 All payments will be made in accordance with the payment schedule and the method of payment set forth in the Pricing. If not otherwise specified, (a) Authentik will invoice Customer with respect to Fees up-front, for each term of the Customer's subscription (as applicable), and (b) payments will be due within thirty (30) days of Customer's receipt of correct invoice. Except as expressly set forth in this Agreement, all Fees paid and/or due hereunder (including any prepaid amounts) are non-refundable, including without limitation if this Agreement is terminated in accordance with Section 6 below. If Customer terminates this Agreement pursuant to Section 6.2 within 45 calendar days from receipt of the initial invoice for the Licensed Materials, Authentik will refund all Fees paid hereunder.