From 5349ec76fd21dff3b25201f17311875744b4f21b Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Fri, 18 Jan 2019 20:17:48 +0300 Subject: [PATCH] Added components for web setup --- client/src/__locales/en.json | 32 +++- client/src/actions/install.js | 54 ++++++ client/src/api/Api.js | 18 ++ client/src/components/App/index.css | 6 +- client/src/components/Filters/UserRules.js | 2 +- client/src/components/Filters/index.js | 4 +- client/src/components/Header/index.js | 2 +- client/src/components/Settings/Dhcp/Form.js | 2 +- client/src/components/Settings/Dhcp/index.js | 8 +- client/src/components/Settings/Settings.css | 2 +- client/src/components/Settings/Upstream.js | 6 +- client/src/components/ui/Icons.js | 27 +++ client/src/components/ui/Tab.js | 41 +++++ client/src/components/ui/Tabs.css | 42 +++++ client/src/components/ui/Tabs.js | 59 +++++++ client/src/components/ui/svg/icons.svg | 21 +++ .../components/{Header => ui/svg}/logo.svg | 0 client/src/helpers/constants.js | 3 + client/src/install/Setup/Auth.js | 98 +++++++++++ client/src/install/Setup/Controls.js | 115 +++++++++++++ client/src/install/Setup/Devices.js | 68 ++++++++ client/src/install/Setup/Greeting.js | 23 +++ client/src/install/Setup/Progress.js | 25 +++ client/src/install/Setup/Settings.js | 160 ++++++++++++++++++ client/src/install/Setup/Setup.css | 105 ++++++++++++ client/src/install/Setup/Submit.js | 44 +++++ client/src/install/Setup/index.js | 115 +++++++++++++ client/src/install/Setup/renderField.js | 19 +++ client/src/install/Setup/validate.js | 11 ++ client/src/install/index.js | 18 ++ client/src/reducers/install.js | 29 ++++ 31 files changed, 1144 insertions(+), 15 deletions(-) create mode 100644 client/src/actions/install.js create mode 100644 client/src/components/ui/Icons.js create mode 100644 client/src/components/ui/Tab.js create mode 100644 client/src/components/ui/Tabs.css create mode 100644 client/src/components/ui/Tabs.js create mode 100644 client/src/components/ui/svg/icons.svg rename client/src/components/{Header => ui/svg}/logo.svg (100%) create mode 100644 client/src/install/Setup/Auth.js create mode 100644 client/src/install/Setup/Controls.js create mode 100644 client/src/install/Setup/Devices.js create mode 100644 client/src/install/Setup/Greeting.js create mode 100644 client/src/install/Setup/Progress.js create mode 100644 client/src/install/Setup/Settings.js create mode 100644 client/src/install/Setup/Setup.css create mode 100644 client/src/install/Setup/Submit.js create mode 100644 client/src/install/Setup/index.js create mode 100644 client/src/install/Setup/renderField.js create mode 100644 client/src/install/Setup/validate.js create mode 100644 client/src/install/index.js create mode 100644 client/src/reducers/install.js diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index 10471501..2a9d73eb 100644 --- a/client/src/__locales/en.json +++ b/client/src/__locales/en.json @@ -157,5 +157,35 @@ "category_label": "Category", "rule_label": "Rule", "filter_label": "Filter", - "unknown_filter": "Unknown filter {{filterId}}" + "unknown_filter": "Unknown filter {{filterId}}", + "install_welcome_title": "Welcome to AdGuard Home!", + "install_welcome_desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit.", + "install_settings_title": "Admin Web Interface", + "install_settings_listen": "Listen interface", + "install_settings_port": "Port", + "install_settings_interface_link": "Your AdGuard Home admin web interface is available on {{link}}", + "form_error_port": "Enter valid port value", + "install_settings_dns": "DNS server", + "install_settings_dns_desc": "You will need to configure your devices or router to use the DNS server at {{ip}}", + "install_auth_title": "Authentication", + "install_auth_desc": "It is highly recommended to configure password authentication to your AdGuard Home admin web interface. Even if it is accessible only in your local network, it is still important to have it protected from unrestricted access.", + "install_auth_username": "Username", + "install_auth_password": "Password", + "install_auth_confirm": "Confirm password", + "install_auth_username_enter": "Enter username", + "install_auth_password_enter": "Enter password", + "install_step": "Step", + "install_devices_title": "Configure your devices", + "install_devices_desc": "In order for AdGuard Home to start working, you need to configure your devices to use it.", + "install_submit_title": "Congratulations!", + "install_submit_desc": "The setup procedure is finished and you are ready to start using AdGuard Home.", + "install_decices_router": "Router", + "install_decices_router_desc": "This setup will automatically cover all the devices connected to your home routerm and you will not need to configure each of them manually.", + "install_decices_router_list_1": "Open the preferences for your router. Usually, you can access it from your browser via a URL (like http://192.168.0.1/ or http://192.168.1.1/). You may be asked to enter the password. If you don t remember it, you can ofter reset the password by pressing a button on the router itself. Some routers require a specific application, which in that case should be already installed on your computer/phone.", + "install_decices_router_list_2": " Find the DHCP/DNS settings. Look for the DNS letters next to a field which allows two or three sets of numbers, each broken into four groups of one to three digits.", + "install_decices_router_list_3": "Enter your AdGuard Home server addresses there.", + "get_started": "Get Started", + "next": "Next", + "open_dashboard": "Open Dashboard", + "install_saved": "All settings saved" } \ No newline at end of file diff --git a/client/src/actions/install.js b/client/src/actions/install.js new file mode 100644 index 00000000..508aa8da --- /dev/null +++ b/client/src/actions/install.js @@ -0,0 +1,54 @@ +import { createAction } from 'redux-actions'; +import Api from '../api/Api'; + +const apiClient = new Api(); + +export const addErrorToast = createAction('ADD_ERROR_TOAST'); +export const addSuccessToast = createAction('ADD_SUCCESS_TOAST'); +export const nextStep = createAction('NEXT_STEP'); +export const prevStep = createAction('PREV_STEP'); + +export const getDefaultAddressesRequest = createAction('GET_DEFAULT_ADDRESSES_REQUEST'); +export const getDefaultAddressesFailure = createAction('GET_DEFAULT_ADDRESSES_FAILURE'); +export const getDefaultAddressesSuccess = createAction('GET_DEFAULT_ADDRESSES_SUCCESS'); + +export const getDefaultAddresses = () => async (dispatch) => { + dispatch(getDefaultAddressesRequest()); + try { + const addresses = await apiClient.getDefaultAddresses(); + dispatch(getDefaultAddressesSuccess(addresses)); + } catch (error) { + dispatch(addErrorToast({ error })); + dispatch(getDefaultAddressesFailure()); + } +}; + +export const setAllSettingsRequest = createAction('SET_ALL_SETTINGS_REQUEST'); +export const setAllSettingsFailure = createAction('SET_ALL_SETTINGS_FAILURE'); +export const setAllSettingsSuccess = createAction('SET_ALL_SETTINGS_SUCCESS'); + +export const setAllSettings = values => async (dispatch) => { + dispatch(setAllSettingsRequest()); + try { + const { + web, + dns, + username, + password, + } = values; + + const config = { + web, + dns, + username, + password, + }; + + await apiClient.setAllSettings(config); + dispatch(setAllSettingsSuccess()); + dispatch(addSuccessToast('install_saved')); + } catch (error) { + dispatch(addErrorToast({ error })); + dispatch(setAllSettingsFailure()); + } +}; diff --git a/client/src/api/Api.js b/client/src/api/Api.js index 4592fae7..7f1da9c5 100644 --- a/client/src/api/Api.js +++ b/client/src/api/Api.js @@ -336,4 +336,22 @@ export default class Api { }; return this.makeRequest(path, method, parameters); } + + // Installation + GET_DEFAULT_ADDRESSES = { path: 'install/get_default_addresses', method: 'GET' }; + SET_ALL_SETTINGS = { path: 'install/set_all_settings', method: 'POST' }; + + getDefaultAddresses() { + const { path, method } = this.GET_DEFAULT_ADDRESSES; + return this.makeRequest(path, method); + } + + setAllSettings(config) { + const { path, method } = this.SET_ALL_SETTINGS; + const parameters = { + data: config, + headers: { 'Content-Type': 'application/json' }, + }; + return this.makeRequest(path, method, parameters); + } } diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css index 61ee53a4..391ddabd 100644 --- a/client/src/components/App/index.css +++ b/client/src/components/App/index.css @@ -1,7 +1,7 @@ body { margin: 0; padding: 0; - font-family: sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } .status { @@ -26,3 +26,7 @@ body { height: 3px; background: linear-gradient(45deg, rgba(99, 125, 120, 1) 0%, rgba(88, 177, 101, 1) 100%); } + +.hidden { + display: none; +} diff --git a/client/src/components/Filters/UserRules.js b/client/src/components/Filters/UserRules.js index 9aae0281..7a251f3a 100644 --- a/client/src/components/Filters/UserRules.js +++ b/client/src/components/Filters/UserRules.js @@ -25,7 +25,7 @@ class UserRules extends Component {