Skip to content

Commit

Permalink
Merge: client: fix mobile layout for install page
Browse files Browse the repository at this point in the history 
Squashed commit of the following:

commit 5e620f2
Merge: d82d5a9 679bbcd
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Jan 18 14:57:00 2021 +0300

    Merge branch 'master' into 2554-mobile-install

commit d82d5a9
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Jan 18 14:09:25 2021 +0300

    client: fix mobile layout for install page
  • Loading branch information
@IldarKamalov
IldarKamalov committed Jan 18, 2021
1 parent 679bbcd commit 9f75725
Show file tree
Hide file tree
Showing 31 changed files with 462 additions and 375 deletions.
Binary file removed client2/src/assets/img/background_min.png
View file
Binary file not shown.
Binary file added client2/src/assets/img/install.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 0 additions & 14 deletions client2/src/components/Install/Install.module.pcss
View file

This file was deleted.

9 changes: 4 additions & 5 deletions client2/src/components/Install/Install.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 };
Expand Down Expand Up @@ -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)}/>
Expand All @@ -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/>
Expand Down
17 changes: 0 additions & 17 deletions client2/src/components/Install/components/AdminInterface/AdminInterface.module.pcss
View file

This file was deleted.

61 changes: 29 additions & 32 deletions client2/src/components/Install/components/AdminInterface/AdminInterface.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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);
Expand All @@ -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
Expand All @@ -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
Expand All @@ -138,7 +135,7 @@ const AdminInterface: FC<AdminInterfaceProps> = observer(({
currentStep={1}
values={values}
/>
</div>
</>
);
});

Expand Down
8 changes: 4 additions & 4 deletions client2/src/components/Install/components/Auth/Auth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -48,7 +48,7 @@ const Auth: FC<AuthProps> = observer(({
currentStep={2}
values={values}
/>
</div>
</>
);
});

Expand Down
4 changes: 0 additions & 4 deletions client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.module.pcss
View file

This file was deleted.

90 changes: 57 additions & 33 deletions client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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 {
Expand All @@ -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) => {
Expand All @@ -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>
</>
);
};

Expand Down
12 changes: 0 additions & 12 deletions client2/src/components/Install/components/DnsServer/DnsServer.module.pcss
View file

This file was deleted.

Loading

0 comments on commit 9f75725

Please sign in to comment.