authscape 1.0.602 → 1.0.604
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,390 @@
|
|
|
1
|
+
import React, {useEffect, useRef, useState} from 'react';
|
|
2
|
+
import { Box } from '@mui/system';
|
|
3
|
+
import Grid from '@mui/material/Grid';
|
|
4
|
+
import Button from '@mui/material/Button';
|
|
5
|
+
import { styled } from '@mui/material/styles';
|
|
6
|
+
import Dialog from '@mui/material/Dialog';
|
|
7
|
+
import DialogTitle from '@mui/material/DialogTitle';
|
|
8
|
+
import DialogContent from '@mui/material/DialogContent';
|
|
9
|
+
import DialogActions from '@mui/material/DialogActions';
|
|
10
|
+
import IconButton from '@mui/material/IconButton';
|
|
11
|
+
import CloseIcon from '@mui/icons-material/Close';
|
|
12
|
+
import Typography from '@mui/material/Typography';
|
|
13
|
+
import Stepper from '@mui/material/Stepper';
|
|
14
|
+
import Step from '@mui/material/Step';
|
|
15
|
+
import StepLabel from '@mui/material/StepLabel';
|
|
16
|
+
import TextField from '@mui/material/TextField';
|
|
17
|
+
import FmdBadRoundedIcon from '@mui/icons-material/FmdBadRounded';
|
|
18
|
+
import FormControl from '@mui/material/FormControl';
|
|
19
|
+
import Select from '@mui/material/Select';
|
|
20
|
+
import MenuItem from '@mui/material/MenuItem';
|
|
21
|
+
import { parseDomain, ParseResultType } from "parse-domain";
|
|
22
|
+
import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
|
|
23
|
+
// import { apiService } from 'authscape';
|
|
24
|
+
import CircularProgress from '@mui/material/CircularProgress';
|
|
25
|
+
import { DialogContentText } from '@mui/material';
|
|
26
|
+
|
|
27
|
+
export function AddDomain({open, azureWebsite, azureTxtValue, handleClose}) {
|
|
28
|
+
|
|
29
|
+
const steps = ['Enter a domain', 'Setup DNS Record', 'Go Live'];
|
|
30
|
+
|
|
31
|
+
const [activeStep, setActiveStep] = useState(0);
|
|
32
|
+
const [completed, setCompleted] = useState({});
|
|
33
|
+
|
|
34
|
+
const [domain, setDomain] = useState(null);
|
|
35
|
+
const [subDomains, setSubDomains] = useState(null);
|
|
36
|
+
const [topLevelDomains , setTopLevelDomains ] = useState(null);
|
|
37
|
+
|
|
38
|
+
const [fullDomain, setFullDomain] = useState(null);
|
|
39
|
+
const [errorMessage, setErrorMessage] = useState(null);
|
|
40
|
+
|
|
41
|
+
const refDomain = useRef(null);
|
|
42
|
+
|
|
43
|
+
const refCNameTarget = useRef(null);
|
|
44
|
+
const reftxtTarget = useRef(null);
|
|
45
|
+
|
|
46
|
+
const refCNameName = useRef(null);
|
|
47
|
+
const reftxtName = useRef(null);
|
|
48
|
+
|
|
49
|
+
const totalSteps = () => {
|
|
50
|
+
return steps.length;
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const completedSteps = () => {
|
|
54
|
+
return Object.keys(completed).length;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
const isLastStep = () => {
|
|
58
|
+
return activeStep === totalSteps() - 1;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const allStepsCompleted = () => {
|
|
62
|
+
return completedSteps() === totalSteps();
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const handleNext = () => {
|
|
66
|
+
const newActiveStep =
|
|
67
|
+
isLastStep() && !allStepsCompleted()
|
|
68
|
+
? // It's the last step, but not all steps have been completed,
|
|
69
|
+
// find the first step that has been completed
|
|
70
|
+
steps.findIndex((step, i) => !(i in completed))
|
|
71
|
+
: activeStep + 1;
|
|
72
|
+
setActiveStep(newActiveStep);
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
const handleBack = () => {
|
|
76
|
+
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
const handleStep = (step) => () => {
|
|
82
|
+
setActiveStep(step);
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const handleComplete = () => {
|
|
86
|
+
const newCompleted = completed;
|
|
87
|
+
newCompleted[activeStep] = true;
|
|
88
|
+
setCompleted(newCompleted);
|
|
89
|
+
handleNext();
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
|
|
93
|
+
'& .MuiDialogContent-root': {
|
|
94
|
+
padding: theme.spacing(2),
|
|
95
|
+
},
|
|
96
|
+
'& .MuiDialogActions-root': {
|
|
97
|
+
padding: theme.spacing(1),
|
|
98
|
+
},
|
|
99
|
+
}));
|
|
100
|
+
|
|
101
|
+
const handleReset = () => {
|
|
102
|
+
setActiveStep(0);
|
|
103
|
+
setCompleted({});
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
const createTheDomainRequest = async () => {
|
|
107
|
+
|
|
108
|
+
if (fullDomain == null || fullDomain == "")
|
|
109
|
+
{
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
let response = await apiService().post("/PrivateLabel/GenerateDomain", {
|
|
114
|
+
hostName: fullDomain
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
if (response != null && response.status == 200)
|
|
118
|
+
{
|
|
119
|
+
if (handleClose != null)
|
|
120
|
+
{
|
|
121
|
+
handleClose();
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
else
|
|
125
|
+
{
|
|
126
|
+
let aStep = activeStep - 1;
|
|
127
|
+
setActiveStep(aStep);
|
|
128
|
+
setErrorMessage(response.data);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
useEffect(() => {
|
|
134
|
+
|
|
135
|
+
if (activeStep == 2)
|
|
136
|
+
{
|
|
137
|
+
createTheDomainRequest();
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
}, [activeStep]);
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
const copyToClipboard = async (text) => {
|
|
144
|
+
try {
|
|
145
|
+
const permissions = await navigator.permissions.query({name: "clipboard-write"})
|
|
146
|
+
if (permissions.state === "granted" || permissions.state === "prompt") {
|
|
147
|
+
await navigator.clipboard.writeText(text);
|
|
148
|
+
//alert('Copied to clipboard!');
|
|
149
|
+
} else {
|
|
150
|
+
throw new Error("Can't access the clipboard. Check your browser permissions.")
|
|
151
|
+
}
|
|
152
|
+
} catch (error) {
|
|
153
|
+
alert('Error copying to clipboard:', error);
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
function BootstrapDialogTitle(props) {
|
|
158
|
+
const { children, onClose, ...other } = props;
|
|
159
|
+
|
|
160
|
+
return (
|
|
161
|
+
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
|
|
162
|
+
{children}
|
|
163
|
+
{onClose ? (
|
|
164
|
+
<IconButton
|
|
165
|
+
aria-label="close"
|
|
166
|
+
onClick={onClose}
|
|
167
|
+
sx={{
|
|
168
|
+
position: 'absolute',
|
|
169
|
+
right: 8,
|
|
170
|
+
top: 8,
|
|
171
|
+
color: (theme) => theme.palette.grey[500],
|
|
172
|
+
}}
|
|
173
|
+
>
|
|
174
|
+
<CloseIcon />
|
|
175
|
+
</IconButton>
|
|
176
|
+
) : null}
|
|
177
|
+
</DialogTitle>
|
|
178
|
+
);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
return (
|
|
182
|
+
<BootstrapDialog onClose={handleClose} aria-labelledby="customized-dialog-title" sx={{backgroundColor: "rgba(0, 0, 0, 0.6)"}} fullWidth={true} maxWidth={"md"} open={open}>
|
|
183
|
+
<Box sx={{padding:4}}>
|
|
184
|
+
|
|
185
|
+
<Stepper activeStep={activeStep} alternativeLabel>
|
|
186
|
+
{steps.map((label) => (
|
|
187
|
+
<Step key={label}>
|
|
188
|
+
<StepLabel sx={{color:"#fff"}}>{label}</StepLabel>
|
|
189
|
+
</Step>
|
|
190
|
+
))}
|
|
191
|
+
</Stepper>
|
|
192
|
+
|
|
193
|
+
{activeStep == 0 &&
|
|
194
|
+
<>
|
|
195
|
+
<BootstrapDialogTitle id="customized-dialog-title" onClose={handleClose} sx={{textAlign:"center", fontSize:30, marginTop:2, lineHeight: 1}}>
|
|
196
|
+
What domain would you like to connect to {process.env.companyName}?
|
|
197
|
+
</BootstrapDialogTitle>
|
|
198
|
+
<DialogContent>
|
|
199
|
+
|
|
200
|
+
<Box>
|
|
201
|
+
<TextField inputRef={refDomain} id="domainTxt" label="Enter subdomain URL e.g catalog.mydomain.com" fullWidth={true} variant="outlined" sx={{color:"white", marginTop:2 }} />
|
|
202
|
+
</Box>
|
|
203
|
+
<Box sx={{marginTop:2}}>
|
|
204
|
+
<Typography gutterBottom sx={{textAlign:"center", fontSize:14}}>
|
|
205
|
+
<FmdBadRoundedIcon sx={{color:"#1976d2", position:"relative", top:8}} /> You must own the domain and have the ability to add records
|
|
206
|
+
</Typography>
|
|
207
|
+
</Box>
|
|
208
|
+
|
|
209
|
+
</DialogContent>
|
|
210
|
+
<DialogActions>
|
|
211
|
+
<Button variant="contained" onClick={() => {
|
|
212
|
+
|
|
213
|
+
if (refDomain.current.value == "")
|
|
214
|
+
{
|
|
215
|
+
return;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
setFullDomain(refDomain.current.value);
|
|
219
|
+
|
|
220
|
+
var domainLand = parseDomain(refDomain.current.value);
|
|
221
|
+
setDomain(domainLand.domain);
|
|
222
|
+
setSubDomains(domainLand.subDomains);
|
|
223
|
+
setTopLevelDomains(domainLand.topLevelDomains);
|
|
224
|
+
|
|
225
|
+
handleNext();
|
|
226
|
+
}}>
|
|
227
|
+
Next: Setup DNS
|
|
228
|
+
</Button>
|
|
229
|
+
</DialogActions>
|
|
230
|
+
</>
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
{activeStep == 1 &&
|
|
237
|
+
<>
|
|
238
|
+
<BootstrapDialogTitle id="customized-dialog-title" onClose={handleClose} sx={{textAlign:"center", fontSize:30, marginTop:2}}>
|
|
239
|
+
Configure your DNS
|
|
240
|
+
</BootstrapDialogTitle>
|
|
241
|
+
<DialogContent>
|
|
242
|
+
|
|
243
|
+
<Box>
|
|
244
|
+
<Typography gutterBottom sx={{textAlign:"center", fontSize:14}}>
|
|
245
|
+
Add a CNAME and TXT Record to your domain by visiting your DNS provider.
|
|
246
|
+
</Typography>
|
|
247
|
+
</Box>
|
|
248
|
+
|
|
249
|
+
<Box sx={{backgroundColor:"#f7f7f7", marginTop:5, paddingLeft:4, paddingRight:4}}>
|
|
250
|
+
<Grid container spacing={2} fullWidth={true} >
|
|
251
|
+
<Grid item xs={2}>
|
|
252
|
+
Type
|
|
253
|
+
|
|
254
|
+
<FormControl fullWidth sx={{paddingTop:2}}>
|
|
255
|
+
<Select
|
|
256
|
+
value={1} readOnly={true}>
|
|
257
|
+
<MenuItem value={1}>CNAME</MenuItem>
|
|
258
|
+
</Select>
|
|
259
|
+
</FormControl>
|
|
260
|
+
|
|
261
|
+
</Grid>
|
|
262
|
+
<Grid item xs={5}>
|
|
263
|
+
Name
|
|
264
|
+
<TextField inputRef={refCNameName} id="NameDomainTxt" label="" fullWidth={true} value={subDomains} variant="outlined" sx={{color:"white", paddingTop:2 }} />
|
|
265
|
+
|
|
266
|
+
<Box sx={{textAlign:"center", paddingTop:1}}>
|
|
267
|
+
<Button startIcon={<ContentCopyRoundedIcon/>} sx={{width:"100%"}} variant="contained" onClick={() => {
|
|
268
|
+
copyToClipboard(refCNameName.current.value);
|
|
269
|
+
}}>
|
|
270
|
+
Copy
|
|
271
|
+
</Button>
|
|
272
|
+
</Box>
|
|
273
|
+
|
|
274
|
+
</Grid>
|
|
275
|
+
<Grid item xs={5}>
|
|
276
|
+
Target
|
|
277
|
+
<TextField inputRef={refCNameTarget} id="targetDomainTxt" label="" fullWidth={true} value={azureWebsite} variant="outlined" sx={{color:"white", paddingTop:2 }} />
|
|
278
|
+
|
|
279
|
+
<Box sx={{textAlign:"center", paddingTop:1}}>
|
|
280
|
+
<Button startIcon={<ContentCopyRoundedIcon/>} sx={{width:"100%"}} variant="contained" onClick={() => {
|
|
281
|
+
copyToClipboard(refCNameTarget.current.value);
|
|
282
|
+
}}>
|
|
283
|
+
Copy
|
|
284
|
+
</Button>
|
|
285
|
+
</Box>
|
|
286
|
+
|
|
287
|
+
</Grid>
|
|
288
|
+
</Grid>
|
|
289
|
+
</Box>
|
|
290
|
+
|
|
291
|
+
<Box sx={{backgroundColor:"#f7f7f7", paddingLeft:4, paddingRight:4, marginTop:2, paddingBottom:4}}>
|
|
292
|
+
<Grid container spacing={2} fullWidth={true} >
|
|
293
|
+
<Grid item xs={2}>
|
|
294
|
+
Type
|
|
295
|
+
|
|
296
|
+
<FormControl fullWidth sx={{paddingTop:2}}>
|
|
297
|
+
<Select
|
|
298
|
+
value={1} readOnly={true}>
|
|
299
|
+
<MenuItem value={1}>TXT</MenuItem>
|
|
300
|
+
</Select>
|
|
301
|
+
</FormControl>
|
|
302
|
+
|
|
303
|
+
</Grid>
|
|
304
|
+
<Grid item xs={5}>
|
|
305
|
+
Name
|
|
306
|
+
<TextField inputRef={reftxtName} id="NameDomain2Txt" label="" fullWidth={true} value={"asuid." + subDomains} variant="outlined" sx={{color:"white", marginTop:2 }} />
|
|
307
|
+
|
|
308
|
+
<Box sx={{textAlign:"center", paddingTop:1}}>
|
|
309
|
+
<Button startIcon={<ContentCopyRoundedIcon/>} sx={{width:"100%"}} variant="contained" onClick={() => {
|
|
310
|
+
copyToClipboard(reftxtName.current.value);
|
|
311
|
+
}}>
|
|
312
|
+
Copy
|
|
313
|
+
</Button>
|
|
314
|
+
</Box>
|
|
315
|
+
</Grid>
|
|
316
|
+
<Grid item xs={5}>
|
|
317
|
+
Target
|
|
318
|
+
<TextField inputRef={reftxtTarget} id="targetDomain2Txt" label="" fullWidth={true} value={azureTxtValue} variant="outlined" sx={{color:"white", marginTop:2 }} />
|
|
319
|
+
|
|
320
|
+
<Box sx={{textAlign:"center", paddingTop:1}}>
|
|
321
|
+
<Button startIcon={<ContentCopyRoundedIcon/>} sx={{width:"100%"}} variant="contained" onClick={() => {
|
|
322
|
+
copyToClipboard(reftxtTarget.current.value);
|
|
323
|
+
}}>
|
|
324
|
+
Copy
|
|
325
|
+
</Button>
|
|
326
|
+
</Box>
|
|
327
|
+
</Grid>
|
|
328
|
+
</Grid>
|
|
329
|
+
</Box>
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
</DialogContent>
|
|
333
|
+
<DialogActions>
|
|
334
|
+
<Button variant="contained" onClick={() => {
|
|
335
|
+
handleNext();
|
|
336
|
+
}}>
|
|
337
|
+
Go Live
|
|
338
|
+
</Button>
|
|
339
|
+
</DialogActions>
|
|
340
|
+
</>
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
{activeStep == 2 &&
|
|
344
|
+
<Box>
|
|
345
|
+
<BootstrapDialogTitle id="customized-dialog-title" onClose={handleClose} sx={{textAlign:"center", fontSize:30, marginTop:4}}>
|
|
346
|
+
Creating your private label experience
|
|
347
|
+
</BootstrapDialogTitle>
|
|
348
|
+
<DialogContent>
|
|
349
|
+
<Box sx={{paddingTop:2, textAlign:"center"}}>
|
|
350
|
+
<Typography gutterBottom sx={{textAlign:"center", fontSize:18}}>
|
|
351
|
+
Please wait while we complete a few things on our side.
|
|
352
|
+
</Typography>
|
|
353
|
+
<Box sx={{paddingTop:2}}>
|
|
354
|
+
<CircularProgress color="inherit" />
|
|
355
|
+
</Box>
|
|
356
|
+
</Box>
|
|
357
|
+
</DialogContent>
|
|
358
|
+
</Box>
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
</Box>
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
<Dialog
|
|
365
|
+
open={errorMessage != null ? true : false}
|
|
366
|
+
onClose={() => {
|
|
367
|
+
setErrorMessage(null);
|
|
368
|
+
}}
|
|
369
|
+
aria-labelledby="alert-dialog-title"
|
|
370
|
+
aria-describedby="alert-dialog-description">
|
|
371
|
+
<DialogTitle id="alert-dialog-title">
|
|
372
|
+
{"Issue Detected"}
|
|
373
|
+
</DialogTitle>
|
|
374
|
+
<DialogContent>
|
|
375
|
+
<DialogContentText id="alert-dialog-description">
|
|
376
|
+
{errorMessage}
|
|
377
|
+
</DialogContentText>
|
|
378
|
+
</DialogContent>
|
|
379
|
+
<DialogActions>
|
|
380
|
+
<Button onClick={() => {
|
|
381
|
+
setErrorMessage(null);
|
|
382
|
+
}} autoFocus>
|
|
383
|
+
OK
|
|
384
|
+
</Button>
|
|
385
|
+
</DialogActions>
|
|
386
|
+
</Dialog>
|
|
387
|
+
|
|
388
|
+
</BootstrapDialog>
|
|
389
|
+
)
|
|
390
|
+
}
|