From 2c4f11e3b6734508d13be0b68beb20ac2e81c131 Mon Sep 17 00:00:00 2001 From: Kaveesha Mihirangi Date: Thu, 12 Dec 2019 06:59:50 +0000 Subject: [PATCH] Add UI component to Enroll device and add policies --- .../src/components/Policies/AddPolicy.js | 74 +++++ .../components/Policies/ConfigureProfile.js | 302 ++++++++++++++++++ .../react-app/src/index.js | 6 + .../src/pages/Dashboard/Dashboard.js | 21 +- .../pages/Dashboard/Policies/AddNewPolicy.js | 65 ++++ 5 files changed, 464 insertions(+), 4 deletions(-) create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/AddPolicy.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/ConfigureProfile.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/AddNewPolicy.js diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/AddPolicy.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/AddPolicy.js new file mode 100644 index 0000000000..47e88454ba --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/AddPolicy.js @@ -0,0 +1,74 @@ +import React from 'react'; +import {Button, Form, Row, Col, Card, Steps, Input, message, Modal, notification, Typography} from "antd"; +import axios from "axios"; +import {withConfigContext} from "../../context/ConfigContext"; +import DeviceType from "../Devices/DeviceType"; +import ConfigureProfile from "./ConfigureProfile"; +const {Step} = Steps; + +class AddPolicy extends React.Component { + + constructor(props) { + super(props); + this.config = this.props.context; + this.state = { + isAddDeviceModalVisible: false, + current : 0, + } + }; + + onClickType = () =>{ + this.setState({ + current: 1, + }) + }; + + openAddDeviceModal = () =>{ + this.setState({ + isAddDeviceModalVisible : true, + }) + }; + + render() { + const {loading, current, isError, supportedOsVersions, errorText, forbiddenErrors} = this.state; + const { getFieldDecorator } = this.props.form; + return ( +
+ + + + + + + + + + + + + + +
+ +
+
+ +
+
+
+
+
+
+
+
+
+ + + + +
+ ); + } +} + +export default withConfigContext(Form.create({name: 'add-policy'})(AddPolicy)); \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/ConfigureProfile.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/ConfigureProfile.js new file mode 100644 index 0000000000..21a2df87ee --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/ConfigureProfile.js @@ -0,0 +1,302 @@ +import React from 'react'; +import {Tabs, Row, Col, Switch, Menu,Input, Typography, Form, Checkbox, Select} from "antd"; +import {withConfigContext} from "../../context/ConfigContext"; +const { Title } = Typography; +const { TabPane } = Tabs; +const {Option} = Select; + + +class ConfigureProfile extends React.Component { + constructor(props) { + super(props); + this.config = this.props.context; + }; + + render() { + const { getFieldDecorator } = this.props.form; + return ( +
+ + + + + Passcode Policy + + + + + + + Enforce a configured passcode policy on Android devices. + Once this profile is applied, the device + owners won't be able to modify the password settings on their devices. + +
+
+ + {getFieldDecorator('allowSimpleValue', { + })(Allow simple value)} + + + {getFieldDecorator('remember', { + })(Require alphanumeric value)} + + + {getFieldDecorator('minPasscodeLength', { + initialValue: '0' + })( + + )} + + + {getFieldDecorator('minComplexChar', { + initialValue: '0' + })( + + )} + + + {getFieldDecorator('maxPasscodeAge', { + + })( + + )} + + + {getFieldDecorator('passcodeHistory', { + })( + + )} + + + {getFieldDecorator('maxFailedAttemps', { + initialValue: '0' + })( + + )} + +
+
+ + + + + Restrictions + + + + + + +

This configurations can be used to restrict certain settings on an Android device. + Once this configuration profile is installed on a device, corresponding users will + not be able to modify these settings on their devices.

+ + + + + + Encryption Settings + + + + + + +

This configuration can be used to encrypt data on an Android device, + when the device is locked and make it readable when the passcode is entered. + Once this configuration profile is installed on a device, corresponding users will + not be able to modify these settings on their devices.

+ + + + + + Wi-Fi Settings + + + + + + +

This configurations can be used to configure Wi-Fi access on an Android device. + Once this configuration profile is installed on a device, corresponding + users will not be able to modify these settings on their devices.

+ + + + + + Global Proxy Settings + + + + + + +

This configurations can be used to set a network-independent global HTTP + proxy on an Android device. Once this configuration profile is installed on a device, + all the network traffic will be routed through the proxy server.

+ + + +
+ + + VPN Settings + + + + + + +

Configure the OpenVPN settings on Android devices. In order to enable this, + device needs to have "OpenVPN for Android" application installed.

+ +
+
+ + + Always On VPN Settings + + + + + + +

Configure an always-on VPN connection through a specific VPN client application.

+ +
+ + + + + Certificate Install Settings + + + + + + +

Configure the certificate install settings on Android devices.

+ + + + + + Work-Profile Configurations + + + + + + +

The configurations below can be applied to the devices where the agent + is running in Android Work-Profile.

+ + + + + + COSU Profile Configuration + + + + + + +

This policy can be used to configure the profile of COSU Devices.

+ + + + + + Application Restrictions + + + + + + +

This configuration can be used to create a black list or white list of applications.

+ + + + + + Runtime Permission Policy + + + + + + +

This configuration can be used to set a runtime permission policy to an Android Device.

+ + + + + + System Update Policy (COSU) + + + + + + +

This configuration can be used to set a passcode policy to an Android Device. + Once this configuration profile is installed on a device, + corresponding users will not be able to modify these settings on their devices.

+ + + + + + Enrollment Application Install + + + + + + +

This configuration can be used to install applications during Android device enrollment.

+ + + +
+ ); + } +} + +export default withConfigContext(Form.create({name: 'add-policy'})(ConfigureProfile)); \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js index 8c89a821a7..cd69abffff 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js @@ -32,6 +32,7 @@ import Policies from "./pages/Dashboard/Policies/Policies"; import Roles from "./pages/Dashboard/Roles/Roles"; import DeviceTypes from "./pages/Dashboard/DeviceTypes/DeviceTypes"; import DeviceEnroll from "./pages/Dashboard/Devices/DeviceEnroll"; +import AddNewPolicy from "./pages/Dashboard/Policies/AddNewPolicy"; const routes = [ { @@ -79,6 +80,11 @@ const routes = [ component: Policies, exact: true }, + { + path: '/entgra/policy/add', + component: AddNewPolicy, + exact: true + }, { path: '/entgra/roles', component: Roles, diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js index c826201867..a9a0313e25 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js @@ -123,12 +123,25 @@ class Dashboard extends React.Component { Users - - + Policies - - + } + > + + + View + + + + + Add New Policy + + + diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/AddNewPolicy.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/AddNewPolicy.js new file mode 100644 index 0000000000..980c7bf647 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/AddNewPolicy.js @@ -0,0 +1,65 @@ +/* + * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved. + * + * Entgra (pvt) Ltd. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from "react"; +import { + PageHeader, + Typography, + Breadcrumb, + Icon +} from "antd"; +import {Link} from "react-router-dom"; +import AddPolicy from "../../../components/Policies/AddPolicy"; + +const {Paragraph} = Typography; + +class AddNewPolicy extends React.Component { + routes; + + constructor(props) { + super(props); + this.routes = props.routes; + } + + render() { + return ( +
+ + + + Home + + Policies + +
+

Policies

+ Create new policy on IoT Server. +
+
+ +
+ +
+ +
+
+ ); + } +} + +export default AddNewPolicy;