habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

website: add comparison based on vector.dev's site

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-18 22:02:04 +01:00
parent e7a8371cbb
commit fe054136b1
10 changed files with 370 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
website/src/comparison.jsx Normal file
View File

@ -0,0 +1,149 @@
import React from "react";
import { Check, X, AlertTriangle } from "react-feather";
function Comparison() {
return (
<section className="">
<div className="container">
<h2 id="correctness">Why authentik?</h2>
<div className="table-responsive">
<table className="comparison">
<thead>
<tr>
<th></th>
<th className="authentik">authentik</th>
<th>Keycloak</th>
<th>Microsoft ADFS</th>
<th>Microsoft Azure AD</th>
<th>Okta</th>
<th>Duo</th>
</tr>
</thead>
<thead className="group">
<tr>
<th>Protocol Support</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td className="row-label">SAML2</td>
<td className="result passed authentik"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
</tr>
<tr>
<td className="row-label">OAuth2 and OIDC</td>
<td className="result passed authentik"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
</tr>
</tbody>
<thead className="group">
<tr>
<th>Use-cases</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td className="row-label">Authentication</td>
<td className="result passed authentik"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
</tr>
<tr>
<td className="row-label">Enrollment</td>
<td className="result passed authentik"><Check></Check></td>
<td className="result passed"><X></X></td>
<td className="result failed"><X></X></td>
<td className="result failed"><X></X></td>
<td className="result failed"><X></X></td>
<td className="result passed"><X></X></td>
</tr>
<tr>
<td className="row-label">Self-service</td>
<td className="result passed authentik"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
</tr>
</tbody>
<thead className="group">
<tr>
<th>Features</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td className="row-label">MFA</td>
<td className="result passed authentik"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result failed"><X></X></td>
<td className="result failed"><Check></Check></td>
<td className="result failed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
</tr>
<tr>
<td className="row-label">Conditional Access</td>
<td className="result passed authentik"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result warning"><AlertTriangle></AlertTriangle></td>
<td className="result passed"><Check></Check></td>
<td className="result warning"><AlertTriangle></AlertTriangle></td>
</tr>
<tr>
<td className="row-label">Open-source</td>
<td className="result passed authentik"><Check></Check></td>
<td className="result passed"><Check></Check></td>
<td className="result failed"><X></X></td>
<td className="result failed"><X></X></td>
<td className="result failed"><X></X></td>
<td className="result failed"><X></X></td>
</tr>
<tr>
<td className="row-label">Application Proxy</td>
<td className="result passed authentik"><Check></Check></td>
<td className="result warning"><AlertTriangle></AlertTriangle></td>
<td className="result warning"><AlertTriangle></AlertTriangle></td>
<td className="result failed"><X></X></td>
<td className="result failed"><X></X></td>
<td className="result failed"><X></X></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
);
}
export default Comparison;

150
website/src/css/custom.css
View File

@ -35,3 +35,153 @@
.hero_image > img {
max-height: 200px;
}
table {
display: table;
}
.table-responsive {
overflow-x: auto;
}
/**
* comparison
*
* Comparison table used in both the performance and correctness tables.
*/
table.comparison {
width: 100%;
}
table.comparison [title],
table.comparison [title] {
text-decoration: underline;
text-decoration-style: dotted;
}
table.comparison th,
table.comparison td,
table.comparison tr {
border: 0px none;
white-space: nowrap;
}
table.comparison th {
padding-left: 0;
padding-right: 0;
}
table.comparison tr th.authentik {
color: var(--ifm-color-primary);
}
table.comparison thead.group tr {
border-bottom: 1px;
border-bottom-color: var(--ifm-table-head-color);
border-bottom-style: solid;
}
table.comparison thead.group th:first-child {
text-align: left;
font-weight: 800;
}
table.comparison tr td {
border-left: 10px solid transparent;
min-width: 90px;
text-align: center;
}
table.comparison tr td:first-child {
font-weight: bold;
padding-left: 0;
text-align: left;
white-space: nowrap;
width: 25%;
}
table.comparison tr td.description {
font-weight: normal;
min-width: 250px;
padding-top: 0;
vertical-align: top;
white-space: normal;
}
table.comparison tr td.description .label {
color: var(--ifm-heading-color);
font-weight: bold;
}
table.comparison tr td.description .text {
color: var(--ifm-color-emphasis-600);
}
table.comparison tr td.description .links {
font-size: 0.9em;
margin-top: var(--ifm-spacing-vertical);
}
table.comparison tr td.result {
background-color: var(--ifm-panel-background-color);
}
table.comparison tr td.result.failed {
color: var(--ifm-color-danger);
}
table.comparison tr td.result.lost {
background: var(--ifm-color-emphasis-1000);
color: transparent;
}
table.comparison tr td.result.not-applicable {
background: var(--ifm-color-emphasis-1000);
color: rgba(var(--ifm-background-color-rgb), 0.5);
}
table.comparison tr td.result.passed {
color: var(--ifm-color-success);
}
table.comparison tr td.result.warning {
color: var(--ifm-color-warning);
}
table.comparison tr td.result.passed.authentik {
background: var(--ifm-color-primary);
color: var(--ifm-background-color);
}
table.comparison tr td.bar {
padding: 0;
vertical-align: bottom;
}
table.comparison tr td.bar .place {
font-size: 0.9em;
}
table.comparison tr td.bar .measurement {
font-weight: bold;
}
table.comparison tr td.bar .bar {
background: var(--ifm-color-emphasis-1000);
margin: 0 auto;
}
table.comparison tr td.bar.authentik {
color: var(--ifm-color-primary);
}
table.comparison tr td.bar.authentik .bar {
background: var(--ifm-color-primary);
}
@media (max-width: 996px) {
table.comparison td.description {
display: none;
}
}

4
website/src/pages/index.jsx
View File

@ -6,6 +6,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import useBaseUrl from "@docusaurus/useBaseUrl";
import styles from "./styles.module.css";
import BeforeAfterSlider from 'react-before-after-slider'
import Comparison from "../comparison";
const features = [
{
@ -150,6 +151,9 @@ function Home() {
</div>
</div>
</section>
<section>
<Comparison></Comparison>
</section>
</main>
</Layout>
);