Add peer on Android (#185)

src/components/UserEdit.tsx

@@ -89,7 +89,7 @@ const UserEdit = () => {
             groupsToCreate: groupsToCreate,
             auto_groups: autoGroups,
             is_service_user: isServiceUser,
-            is_blocked: !values.is_active
+            is_blocked: values.is_blocked
         } as UserToSave
     }
 
@@ -286,7 +286,6 @@ const UserEdit = () => {
                 role: user.role,
                 email: user.email,
                 is_blocked: user.is_blocked,
-                is_active: !user.is_blocked,
                 autoGroupsNames: currentGroups,
             })
         }
@@ -328,7 +327,6 @@ const UserEdit = () => {
                                   role: formUser.role,
                                   email: formUser.email,
                                   is_blocked: formUser.is_blocked,
-                                  is_active:  !formUser.is_blocked,
                                   autoGroupsNames: formUser.autoGroupsNames,
                               }}
                         >
@@ -391,8 +389,8 @@ const UserEdit = () => {
                                 <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
                                     <Form.Item
                                         valuePropName="checked"
-                                        name="is_active"
-                                        label="Active"
+                                        name="is_blocked"
+                                        label="Block user"
                                         style={{marginRight: "50px"}}
                                     >
                                         <Switch/>

src/components/popups/addpeer/addpeer/AddPeerPopup.tsx

@@ -10,6 +10,7 @@ import WindowsTab from "./WindowsTab";
 import MacTab from "./MacTab";
 import Link from "antd/lib/typography/Link";
 import DockerTab from "./DockerTab";
+import AndroidTab from "./AndroidTab";
 
 type Props = {
     greeting?: string;
@@ -51,11 +52,11 @@ export const AddPeerPopup: React.FC<Props> = ({
             label: <span><AppleFilled/>macOS</span>,
             children: <MacTab/>,
         },
-        /*{
+        {
             key: "4",
             label: <span><AndroidFilled/>Android</span>,
-            children: <></>,
-        },*/
+            children: <AndroidTab/>,
+        },
         {
             key: "5",
             label: <span><Icon component={DockerSVG}/>Docker</span>,

src/components/popups/addpeer/addpeer/AndroidTab.tsx

@@ -0,0 +1,51 @@
+import React, {useState} from 'react';
+
+import {Button, Image, Typography} from "antd";
+import TabSteps from "./TabSteps";
+import { StepCommand } from "./types"
+import googleplay from '../../../../assets/google-play-badge.png';
+const {Text} = Typography;
+
+export const AndroidTab = () => {
+
+    const [steps, setSteps] = useState([
+        {
+            key: 1,
+            title: 'Download and install the application from Google Play Store:',
+            commands: (
+                <a href="https://play.google.com/store/apps/details?id=io.netbird.client" target="_blank">
+                    <Image width="12em" preview={false} style={{marginTop: "5px"}} src={googleplay}/>
+                </a>
+            ),
+            copied: false
+        } as StepCommand,
+        {
+            key: 2,
+            title: 'Run the application and click on the "Connect" button in the middle of the screen',
+            commands: '',
+            copied: false,
+            showCopyButton: false
+        },
+        {
+            key: 3,
+            title: 'Sign up using your email address',
+            commands: '',
+            copied: false,
+            showCopyButton: false
+        }
+    ])
+
+    return (
+        <div style={{marginTop: 10}}>
+            <Text style={{fontWeight: "bold"}}>
+                Install on Android
+            </Text>
+            <div style={{marginTop: 5}}>
+                <TabSteps stepsItems={steps}/>
+            </div>
+
+        </div>
+    )
+}
+
+export default AndroidTab

src/views/RegularUsers.tsx

@@ -268,10 +268,10 @@ export const RegularUsers = () => {
         if (block) {
             confirmModal.confirm({
                 icon: <ExclamationCircleOutlined/>,
-                title: "Are you sure you want to deactivate \"" + user.name + "\"?",
+                title: "Are you sure you want to block " + user.name + "?",
                 width: 600,
                 content: <Space direction="vertical" size="small">
-                    <Paragraph>Disabling this user will disconnect their devices and block dashboard access.</Paragraph>
+                    <Paragraph>Blocking this user will disconnect their devices and disable dashboard access.</Paragraph>
                 </Space>,
                 onOk() {
                     let userToSave = createUserToSave(user, block)
@@ -380,6 +380,12 @@ export const RegularUsers = () => {
                                                     </div>
                                                 }
 
+                                                if ((record as User).status === "blocked") {
+                                                    return <div>{btn}
+                                                        <Tag color="red">blocked</Tag>
+                                                    </div>
+                                                }
+
                                                 return btn
                                             }}
                                     />
@@ -395,12 +401,12 @@ export const RegularUsers = () => {
                                             onFilter={(value: string | number | boolean, record) => (record as any).role.includes(value)}
                                             sorter={(a, b) => ((a as any).role.localeCompare((b as any).role))}/>
                                     {isAdmin && (
-                                        <Column title="Active" align="center" width="150px" dataIndex="is_blocked"
+                                        <Column title="Block user" align="center" width="150px" dataIndex="is_blocked"
                                                 render={(e, record: UserDataTable, index) => {
-                                                    let witch = <Switch size={"small"} checked={!e}
+                                                    let witch = <Switch size={"small"} checked={e}
                                                                         disabled={record.is_current}
                                                                         onClick={(active: boolean) => {
-                                                                            handleBlockUser(!active, record)
+                                                                            handleBlockUser(active, record)
                                                                         }}
                                                     />