frikky
653 lines
25 KiB
React
653 lines
25 KiB
React
import React, { useState, useEffect } from "react";
|
|
import Stepper from "@material-ui/core/Stepper";
|
|
import Step from "@material-ui/core/Step";
|
|
import StepLabel from "@material-ui/core/StepLabel";
|
|
import Button from "@material-ui/core/Button";
|
|
import Checkbox from '@mui/material/Checkbox';
|
|
|
|
import SearchIcon from '@mui/icons-material/Search';
|
|
import EmailIcon from '@mui/icons-material/Email';
|
|
import NewReleasesIcon from '@mui/icons-material/NewReleases';
|
|
import ExtensionIcon from '@mui/icons-material/Extension';
|
|
|
|
import theme from '../theme';
|
|
import {
|
|
FormGroup,
|
|
FormControl,
|
|
InputLabel,
|
|
FormLabel,
|
|
FormControlLabel,
|
|
Select,
|
|
MenuItem,
|
|
Grid,
|
|
Paper,
|
|
Typography,
|
|
TextField,
|
|
Zoom,
|
|
} from "@material-ui/core";
|
|
import { useNavigate, Link } from "react-router-dom";
|
|
import WorkflowSearch from '../components/Workflowsearch.jsx';
|
|
import WorkflowPaper from "../components/WorkflowPaper.jsx"
|
|
|
|
const WelcomeForm = (props) => {
|
|
const { userdata, globalUrl, discoveryWrapper, setDiscoveryWrapper } = props
|
|
|
|
const [activeStep, setActiveStep] = React.useState(0);
|
|
const [skipped, setSkipped] = React.useState(new Set());
|
|
const [discoveryData, setDiscoveryData] = React.useState({})
|
|
const [name, setName] = React.useState("")
|
|
const [orgName, setOrgName] = React.useState("")
|
|
const [role, setRole] = React.useState("")
|
|
const [orgType, setOrgType] = React.useState("")
|
|
const [finishedApps, setFinishedApps] = React.useState([])
|
|
|
|
let navigate = useNavigate();
|
|
|
|
const onNodeSelect = (label) => {
|
|
if (setDiscoveryWrapper !== undefined) {
|
|
setDiscoveryWrapper(
|
|
{"id": label}
|
|
)
|
|
}
|
|
|
|
setSelectionOpen(true)
|
|
setDefaultSearch(label)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (userdata.id === undefined) {
|
|
return
|
|
}
|
|
|
|
if (userdata.name !== undefined && userdata.name !== null && userdata.name.length > 0) {
|
|
setName(userdata.name)
|
|
}
|
|
|
|
if (userdata.active_org !== undefined && userdata.active_org.name !== undefined && userdata.active_org.name !== null && userdata.active_org.name.length > 0) {
|
|
setOrgName(userdata.active_org.name)
|
|
}
|
|
}, [userdata])
|
|
|
|
useEffect(() => {
|
|
if (discoveryWrapper === undefined || discoveryWrapper.id === undefined) {
|
|
setDefaultSearch("")
|
|
var newfinishedApps = finishedApps
|
|
newfinishedApps.push(defaultSearch)
|
|
setFinishedApps(finishedApps)
|
|
}
|
|
}, [discoveryWrapper])
|
|
|
|
useEffect(() => {
|
|
|
|
if (
|
|
window.location.search !== undefined &&
|
|
window.location.search !== null
|
|
) {
|
|
const urlSearchParams = new URLSearchParams(window.location.search);
|
|
const params = Object.fromEntries(urlSearchParams.entries());
|
|
const foundTab = params["tab"];
|
|
if (foundTab !== null && foundTab !== undefined && !isNaN(foundTab)) {
|
|
setActiveStep(foundTab-1)
|
|
} else {
|
|
navigate(`/welcome?tab=1`)
|
|
}
|
|
}
|
|
|
|
}, [])
|
|
|
|
const steps = getSteps();
|
|
|
|
const isStepOptional = step => {
|
|
return step === 1
|
|
}
|
|
|
|
const isStepSkipped = step => {
|
|
return skipped.has(step)
|
|
}
|
|
|
|
const sendUserUpdate = (name, role, userId) => {
|
|
const data = {
|
|
"tutorial": "welcome",
|
|
"firstname": name,
|
|
"company_role": role,
|
|
"user_id": userId,
|
|
}
|
|
|
|
const url = `${globalUrl}/api/v1/users/updateuser`
|
|
fetch(url, {
|
|
mode: "cors",
|
|
method: "PUT",
|
|
body: JSON.stringify(data),
|
|
credentials: "include",
|
|
crossDomain: true,
|
|
withCredentials: true,
|
|
headers: {
|
|
"Content-Type": "application/json; charset=utf-8",
|
|
},
|
|
})
|
|
.then((response) =>
|
|
response.json().then((responseJson) => {
|
|
if (responseJson["success"] === false) {
|
|
console.log("Update user success")
|
|
//alert.error("Failed updating org: ", responseJson.reason);
|
|
} else {
|
|
console.log("Update success!")
|
|
//alert.success("Successfully edited org!");
|
|
}
|
|
})
|
|
)
|
|
.catch((error) => {
|
|
console.log("Update err: ", error.toString())
|
|
//alert.error("Err: " + error.toString());
|
|
});
|
|
}
|
|
|
|
const sendOrgUpdate = (orgname, company_type, orgId, priority) => {
|
|
var data = {
|
|
org_id: orgId,
|
|
};
|
|
|
|
if (orgname.length > 0) {
|
|
data.name = orgname
|
|
}
|
|
|
|
if (company_type.length > 0) {
|
|
data.company_type = company_type
|
|
}
|
|
|
|
if (priority.length > 0) {
|
|
data.priority = priority
|
|
}
|
|
|
|
const url = globalUrl + `/api/v1/orgs/${orgId}`;
|
|
fetch(url, {
|
|
mode: "cors",
|
|
method: "POST",
|
|
body: JSON.stringify(data),
|
|
credentials: "include",
|
|
crossDomain: true,
|
|
withCredentials: true,
|
|
headers: {
|
|
"Content-Type": "application/json; charset=utf-8",
|
|
},
|
|
})
|
|
.then((response) =>
|
|
response.json().then((responseJson) => {
|
|
if (responseJson["success"] === false) {
|
|
console.log("Update of org failed")
|
|
//alert.error("Failed updating org: ", responseJson.reason);
|
|
} else {
|
|
console.log("Update success!")
|
|
//alert.success("Successfully edited org!");
|
|
}
|
|
})
|
|
)
|
|
.catch((error) => {
|
|
console.log("Update err: ", error.toString())
|
|
//alert.error("Err: " + error.toString());
|
|
});
|
|
}
|
|
|
|
var workflowDelay = -50
|
|
const NewHits = ({ hits }) => {
|
|
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
|
|
var counted = 0
|
|
|
|
const paperAppContainer = {
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignContent: "space-between",
|
|
marginTop: 5,
|
|
}
|
|
|
|
return (
|
|
<Grid container spacing={4} style={paperAppContainer}>
|
|
{hits.map((data, index) => {
|
|
workflowDelay += 50
|
|
|
|
if (index > 3) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
|
|
<Grid item xs={6} style={{ padding: "12px 10px 12px 10px" }}>
|
|
<WorkflowPaper key={index} data={data} />
|
|
</Grid>
|
|
</Zoom>
|
|
)
|
|
})}
|
|
</Grid>
|
|
)
|
|
}
|
|
|
|
const handleNext = () => {
|
|
setDefaultSearch("")
|
|
|
|
if (activeStep === 0) {
|
|
console.log("Should send basic information about org (fetch)")
|
|
navigate(`/welcome?tab=2`)
|
|
|
|
if (userdata.active_org !== undefined && userdata.active_org.id !== undefined && userdata.active_org.id !== null && userdata.active_org.id.length > 0) {
|
|
sendOrgUpdate(orgName, orgType, userdata.active_org.id, "")
|
|
}
|
|
|
|
if (userdata.id !== undefined && userdata.id !== null && userdata.id.length > 0) {
|
|
sendUserUpdate(name, role, userdata.id)
|
|
}
|
|
|
|
} else if (activeStep === 1) {
|
|
console.log("Should send secondary info about apps and other things")
|
|
setDiscoveryWrapper({})
|
|
|
|
navigate(`/welcome?tab=3`)
|
|
} else if (activeStep === 2) {
|
|
console.log("Should send third page with workflows activated and the like")
|
|
}
|
|
|
|
let newSkipped = skipped;
|
|
if (isStepSkipped(activeStep)) {
|
|
newSkipped = new Set(newSkipped.values());
|
|
newSkipped.delete(activeStep);
|
|
}
|
|
|
|
setActiveStep(prevActiveStep => prevActiveStep + 1);
|
|
setSkipped(newSkipped);
|
|
};
|
|
const handleBack = () => {
|
|
setActiveStep(prevActiveStep => prevActiveStep - 1);
|
|
};
|
|
const handleSkip = () => {
|
|
if (!isStepOptional(activeStep)) {
|
|
throw new Error("You can't skip a step that isn't optional.");
|
|
}
|
|
setActiveStep(prevActiveStep => prevActiveStep + 1);
|
|
setSkipped(prevSkipped => {
|
|
const newSkipped = new Set(prevSkipped.values());
|
|
newSkipped.add(activeStep);
|
|
return newSkipped;
|
|
});
|
|
};
|
|
const handleReset = () => {
|
|
setActiveStep(0);
|
|
};
|
|
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
|
|
const [selectionOpen, setSelectionOpen] = React.useState(false)
|
|
const [newSelectedApp, setNewSelectedApp] = React.useState({})
|
|
const [defaultSearch, setDefaultSearch] = React.useState("")
|
|
|
|
useEffect(() => {
|
|
console.log("Selected app changed (effect)")
|
|
}, [newSelectedApp])
|
|
|
|
function getSteps() {
|
|
return [
|
|
"Help us get to know you",
|
|
"Discover integrations",
|
|
"Personalize Usecases",
|
|
]
|
|
}
|
|
|
|
//const buttonWidth = 145
|
|
const buttonWidth = 450
|
|
const buttonMargin = 10
|
|
const sizing = 435
|
|
const buttonStyle = {
|
|
flex: 1,
|
|
width: "100%",
|
|
padding: 25,
|
|
margin: buttonMargin,
|
|
fontSize: 18,
|
|
}
|
|
|
|
const newButtonStyle = {
|
|
padding: 22,
|
|
flex: 1,
|
|
margin: buttonMargin,
|
|
minWidth: buttonWidth,
|
|
maxWidth: buttonWidth,
|
|
}
|
|
|
|
const getStepContent = (step) => {
|
|
switch (step) {
|
|
case 0:
|
|
return (
|
|
<Grid container spacing={1} style={{width: "100%", marginTop: 20, minHeight: sizing, maxHeight: sizing, }}>
|
|
{/*isCloud ? null :
|
|
<Typography variant="body1" style={{marginLeft: 8, marginTop: 10, marginRight: 30, }} color="textSecondary">
|
|
This data will be used within the product and NOT be shared unless <a href="https://shuffler.io/docs/organizations#cloud_synchronization" target="_blank" rel="norefferer" style={{color: "#f86a3e", textDecoration: "none"}}>cloud synchronization</a> is configured.
|
|
</Typography>
|
|
*/}
|
|
<Typography variant="h6" style={{marginLeft: 8, marginTop: 10, marginRight: 30, }} color="textSecondary">
|
|
Welcome to Shuffle!
|
|
</Typography>
|
|
<Typography variant="body1" style={{marginLeft: 8, marginTop: 10, marginRight: 30, }} color="textSecondary">
|
|
We need some more information in order to understand how we best can help you find relevant Usecases in Shuffle.
|
|
</Typography>
|
|
<Grid item xs={11} style={{marginTop: 16, padding: 0,}}>
|
|
<TextField
|
|
required
|
|
style={{width: "100%", marginTop: 0,}}
|
|
placeholder="Name"
|
|
autoFocus
|
|
label="Name"
|
|
type="name"
|
|
id="standard-required"
|
|
autoComplete="name"
|
|
margin="normal"
|
|
variant="outlined"
|
|
value={name}
|
|
onChange={(e) => {
|
|
setName(e.target.value)
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={11} style={{marginTop: 10, padding: 0,}}>
|
|
<TextField
|
|
required
|
|
style={{width: "100%", marginTop: 0,}}
|
|
placeholder="Company / Institution"
|
|
label="Company Name"
|
|
type="companyname"
|
|
id="standard-required"
|
|
autoComplete="CompanyName"
|
|
margin="normal"
|
|
variant="outlined"
|
|
value={orgName}
|
|
onChange={(e) => {
|
|
setOrgName(e.target.value)
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={11} style={{marginTop: 10}}>
|
|
<FormControl fullWidth={true}>
|
|
<InputLabel style={{marginLeft: 10, color: "#B9B9BA" }}>Your Role</InputLabel>
|
|
<Select
|
|
variant="outlined"
|
|
required
|
|
onChange={(e) => {
|
|
setRole(e.target.value)
|
|
}}
|
|
>
|
|
<MenuItem value={"Student"}>Student</MenuItem>
|
|
<MenuItem value={"Security Analyst/Engineer"}>Security Analyst/Engineer</MenuItem>
|
|
<MenuItem value={"SOC Manager"}>SOC Manager</MenuItem>
|
|
<MenuItem value={"C-Level"}>C-Level</MenuItem>
|
|
<MenuItem value={"Other"}>Other</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={11} style={{marginTop: 16}}>
|
|
<FormControl fullWidth={true}>
|
|
<InputLabel style={{ marginLeft: 10, color: "#B9B9BA" }}>Company Type</InputLabel>
|
|
<Select
|
|
required
|
|
variant="outlined"
|
|
onChange={(e) => {
|
|
setOrgType(e.target.value)
|
|
}}
|
|
>
|
|
<MenuItem value={"Education"}>Education</MenuItem>
|
|
<MenuItem value={"MSSP"}>MSSP</MenuItem>
|
|
<MenuItem value={"Security Product Company"}>Security Product Company</MenuItem>
|
|
<MenuItem value={"Other"}>Other</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
</Grid>
|
|
)
|
|
case 1:
|
|
return (
|
|
<div style={{minHeight: sizing, maxHeight: sizing, marginTop: 20,}}>
|
|
<Typography variant="body1" style={{marginLeft: 8, marginTop: 25, marginRight: 30, marginBottom: 0, }} color="textSecondary">
|
|
Find your apps, then we'll help you find relevant workflows. Can't find what you're looking for? Contact support: <a href="mailto:support@shuffler.io" style={{color: "#f86a3e", textDecoration: "none"}}>support@shuffler.io</a>
|
|
</Typography>
|
|
{/*The app framework helps us access and authenticate the most important APIs for you. */}
|
|
|
|
{/*
|
|
<Grid item xs={10}>
|
|
<FormControl fullWidth={true}>
|
|
<InputLabel style={{ color: "#B9B9BA" }}>What is your development experience?</InputLabel>
|
|
<Select
|
|
required
|
|
>
|
|
<MenuItem value={10}>Beginner</MenuItem>
|
|
<MenuItem value={20}>Intermediate</MenuItem>
|
|
<MenuItem value={30}>Automation Ninja</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
*/}
|
|
<Grid item xs={11} style={{marginTop: 25, }}>
|
|
{/*<FormLabel style={{ color: "#B9B9BA" }}>Find your integrations!</FormLabel>*/}
|
|
<div style={{display: "flex"}}>
|
|
<Button disabled={finishedApps.includes("SIEM")} variant={defaultSearch === "SIEM" ? "contained" : "outlined"} style={buttonStyle} startIcon={<SearchIcon />} onClick={(event) => { onNodeSelect("SIEM") }} >
|
|
SIEM
|
|
</Button>
|
|
<Button disabled={finishedApps.includes("EDR & AV")} variant={defaultSearch === "EDR & AV" ? "contained" : "outlined"} style={buttonStyle} startIcon={<NewReleasesIcon />} onClick={(event) => { onNodeSelect("EDR & AV") }} >
|
|
Endpoint
|
|
</Button>
|
|
</div>
|
|
<div style={{display: "flex"}}>
|
|
<Button disabled={finishedApps.includes("INTEL")} variant={defaultSearch === "INTEL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<ExtensionIcon />} onClick={(event) => { onNodeSelect("INTEL") }} >
|
|
|
|
|
|
Intel
|
|
</Button>
|
|
<Button disabled={finishedApps.includes("COMMS")} variant={defaultSearch === "EMAIL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<EmailIcon />} onClick={(event) => { onNodeSelect("EMAIL") }} >
|
|
Email
|
|
</Button>
|
|
</div>
|
|
{/* <FormControl>
|
|
<FormLabel style={{ color: "#B9B9BA" }}>What do you want to automate first ?</FormLabel>
|
|
<FormGroup>
|
|
<FormControlLabel
|
|
value="Email"
|
|
control={<Checkbox style={{ color: "#F85A3E" }} onChange={(event) => { onNodeSelect("Email") }} />}
|
|
label="Email"
|
|
labelPlacement="Email"
|
|
/>
|
|
<FormControlLabel
|
|
value="SIEM"
|
|
control={<Checkbox style={{ color: "#F85A3E" }} onChange={(event) => { onNodeSelect("SIEM") }} />}
|
|
label="SIEM"
|
|
labelPlacement="SIEM"
|
|
/>
|
|
<FormControlLabel
|
|
value="EDR"
|
|
control={<Checkbox style={{ color: "#F85A3E" }} onChange={(event) => { onNodeSelect("EDR") }} />}
|
|
label="EDR"
|
|
labelPlacement="EDR"
|
|
/>
|
|
</FormGroup>
|
|
</FormControl> */}
|
|
</Grid>
|
|
{/*
|
|
<Grid item xs={10} paddingBottom="20px">
|
|
<FormControl fullWidth={true}>
|
|
<InputLabel style={{ color: "#B9B9BA" }}>What tools do you use?</InputLabel>
|
|
<Select
|
|
required
|
|
>
|
|
<MenuItem value={10}>Email</MenuItem>
|
|
<MenuItem value={20}>SIEM</MenuItem>
|
|
<MenuItem value={30}>EDR</MenuItem>
|
|
<MenuItem value={30}>Chat System</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
*/}
|
|
</div>
|
|
)
|
|
case 2:
|
|
return (
|
|
<div style={{display: "flex", marginTop: 25, width: 1200, minHeight: sizing, maxHeight: sizing, }}>
|
|
<Grid item xs={10} style={{width: "100%", flex: 5, }}>
|
|
<Typography variant="body1" style={{marginLeft: 8, marginTop: 0, marginRight: 30, marginBottom: 0, maxWidth: 500, }} color="textSecondary">
|
|
What usecases are you interested in? This will help us suggest relevant Workflows.
|
|
</Typography>
|
|
|
|
<Grid item xs={5} style={{marginTop: 15, display: "flex", flexDirection: "column", width: "100%",}}>
|
|
<Button variant={defaultSearch === "Enrichment" ? "contained" : "outlined"} startIcon={<SearchIcon />} style={newButtonStyle} onClick={() => {
|
|
setDefaultSearch("Enrichment")
|
|
|
|
setSelectionOpen(false)
|
|
|
|
setTimeout(function(){
|
|
setSelectionOpen(true)
|
|
}, 150)
|
|
|
|
sendOrgUpdate("", "", userdata.active_org.id, "2. Enrich")
|
|
}}>
|
|
Enrichment
|
|
</Button>
|
|
<Button variant={defaultSearch === "Phishing" ? "contained" : "outlined"} startIcon={<EmailIcon />} style={newButtonStyle} onClick={() => {
|
|
setDefaultSearch("Phishing")
|
|
setSelectionOpen(false)
|
|
|
|
setTimeout(function(){
|
|
setSelectionOpen(true)
|
|
}, 150)
|
|
|
|
sendOrgUpdate("", "", userdata.active_org.id, "Email management")
|
|
}}>
|
|
Phishing
|
|
</Button>
|
|
<Button variant={defaultSearch === "Detection" ? "contained" : "outlined"} startIcon={<NewReleasesIcon />} style={newButtonStyle} onClick={() => {
|
|
setDefaultSearch("Detection")
|
|
setSelectionOpen(false)
|
|
|
|
setTimeout(function(){
|
|
setSelectionOpen(true)
|
|
}, 150);
|
|
|
|
sendOrgUpdate("", "", userdata.active_org.id, "3. Detect")
|
|
}}>
|
|
Detection
|
|
</Button>
|
|
<Button variant={defaultSearch === "Response" ? "contained" : "outlined"} startIcon={<NewReleasesIcon />} style={newButtonStyle} onClick={() => {
|
|
setDefaultSearch("Response")
|
|
setSelectionOpen(false)
|
|
|
|
setTimeout(function(){
|
|
setSelectionOpen(true)
|
|
}, 150);
|
|
|
|
sendOrgUpdate("", "", userdata.active_org.id, "4. Respond")
|
|
}}>
|
|
Response
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
{/*
|
|
<Grid item xs={10} paddingBottom="20px">
|
|
<TextField
|
|
required
|
|
fullWidth={true}
|
|
placeholder="Workflows as suggested from tools"
|
|
label="Workflows as suggested from tools"
|
|
type="astoolsworkflow"
|
|
id="standard-required"
|
|
autoComplete="astoolsworkflow"
|
|
margin="normal"
|
|
variant="outlined"
|
|
/>
|
|
</Grid>
|
|
*/}
|
|
<div style={{marginTop: 15, flex: 6, }}>
|
|
{selectionOpen === true ?
|
|
<WorkflowSearch
|
|
ConfiguredHits={NewHits}
|
|
showSearch={false}
|
|
defaultSearch={defaultSearch}
|
|
newSelectedApp={newSelectedApp}
|
|
setNewSelectedApp={setNewSelectedApp}
|
|
/>
|
|
: null}
|
|
</div>
|
|
</div>
|
|
)
|
|
default:
|
|
return "unknown step"
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div style={{paddingTop: 20}}>
|
|
<Stepper activeStep={activeStep} style={{backgroundColor: theme.palette.platformColor, borderRadius: theme.palette.borderRadius, padding: 12, border: "1px solid rgba(255,255,255,0.3)",}}>
|
|
{steps.map((label, index) => {
|
|
const stepProps = {}
|
|
const labelProps = {}
|
|
//if (isStepOptional(index)) {
|
|
// labelProps.optional = "optional"
|
|
//}
|
|
|
|
if (isStepSkipped(index)) {
|
|
stepProps.completed = false;
|
|
}
|
|
|
|
return (
|
|
<Step key={label} {...stepProps}>
|
|
<StepLabel {...labelProps} style={{marginLeft: 10}}>{label}</StepLabel>
|
|
</Step>
|
|
)
|
|
})}
|
|
</Stepper>
|
|
{/*selectionOpen ?
|
|
<WorkflowSearch
|
|
defaultSearch={defaultSearch}
|
|
newSelectedApp={newSelectedApp}
|
|
setNewSelectedApp={setNewSelectedApp}
|
|
/>
|
|
: null*/}
|
|
<div>
|
|
{activeStep === steps.length ? (
|
|
<div paddingTop="20px">
|
|
You Will be Redirected to getting Start Page Wait for 5-sec.
|
|
<Button onClick={handleReset}>Reset</Button>
|
|
<script>
|
|
setTimeout(function() {
|
|
navigate("/workflows")
|
|
}, 5000);
|
|
</script>
|
|
<Button>
|
|
<Link style={{color: "#f86a3e", }} to="/workflows" className="btn btn-primary">
|
|
Getting Started
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{getStepContent(activeStep)}
|
|
<div style={{paddingTop: 20}}>
|
|
<Button disabled={activeStep === 0} onClick={handleBack}>
|
|
Back
|
|
</Button>
|
|
{/*isStepOptional(activeStep) && (
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={handleSkip}
|
|
>
|
|
Skip
|
|
</Button>
|
|
)*/}
|
|
<Button
|
|
variant={activeStep === 1 ? finishedApps.length === 4 ? "contained" : "outlined" : "contained"}
|
|
color="primary"
|
|
onClick={handleNext}
|
|
style={{marginLeft: 10, }}
|
|
disabled={activeStep === 0 ? orgName.length === 0 || name.length === 0 : false}
|
|
>
|
|
{activeStep === steps.length - 1 ? "Finish" : "Next"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default WelcomeForm
|