Skip to content

Commit 7057235

Browse files
mohamed-ghayyadmohamed-ghayyad
committed
update UI and added create otp authenticator
1 parent 28a0e06 commit 7057235

File tree

8 files changed

+185
-17
lines changed

8 files changed

+185
-17
lines changed

‎src/components/AuthService.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ function AuthService(){
117117
autoClose: false,
118118
withCloseButton: false,
119119
});
120-
(!!hostname) ? axios.post('http://localhost:4000/conng', {
120+
(!!hostname) ? axios.post('https://api.bz9.net/conng', {
121121
grant_type:grant_type,
122122
username: username,
123123
password:password,

‎src/components/CreateOTPAuth.jsx

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
2+
import { Text,TextInput, Button, Group, Box, Card,Grid, Chip, Badge, Center,PasswordInput} from '@mantine/core';
3+
import axios from 'axios';
4+
import { notifications } from '@mantine/notifications';
5+
import { IconCheck,IconAlertCircle, IconFaceIdError, IconEarOff, IconFaceId,IconLock, IconUserCircle, IconAt } from '@tabler/icons-react';
6+
import { useForm } from '@mantine/form';
7+
import { useDisclosure } from '@mantine/hooks';
8+
import { JsonInput } from '@mantine/core';
9+
10+
function CreateOTPAuth(){
11+
const [visible, { toggle }] = useDisclosure(false);
12+
let AccessToken = sessionStorage.getItem("access_token");
13+
let hostname = sessionStorage.getItem("hostname");
14+
let tenant = sessionStorage.getItem("tenant");
15+
const form6 = useForm({
16+
initialValues:{
17+
access_token:AccessToken,
18+
policy:'AT_OTP',
19+
Email: '',
20+
Password: '',
21+
},
22+
});
23+
24+
const fetch = async () => {
25+
await axios.post('https://api.bz9.net/createotpAuthenticator',{
26+
access_token:AccessToken.replace(/(\r?\n|\r)/gm,""),
27+
hostname:hostname,
28+
tenant:tenant,
29+
Email:form6.values.Email,
30+
31+
32+
}, {
33+
headers: {
34+
'Content-Type': 'application/x-www-form-urlencoded',
35+
}
36+
}
37+
).then(function(response){
38+
const internalId = 'Internal ID of '+ form6.values.Email;
39+
const payload = JSON.stringify({
40+
"schemas" : [
41+
"urn:hid:scim:api:idp:2.0:Authenticator"
42+
],
43+
"policy" : {
44+
"value" : "AT_OTP"
45+
},
46+
"status" : {
47+
"status" : "ENABLED",
48+
"expiryDate" : "2040-05-15T18:15:21+00:00",
49+
"startDate" : "2015-05-15T18:15:21+00:00"
50+
},
51+
"owner" : {
52+
"value" : internalId // the internal ID of the user (!= external ID), this ID is retrieved via the Users search endpoint
53+
}
54+
});
55+
56+
notifications.update({
57+
id: 'load-data',
58+
color: 'green',
59+
title: 'OTP Authenticator',
60+
message: "Successfully created an OTP Authenticator.",
61+
icon: <IconFaceId size="1rem" />,
62+
autoClose: 2000,
63+
});
64+
document.getElementById("reqBody").innerHTML = payload;
65+
document.getElementById("resBody").innerHTML = JSON.stringify(response.data);
66+
}).catch(function(error){
67+
68+
if (error.response) {
69+
// The request was made and the server responded with a status code
70+
// that falls out of the range of 2xx
71+
//document.getElementById("status").innerHTML = JSON.stringify(error.response.data);
72+
//document.getElementById("status").innerHTML = JSON.stringify(error.response.status);
73+
74+
// document.getElementById("status").innerHTML = error.response.headers;
75+
} else if (error.request) {
76+
// The request was made but no response was received
77+
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
78+
// http.ClientRequest in node.js
79+
notifications.update({
80+
id: 'load-data',
81+
color: 'red',
82+
title: 'Error!',
83+
message: "The request was made but no response was received",
84+
icon: <IconFaceIdError size="1rem" />,
85+
autoClose: 2000,
86+
});
87+
//document.getElementById("status").innerHTML = JSON.stringify(error.request);
88+
} else {
89+
// Something happened in setting up the request that triggered an Error
90+
//document.getElementById("status").innerHTML ='Error: '+ JSON.stringify(error.message);
91+
//document.getElementById("status").innerHTML = "Error!";
92+
notifications.update({
93+
id: 'load-data',
94+
color: 'red',
95+
title: 'Error!',
96+
message: "Something happened in setting up the request that triggered an Error!",
97+
icon: <IconFaceIdError size="1rem" />,
98+
autoClose: 2000,
99+
});
100+
}
101+
102+
103+
});
104+
};
105+
106+
return (
107+
108+
<Box pos="relative" sx={(theme) => ({
109+
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
110+
padding: theme.spacing.xl,
111+
borderRadius: theme.radius.md,
112+
cursor: 'pointer',
113+
114+
'&:hover': {
115+
backgroundColor:
116+
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
117+
},
118+
})}
119+
>
120+
<Center><h3>Create an OTP authenticator.</h3></Center>
121+
<TextInput label="Access Token" placeholder="Token" {...form6.getInputProps('access_token')} />
122+
<TextInput label="Email" placeholder="Email" {...form6.getInputProps('Email')} />
123+
124+
<br/>
125+
<Center>
126+
<Button onClick={()=>{
127+
128+
notifications.show({
129+
id: 'load-data',
130+
loading: true,
131+
title: 'Authenticator',
132+
message: 'Creating OTP Authenticator..',
133+
autoClose: false,
134+
withCloseButton: false,
135+
});
136+
fetch();
137+
138+
}}>Create OTP Authenticator</Button>
139+
</Center>
140+
<JsonInput
141+
label="Payload"
142+
placeholder="JSON Request Payload"
143+
validationError="Invalid JSON"
144+
formatOnBlur
145+
autosize
146+
minRows={4}
147+
id="reqBody"
148+
/>
149+
<JsonInput
150+
label="JSON Response Body"
151+
placeholder="JSON Response Body"
152+
validationError="Invalid JSON"
153+
formatOnBlur
154+
autosize
155+
minRows={4}
156+
id="resBody"
157+
/>
158+
</Box>
159+
160+
);
161+
162+
}
163+
164+
export default CreateOTPAuth;

‎src/components/CreatePasswordAuth.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function CreatePasswordAuth(){
2020
},
2121
});
2222
const fetch = async () => {
23-
await axios.post('http://localhost:4000/createAuthenticator',{
23+
await axios.post('https://api.bz9.net/createAuthenticator',{
2424
access_token:AccessToken.replace(/(\r?\n|\r)/gm,""),
2525
hostname:hostname,
2626
tenant:tenant,
@@ -98,6 +98,7 @@ function CreatePasswordAuth(){
9898
},
9999
})}
100100
>
101+
<Center><h3>Create a password authenticator.</h3></Center>
101102
<TextInput label="Access Token" placeholder="Token" {...form3.getInputProps('access_token')} />
102103
<TextInput label="Policy" placeholder='AT_STDPWD' {...form3.getInputProps('policy')}/>
103104
<TextInput label="Email" placeholder="Email" {...form3.getInputProps('Email')} />

‎src/components/Nav.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ function Navlinks(){
2121

2222
<NavLink component="a" label="Register User" icon={<IconUserPlus size="1rem"/>} href="/register" />
2323
<NavLink component="a" label="Create Password Authenticator" href="/createPasswordAuthenticator" icon={<IconUserShield size="1rem"/>} />
24+
<NavLink component="a" label="Create OTP Authenticator" href="/createOtpAuth" icon={<IconUserShield size="1rem"/>} />
2425
<NavLink component="a" href="/Users" label="View Users" icon={<IconUserQuestion size="1rem"/>} />
2526

2627
<NavLink

‎src/components/RegisterUser.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ function RegisterUser(){
5656
autoClose: false,
5757
withCloseButton: false,
5858
});
59-
axios.post('http://localhost:4000/register', {
59+
axios.post('https://api.bz9.net/register', {
6060
Title: usertitle,
6161
familyName: userfamily,
6262
firstName: userfirst,

‎src/components/ViewUsers.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function ViewUsers(){
1212
let hostname = sessionStorage.getItem("hostname");
1313
let tenant = sessionStorage.getItem("tenant");
1414
const fetch = async () => {
15-
await axios.post('http://localhost:4000/users',{
15+
await axios.post('https://api.bz9.net/users',{
1616
access_token:AccessToken.replace(/(\r?\n|\r)/gm,""),
1717
hostname:hostname,
1818
tenant:tenant,

‎src/components/passwordauth.jsx

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,22 @@ import { useState } from 'react';
77

88
function PasswordAuth(){
99
const [active, setActive] = useState(0);
10-
let email = '';
10+
let username = '';
1111
let Password = '';
1212
const clientId = '';
1313
const clientSecret = '';
1414
let policy = '';
1515
let hostname = sessionStorage.getItem("hostname");
1616
let Tenant =sessionStorage.getItem("tenant");
1717
const form4 = useForm({
18-
initialValues: { email: '', password: '',policy:'AT_STDPWD',channel:'CH_DIRECT',clientId:'',clientSecret:''},
18+
initialValues: { username: '', password: '',policy:'AT_STDPWD',channel:'CH_DIRECT',clientId:'',clientSecret:'',grant_type:'password'},
1919

2020
// functions will be used to validate values at corresponding key
2121
validate: (values) => {
2222
if (active === 1) {
2323
return {
2424
email:
25-
values.email.trim().length < 6
25+
values.username.trim().length < 6
2626
? 'Username must include at least 6 characters'
2727
: null,
2828
password:
@@ -78,10 +78,9 @@ function PasswordAuth(){
7878
placeholder="Password"
7979
{...form4.getInputProps('clientSecret')} />
8080
<br/>
81-
<Badge variant="filled" color='gray'>Disconnected</Badge>
8281
</Stepper.Step>
8382
<Stepper.Step label="User Authentication" description="User settings">
84-
<TextInput label="Email" placeholder='Please enter your Email' {...form4.getInputProps('email')} />
83+
<TextInput label="Email" placeholder='Please enter your Email' {...form4.getInputProps('username')} />
8584
<PasswordInput label="Password" placeholder='' {...form4.getInputProps('password')} />
8685
<TextInput label="Authentication Policy" placeholder='AT_RESPWD' {...form4.getInputProps('policy')} />
8786
<TextInput label="Channel" placeholder='CH_DIRECT' {...form4.getInputProps('channel')} />
@@ -93,8 +92,8 @@ function PasswordAuth(){
9392
<Button onClick={
9493
()=>
9594

96-
axios.post('http://localhost:4000/passauth', {
97-
email: form4.values.email,
95+
axios.post('https://api.bz9.net/passauth', {
96+
username: form4.values.username,
9897
password:form4.values.password,
9998
hostname: hostname,
10099
tenant: Tenant,
@@ -108,19 +107,17 @@ function PasswordAuth(){
108107
).then(function(response){
109108
document.getElementById('resBody').value = JSON.stringify(response.data);
110109
document.getElementById('status').innerHTML = '<span>Connected</span>';
111-
document.getElementById('status').style.color = 'green'
110+
document.getElementById('status').style.color = 'green';
111+
document.getElementById('status').style.backgroundColor = 'white';
112112
})
113113
}
114114

115115
>
116116
Login
117117
</Button>
118118
</Center>
119-
Completed! and for test purposes these are the values:
120-
<Code block mt="xl">
121-
{JSON.stringify(form4.values, null, 2)}
122-
</Code>
123-
<Badge variant="filled" color='gray' id='status'>Disconnected</Badge>
119+
<br/>
120+
<Center><Badge variant="filled" color='gray' id='status'>Disconnected</Badge></Center>
124121
</Stepper.Completed>
125122
</Stepper>
126123

‎src/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import * as ReactDOM from "react-dom/client";
66
import ViewUsers from "./components/ViewUsers";
77
import CreatePasswordAuth from "./components/CreatePasswordAuth";
88
import PasswordAuth from "./components/passwordauth.jsx";
9+
import CreateOTPAuth from "./components/CreateOTPAuth.jsx";
910
import {
1011
createBrowserRouter,
1112
RouterProvider,
@@ -39,6 +40,10 @@ import {
3940
{
4041
path: "pauthenticate",
4142
element : <PasswordAuth/>,
43+
},
44+
{
45+
path: "createOtpAuth",
46+
element: <CreateOTPAuth/>,
4247
}
4348
],
4449
},

0 commit comments

Comments
 (0)