Commit 238d7bac authored by Maciej Lenartowicz's avatar Maciej Lenartowicz

Merge branch 'foris-js-3.0.0' into 'master'

Updated Foris JS to 3.1.1.

See merge request !38
parents 81730b6a eaa0ab6f
Pipeline #59371 passed with stage
in 4 minutes and 29 seconds
......@@ -18,6 +18,7 @@ module.exports = {
collectCoverageFrom: ["src/**/*.{js,jsx}"],
coverageDirectory: "coverage",
testPathIgnorePatterns: ["/node_modules/", "/__fixtures__/"],
transformIgnorePatterns: ["node_modules/(?!(foris)/)"],
verbose: false,
setupFilesAfterEnv: [
"@testing-library/react/cleanup-after-each",
......
This diff is collapsed.
......@@ -2,11 +2,11 @@
"name": "reforis_openvpn",
"author": "CZ.NIC, z.s.p.o.",
"license": "GPL-3.0",
"version": "1.1.2",
"version": "1.1.3",
"description": "",
"main": "./src/app.js",
"dependencies": {
"foris": "1.3.3-beta.d71f638b",
"foris": "3.1.1",
"react-uid": "^2.2.0"
},
"peerDependencies": {
......@@ -15,35 +15,29 @@
"react-dom": "16.9.0"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"@babel/cli": "^7.7.7",
"@babel/core": "^7.7.7",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.7.7",
"@babel/preset-react": "^7.7.4",
"@testing-library/react": "^8.0.9",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.6",
"babel-plugin-react-transform": "^3.0.0",
"babel-polyfill": "^6.26.0",
"css-loader": "^3.0.0",
"eslint": "^6.1.0",
"css-loader": "^3.4.1",
"eslint": "^6.8.0",
"eslint-config-reforis": "^1.0.0",
"immutability-helper": "3.0.1",
"jest": "^24.8.0",
"jest-mock-axios": "^3.0.0",
"moment-timezone": "^0.5.25",
"jest": "^24.9.0",
"jest-mock-axios": "^3.2.0",
"moment-timezone": "^0.5.27",
"prop-types": "15.7.2",
"react": "16.9.0",
"react-dom": "16.9.0",
"snapshot-diff": "^0.5.1",
"style-loader": "^0.23.1",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.4"
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"scripts": {
"watch": "webpack --watch --mode=development --env.lighttpd",
"build": "webpack --mode=production --env.lighttpd",
"watch": "webpack --watch --mode=development",
"build": "webpack --mode=production",
"lint": "eslint src",
"lint:fix": "eslint --fix src",
"test": "jest",
......
......@@ -9,7 +9,7 @@ import React, { useEffect } from "react";
import PropTypes from "prop-types";
import {
TextInput, Button, useAPIPost, useForm, useAlert, undefinedIfEmpty, API_STATE,
TextInput, Button, useAPIPost, useForm, useAlert, undefinedIfEmpty, API_STATE, formFieldsSize,
} from "foris";
import API_URLs from "API";
......@@ -39,7 +39,7 @@ export default function AddClientForm({ generating, setGenerating }) {
function handleSubmit(event) {
event.preventDefault();
postClients(formData);
postClients({ data: formData });
setGenerating(true);
}
......@@ -52,7 +52,7 @@ export default function AddClientForm({ generating, setGenerating }) {
return (
<>
<h3>{_("Add new client")}</h3>
<form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit} className={formFieldsSize}>
<TextInput
label={_("Client name")}
helpText={_("Shorter than 64 characters. Only alphanumeric characters, dots, dashes and underscores.")}
......@@ -60,9 +60,11 @@ export default function AddClientForm({ generating, setGenerating }) {
error={formErrors.name}
onChange={formChangeHandler((value) => ({ name: { $set: value } }))}
/>
<Button type="submit" forisFormSize disabled={addButtonDisabled}>
{_("Add")}
</Button>
<div className="text-right">
<Button type="submit" forisFormSize disabled={addButtonDisabled}>
{_("Add")}
</Button>
</div>
</form>
</>
);
......
......@@ -9,7 +9,7 @@ import React, { useEffect } from "react";
import PropTypes from "prop-types";
import {
formFieldsSize, SpinnerElement, useAlert, useAPIDelete, API_STATE, Button, withEither,
SpinnerElement, useAlert, useAPIDelete, API_STATE, Button, withEither,
} from "foris";
import API_URLs from "API";
......@@ -44,7 +44,7 @@ export default function ClientTable({ clients, address }) {
));
return (
<table className={`table table-hover ${formFieldsSize}`}>
<table className="table table-hover">
<thead>
<tr>
<th scope="col">{_("Client name")}</th>
......
......@@ -10,7 +10,7 @@ import PropTypes from "prop-types";
import {
TextInput, CheckBox, useAPIGet, useForm, useWSForisModule, validateIPv4Address,
withErrorMessage, withSpinnerOnSending, API_STATE,
withErrorMessage, withSpinnerOnSending, API_STATE, formFieldsSize,
} from "foris";
import API_URLs from "API";
......@@ -100,15 +100,17 @@ function Configurations({ clients }) {
return (
<>
<p dangerouslySetInnerHTML={{ __html: _("Be sure to check if server's IP address provided in configuration file actually matches the public IP address of your router. You can set this address manually if the autodetection fails. This change is <strong>not</strong> stored anywhere and is applicable only to the configuration being currently downloaded.") }} />
<ServerOverride
address={formData.address}
error={formErrors.address}
handleChange={formChangeHandler}
/>
<ClientTable
clients={clients}
address={formErrors.address ? undefined : formData.address}
/>
<div className={formFieldsSize}>
<ServerOverride
address={formData.address}
error={formErrors.address}
handleChange={formChangeHandler}
/>
<ClientTable
clients={clients}
address={formErrors.address ? undefined : formData.address}
/>
</div>
</>
);
}
......
......@@ -5,9 +5,11 @@ exports[`<AddClientForm /> should be rendered 1`] = `
<h3>
Add new client
</h3>
<form>
<form
class="col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3"
>
<div
class="form-group col-sm-12 offset-lg-1 col-lg-10"
class="form-group"
>
<label
for="1"
......@@ -35,15 +37,19 @@ exports[`<AddClientForm /> should be rendered 1`] = `
Shorter than 64 characters. Only alphanumeric characters, dots, dashes and underscores.
</small>
</div>
<button
class="btn btn-primary offset-lg-8 col-lg-3 col-sm-12"
disabled=""
type="submit"
<div
class="text-right"
>
Add
</button>
<button
class="btn btn-primary col-sm-12 col-lg-3"
disabled=""
type="submit"
>
Add
</button>
</div>
</form>
</div>
`;
......@@ -14,9 +14,11 @@ exports[`<ClientRegistration /> should display clients 1`] = `
<h3>
Add new client
</h3>
<form>
<form
class="col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3"
>
<div
class="form-group col-sm-12 offset-lg-1 col-lg-10"
class="form-group"
>
<label
for="1"
......@@ -44,15 +46,19 @@ exports[`<ClientRegistration /> should display clients 1`] = `
Shorter than 64 characters. Only alphanumeric characters, dots, dashes and underscores.
</small>
</div>
<button
class="btn btn-primary offset-lg-8 col-lg-3 col-sm-12"
disabled=""
type="submit"
<div
class="text-right"
>
Add
</button>
<button
class="btn btn-primary col-sm-12 col-lg-3"
disabled=""
type="submit"
>
Add
</button>
</div>
</form>
<h3>
Client configurations
......@@ -65,142 +71,143 @@ exports[`<ClientRegistration /> should display clients 1`] = `
stored anywhere and is applicable only to the configuration being currently downloaded.
</p>
<div
class="form-group col-sm-12 offset-lg-1 col-lg-10"
class="col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3"
>
<div
class="custom-control custom-checkbox "
class="form-group"
>
<input
class="custom-control-input"
id="2"
type="checkbox"
value="false"
/>
<label
class="custom-control-label"
for="2"
<div
class="custom-control custom-checkbox "
>
Override server address
</label>
</div>
</div>
<table
class="table table-hover col-sm-12 offset-lg-1 col-lg-10"
>
<thead>
<tr>
<th
scope="col"
>
Client name
</th>
<th
aria-label="Actions"
scope="col"
<input
class="custom-control-input"
id="2"
type="checkbox"
value="false"
/>
</tr>
</thead>
<tbody>
<tr>
<td
class="align-middle"
<label
class="custom-control-label"
for="2"
>
First
</td>
<td
class="text-center"
>
<div
class="btn-group"
role="group"
Override server address
</label>
</div>
</div>
<table
class="table table-hover"
>
<thead>
<tr>
<th
scope="col"
>
<a
class="btn btn-primary btn-sm"
download=""
href="/reforis/openvpn/api/clients/A1?address="
>
Download
</a>
<button
class="btn btn-danger btn-sm"
type="button"
Client name
</th>
<th
aria-label="Actions"
scope="col"
/>
</tr>
</thead>
<tbody>
<tr>
<td
class="align-middle"
>
First
</td>
<td
class="text-center"
>
<div
class="btn-group"
role="group"
>
Revoke
</button>
</div>
</td>
</tr>
<tr>
<td
class="align-middle"
>
Second
</td>
<td
class="text-center"
>
<div
class="spinner-border "
role="status"
<a
class="btn btn-primary btn-sm"
download=""
href="/reforis/openvpn/api/clients/A1?address="
>
Download
</a>
<button
class="btn btn-danger btn-sm"
type="button"
>
Revoke
</button>
</div>
</td>
</tr>
<tr>
<td
class="align-middle"
>
<span
class="sr-only"
/>
</div>
<div
class="spinner-text"
/>
</td>
</tr>
<tr>
<td
class="align-middle"
>
Third
</td>
<td
class="text-center"
>
<div
class="btn-group"
role="group"
Second
</td>
<td
class="text-center"
>
<a
class="btn btn-primary btn-sm"
download=""
href="/reforis/openvpn/api/clients/B1?address="
<div
class="spinner-border"
role="status"
>
Download
</a>
<button
class="btn btn-danger btn-sm"
type="button"
<span
class="sr-only"
/>
</div>
</td>
</tr>
<tr>
<td
class="align-middle"
>
Third
</td>
<td
class="text-center"
>
<div
class="btn-group"
role="group"
>
Revoke
</button>
</div>
</td>
</tr>
<tr>
<td
class="align-middle"
>
Last
</td>
<td
class="text-center"
>
<span>
Access revoked
</span>
</td>
</tr>
</tbody>
</table>
<a
class="btn btn-primary btn-sm"
download=""
href="/reforis/openvpn/api/clients/B1?address="
>
Download
</a>
<button
class="btn btn-danger btn-sm"
type="button"
>
Revoke
</button>
</div>
</td>
</tr>
<tr>
<td
class="align-middle"
>
Last
</td>
<td
class="text-center"
>
<span>
Access revoked
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
......@@ -213,16 +220,13 @@ exports[`<ClientRegistration /> should display spinner on loading 1`] = `
class="spinner-wrapper my-3 text-center"
>
<div
class="spinner-border "
class="spinner-border"
role="status"
>
<span
class="sr-only"
/>
</div>
<div
class="spinner-text"
/>
</div>
</div>
`;
......@@ -3,7 +3,7 @@
exports[`<ClientTable /> should display spinner on delete request 1`] = `
<div>
<table
class="table table-hover col-sm-12 offset-lg-1 col-lg-10"
class="table table-hover"
>
<thead>
<tr>
......@@ -29,16 +29,13 @@ exports[`<ClientTable /> should display spinner on delete request 1`] = `
class="text-center"
>
<div
class="spinner-border "
class="spinner-border"
role="status"
>
<span
class="sr-only"
/>
</div>
<div
class="spinner-text"
/>
</td>
</tr>
</tbody>
......@@ -59,7 +56,7 @@ exports[`<ClientTable /> should render info when there are no clients 1`] = `
exports[`<ClientTable /> should render table of clients 1`] = `
<div>
<table
class="table table-hover col-sm-12 offset-lg-1 col-lg-10"
class="table table-hover"
>
<thead>
<tr>
......@@ -116,16 +113,13 @@ exports[`<ClientTable /> should render table of clients 1`] = `
class="text-center"
>
<div
class="spinner-border "
class="spinner-border"
role="status"
>
<span
class="sr-only"
/>
</div>
<div
class="spinner-text"
/>
</td>
</tr>
<tr>
......
......@@ -8,7 +8,7 @@
import React, { useEffect } from "react";
import {
useAPIPost, Button, useAlert, FileInput, useForm, API_STATE,
useAPIPost, Button, useAlert, FileInput, useForm, API_STATE, formFieldsSize,
} from "foris";
import API_URLs from "API";
......@@ -37,7 +37,7 @@ export default function AddSettingsForm() {
event.preventDefault();
const postData = new FormData();
postData.append("settings", formData.settings);
postSettings(postData);
postSettings({ data: postData });
}
if (!formData) {
......@@ -48,7 +48,7 @@ export default function AddSettingsForm() {
<>
<h3>{_("Add settings")}</h3>
<p>{_("Please select a file with OpenVPN client settings you wish to add. New settings will be enabled after uploading. Please note that network will be restarted automatically.")}</p>
<form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit} className={formFieldsSize}>
<FileInput
label="Settings file"
files={[formData.settings]}
......@@ -56,13 +56,15 @@ export default function AddSettingsForm() {
onChange={formChangeHandler((value) => ({ settings: { $set: value } }))}
accept=".txt,.conf"
/>
<Button
type="submit"
forisFormSize
disabled={formErrors.settings || !formData.settings}
>
{_("Upload settings")}
</Button>
<div className="text-right">
<Button
type="submit"
forisFormSize
disabled={formErrors.settings || !formData.settings}
>
{_("Upload settings")}
</Button>
</div>
</form>
</>
);
......
......@@ -89,7 +89,7 @@ function ClientRow({ client }) {
className="custom-control-input"
id={uid}
defaultChecked={client.enabled}
onChange={(event) => putClient({ enabled: event.target.checked })}
onChange={(event) => putClient({ data: { enabled: event.target.checked } })}
/>
<label className="custom-control-label" htmlFor={uid}>{client.id}</label>
</div>
......
......@@ -8,9 +8,11 @@ exports[`<AddSettingsForm /> should be rendered 1`] = `
<p>
Please select a file with OpenVPN client settings you wish to add. New settings will be enabled after uploading. Please note that network will be restarted automatically.
</p>
<form>
<form
class="col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3"
>
<div
class="form-group col-sm-12 offset-lg-1 col-lg-10"
class="form-group"
>
<label
class="custom-file-label"
......@@ -30,15 +32,19 @@ exports[`<AddSettingsForm /> should be rendered 1`] = `
/>
</div>
</div>
<button
class="btn btn-primary offset-lg-8 col-lg-3 col-sm-12"
disabled=""
type="submit"
<div
class="text-right"
>
Upload settings
</button>
<button
class="btn btn-primary col-sm-12 col-lg-3"
disabled=""
type="submit"
>
Upload settings
</button>
</div>
</form>
</div>
`;
......@@ -12,16 +12,13 @@ exports[`<SettingsTable /> should display spinner 1`] = `
class="spinner-wrapper my-3 text-center"
>
<div
class="spinner-border "
class="spinner-border"
role="status"