UX License page with registered state (#1650)
UX License page with registered state
This commit is contained in:
Prakash Senthil Vel
committed by
GitHub
GitHub
parent
0de9ff38f4
commit
06bfe52e7a
37
portal-ui/src/icons/ArrowRightLink.tsx
Normal file
37
portal-ui/src/icons/ArrowRightLink.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2022 MinIO, Inc.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU Affero General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU Affero General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { SVGProps } from "react";
|
||||
|
||||
const ArrowRightLink = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`min-icon`}
|
||||
fill={"currentcolor"}
|
||||
{...props}
|
||||
viewBox="0 0 12.621 7.619"
|
||||
>
|
||||
<path
|
||||
d="M2.82.976A.989.989,0,0,1,4.8.976V9.243L5.919,8.122a.989.989,0,0,1,1.4,1.4l-2.8,2.8a.989.989,0,0,1-1.411,0L.3,9.521a.989.989,0,0,1,1.4-1.4L2.82,9.243V.976Z"
|
||||
transform="translate(0 7.619) rotate(-90)"
|
||||
fill="#2781b0"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArrowRightLink;
|
||||
@@ -33,7 +33,7 @@ const HelpIconFilled = (props: SVGProps<SVGSVGElement>) => (
|
||||
width="21"
|
||||
height="21"
|
||||
transform="translate(0 -0.159)"
|
||||
fill="#07193e"
|
||||
fill={"currentcolor"}
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
@@ -47,7 +47,7 @@ const HelpIconFilled = (props: SVGProps<SVGSVGElement>) => (
|
||||
id="Trazado_7048"
|
||||
data-name="Trazado 7048"
|
||||
d="M10.42,0A10.42,10.42,0,1,0,20.84,10.42,10.42,10.42,0,0,0,10.42,0M9.534,18.477a2,2,0,0,1-1.953-1.953h0a1.943,1.943,0,1,1,1.953,1.953m1.309-6.32-.082,1.176H8.3V9.856h.982c1.974,0,3.037-.624,3.037-1.82,0-1.1-1.053-1.7-3.007-1.7-.552,0-1.125.041-1.554.081L7.561,3.73A15.939,15.939,0,0,1,9.626,3.6c3.569,0,5.635,1.647,5.635,4.234,0,2.362-1.575,3.876-4.418,4.326"
|
||||
fill="#07193e"
|
||||
fill={"currentcolor"}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
54
portal-ui/src/icons/LicenseDocIcon.tsx
Normal file
54
portal-ui/src/icons/LicenseDocIcon.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2022 MinIO, Inc.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU Affero General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU Affero General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import * as React from "react";
|
||||
import { SVGProps } from "react";
|
||||
|
||||
const LicenseDocIcon = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`min-icon`}
|
||||
fill={"currentcolor"}
|
||||
viewBox="0 0 16 15.1"
|
||||
{...props}
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="clip-path-lic-doc">
|
||||
<rect
|
||||
id="Rectángulo_963"
|
||||
data-name="Rectángulo 963"
|
||||
width="16"
|
||||
height="15.1"
|
||||
fill={"currentcolor"}
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g
|
||||
id="Grupo_2324"
|
||||
data-name="Grupo 2324"
|
||||
clipPath="url(#clip-path-lic-doc)"
|
||||
>
|
||||
<path
|
||||
id="Trazado_7051"
|
||||
data-name="Trazado 7051"
|
||||
d="M12.118,0A3.867,3.867,0,0,0,9.051,1.506a3.9,3.9,0,0,0-.687,1.4L.948,2.975A.988.988,0,0,0,0,4V14.079A.988.988,0,0,0,.948,15.1H12.105a.987.987,0,0,0,.947-1.021V7.645a3.871,3.871,0,0,0,1.17-.508,3.914,3.914,0,0,0,.935-.848A3.878,3.878,0,0,0,12.118,0M1.057,5.621a.516.516,0,0,1,.515-.515h3.8a.516.516,0,0,1,.515.515v.686a.516.516,0,0,1-.515.515h-3.8a.516.516,0,0,1-.515-.515Zm10.7,7.573a.516.516,0,0,1-.515.515H1.571a.516.516,0,0,1-.515-.515v-.686a.516.516,0,0,1,.515-.515h9.666a.516.516,0,0,1,.515.515Zm0-3.443a.516.516,0,0,1-.515.515H1.571a.516.516,0,0,1-.515-.515V9.064a.516.516,0,0,1,.515-.515h9.666a.516.516,0,0,1,.515.515Zm2.025-6.511,0,0L12.026,4.988a.388.388,0,0,1-.28.118h0a.389.389,0,0,1-.28-.118l-.873-.873a.4.4,0,0,1,.564-.565l.59.591L13.21,2.678a.4.4,0,0,1,.561,0l0,0a.4.4,0,0,1,0,.561"
|
||||
fill={"currentcolor"}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default LicenseDocIcon;
|
||||
36
portal-ui/src/icons/OpenSourceIcon.tsx
Normal file
36
portal-ui/src/icons/OpenSourceIcon.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2022 MinIO, Inc.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU Affero General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU Affero General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import * as React from "react";
|
||||
import { SVGProps } from "react";
|
||||
|
||||
const OpenSourceIcon = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`min-icon`}
|
||||
fill={"currentcolor"}
|
||||
viewBox="0 0 12.425 12.024"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
id="opensource"
|
||||
d="M8.4,12.024,7.074,8.372a2.312,2.312,0,0,0,1.468-2.16,2.32,2.32,0,0,0-2.33-2.33,2.32,2.32,0,0,0-2.33,2.33,2.313,2.313,0,0,0,1.468,2.16L4.028,12.024A6.2,6.2,0,0,1,1.122,9.761,5.992,5.992,0,0,1,0,6.212,6.094,6.094,0,0,1,.491,3.8,6.079,6.079,0,0,1,3.8.491a6.177,6.177,0,0,1,4.829,0A6.079,6.079,0,0,1,11.933,3.8a6.094,6.094,0,0,1,.491,2.415A5.993,5.993,0,0,1,11.3,9.761,6.2,6.2,0,0,1,8.4,12.024Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default OpenSourceIcon;
|
||||
@@ -35,7 +35,7 @@ const VerifiedIcon = (props: SVGProps<SVGSVGElement>) => (
|
||||
<path
|
||||
data-name="Trazado 7117"
|
||||
d="M19.075 11.962a3.1 3.1 0 0 0 1.008-1.965 3.1 3.1 0 0 0-1.008-1.963 3.134 3.134 0 0 1-.633-.894 3.4 3.4 0 0 1 0-1.164 3.121 3.121 0 0 0-.286-2.154 2.856 2.856 0 0 0-1.892-.952 3.024 3.024 0 0 1-1.053-.353 3.232 3.232 0 0 1-.628-.917A2.982 2.982 0 0 0 13.118 0a2.77 2.77 0 0 0-2.029.383 3.079 3.079 0 0 1-1.085.368 3.079 3.079 0 0 1-1.085-.37A2.77 2.77 0 0 0 6.89-.002a2.99 2.99 0 0 0-1.465 1.599 3.236 3.236 0 0 1-.633.922 3.033 3.033 0 0 1-1.05.351 2.856 2.856 0 0 0-1.892.953 3.133 3.133 0 0 0-.284 2.142 3.448 3.448 0 0 1 0 1.164 3.216 3.216 0 0 1-.633.9A3.1 3.1 0 0 0-.075 9.996a3.1 3.1 0 0 0 1.008 1.965 3.246 3.246 0 0 1 .633.89 3.462 3.462 0 0 1 0 1.166 3.133 3.133 0 0 0 .284 2.154 2.856 2.856 0 0 0 1.892.952 3.033 3.033 0 0 1 1.05.351 3.234 3.234 0 0 1 .633.921 2.982 2.982 0 0 0 1.465 1.592 2.77 2.77 0 0 0 2.029-.383 3.076 3.076 0 0 1 1.085-.37 3.077 3.077 0 0 1 1.085.368 3.769 3.769 0 0 0 1.525.472 1.561 1.561 0 0 0 .5-.082 2.978 2.978 0 0 0 1.465-1.6 3.249 3.249 0 0 1 .633-.921 3.032 3.032 0 0 1 1.05-.351 2.856 2.856 0 0 0 1.892-.952 3.113 3.113 0 0 0 .284-2.157 3.445 3.445 0 0 1 0-1.164 3.16 3.16 0 0 1 .633-.889m-10.13 1.894-3.89-4.066 1.38-1.437 2.51 2.618 4.638-4.833 1.38 1.442Z"
|
||||
fill="#4ccb92"
|
||||
fill={"currentcolor"}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@ -175,3 +175,6 @@ export { default as LegalHoldIcon } from "./LegalHoldIcon";
|
||||
export { default as RetentionIcon } from "./RetentionIcon";
|
||||
export { default as TagsIcon } from "./TagsIcon";
|
||||
export { default as AlertCloseIcon } from "./AlertCloseIcon";
|
||||
export { default as OpenSourceIcon } from "./OpenSourceIcon";
|
||||
export { default as ArrowRightLink } from "./ArrowRightLink";
|
||||
export { default as LicenseDocIcon } from "./LicenseDocIcon";
|
||||
|
||||
@@ -1046,6 +1046,16 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
|
||||
<cicons.AlertCloseIcon /> <br />
|
||||
AlertCloseIcon
|
||||
</Grid>
|
||||
<Grid item xs={3} sm={2} md={1}>
|
||||
<cicons.OpenSourceIcon />
|
||||
<br />
|
||||
OpenSourceIcon
|
||||
</Grid>
|
||||
<Grid item xs={3} sm={2} md={1}>
|
||||
<cicons.LicenseDocIcon />
|
||||
<br />
|
||||
LicenseDocIcon
|
||||
</Grid>
|
||||
</Grid>
|
||||
<h1>Menu Icons</h1>
|
||||
<Grid
|
||||
|
||||
@@ -30,17 +30,22 @@ import { containerForHeader } from "../Common/FormComponents/common/styleLibrary
|
||||
import PageHeader from "../Common/PageHeader/PageHeader";
|
||||
import LicenseModal from "./LicenseModal";
|
||||
import api from "../../../common/api";
|
||||
import { LicenseIcon } from "../../../icons";
|
||||
import {
|
||||
ArrowRightLink,
|
||||
HelpIconFilled,
|
||||
LicenseIcon,
|
||||
LoginMinIOLogo,
|
||||
} from "../../../icons";
|
||||
import { hasPermission } from "../../../common/SecureComponent";
|
||||
import {
|
||||
CONSOLE_UI_RESOURCE,
|
||||
IAM_PAGES,
|
||||
IAM_PAGES_PERMISSIONS,
|
||||
} from "../../../common/SecureComponent/permissions";
|
||||
import RegisterStatus from "../Support/RegisterStatus";
|
||||
import LicensePlans from "./LicensePlans";
|
||||
import { Link } from "react-router-dom";
|
||||
import PageLayout from "../Common/Layout/PageLayout";
|
||||
import RegistrationStatusBanner from "../Support/RegistrationStatusBanner";
|
||||
|
||||
const mapState = (state: AppState) => ({
|
||||
operatorMode: state.system.operatorMode,
|
||||
@@ -53,12 +58,18 @@ const styles = (theme: Theme) =>
|
||||
pageTitle: {
|
||||
backgroundColor: "rgb(250,250,252)",
|
||||
marginTop: 40,
|
||||
border: "1px solid #EAEDEE",
|
||||
padding: 25,
|
||||
border: "1px solid #E5E5E5",
|
||||
paddingTop: 33,
|
||||
paddingLeft: 28,
|
||||
paddingBottom: 30,
|
||||
paddingRight: 28,
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
"& ul": {
|
||||
marginLeft: "-25px",
|
||||
listStyleType: "square",
|
||||
color: "#1C5A8D",
|
||||
fontSize: "16px",
|
||||
"& li": {
|
||||
float: "left",
|
||||
fontSize: 14,
|
||||
@@ -226,175 +237,253 @@ const License = ({ classes, operatorMode }: ILicenseProps) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<PageHeader label="License" />
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "1015px",
|
||||
margin: "auto",
|
||||
}}
|
||||
>
|
||||
<PageLayout>
|
||||
<Grid xs={12}>{isRegistered && <RegisterStatus />}</Grid>
|
||||
{!isRegistered && (
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
|
||||
<PageLayout>
|
||||
<Grid item xs={12}>
|
||||
{isRegistered && (
|
||||
<RegistrationStatusBanner email={licenseInfo?.email} />
|
||||
)}
|
||||
</Grid>
|
||||
{!isRegistered && (
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "25px",
|
||||
border: "1px solid #eaeaea",
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexFlow: {
|
||||
sm: "row",
|
||||
xs: "column",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "25px",
|
||||
border: "1px solid #eaeaea",
|
||||
marginRight: "8px",
|
||||
fontSize: "16px",
|
||||
fontWeight: 600,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexFlow: {
|
||||
sm: "row",
|
||||
xs: "column",
|
||||
|
||||
"& .min-icon": {
|
||||
width: "83px",
|
||||
height: "14px",
|
||||
marginLeft: "5px",
|
||||
marginRight: "5px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ marginRight: "8px" }}>
|
||||
Are you already a customer of MinIO?
|
||||
</Box>
|
||||
<Link
|
||||
to={IAM_PAGES.REGISTER_SUPPORT}
|
||||
className={classes.link}
|
||||
style={{ fontSize: 14 }}
|
||||
>
|
||||
Register this cluster →
|
||||
</Link>
|
||||
Are you already a customer of <LoginMinIOLogo />?
|
||||
</Box>
|
||||
|
||||
<div className={classes.pageTitle}>
|
||||
<Typography component="h2" variant="h6">
|
||||
Choosing between GNU AGPL v3 and Commercial License
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography className={classes.chooseFlavorText}>
|
||||
If you are building proprietary applications, you may want to
|
||||
choose the commercial license included as part of the Standard
|
||||
and Enterprise subscription plans. Applications must otherwise
|
||||
comply with all the GNU AGPLv3 License & Trademark
|
||||
obligations. Follow the links below to learn more about the
|
||||
compliance policy.
|
||||
</Typography>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href={`https://min.io/compliance?ref=${
|
||||
operatorMode ? "op" : "con"
|
||||
}`}
|
||||
className={classes.openSourcePolicy}
|
||||
target="_blank"
|
||||
rel="nofollow noopener noreferrer"
|
||||
>
|
||||
Learn more about GNU AGPL v3
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://min.io/logo?ref=${
|
||||
operatorMode ? "op" : "con"
|
||||
}`}
|
||||
className={classes.openSourcePolicy}
|
||||
target="_blank"
|
||||
rel="nofollow noopener noreferrer"
|
||||
>
|
||||
MinIO Trademark Compliance
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div style={{ clear: "both" }} />
|
||||
</div>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
padding: "30px 30px 30px 0px",
|
||||
fontSize: "22px",
|
||||
fontWeight: 600,
|
||||
<Link
|
||||
to={IAM_PAGES.REGISTER_SUPPORT}
|
||||
className={classes.link}
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
MinIO License and Support plans
|
||||
Register this cluster{" "}
|
||||
<ArrowRightLink
|
||||
style={{
|
||||
width: "13px",
|
||||
height: "8px",
|
||||
marginLeft: "5px",
|
||||
marginTop: "3px",
|
||||
}}
|
||||
/>
|
||||
</Link>
|
||||
</Box>
|
||||
|
||||
<div className={classes.pageTitle}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
"& .min-icon": {
|
||||
height: "18px",
|
||||
width: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<HelpIconFilled />
|
||||
<Box
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
marginLeft: "15px",
|
||||
}}
|
||||
>
|
||||
Choosing between GNU AGPL v3 and Commercial License
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
<br />
|
||||
<Box
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
fontWeight: "normal",
|
||||
lineHeight: "17px",
|
||||
}}
|
||||
>
|
||||
If you are building proprietary applications, you may want to
|
||||
choose the commercial license included as part of the Standard
|
||||
and Enterprise subscription plans. Applications must otherwise
|
||||
comply with all the GNU AGPLv3 License & Trademark obligations.
|
||||
Follow the links below to learn more about the compliance
|
||||
policy.
|
||||
</Box>
|
||||
<Box component="ul">
|
||||
<li>
|
||||
<a
|
||||
href={`https://min.io/compliance?ref=${
|
||||
operatorMode ? "op" : "con"
|
||||
}`}
|
||||
className={classes.openSourcePolicy}
|
||||
target="_blank"
|
||||
rel="nofollow noopener noreferrer"
|
||||
>
|
||||
Learn more about GNU AGPL v3
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://min.io/logo?ref=${
|
||||
operatorMode ? "op" : "con"
|
||||
}`}
|
||||
className={classes.openSourcePolicy}
|
||||
target="_blank"
|
||||
rel="nofollow noopener noreferrer"
|
||||
>
|
||||
MinIO Trademark Compliance
|
||||
</a>
|
||||
</li>
|
||||
</Box>
|
||||
<div style={{ clear: "both" }} />
|
||||
</div>
|
||||
|
||||
<LicensePlans
|
||||
activateProductModal={activateProductModal}
|
||||
closeModalAndFetchLicenseInfo={closeModalAndFetchLicenseInfo}
|
||||
licenseInfo={licenseInfo}
|
||||
setLicenseModal={setLicenseModal}
|
||||
operatorMode={operatorMode}
|
||||
currentPlanID={currentPlanID}
|
||||
setActivateProductModal={setActivateProductModal}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "40px 0px 40px 0px",
|
||||
fontSize: "16px",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
MinIO License and Support plans
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Grid container marginTop="35px">
|
||||
<Grid item xs={12} lg={12}>
|
||||
<Fragment>
|
||||
<LicenseModal
|
||||
open={licenseModal}
|
||||
closeModal={() => setLicenseModal(false)}
|
||||
/>
|
||||
<Grid
|
||||
xs={12}
|
||||
className={classes.icon}
|
||||
marginTop={"25px"}
|
||||
<LicensePlans
|
||||
activateProductModal={activateProductModal}
|
||||
closeModalAndFetchLicenseInfo={closeModalAndFetchLicenseInfo}
|
||||
licenseInfo={licenseInfo}
|
||||
setLicenseModal={setLicenseModal}
|
||||
operatorMode={operatorMode}
|
||||
currentPlanID={currentPlanID}
|
||||
setActivateProductModal={setActivateProductModal}
|
||||
/>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Grid
|
||||
container
|
||||
marginTop="35px"
|
||||
sx={{
|
||||
border: "1px solid #eaeaea",
|
||||
padding: "15px",
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} lg={12}>
|
||||
<Fragment>
|
||||
<LicenseModal
|
||||
open={licenseModal}
|
||||
closeModal={() => setLicenseModal(false)}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
marginBottom: "15px",
|
||||
flexFlow: {
|
||||
sm: "row",
|
||||
xs: "column",
|
||||
},
|
||||
alignItems: {
|
||||
xs: "flex-start",
|
||||
sm: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<LicenseIcon />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flex: 1,
|
||||
marginLeft: {
|
||||
sm: "15px",
|
||||
xs: "0",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<LicenseIcon />
|
||||
GNU Affero General Public License
|
||||
</Grid>
|
||||
<Grid container justifyContent={"space-between"}>
|
||||
<Grid item>
|
||||
<img src="/agpl-logo.svg" height={40} alt="agpl" />{" "}
|
||||
</Grid>
|
||||
<Grid item className={classes.licDet}>
|
||||
<b>Version 3.</b> 19 November 2007{" "}
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid container>
|
||||
<Typography>
|
||||
The GNU Affero General Public License is a free, copyleft
|
||||
license for software and other kinds of works,
|
||||
specifically designed to ensure cooperation with the
|
||||
Community in the case of network server software.
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography>
|
||||
The licenses for most software and other practical works
|
||||
are designed to take away your freedom to share and change
|
||||
the works. By contrast, our General Public Licenses are
|
||||
intended to guarantee your freedom to share and change all
|
||||
versions of a program--to make sure it remains free
|
||||
software for all its users.
|
||||
</Typography>
|
||||
<div className={classes.linkMore}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="primary"
|
||||
size="small"
|
||||
className={clsx(classes.link, classes.linkButton)}
|
||||
onClick={() => setLicenseModal(true)}
|
||||
>
|
||||
Read more
|
||||
</Button>
|
||||
<div> GNU Affero General Public License</div>
|
||||
<div className={classes.licDet}>
|
||||
Version 3. 19 November 2007
|
||||
</div>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Box>
|
||||
<img src="/agpl-logo.svg" height={40} alt="agpl" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Grid container>
|
||||
<Typography>
|
||||
The GNU Affero General Public License is a free, copyleft
|
||||
license for software and other kinds of works, specifically
|
||||
designed to ensure cooperation with the Community in the
|
||||
case of network server software.
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography>
|
||||
The licenses for most software and other practical works are
|
||||
designed to take away your freedom to share and change the
|
||||
works. By contrast, our General Public Licenses are intended
|
||||
to guarantee your freedom to share and change all versions
|
||||
of a program--to make sure it remains free software for all
|
||||
its users.
|
||||
</Typography>
|
||||
<div className={classes.linkMore}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="primary"
|
||||
size="small"
|
||||
className={clsx(classes.link, classes.linkButton)}
|
||||
onClick={() => setLicenseModal(true)}
|
||||
>
|
||||
Read more{" "}
|
||||
<ArrowRightLink
|
||||
style={{
|
||||
width: "13px",
|
||||
height: "8px",
|
||||
marginLeft: "5px",
|
||||
marginTop: "3px",
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</PageLayout>
|
||||
</Box>
|
||||
</Grid>
|
||||
</PageLayout>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -14,274 +14,226 @@
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export interface IPlanDetails {
|
||||
id: number;
|
||||
title: string;
|
||||
price: string;
|
||||
capacityMax: string;
|
||||
capacityMin?: string;
|
||||
}
|
||||
export const LICENSE_PLANS = {
|
||||
COMMUNITY: "community",
|
||||
STANDARD: "standard",
|
||||
ENTERPRISE: "enterprise",
|
||||
};
|
||||
|
||||
export const planDetails: IPlanDetails[] = [
|
||||
export const FEATURE_ITEMS = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Community",
|
||||
price: "Open Source",
|
||||
capacityMax: "",
|
||||
label: "Unit Price", //spacer
|
||||
isHeader: true,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Standard",
|
||||
price: "$10 per TiB per Month",
|
||||
capacityMax: "(Minimum of 100TB)",
|
||||
capacityMin: "",
|
||||
desc: "Features",
|
||||
featureTitleRow: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Enterprise",
|
||||
price: "$20 per TiB per Month",
|
||||
capacityMax: "(Minimum of 100TB)",
|
||||
capacityMin: "",
|
||||
desc: "License",
|
||||
},
|
||||
{
|
||||
desc: "Software Release",
|
||||
},
|
||||
{
|
||||
desc: "SLA",
|
||||
},
|
||||
{
|
||||
desc: "Support",
|
||||
},
|
||||
{
|
||||
desc: "Critical Security and Bug Detection",
|
||||
},
|
||||
{
|
||||
desc: "Panic Button",
|
||||
},
|
||||
{
|
||||
desc: "Health Diagnostics",
|
||||
},
|
||||
{
|
||||
desc: "Annual Architecture Review",
|
||||
},
|
||||
{
|
||||
desc: "Annual Performance Review",
|
||||
},
|
||||
{
|
||||
desc: "Indemnification",
|
||||
},
|
||||
{
|
||||
desc: "Security and Policy Review",
|
||||
},
|
||||
];
|
||||
|
||||
export interface IPlanItemValue {
|
||||
label: string;
|
||||
detail?: string;
|
||||
link?: boolean;
|
||||
}
|
||||
|
||||
export interface IPlanItemValues {
|
||||
[index: string]: IPlanItemValue;
|
||||
}
|
||||
export interface IPlanItem {
|
||||
id: number;
|
||||
field: string;
|
||||
plans: IPlanItemValues;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const planItems: IPlanItem[] = [
|
||||
export const COMMUNITY_PLAN_FEATURES = [
|
||||
{
|
||||
id: 0,
|
||||
field: "Unit Price",
|
||||
className: "unit-price",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "",
|
||||
detail: "",
|
||||
},
|
||||
Standard: {
|
||||
label: "$10 per TiB per Month",
|
||||
detail: "(Minimum of 100TB)",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "$20 per TiB per Month",
|
||||
detail: "(Minimum of 100TB)",
|
||||
},
|
||||
},
|
||||
label: "Community",
|
||||
isHeader: true,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
field: "License",
|
||||
className: "license-col",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "GNU AGPL v3",
|
||||
detail: "Open source",
|
||||
link: true,
|
||||
},
|
||||
Standard: {
|
||||
label: "Commercial",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "Commercial",
|
||||
},
|
||||
},
|
||||
id: "com_feat_title",
|
||||
featureTitleRow: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
field: "Software Release",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "Upstream",
|
||||
},
|
||||
Standard: {
|
||||
label: "1 Year Long Term Support",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "5 Years Long Term Support",
|
||||
},
|
||||
},
|
||||
id: "com_license",
|
||||
label: "GNU AGPL v3",
|
||||
isOssLicenseLink: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
field: "SLA",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "No SLA",
|
||||
},
|
||||
Standard: {
|
||||
label: "<48 Hours",
|
||||
detail: "(Local Business Hours)",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "<1 hour",
|
||||
},
|
||||
},
|
||||
id: "com_release",
|
||||
label: "Upstream",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
field: "Support",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "Community:",
|
||||
detail: "Public Slack Channel + Github Issues",
|
||||
},
|
||||
Standard: {
|
||||
label: "L4 Direct Engineering",
|
||||
detail: " support via SUBNET",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "L4 Direct Engineering",
|
||||
detail: "support via SUBNET",
|
||||
},
|
||||
},
|
||||
id: "com_sla",
|
||||
label: "No SLA",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
field: "Critical Security and Bug Detection",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "Self",
|
||||
},
|
||||
Standard: {
|
||||
label: "Continuous Scan and Alert",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "Continuous Scan and Alert",
|
||||
},
|
||||
},
|
||||
id: "com_support",
|
||||
label: "Community:",
|
||||
detail: "Public Slack Channel + Github Issues",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
field: "Panic Button",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "N/A",
|
||||
},
|
||||
Standard: {
|
||||
label: "1 per year",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "Unlimited",
|
||||
},
|
||||
},
|
||||
id: "com_security",
|
||||
label: "Self",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
field: "Health Diagnostics",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "N/A",
|
||||
},
|
||||
Standard: {
|
||||
label: "24/7/365",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "24/7/365",
|
||||
},
|
||||
},
|
||||
id: "com_panic",
|
||||
xsLabel: "N/A",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
field: "Annual Architecture Review",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "N/A",
|
||||
},
|
||||
Standard: {
|
||||
label: "N/A",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "Yes",
|
||||
},
|
||||
},
|
||||
id: "com_diag",
|
||||
xsLabel: "N/A",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
field: "Annual Performance Review",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "N/A",
|
||||
},
|
||||
Standard: {
|
||||
label: "N/A",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "Yes",
|
||||
},
|
||||
},
|
||||
id: "com_arch",
|
||||
xsLabel: "N/A",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
field: "Indemnification",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "N/A",
|
||||
},
|
||||
Standard: {
|
||||
label: "N/A",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "Yes",
|
||||
},
|
||||
},
|
||||
id: "com_perf",
|
||||
xsLabel: "N/A",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
field: "Security and Policy Review",
|
||||
plans: {
|
||||
Community: {
|
||||
label: "N/A",
|
||||
},
|
||||
Standard: {
|
||||
label: "N/A",
|
||||
},
|
||||
Enterprise: {
|
||||
label: "Yes",
|
||||
},
|
||||
},
|
||||
id: "com_indemnity",
|
||||
xsLabel: "N/A",
|
||||
},
|
||||
{
|
||||
id: "com_sec_policy",
|
||||
xsLabel: "N/A",
|
||||
},
|
||||
];
|
||||
|
||||
export interface IPlanButton {
|
||||
id: number;
|
||||
text: string;
|
||||
text2: string;
|
||||
link: string;
|
||||
plan: string;
|
||||
}
|
||||
export const planButtons: IPlanButton[] = [
|
||||
export const STANDARD_PLAN_FEATURES = [
|
||||
{
|
||||
id: 0,
|
||||
text: "Join Slack",
|
||||
text2: "",
|
||||
link: "https://slack.min.io",
|
||||
plan: "Community",
|
||||
label: "Standard",
|
||||
isHeader: true,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
text: "Subscribe",
|
||||
text2: "Sign up",
|
||||
link: "https://min.io/signup",
|
||||
plan: "Standard",
|
||||
id: "std_feat_title",
|
||||
featureTitleRow: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "Subscribe",
|
||||
text2: "Sign up",
|
||||
link: "https://min.io/signup",
|
||||
plan: "Enterprise",
|
||||
id: "std_license",
|
||||
label: "Commercial",
|
||||
},
|
||||
{
|
||||
id: "std_release",
|
||||
label: "1 Year Long Term Support",
|
||||
},
|
||||
{
|
||||
id: "std_sla",
|
||||
label: "<48 Hours",
|
||||
detail: "(Local Business Hours)",
|
||||
},
|
||||
{
|
||||
id: "std_support",
|
||||
label: "L4 Direct Engineering",
|
||||
detail: "support via SUBNET",
|
||||
},
|
||||
{
|
||||
id: "std_security",
|
||||
label: "Continuous Scan and Alert",
|
||||
},
|
||||
{
|
||||
id: "std_panic",
|
||||
label: "1 Per year",
|
||||
},
|
||||
{
|
||||
id: "std_diag",
|
||||
label: "24/7/365",
|
||||
},
|
||||
{
|
||||
id: "std_arch",
|
||||
xsLabel: "N/A",
|
||||
},
|
||||
{
|
||||
id: "std_perf",
|
||||
xsLabel: "N/A",
|
||||
},
|
||||
{
|
||||
id: "std_indemnity",
|
||||
xsLabel: "N/A",
|
||||
},
|
||||
{
|
||||
id: "std_sec_policy",
|
||||
xsLabel: "N/A",
|
||||
},
|
||||
];
|
||||
|
||||
export const ENTERPRISE_PLAN_FEATURES = [
|
||||
{
|
||||
label: "Enterprise",
|
||||
isHeader: true,
|
||||
},
|
||||
{
|
||||
id: "end_feat_title",
|
||||
featureTitleRow: true,
|
||||
},
|
||||
{
|
||||
id: "ent_license",
|
||||
label: "Commercial",
|
||||
},
|
||||
{
|
||||
id: "ent_release",
|
||||
label: "5 Years Long Term Support",
|
||||
},
|
||||
{
|
||||
id: "ent_sla",
|
||||
label: "<1 hour",
|
||||
},
|
||||
{
|
||||
id: "ent_support",
|
||||
label: "L4 Direct Engineering support via",
|
||||
detail: "SUBNET, Phone, Web Conference",
|
||||
},
|
||||
{
|
||||
id: "ent_security",
|
||||
label: "Continuous Scan and Alert",
|
||||
},
|
||||
{
|
||||
id: "ent_panic",
|
||||
label: "Unlimited",
|
||||
},
|
||||
{
|
||||
id: "ent_diag",
|
||||
label: "24/7/365",
|
||||
},
|
||||
{
|
||||
id: "ent_arch",
|
||||
yesIcon: true,
|
||||
},
|
||||
{
|
||||
id: "ent_perf",
|
||||
yesIcon: true,
|
||||
},
|
||||
{
|
||||
id: "ent_indemnity",
|
||||
yesIcon: true,
|
||||
},
|
||||
{
|
||||
id: "ent_sec_policy",
|
||||
yesIcon: true,
|
||||
},
|
||||
];
|
||||
|
||||
export const PAID_PLANS = [LICENSE_PLANS.STANDARD, LICENSE_PLANS.ENTERPRISE];
|
||||
|
||||
|
||||
|
||||
@@ -58,11 +58,11 @@ import {
|
||||
import { connect } from "react-redux";
|
||||
import { setErrorSnackMessage } from "../../../actions";
|
||||
import SettingsIcon from "../../../icons/SettingsIcon";
|
||||
import RegisterStatus from "./RegisterStatus";
|
||||
import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
|
||||
import { AppState } from "../../../store";
|
||||
|
||||
import RegisterHelpBox from "./RegisterHelpBox";
|
||||
import RegistrationStatusBanner from "./RegistrationStatusBanner";
|
||||
|
||||
interface IRegister {
|
||||
classes: any;
|
||||
@@ -203,10 +203,11 @@ const Register = ({
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [loadingLicenseInfo, setLoadingLicenseInfo] = useState<boolean>(false);
|
||||
const [clusterRegistered, setClusterRegistered] = useState<boolean>(false);
|
||||
const [licenseInfo, setLicenseInfo] = useState<SubnetInfo | undefined>();
|
||||
|
||||
const [initialLicenseLoading, setInitialLicenseLoading] =
|
||||
useState<boolean>(true);
|
||||
const [displaySubnetProxy, setDisplaySubnetProxy] = useState<boolean>(false);
|
||||
|
||||
const clearForm = () => {
|
||||
setSubnetAccessToken("");
|
||||
setSelectedSubnetOrganization("");
|
||||
@@ -236,6 +237,7 @@ const Register = ({
|
||||
api
|
||||
.invoke("GET", `/api/v1/subnet/info`)
|
||||
.then((res: SubnetInfo) => {
|
||||
setLicenseInfo(res);
|
||||
setClusterRegistered(true);
|
||||
setLoadingLicenseInfo(false);
|
||||
})
|
||||
@@ -824,7 +826,9 @@ const Register = ({
|
||||
padding: "43px",
|
||||
}}
|
||||
>
|
||||
{clusterRegistered && <RegisterStatus />}
|
||||
{clusterRegistered && (
|
||||
<RegistrationStatusBanner email={licenseInfo?.email} />
|
||||
)}
|
||||
{clusterRegistered ? (
|
||||
<Grid item xs={12} marginTop={"25px"}>
|
||||
<Box
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import VerifiedIcon from "../../../icons/VerifiedIcon";
|
||||
|
||||
const RegistrationStatusBanner = ({ email = "" }: { email?: string }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: "67px",
|
||||
color: "#ffffff",
|
||||
display: "flex",
|
||||
position: "relative",
|
||||
top: "-30px",
|
||||
left: "-32px",
|
||||
width: "calc(100% + 64px)",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
backgroundColor: "#2781B0",
|
||||
padding: "0 25px 0 25px",
|
||||
"& .registered-box, .reg-badge-box": {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
},
|
||||
|
||||
"& .reg-badge-box": {
|
||||
marginLeft: "20px",
|
||||
|
||||
"& .min-icon": {
|
||||
fill: "#2781B0",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box className="registered-box">
|
||||
<Box sx={{ fontSize: "16px", fontWeight: 400 }}>Register status:</Box>
|
||||
<Box className="reg-badge-box">
|
||||
<VerifiedIcon />
|
||||
<Box
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Registered
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
className="registered-acc-box"
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
display: {
|
||||
sm: "flex",
|
||||
xs: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ fontSize: "16px", fontWeight: 400 }}>Registered to:</Box>
|
||||
<Box sx={{ marginLeft: "8px", fontWeight: 600 }}>{email}</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
export default RegistrationStatusBanner;
|
||||
Reference in New Issue
Block a user