Merge branch 'master' into 2508-ip-conversion-vol2

heyxkhoa · Jan 18, 2021 · 71af60c · 71af60c
2 parents 98af378 + 9f75725
commit 71af60c
Show file tree

Hide file tree

Showing 42 changed files with 735 additions and 412 deletions.
diff --git a/Makefile b/Makefile
@@ -80,6 +80,8 @@ go-lint:  ; $(ENV) "$(SHELL)" ./scripts/make/go-lint.sh
 go-test:  ; $(ENV) "$(SHELL)" ./scripts/make/go-test.sh
 go-tools: ; $(ENV) "$(SHELL)" ./scripts/make/go-tools.sh
 
+openapi-lint: ; cd ./openapi/ && $(YARN) test
+
 # TODO(a.garipov): Remove the legacy targets once the build
 # infrastructure stops using them.
 dependencies:

diff --git a/client2/src/assets/img/background_min.png b/client2/src/assets/img/background_min.png
diff --git a/client2/src/assets/img/install.png b/client2/src/assets/img/install.png
diff --git a/client2/src/components/Install/Install.module.pcss b/client2/src/components/Install/Install.module.pcss
diff --git a/client2/src/components/Install/Install.tsx b/client2/src/components/Install/Install.tsx
@@ -13,6 +13,7 @@ import {
 } from 'Consts/install';
 import { notifyError } from 'Common/ui';
 import InstallStore from 'Store/stores/Install';
+import theme from 'Lib/theme';
 
 import AdminInterface from './components/AdminInterface';
 import Auth from './components/Auth';
@@ -21,8 +22,6 @@ import Stepper from './components/Stepper';
 import Welcome from './components/Welcome';
 import ConfigureDevices from './components/ConfigureDevices';
 
-import s from './Install.module.pcss';
-
 const { Content } = Layout;
 
 export type FormValues = IInitialConfigurationBeta & { step: number };
@@ -85,7 +84,7 @@ const InstallForm: FC = observer(() => {
             onSubmit={onNext}
         >
             {({ values, handleSubmit, setFieldValue }) => (
-                <form noValidate className={s.content} onSubmit={handleSubmit}>
+                <form noValidate onSubmit={handleSubmit}>
                     <Stepper currentStep={values.step} />
                     {values.step === 0 && (
                         <Welcome onNext={() => setFieldValue('step', 1)}/>
@@ -110,8 +109,8 @@ const InstallForm: FC = observer(() => {
 
 const Install: FC = () => {
     return (
-        <Layout className={s.layout}>
-            <Content className={s.container}>
+        <Layout className={theme.install.layout}>
+            <Content className={theme.install.container}>
                 <InstallForm />
             </Content>
             <Icons/>

diff --git a/client2/src/components/Install/components/AdminInterface/AdminInterface.module.pcss b/client2/src/components/Install/components/AdminInterface/AdminInterface.module.pcss
diff --git a/client2/src/components/Install/components/AdminInterface/AdminInterface.tsx b/client2/src/components/Install/components/AdminInterface/AdminInterface.tsx
@@ -9,7 +9,6 @@ import { chechNetworkType, NETWORK_TYPE } from 'Helpers/installHelpers';
 import theme from 'Lib/theme';
 import Store from 'Store/installStore';
 
-import s from './AdminInterface.module.pcss';
 import { FormValues } from '../../Install';
 import StepButtons from '../StepButtons';
 
@@ -39,7 +38,7 @@ const AdminInterface: FC<AdminInterfaceProps> = observer(({
     };
 
     const getManualBlock = () => (
-        <div className={s.manualOptions}>
+        <div className={theme.install.options}>
             {addresses?.interfaces.map((a) => {
                 let name = '';
                 const type = chechNetworkType(a.name);
@@ -56,47 +55,45 @@ const AdminInterface: FC<AdminInterfaceProps> = observer(({
                 }
                 return (
                     <div key={a.name}>
-                        <div>
-                            <div className={s.name}>
-                                {name}
-                            </div>
-                            {a.ipAddresses?.map((addrIp) => (
-                                <div key={addrIp} className={s.manualOption}>
-                                    <div className={theme.typography.subtext}>
-                                        http://{addrIp}
-                                    </div>
-                                    <Switch
-                                        checked={values.web.ip.includes(addrIp)}
-                                        onChange={() => {
-                                            const temp = new Set(ip);
-                                            if (temp.has(addrIp)) {
-                                                temp.delete(addrIp);
-                                            } else {
-                                                temp.add(addrIp);
-                                            }
-                                            setFieldValue('web.ip', Array.from(temp.values()));
-                                        }}/>
-                                </div>
-                            ))}
+                        <div className={theme.install.name}>
+                            {name}
                         </div>
+                        {a.ipAddresses?.map((addrIp) => (
+                            <div key={addrIp} className={theme.install.option}>
+                                <div className={theme.install.address}>
+                                    http://{addrIp}
+                                </div>
+                                <Switch
+                                    checked={values.web.ip.includes(addrIp)}
+                                    onChange={() => {
+                                        const temp = new Set(ip);
+                                        if (temp.has(addrIp)) {
+                                            temp.delete(addrIp);
+                                        } else {
+                                            temp.add(addrIp);
+                                        }
+                                        setFieldValue('web.ip', Array.from(temp.values()));
+                                    }}/>
+                            </div>
+                        ))}
                     </div>
                 );
             })}
         </div>
     );
 
     return (
-        <div className={s.content}>
-            <div className={theme.typography.title}>
+        <>
+            <div className={theme.install.title}>
                 {intl.getMessage('install_admin_interface_title')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_block)}>
+            <div className={cn(theme.install.text, theme.install.text_block)}>
                 {intl.getMessage('install_admin_interface_title_decs')}
             </div>
-            <div className={theme.typography.subTitle}>
+            <div className={theme.install.subtitle}>
                 {intl.getMessage('install_admin_interface_where_interface')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_base)}>
+            <div className={cn(theme.install.text, theme.install.text_base)}>
                 {intl.getMessage('install_admin_interface_where_interface_desc')}
             </div>
             <Radio
@@ -116,10 +113,10 @@ const AdminInterface: FC<AdminInterfaceProps> = observer(({
                 ]}
             />
             { radioValue !== NETWORK_OPTIONS.ALL && getManualBlock()}
-            <div className={theme.typography.subTitle}>
+            <div className={theme.install.subtitle}>
                 {intl.getMessage('install_admin_interface_port')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_base)}>
+            <div className={cn(theme.install.text, theme.install.text_base)}>
                 {intl.getMessage('install_admin_interface_port_desc')}
             </div>
             <Input
@@ -138,7 +135,7 @@ const AdminInterface: FC<AdminInterfaceProps> = observer(({
                 currentStep={1}
                 values={values}
             />
-        </div>
+        </>
     );
 });
 

diff --git a/client2/src/components/Install/components/Auth/Auth.tsx b/client2/src/components/Install/components/Auth/Auth.tsx
@@ -22,11 +22,11 @@ const Auth: FC<AuthProps> = observer(({
     const { ui: { intl } } = useContext(Store);
 
     return (
-        <div>
-            <div className={theme.typography.title}>
+        <>
+            <div className={theme.install.title}>
                 {intl.getMessage('install_auth_title')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_block)}>
+            <div className={cn(theme.install.text, theme.install.text_block)}>
                 {intl.getMessage('install_auth_description')}
             </div>
             <Input
@@ -48,7 +48,7 @@ const Auth: FC<AuthProps> = observer(({
                 currentStep={2}
                 values={values}
             />
-        </div>
+        </>
     );
 });
 

diff --git a/client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.module.pcss b/client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.module.pcss
diff --git a/client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.tsx b/client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useContext } from 'react';
-import { Tabs } from 'antd';
+import { Tabs, Grid } from 'antd';
 import cn from 'classnames';
 import { FormikHelpers } from 'formik';
 
@@ -10,8 +10,8 @@ import { DEFAULT_DNS_PORT, DEFAULT_IP_ADDRESS, DEFAULT_IP_PORT } from 'Consts/in
 
 import { FormValues } from '../../Install';
 import StepButtons from '../StepButtons';
-import s from './ConfigureDevices.module.pcss';
 
+const { useBreakpoint } = Grid;
 const { TabPane } = Tabs;
 
 interface ConfigureDevicesProps {
@@ -23,10 +23,18 @@ const ConfigureDevices: FC<ConfigureDevicesProps> = ({
     values, setFieldValue,
 }) => {
     const { ui: { intl }, install: { addresses } } = useContext(Store);
+    const screens = useBreakpoint();
+    const tabsPosition = screens.md ? 'left' : 'top';
 
     const dhcp = (e: string) => (
-        // TODO: link to dhcp
-        <a href="http://" target="_blank" rel="noopener noreferrer">{e}</a>
+        <a
+            href="https://github.com/AdguardTeam/AdGuardHome/wiki/DHCP"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={theme.link.link}
+        >
+            {e}
+        </a>
     );
 
     const allIps = addresses?.interfaces.reduce<string[]>((all, data) => {
@@ -44,84 +52,100 @@ const ConfigureDevices: FC<ConfigureDevicesProps> = ({
         ? allIps : dnsIp;
 
     return (
-        <div>
-            <div className={theme.typography.title}>
+        <>
+            <div className={theme.install.title}>
                 {intl.getMessage('install_configure_title')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_block)}>
+            <div className={cn(theme.install.text, theme.install.text_block)}>
                 {intl.getMessage('install_configure_danger_notice', { danger })}
             </div>
-            <div className={theme.typography.subTitle}>
-                {intl.getMessage('install_configure_how_to_title')}
-            </div>
-            <Tabs defaultActiveKey="1" tabPosition="left" className={s.tabs}>
-                <TabPane tab="Router" key="1">
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+
+            <Tabs defaultActiveKey="1" tabPosition={tabsPosition} className={theme.install.tabs}>
+                <TabPane tab={intl.getMessage('router')} key="1">
+                    <div className={theme.install.subtitle}>
+                        {intl.getMessage('install_configure_how_to_title', { value: intl.getMessage('router') })}
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {intl.getMessage('install_configure_router', { p })}
                     </div>
                 </TabPane>
                 <TabPane tab="Windows" key="2">
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+                    <div className={theme.install.subtitle}>
+                        {intl.getMessage('install_configure_how_to_title', { value: 'Windows' })}
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {intl.getMessage('install_configure_windows', { p })}
                     </div>
                 </TabPane>
-                <TabPane tab="Macos" key="3">
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+                <TabPane tab="macOS" key="3">
+                    <div className={theme.install.subtitle}>
+                        {intl.getMessage('install_configure_how_to_title', { value: 'macOS' })}
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {intl.getMessage('install_configure_macos', { p })}
                     </div>
                 </TabPane>
                 <TabPane tab="Linux" key="4">
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+                    <div className={theme.install.subtitle}>
+                        {intl.getMessage('install_configure_how_to_title', { value: 'Linux' })}
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {/* TODO: add linux setup */}
                         {intl.getMessage('install_configure_router', { p })}
                     </div>
                 </TabPane>
                 <TabPane tab="Android" key="5">
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+                    <div className={theme.install.subtitle}>
+                        {intl.getMessage('install_configure_how_to_title', { value: 'Android' })}
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {intl.getMessage('install_configure_android', { p })}
                     </div>
                 </TabPane>
-                <TabPane tab="iOs" key="6">
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+                <TabPane tab="iOS" key="6">
+                    <div className={theme.install.subtitle}>
+                        {intl.getMessage('install_configure_how_to_title', { value: 'iOS' })}
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {intl.getMessage('install_configure_ios', { p })}
                     </div>
                 </TabPane>
             </Tabs>
 
-            <div className={theme.typography.subTitle}>
+            <div className={theme.install.subtitle}>
                 {intl.getMessage('install_configure_adresses')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_base)}>
-                <p>
+            <div className={cn(theme.install.text, theme.install.text_block)}>
+                <div className={cn(theme.install.text, theme.install.text_base)}>
                     {intl.getMessage('install_admin_interface_title')}
-                </p>
-                <p>
+                </div>
+                <div className={cn(theme.install.text, theme.install.text_base)}>
                     {selectedWebIps?.map((ip) => (
-                        <div key={ip}>
+                        <div key={ip} className={theme.install.ip}>
                             {ip}{values.web.port !== DEFAULT_IP_PORT && `:${values.web.port}`}
                         </div>
                     ))}
-                </p>
-                <p>
+                </div>
+                <div className={cn(theme.install.text, theme.install.text_base)}>
                     {intl.getMessage('install_dns_server_title')}
-                </p>
-                <div>
+                </div>
+                <div className={cn(theme.install.text, theme.install.text_base)}>
                     {selectedDnsIps?.map((ip) => (
-                        <div key={ip}>
+                        <div key={ip} className={theme.install.ip}>
                             {ip}{values.dns.port !== DEFAULT_DNS_PORT && `:${values.dns.port}`}
                         </div>
                     ))}
                 </div>
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_base)}>
+            <div className={cn(theme.install.text, theme.install.text_base)}>
                 {intl.getMessage('install_configure_dhcp', { dhcp })}
             </div>
             <StepButtons
                 setFieldValue={setFieldValue}
                 currentStep={4}
                 values={values}
             />
-        </div>
+        </>
     );
 };