UX Register screen (#1485)
This commit is contained in:
Prakash Senthil Vel
committed by
GitHub
GitHub
parent
df728fc8e6
commit
1d92f90cbe
101
portal-ui/src/icons/CallHomeFeatureIcon.tsx
Normal file
101
portal-ui/src/icons/CallHomeFeatureIcon.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
// 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 CallHomeFeatureIcon = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`min-icon`}
|
||||
fill={"currentcolor"}
|
||||
viewBox="0 0 26 25"
|
||||
{...props}
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="clip-path-call-home-feature">
|
||||
<rect
|
||||
id="Rectángulo_1614"
|
||||
data-name="Rectángulo 1614"
|
||||
width="6.172"
|
||||
height="6.309"
|
||||
fill="#fff"
|
||||
stroke="rgba(0,0,0,0)"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g
|
||||
id="Grupo_2540"
|
||||
data-name="Grupo 2540"
|
||||
transform="translate(0.531 0.596)"
|
||||
>
|
||||
<path
|
||||
id="call-home-icon"
|
||||
d="M16.865,8.241a1.7,1.7,0,0,1-1.6,1.092h-.633v5.3a1.694,1.694,0,0,1-1.694,1.694h-8.9a1.7,1.7,0,0,1-1.694-1.694v-5.3H1.71A1.694,1.694,0,0,1,.58,6.362L7.358.432a1.694,1.694,0,0,1,2.259,0L16.4,6.362h0a1.694,1.694,0,0,1,.47,1.879"
|
||||
transform="translate(0 0)"
|
||||
fill="#07193e"
|
||||
stroke="rgba(0,0,0,0)"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<g
|
||||
id="Grupo_2539"
|
||||
data-name="Grupo 2539"
|
||||
transform="translate(5.441 6.68)"
|
||||
>
|
||||
<g
|
||||
id="Grupo_2539-2"
|
||||
data-name="Grupo 2539"
|
||||
clipPath="url(#clip-path-call-home-feature)"
|
||||
>
|
||||
<path
|
||||
id="Trazado_7262"
|
||||
data-name="Trazado 7262"
|
||||
d="M4.6,38.068a.164.164,0,0,0-.231,0l-.377.377a.149.149,0,0,1-.21,0L2.254,36.918a.149.149,0,0,1,0-.21l.377-.377a.164.164,0,0,0,0-.231L1.4,34.871a.164.164,0,0,0-.231,0l-.763.763a1.4,1.4,0,0,0,0,1.982l2.669,2.672a1.4,1.4,0,0,0,1.982,0l.763-.763a.164.164,0,0,0,0-.231Z"
|
||||
transform="translate(0 -34.389)"
|
||||
fill="#fff"
|
||||
stroke="rgba(0,0,0,0)"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Grupo_2537" data-name="Grupo 2537" transform="translate(12.323 0)">
|
||||
<g
|
||||
id="Elipse_623"
|
||||
data-name="Elipse 623"
|
||||
transform="translate(-0.323 -0.249)"
|
||||
fill="#4ccb92"
|
||||
stroke="#fff"
|
||||
strokeWidth="1"
|
||||
>
|
||||
<circle cx="7" cy="7" r="7" stroke="none" />
|
||||
<circle cx="7" cy="7" r="6.5" fill="none" />
|
||||
</g>
|
||||
<g id="check" transform="translate(2.934 4.069)">
|
||||
<path
|
||||
id="Trazado_7261"
|
||||
data-name="Trazado 7261"
|
||||
d="M14.9,10.862a.622.622,0,1,1,.889.871l-3.311,4.139a.622.622,0,0,1-.9.017L9.384,13.694a.622.622,0,1,1,.879-.879L12,14.551l2.881-3.67.017-.018Z"
|
||||
transform="translate(-9.182 -10.676)"
|
||||
fill="#fff"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default CallHomeFeatureIcon;
|
||||
64
portal-ui/src/icons/DiagnosticsFeatureIcon.tsx
Normal file
64
portal-ui/src/icons/DiagnosticsFeatureIcon.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
// 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 DiagnosticsFeatureIcon = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`min-icon`}
|
||||
fill={"currentcolor"}
|
||||
viewBox="0 0 26 25"
|
||||
{...props}
|
||||
>
|
||||
<g id="Grupo_2542" data-name="Grupo 2542" transform="translate(0 0.249)">
|
||||
<g id="health-icon" transform="translate(0 7.842)">
|
||||
<path
|
||||
id="Unión_51"
|
||||
data-name="Unión 51"
|
||||
d="M1.977,17A1.976,1.976,0,0,1,0,15.015V4.938H2.144v9.918h9.892V17Zm12.591-.443V14.584h1.974v1.973Zm.288-4.538V2.144H4.965V0H15.023A1.98,1.98,0,0,1,17,1.973V12.019Zm-4.8,0V10.045h1.979v1.973Zm-5.094,0V10.045H6.944v1.973Zm5.094-5.106V4.938h1.979V6.912Zm-5.09,0V4.938H6.942V6.912ZM.458,2.448V.475H2.432V2.448Z"
|
||||
transform="translate(0 -0.091)"
|
||||
fill="#07193e"
|
||||
/>
|
||||
</g>
|
||||
<g id="Grupo_2537" data-name="Grupo 2537" transform="translate(12.323 0)">
|
||||
<g
|
||||
id="Elipse_623"
|
||||
data-name="Elipse 623"
|
||||
transform="translate(-0.323 -0.249)"
|
||||
fill="#4ccb92"
|
||||
stroke="#fff"
|
||||
strokeWidth="1"
|
||||
>
|
||||
<circle cx="7" cy="7" r="7" stroke="none" />
|
||||
<circle cx="7" cy="7" r="6.5" fill="none" />
|
||||
</g>
|
||||
<g id="check" transform="translate(2.934 4.069)">
|
||||
<path
|
||||
id="Trazado_7261"
|
||||
data-name="Trazado 7261"
|
||||
d="M14.9,10.862a.622.622,0,1,1,.889.871l-3.311,4.139a.622.622,0,0,1-.9.017L9.384,13.694a.622.622,0,1,1,.879-.879L12,14.551l2.881-3.67.017-.018Z"
|
||||
transform="translate(-9.182 -10.676)"
|
||||
fill="#fff"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default DiagnosticsFeatureIcon;
|
||||
57
portal-ui/src/icons/HelpIconFilled.tsx
Normal file
57
portal-ui/src/icons/HelpIconFilled.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
// 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 HelpIconFilled = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`min-icon`}
|
||||
fill={"currentcolor"}
|
||||
viewBox="0 0 21 21"
|
||||
{...props}
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="clip-path-help-icon">
|
||||
<rect
|
||||
id="Rectángulo_961"
|
||||
data-name="Rectángulo 961"
|
||||
width="21"
|
||||
height="21"
|
||||
transform="translate(0 -0.159)"
|
||||
fill="#07193e"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="HelpIcon-Full" transform="translate(0 0.159)">
|
||||
<g
|
||||
id="Grupo_2320"
|
||||
data-name="Grupo 2320"
|
||||
clipPath="url(#clip-path-help-icon)"
|
||||
>
|
||||
<path
|
||||
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"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default HelpIconFilled;
|
||||
90
portal-ui/src/icons/PerformanceFeatureIcon.tsx
Normal file
90
portal-ui/src/icons/PerformanceFeatureIcon.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
// 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 PerformanceFeatureIcon = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`min-icon`}
|
||||
fill={"currentcolor"}
|
||||
viewBox="0 0 25 23"
|
||||
{...props}
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="clip-path-perf-feat-icon">
|
||||
<rect
|
||||
id="Rectángulo_985"
|
||||
data-name="Rectángulo 985"
|
||||
width="17"
|
||||
height="17"
|
||||
transform="translate(-0.12 0.298)"
|
||||
fill="#07193e"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Grupo_2543" data-name="Grupo 2543" transform="translate(0.12 0.101)">
|
||||
<g id="speedtest-icon-full" transform="translate(0 5.601)">
|
||||
<g
|
||||
id="Grupo_2352"
|
||||
data-name="Grupo 2352"
|
||||
transform="translate(0 0)"
|
||||
clipPath="url(#clip-path-perf-feat-icon)"
|
||||
>
|
||||
<path
|
||||
id="Trazado_7077"
|
||||
data-name="Trazado 7077"
|
||||
d="M120.559,129.741a.529.529,0,1,0,.529.529h0a.529.529,0,0,0-.529-.529"
|
||||
transform="translate(-112.345 -121.572)"
|
||||
fill="#07193e"
|
||||
/>
|
||||
<path
|
||||
id="Trazado_7078"
|
||||
data-name="Trazado 7078"
|
||||
d="M8.2,0a8.2,8.2,0,1,0,8.2,8.2A8.2,8.2,0,0,0,8.2,0M8.16,2.27h.027a.5.5,0,1,1-.008,1H8.16a.5.5,0,0,1,0-1m-5.6,5.5v0a.19.19,0,0,1-.189.164H2.345a.19.19,0,0,1-.164-.214V7.717h0a.189.189,0,0,1,.213-.163h0a.19.19,0,0,1,.162.214M3,6.075H3a.278.278,0,0,1-.244-.406V5.662h0A.278.278,0,1,1,3,6.075M4.54,4.423l-.021.018-.006.005a.34.34,0,0,1-.225.088v0a.341.341,0,0,1-.224-.6l.006-.005h0l0,0a.342.342,0,1,1,.466.5m1.683-.868-.006,0-.011,0a.449.449,0,0,1-.162.034v0a.453.453,0,0,1-.16-.876l.013,0h0a.453.453,0,1,1,.325.845M9.1,12.6h0a.241.241,0,0,1-.241.241h-1.3a.241.241,0,1,1,0-.482h1.3A.241.241,0,0,1,9.1,12.6Zm1.067-4.771-.89.76a.021.021,0,0,0,0,.02,1.1,1.1,0,1,1-.668-.779.021.021,0,0,0,.021,0l.886-.76h0a.5.5,0,0,1,.651.759M10.1,3.7v0a.552.552,0,0,1-.2-.036L9.885,3.65a.554.554,0,0,1,.387-1.039l.019.007A.557.557,0,0,1,10.1,3.7m1.765,1.13a.628.628,0,0,1-.413-.155l-.016-.014a.629.629,0,0,1,.825-.948l.017.015a.628.628,0,0,1-.413,1.1M12.5,6.142l-.012-.022A.722.722,0,0,1,13.743,5.4l.017.032.013.023h0a.722.722,0,0,1-.291.979h0a.722.722,0,0,1-.979-.291m1.385,2.42a.817.817,0,0,1-.921-.7V7.835a.817.817,0,0,1,.809-.927.819.819,0,0,1,.807.7l0,.032a.817.817,0,0,1-.7.918"
|
||||
transform="translate(0 -0.138)"
|
||||
fill="#07193e"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Grupo_2538" data-name="Grupo 2538" transform="translate(11.203 0)">
|
||||
<g
|
||||
id="Elipse_623"
|
||||
data-name="Elipse 623"
|
||||
transform="translate(-0.324 -0.101)"
|
||||
fill="#4ccb92"
|
||||
stroke="#fff"
|
||||
strokeWidth="1"
|
||||
>
|
||||
<circle cx="7" cy="7" r="7" stroke="none" />
|
||||
<circle cx="7" cy="7" r="6.5" fill="none" />
|
||||
</g>
|
||||
<g id="check" transform="translate(2.797 4.098)">
|
||||
<path
|
||||
id="Trazado_7261"
|
||||
data-name="Trazado 7261"
|
||||
d="M14.938,10.864a.627.627,0,1,1,.895.877L12.5,15.91a.627.627,0,0,1-.9.017l-2.21-2.211a.627.627,0,1,1,.886-.886l1.75,1.748,2.9-3.7.017-.018Z"
|
||||
transform="translate(-9.182 -10.676)"
|
||||
fill="#fff"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default PerformanceFeatureIcon;
|
||||
@@ -157,3 +157,7 @@ export { default as S3TierIcon } from "./S3TierIcon";
|
||||
export { default as S3TierIconXs } from "./S3TierIconXs";
|
||||
export { default as EditorThemeSwitchIcon } from "./EditorThemeSwitchIcon";
|
||||
export { default as PasswordKeyIcon } from "./PasswordKeyIcon";
|
||||
export { default as HelpIconFilled } from "./HelpIconFilled";
|
||||
export { default as CallHomeFeatureIcon } from "./CallHomeFeatureIcon";
|
||||
export { default as DiagnosticsFeatureIcon } from "./DiagnosticsFeatureIcon";
|
||||
export { default as PerformanceFeatureIcon } from "./PerformanceFeatureIcon";
|
||||
|
||||
@@ -20,20 +20,20 @@ import {
|
||||
actionsTray,
|
||||
containerForHeader,
|
||||
searchField,
|
||||
spacingUtils,
|
||||
} from "../Common/FormComponents/common/styleLibrary";
|
||||
import withStyles from "@mui/styles/withStyles";
|
||||
import { Button, Grid, Link, Typography } from "@mui/material";
|
||||
import { Box, Button, Link } from "@mui/material";
|
||||
import PageHeader from "../Common/PageHeader/PageHeader";
|
||||
import PageLayout from "../Common/Layout/PageLayout";
|
||||
import React, { Fragment, useCallback, useEffect, useState } from "react";
|
||||
import { CopyIcon, UsersIcon } from "../../../icons";
|
||||
import { CopyIcon, DiagnosticsFeatureIcon, UsersIcon } from "../../../icons";
|
||||
import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
|
||||
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
|
||||
import DnsIcon from "@mui/icons-material/Dns";
|
||||
import OnlineRegistrationIcon from "../../../icons/OnlineRegistrationIcon";
|
||||
import OfflineRegistrationIcon from "../../../icons/OfflineRegistrationIcon";
|
||||
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
|
||||
import clsx from "clsx";
|
||||
import OnlineRegistrationBackIcon from "../../../icons/OnlineRegistrationBackIcon";
|
||||
import OfflineRegistrationBackIcon from "../../../icons/OfflineRegistrationBackIcon";
|
||||
import api from "../../../common/api";
|
||||
@@ -58,11 +58,15 @@ import {
|
||||
} from "../../../common/SecureComponent/permissions";
|
||||
import { connect } from "react-redux";
|
||||
import { setErrorSnackMessage } from "../../../actions";
|
||||
import HelpBox from "../../../common/HelpBox";
|
||||
import SettingsIcon from "../../../icons/SettingsIcon";
|
||||
import RegisterStatus from "./RegisterStatus";
|
||||
import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
|
||||
import { AppState } from "../../../store";
|
||||
import {
|
||||
HelpIconFilled,
|
||||
CallHomeFeatureIcon,
|
||||
PerformanceFeatureIcon,
|
||||
} from "../../../icons";
|
||||
|
||||
interface IRegister {
|
||||
classes: any;
|
||||
@@ -157,11 +161,123 @@ const styles = (theme: Theme) =>
|
||||
padding: 20,
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
sizedLabel: {
|
||||
minWidth: "75px",
|
||||
},
|
||||
...actionsTray,
|
||||
...searchField,
|
||||
...spacingUtils,
|
||||
...containerForHeader(theme.spacing(4)),
|
||||
});
|
||||
|
||||
const FormTitle = ({ icon = null, title }: { icon?: any; title: any }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
<div className="title-text">{title}</div>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const RegisterHelpBox = () => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
border: "1px solid #eaeaea",
|
||||
borderRadius: "2px",
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
padding: "20px",
|
||||
marginLeft: {
|
||||
xs: "0px",
|
||||
sm: "0px",
|
||||
md: "30px",
|
||||
},
|
||||
marginTop: {
|
||||
xs: "0px",
|
||||
sm: "30px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
fontWeight: 600,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: "16px",
|
||||
|
||||
"& .min-icon": {
|
||||
height: "21px",
|
||||
width: "21px",
|
||||
marginRight: "15px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<HelpIconFilled />
|
||||
<div>Why should I register?</div>
|
||||
</Box>
|
||||
<Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
|
||||
Registering this cluster with the MinIO Subscription Network (SUBNET)
|
||||
provides the following benefits in addition to the commercial license
|
||||
and SLA backed support.
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
}}
|
||||
>
|
||||
<FeatureItem
|
||||
icon={<CallHomeFeatureIcon />}
|
||||
description={`Call Home Monitoring`}
|
||||
/>
|
||||
<FeatureItem
|
||||
icon={<DiagnosticsFeatureIcon />}
|
||||
description={`Health Diagnostics`}
|
||||
/>
|
||||
<FeatureItem
|
||||
icon={<PerformanceFeatureIcon />}
|
||||
description={`Performance Analysis`}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
const FeatureItem = ({
|
||||
icon,
|
||||
description,
|
||||
}: {
|
||||
icon: any;
|
||||
description: string;
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
"& .min-icon": {
|
||||
marginRight: "10px",
|
||||
height: "23px",
|
||||
width: "23px",
|
||||
marginBottom: "10px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{icon}{" "}
|
||||
<div style={{ fontSize: "14px", fontStyle: "italic", color: "#5E5E5E" }}>
|
||||
{description}
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
const Register = ({
|
||||
classes,
|
||||
displayErrorMessage,
|
||||
@@ -366,16 +482,34 @@ const Register = ({
|
||||
}
|
||||
}, [fetchLicenseInfo, initialLicenseLoading, setInitialLicenseLoading]);
|
||||
|
||||
const title = onlineActivation ? (
|
||||
<Fragment>
|
||||
<OnlineRegistrationIcon />
|
||||
Register with MinIO Subscription Network
|
||||
</Fragment>
|
||||
const formTitle = onlineActivation ? (
|
||||
<Box
|
||||
sx={{
|
||||
"& .title-text": {
|
||||
marginLeft: "27px",
|
||||
fontWeight: 600,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<FormTitle
|
||||
icon={<OnlineRegistrationIcon />}
|
||||
title={`Register with MinIO Subscription Network`}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<Fragment>
|
||||
<OfflineRegistrationIcon />
|
||||
Offline Activation of SUBNET License
|
||||
</Fragment>
|
||||
<Box
|
||||
sx={{
|
||||
"& .title-text": {
|
||||
marginLeft: "27px",
|
||||
fontWeight: 600,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<FormTitle
|
||||
icon={<OfflineRegistrationIcon />}
|
||||
title={` Offline Activation of SUBNET License`}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
let clusterRegistrationForm: JSX.Element;
|
||||
@@ -383,12 +517,30 @@ const Register = ({
|
||||
if (onlineActivation) {
|
||||
if (subnetAccessToken && subnetOrganizations.length > 0) {
|
||||
clusterRegistrationForm = (
|
||||
<Fragment>
|
||||
<Grid item xs={12} className={classes.subnetDescription}>
|
||||
<Typography>Register MinIO cluster</Typography>
|
||||
</Grid>
|
||||
<br />
|
||||
<Grid item xs={4} className={classes.actionsTray}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
flex: "2",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px",
|
||||
"& .title-text": {
|
||||
marginLeft: "0px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<FormTitle title={`Register MinIO cluster`} />
|
||||
</Box>
|
||||
<Box>
|
||||
<SelectWrapper
|
||||
id="subnet-organization"
|
||||
name="subnet-organization"
|
||||
@@ -402,8 +554,14 @@ const Register = ({
|
||||
value: organization.accountId.toString(),
|
||||
}))}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} className={classes.formFieldRow}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
marginTop: "15px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
className={classes.button}
|
||||
color="primary"
|
||||
@@ -413,21 +571,49 @@ const Register = ({
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<RegisterHelpBox />
|
||||
</Box>
|
||||
);
|
||||
} else if (subnetMFAToken) {
|
||||
clusterRegistrationForm = (
|
||||
<Fragment>
|
||||
<Grid item xs={12} className={classes.subnetDescription}>
|
||||
<Typography>Two-Factor Authentication</Typography>
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
flex: "2",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
marginTop: "30px",
|
||||
marginBottom: "30px",
|
||||
}}
|
||||
>
|
||||
Two-Factor Authentication
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
Please enter the 6-digit verification code that was sent to your
|
||||
email address. This code will be valid for 5 minutes.
|
||||
</Typography>
|
||||
</Grid>
|
||||
<br />
|
||||
<Grid item xs={3} className={clsx(classes.actionsTray)}>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
flex: "1",
|
||||
marginTop: "30px",
|
||||
}}
|
||||
>
|
||||
<InputBoxWrapper
|
||||
overlayIcon={<LockOutlinedIcon />}
|
||||
id="subnet-otp"
|
||||
@@ -439,6 +625,14 @@ const Register = ({
|
||||
label=""
|
||||
value={subnetOTP}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
color="primary"
|
||||
onClick={() => subnetLoginWithMFA()}
|
||||
@@ -451,27 +645,52 @@ const Register = ({
|
||||
>
|
||||
Verify
|
||||
</Button>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<RegisterHelpBox />
|
||||
</Box>
|
||||
);
|
||||
} else {
|
||||
clusterRegistrationForm = (
|
||||
<Fragment>
|
||||
<Grid item xs={12} className={classes.subnetDescription}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexFlow: {
|
||||
xs: "column",
|
||||
md: "row",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
flex: "2",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
marginTop: "30px",
|
||||
marginBottom: "30px",
|
||||
}}
|
||||
>
|
||||
Use your MinIO Subscription Network login credentials to register
|
||||
this cluster.
|
||||
</Grid>
|
||||
<br />
|
||||
<Grid item xs={12} className={clsx(classes.actionsTray)}>
|
||||
<Grid
|
||||
container
|
||||
justifyContent={"center"}
|
||||
item
|
||||
xs={4}
|
||||
style={{ margin: "auto" }}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
flex: "1",
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12}>
|
||||
<InputBoxWrapper
|
||||
className={classes.spacerBottom}
|
||||
classes={{
|
||||
inputLabel: classes.sizedLabel,
|
||||
}}
|
||||
id="subnet-email"
|
||||
name="subnet-email"
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
@@ -481,10 +700,11 @@ const Register = ({
|
||||
value={subnetEmail}
|
||||
overlayIcon={<UsersIcon />}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
{" "}
|
||||
<InputBoxWrapper
|
||||
className={classes.spacerBottom}
|
||||
classes={{
|
||||
inputLabel: classes.sizedLabel,
|
||||
}}
|
||||
id="subnet-password"
|
||||
name="subnet-password"
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
@@ -498,13 +718,17 @@ const Register = ({
|
||||
}
|
||||
overlayAction={() => setShowPassword(!showPassword)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<br />
|
||||
</Grid>
|
||||
<Grid item xs={12} textAlign={"center"}>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="submit"
|
||||
className={classes.spacerRight}
|
||||
variant="outlined"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
@@ -531,35 +755,64 @@ const Register = ({
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} className={classes.subnetDescription}>
|
||||
<div className={classes.smallBoxy}>
|
||||
<h1 className={classes.headerStyle}>Why should I register?</h1>
|
||||
Registering this cluster with the MinIO Subscription Network
|
||||
(SUBNET) provides the following benefits in addition to the
|
||||
commercial license and SLA backed support:
|
||||
<br />
|
||||
<ul>
|
||||
<li>Call Home Monitoring</li>
|
||||
<li>Health Diagnostics</li>
|
||||
<li>Performance Analysis</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<RegisterHelpBox />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
clusterRegistrationForm = (
|
||||
<Fragment>
|
||||
<Grid item xs={12} className={classes.subnetDescription}>
|
||||
<span>Step 1:</span> Copy the following registration token
|
||||
</Grid>
|
||||
<Grid item xs={12} className={clsx(classes.actionsTray)}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
flex: "2",
|
||||
marginTop: "15px",
|
||||
"& .step-number": {
|
||||
color: "#ffffff",
|
||||
height: "25px",
|
||||
width: "25px",
|
||||
background: "#081C42",
|
||||
marginRight: "10px",
|
||||
textAlign: "center",
|
||||
fontWeight: 600,
|
||||
borderRadius: "50%",
|
||||
},
|
||||
|
||||
"& .step-row": {
|
||||
fontSize: "16px",
|
||||
display: "flex",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Box className="step-row">
|
||||
<div className="step-number">1</div>{" "}
|
||||
<div className="step-text">
|
||||
Copy the following registration token
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
flex: "1",
|
||||
marginTop: "15px",
|
||||
marginLeft: "35px",
|
||||
"& input": {
|
||||
color: "#737373",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<InputBoxWrapper
|
||||
className={clsx(classes.copyInputBox)}
|
||||
id="registration-token"
|
||||
name="registration-token"
|
||||
placeholder=""
|
||||
@@ -567,14 +820,31 @@ const Register = ({
|
||||
type="text"
|
||||
onChange={() => {}}
|
||||
value={subnetRegToken}
|
||||
disabled
|
||||
overlayIcon={<CopyIcon />}
|
||||
overlayAction={() => navigator.clipboard.writeText(subnetRegToken)}
|
||||
extraInputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
overlayAction={() =>
|
||||
navigator.clipboard.writeText(subnetRegToken)
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} className={classes.subnetDescription}>
|
||||
<span>Step 2:</span> Use the previous token to register your cluster
|
||||
at:{" "}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Box className="step-row">
|
||||
<div className="step-number">2</div>
|
||||
<div className="step-text">
|
||||
Navigate to SUBNET and register your cluster
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
flex: "1",
|
||||
marginLeft: "35px",
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
className={classes.link}
|
||||
color="inherit"
|
||||
@@ -583,12 +853,32 @@ const Register = ({
|
||||
>
|
||||
https://subnet.min.io/cluster/register
|
||||
</Link>
|
||||
</Grid>
|
||||
<br />
|
||||
<Grid item xs={12} className={classes.subnetDescription}>
|
||||
<span>Step 3:</span> Enter the API key generated by SUBNET
|
||||
</Grid>
|
||||
<Grid item xs={12} className={clsx(classes.actionsTray)}>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px",
|
||||
}}
|
||||
>
|
||||
<Box className="step-row">
|
||||
<div className="step-number">3</div>{" "}
|
||||
<div className="step-text">
|
||||
Enter the API key generated by SUBNET
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
flex: "1",
|
||||
marginTop: "15px",
|
||||
marginLeft: "35px",
|
||||
}}
|
||||
>
|
||||
<InputBoxWrapper
|
||||
value={license}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
@@ -600,8 +890,17 @@ const Register = ({
|
||||
label=""
|
||||
type="text"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} className={classes.offlineRegisterButton}>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
marginTop: "15px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
@@ -610,8 +909,11 @@ const Register = ({
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<RegisterHelpBox />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -619,17 +921,31 @@ const Register = ({
|
||||
<Fragment>
|
||||
<PageHeader label="Register" />
|
||||
<PageLayout>
|
||||
<Grid item xs={12} className={classes.boxy}>
|
||||
<Box
|
||||
sx={{
|
||||
border: "1px solid #eaeaea",
|
||||
borderRadius: "2px",
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
padding: "43px",
|
||||
}}
|
||||
>
|
||||
{clusterRegistered && <RegisterStatus />}
|
||||
<Grid container>
|
||||
<Grid item xs={6} className={classes.registerActivationIcon}>
|
||||
{title}
|
||||
</Grid>
|
||||
<Grid item xs={6} className={classes.registerActivationMode}>
|
||||
{onlineActivation ? (
|
||||
<Fragment />
|
||||
) : (
|
||||
<Fragment>
|
||||
|
||||
{!onlineActivation ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
marginBottom: "30px",
|
||||
"& .min-icon": {
|
||||
height: "25px",
|
||||
width: "25px",
|
||||
marginRight: "15px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<OnlineRegistrationBackIcon />
|
||||
<Link
|
||||
className={classes.link}
|
||||
@@ -637,55 +953,117 @@ const Register = ({
|
||||
>
|
||||
Back to Online Activation
|
||||
</Link>
|
||||
</Fragment>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
) : null}
|
||||
|
||||
{formTitle}
|
||||
|
||||
{clusterRegistrationForm}
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{onlineActivation && (
|
||||
<Grid item xs={12} marginTop={"15px"}>
|
||||
<HelpBox
|
||||
title={"Proxy Configuration"}
|
||||
iconComponent={<SettingsIcon />}
|
||||
help={
|
||||
<Fragment>
|
||||
For airgap/firewalled environments it is possible to configure
|
||||
a proxy to connect to Subnet.
|
||||
<br />
|
||||
<br />
|
||||
<Grid container>
|
||||
<Grid item xs={12} className={clsx(classes.actionsTray)}>
|
||||
<FormSwitchWrapper
|
||||
value="enableProxy"
|
||||
id="enableProxy"
|
||||
name="enableProxy"
|
||||
checked={displaySubnetProxy}
|
||||
onChange={(
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setDisplaySubnetProxy(event.target.checked);
|
||||
<React.Fragment>
|
||||
<Box
|
||||
sx={{
|
||||
border: "1px solid #eaeaea",
|
||||
borderRadius: "2px",
|
||||
display: "flex",
|
||||
padding: "23px",
|
||||
marginTop: "40px",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} className={clsx(classes.actionsTray)}>
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
"& .min-icon": {
|
||||
height: "22px",
|
||||
width: "22px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SettingsIcon />
|
||||
<div style={{ marginLeft: "10px", fontWeight: 600 }}>
|
||||
Proxy Configuration
|
||||
</div>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "10px",
|
||||
marginBottom: "10px",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
For airgap/firewalled environments it is possible to configure
|
||||
a proxy to connect to SUBNET.
|
||||
</Box>
|
||||
<Box>
|
||||
{displaySubnetProxy && (
|
||||
<InputBoxWrapper
|
||||
overlayIcon={<DnsIcon />}
|
||||
id="subnetProxy"
|
||||
name="subnetProxy"
|
||||
onChange={(
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => setSubnetProxy(event.target.value)}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setSubnetProxy(event.target.value)
|
||||
}
|
||||
placeholder="https://192.168.1.3:3128"
|
||||
label=""
|
||||
value={subnetProxy}
|
||||
/>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
Alternatively you can try <OfflineRegistrationBackIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<FormSwitchWrapper
|
||||
value="enableProxy"
|
||||
id="enableProxy"
|
||||
name="enableProxy"
|
||||
checked={displaySubnetProxy}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setDisplaySubnetProxy(event.target.checked);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
border: "1px solid #eaeaea",
|
||||
borderRadius: "2px",
|
||||
display: "flex",
|
||||
padding: "23px",
|
||||
marginTop: "40px",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<OfflineRegistrationBackIcon /> Cluster does not have internet
|
||||
access? Use{" "}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginLeft: "8px",
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
className={classes.link}
|
||||
onClick={() => {
|
||||
@@ -695,10 +1073,9 @@ const Register = ({
|
||||
>
|
||||
Offline Activation.
|
||||
</Link>
|
||||
</Fragment>
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</PageLayout>
|
||||
</Fragment>
|
||||
|
||||
@@ -51,7 +51,7 @@ function RegisterStatus({ classes }: IRegisterStatus) {
|
||||
return (
|
||||
<Grid container>
|
||||
<Grid item xs={12} className={classes.registeredStatus}>
|
||||
Register Status:
|
||||
Registration Status:
|
||||
<VerifiedIcon />
|
||||
<span>Registered</span>
|
||||
</Grid>
|
||||
|
||||
Reference in New Issue
Block a user