diff --git a/i18n/en.pot b/i18n/en.pot
index cb5e92d..46f0f6b 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-03-26T21:27:59.631Z\n"
-"PO-Revision-Date: 2023-03-26T21:27:59.631Z\n"
+"POT-Creation-Date: 2023-06-12T19:57:22.426Z\n"
+"PO-Revision-Date: 2023-06-12T19:57:22.426Z\n"
msgid "Enable users"
msgstr ""
@@ -317,6 +317,45 @@ msgstr ""
msgid "And {{overflow}} more..."
msgstr ""
+msgid "Distributed under GNU GLPv3"
+msgstr ""
+
+msgid ""
+"User-Extended App is a DHIS2 Web Application that provides an easy and "
+"integrated way to perform common operations to DHIS2 users which would be "
+"burdensome to perform using the in-built DHIS2 User management application."
+msgstr ""
+
+msgid ""
+"This application has been funded by the the Norwegian Refugee Council "
+"(NRC), the WHO Global Malaria Programme and Samaritan’s Purse to support "
+"countries in strengthening the collection and use of health data by using "
+"DHIS2. The application has been developed by [EyeSeeTea "
+"SL](http://eyeseetea.com). Source code, documentation and release notes can "
+"be found at the [EyeSeetea GitHub Project "
+"Page](https://eyeseetea.github.io/user-extended-app-blessed/)"
+msgstr ""
+
+msgid ""
+"If you wish to contribute to the development of User Extended App with new "
+"features, please contact [EyeSeeTea](mailto:hello@eyeseetea.com)."
+msgstr ""
+
+msgid "About User Extended App"
+msgstr ""
+
+msgid "Samaritan's Purse"
+msgstr ""
+
+msgid "World Health Organization"
+msgstr ""
+
+msgid "EyeSeeTea"
+msgstr ""
+
+msgid "Norwegian Refugee Council"
+msgstr ""
+
msgid "Edit users"
msgstr ""
diff --git a/i18n/es.po b/i18n/es.po
index fcc908b..dc5b79c 100644
--- a/i18n/es.po
+++ b/i18n/es.po
@@ -1,7 +1,7 @@
msgid ""
msgstr ""
"Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2023-03-26T21:27:59.631Z\n"
+"POT-Creation-Date: 2023-06-12T19:57:22.426Z\n"
"PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
@@ -317,6 +317,44 @@ msgstr ""
msgid "And {{overflow}} more..."
msgstr ""
+msgid "Distributed under GNU GLPv3"
+msgstr ""
+
+msgid ""
+"User-Extended App is a DHIS2 Web Application that provides an easy and "
+"integrated way to perform common operations to DHIS2 users which would be "
+"burdensome to perform using the in-built DHIS2 User management application."
+msgstr ""
+
+msgid ""
+"This application has been funded by the the Norwegian Refugee Council (NRC), "
+"the WHO Global Malaria Programme and Samaritan’s Purse to support countries "
+"in strengthening the collection and use of health data by using DHIS2. The "
+"application has been developed by [EyeSeeTea SL](http://eyeseetea.com). "
+"Source code, documentation and release notes can be found at the [EyeSeetea "
+"GitHub Project Page](https://eyeseetea.github.io/user-extended-app-blessed/)"
+msgstr ""
+
+msgid ""
+"If you wish to contribute to the development of User Extended App with new "
+"features, please contact [EyeSeeTea](mailto:hello@eyeseetea.com)."
+msgstr ""
+
+msgid "About User Extended App"
+msgstr ""
+
+msgid "Samaritan's Purse"
+msgstr ""
+
+msgid "World Health Organization"
+msgstr ""
+
+msgid "EyeSeeTea"
+msgstr ""
+
+msgid "Norwegian Refugee Council"
+msgstr ""
+
msgid "Edit users"
msgstr ""
diff --git a/package.json b/package.json
index fb9a1e0..54119d9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "user-extended-app",
"description": "DHIS2 Extended User app",
- "version": "1.2.2",
+ "version": "1.3.0",
"license": "GPL-3.0",
"author": "EyeSeeTea team",
"homepage": ".",
@@ -45,11 +45,14 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-json-view": "1.21.3",
+ "react-markdown": "^8.0.7",
"react-moment": "1.1.1",
"react-router-dom": "6.0.2",
"react-scripts": "4.0.3",
"react-virtualized-auto-sizer": "1.0.6",
"react-window": "1.8.6",
+ "rehype-raw": "^6.1.1",
+ "rehype-sanitize": "^5.0.1",
"rx": "4.1.0",
"rxjs": "6.6.7",
"styled-components": "5.3.3",
diff --git a/public/img/logo-eyeseetea.png b/public/img/logo-eyeseetea.png
new file mode 100644
index 0000000..a92568f
Binary files /dev/null and b/public/img/logo-eyeseetea.png differ
diff --git a/public/img/logo-nrc.svg b/public/img/logo-nrc.svg
new file mode 100644
index 0000000..b33a43d
--- /dev/null
+++ b/public/img/logo-nrc.svg
@@ -0,0 +1,61 @@
+
+
+
diff --git a/public/img/logo-samaritans.svg b/public/img/logo-samaritans.svg
new file mode 100644
index 0000000..53a7225
--- /dev/null
+++ b/public/img/logo-samaritans.svg
@@ -0,0 +1,15 @@
+
diff --git a/public/img/logo-who.svg b/public/img/logo-who.svg
new file mode 100644
index 0000000..dd10d62
--- /dev/null
+++ b/public/img/logo-who.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/webapp/components/about/About.tsx b/src/webapp/components/about/About.tsx
new file mode 100644
index 0000000..2383209
--- /dev/null
+++ b/src/webapp/components/about/About.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import styled from "styled-components";
+import { Info as InfoIcon } from "@material-ui/icons";
+import { Link } from "react-router-dom";
+
+interface AboutProps {
+ visible: boolean;
+}
+
+export const About: React.FC = React.memo(({ visible }) => {
+ return (
+ <>
+ {visible && (
+
+
+
+ )}
+
+ );
+});
+
+const AboutButton = styled(Link)`
+ position: fixed;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ bottom: -3px;
+ right: 140px;
+ z-index: 10002;
+ background-color: #ff9800;
+ color: white;
+ width: 40px;
+ height: 40px;
+ cursor: pointer;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-radius: 2px;
+ background-clip: padding-box;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+ box-sizing: border-box;
+
+ &:hover {
+ border: 2px solid #ff9800;
+ }
+`;
diff --git a/src/webapp/components/markdown-viewer/MarkdownViewer.tsx b/src/webapp/components/markdown-viewer/MarkdownViewer.tsx
new file mode 100644
index 0000000..95a09f6
--- /dev/null
+++ b/src/webapp/components/markdown-viewer/MarkdownViewer.tsx
@@ -0,0 +1,294 @@
+import _ from "lodash";
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import styled from "styled-components";
+
+const components = {
+ blockquote: ({ children, ...props }: any) => (
+
+ {props.title ?? "Note"}
+ {children?.length === 1 && _.isString(children[0]) ? (
+ {children[0]}
+ ) : (
+ children
+ )}
+
+ ),
+ video: (props: any) => ,
+ "video-gif": (props: any) => ,
+ pdf: (props: any) => ,
+ //eslint-disable-next-line jsx-a11y/anchor-has-content
+ a: (props: any) => ,
+};
+
+export const SimpleMarkdownViewer: React.FC<{ className?: string; source: string; center?: boolean }> = ({
+ className,
+ source,
+}) => (
+
+ {source}
+
+);
+
+export const MarkdownViewer = styled(SimpleMarkdownViewer)`
+ color: white;
+ padding: 5px 20px 0 20px;
+ text-align-last: ${props => (props.center ? "center" : "unset")};
+
+ h1 {
+ font-size: 32px;
+ line-height: 47px;
+ font-weight: 300;
+ margin: 0px 0px 30px 0px;
+ }
+
+ p {
+ font-size: 17px;
+ font-weight: 300;
+ line-height: 28px;
+ text-align: justify;
+ }
+
+ img {
+ max-width: 100%;
+ border-radius: 1em;
+ user-drag: none;
+ }
+
+ video {
+ max-width: 100%;
+ user-drag: none;
+ }
+
+ a {
+ color: white;
+ }
+
+ details > summary {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ outline: none;
+ list-style: none;
+ list-style-type: none;
+ font-size: 33px;
+ font-weight: 100;
+ text-align: left;
+ user-select: none;
+ }
+
+ details > summary::-webkit-details-marker {
+ display: none;
+ }
+
+ details > summary::before {
+ content: url(./img/note.svg);
+ margin-right: 20px;
+ top: 3px;
+ position: relative;
+ }
+
+ details > summary::after {
+ content: "keyboard_arrow_down";
+ font-size: 35px;
+ margin-left: 10px;
+ font-family: "Material Icons";
+ }
+
+ details[open] > summary::after {
+ transform: rotate(180deg);
+ }
+`;
+
+export const validHtml = {
+ strip: ["script"],
+ clobberPrefix: "user-content-",
+ clobber: ["name", "id"],
+ ancestors: {
+ tbody: ["table"],
+ tfoot: ["table"],
+ thead: ["table"],
+ td: ["table"],
+ th: ["table"],
+ tr: ["table"],
+ },
+ protocols: {
+ href: ["http", "https", "mailto"],
+ cite: ["http", "https"],
+ src: ["http", "https"],
+ longDesc: ["http", "https"],
+ },
+ tagNames: [
+ "embed",
+ "iframe",
+ "h1",
+ "h2",
+ "h3",
+ "h4",
+ "h5",
+ "h6",
+ "br",
+ "b",
+ "i",
+ "strong",
+ "em",
+ "a",
+ "pre",
+ "code",
+ "img",
+ "tt",
+ "div",
+ "ins",
+ "del",
+ "sup",
+ "sub",
+ "p",
+ "ol",
+ "ul",
+ "table",
+ "thead",
+ "tbody",
+ "tfoot",
+ "blockquote",
+ "dl",
+ "dt",
+ "dd",
+ "kbd",
+ "q",
+ "samp",
+ "var",
+ "hr",
+ "ruby",
+ "rt",
+ "rp",
+ "li",
+ "tr",
+ "td",
+ "th",
+ "s",
+ "strike",
+ "summary",
+ "details",
+ "caption",
+ "figure",
+ "figcaption",
+ "abbr",
+ "bdo",
+ "cite",
+ "dfn",
+ "mark",
+ "small",
+ "span",
+ "time",
+ "wbr",
+ "input",
+ "video",
+ "video-gif",
+ "pdf",
+ ],
+ attributes: {
+ embed: ["src"],
+ iframe: ["src"],
+ a: ["href"],
+ img: ["src", "longDesc"],
+ input: [
+ ["type", "checkbox"],
+ ["disabled", true],
+ ],
+ li: [["className", "task-list-item"]],
+ div: ["itemScope", "itemType"],
+ blockquote: ["cite"],
+ del: ["cite"],
+ ins: ["cite"],
+ q: ["cite"],
+ video: ["src", "playsinline", "controls", "autoplay", "loop", "mute"],
+ "video-gif": ["src"],
+ pdf: ["src"],
+ "*": [
+ "abbr",
+ "accept",
+ "acceptCharset",
+ "accessKey",
+ "action",
+ "align",
+ "alt",
+ "ariaDescribedBy",
+ "ariaHidden",
+ "ariaLabel",
+ "ariaLabelledBy",
+ "axis",
+ "border",
+ "cellPadding",
+ "cellSpacing",
+ "char",
+ "charOff",
+ "charSet",
+ "checked",
+ "clear",
+ "cols",
+ "colSpan",
+ "color",
+ "compact",
+ "coords",
+ "dateTime",
+ "dir",
+ "disabled",
+ "encType",
+ "htmlFor",
+ "frame",
+ "headers",
+ "height",
+ "hrefLang",
+ "hSpace",
+ "isMap",
+ "id",
+ "label",
+ "lang",
+ "maxLength",
+ "media",
+ "method",
+ "multiple",
+ "name",
+ "noHref",
+ "noShade",
+ "noWrap",
+ "open",
+ "prompt",
+ "readOnly",
+ "rel",
+ "rev",
+ "rows",
+ "rowSpan",
+ "rules",
+ "scope",
+ "selected",
+ "shape",
+ "size",
+ "span",
+ "start",
+ "summary",
+ "tabIndex",
+ "target",
+ "title",
+ "type",
+ "useMap",
+ "vAlign",
+ "value",
+ "vSpace",
+ "width",
+ "itemProp",
+ ],
+ },
+ required: {
+ input: {
+ type: "checkbox",
+ disabled: true,
+ },
+ },
+};
diff --git a/src/webapp/components/share/Share.tsx b/src/webapp/components/share/Share.tsx
index 0bd6959..7497af8 100644
--- a/src/webapp/components/share/Share.tsx
+++ b/src/webapp/components/share/Share.tsx
@@ -73,12 +73,12 @@ const styles = {
backgroundColor: "rgb(243,243,243)",
position: "fixed" as const,
bottom: "0px",
- right: "100px",
+ right: "80px",
borderRadius: "0px",
height: "auto",
opacity: ".85",
- paddingBottom: "30px",
- width: "65px",
+ paddingBottom: "40px",
+ width: "40px",
zIndex: 10001,
textAlign: "center" as const,
},
@@ -107,7 +107,7 @@ const styles = {
shareTab: {
bottom: "-3px",
- right: "100px",
+ right: "80px",
position: "fixed" as const,
zIndex: 10002,
},
@@ -116,8 +116,8 @@ const styles = {
textShadow: "none",
backgroundColor: "#ff9800",
color: "white",
- width: "65px",
- height: "38.5px",
+ width: "40px",
+ height: "40px",
cursor: "pointer",
border: "1px solid rgba(0, 0, 0, 0.1)",
borderRadius: "2px",
diff --git a/src/webapp/pages/Router.tsx b/src/webapp/pages/Router.tsx
index b2da2f7..d185aea 100644
--- a/src/webapp/pages/Router.tsx
+++ b/src/webapp/pages/Router.tsx
@@ -5,6 +5,8 @@ import { ListHybrid } from "../../legacy/List/List.component";
import { useAppContext } from "../contexts/app-context";
import { UserBulkEditPage } from "./user-bulk-edit/UserBulkEditPage";
import { UserEditPage } from "./user-edit/UserEditPage";
+import { About } from "../components/about/About";
+import { AboutPage } from "./about/AboutPage";
export const Router: React.FC = React.memo(() => {
const { api } = useAppContext();
@@ -15,6 +17,7 @@ export const Router: React.FC = React.memo(() => {
} />
} />
} />
+ } />
{
}
/>
+
);
});
diff --git a/src/webapp/pages/about/AboutPage.tsx b/src/webapp/pages/about/AboutPage.tsx
new file mode 100644
index 0000000..6c01c9d
--- /dev/null
+++ b/src/webapp/pages/about/AboutPage.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+import { MarkdownViewer } from "../../components/markdown-viewer/MarkdownViewer";
+import { PageHeader } from "../../components/page-header/PageHeader";
+import i18n from "../../../locales";
+
+export const AboutPage: React.FC = React.memo(() => {
+ const navigate = useNavigate();
+
+ const contents = [
+ `#### ${i18n.t("Distributed under GNU GLPv3")}`,
+ i18n.t(
+ "User-Extended App is a DHIS2 Web Application that provides an easy and integrated way to perform common operations to DHIS2 users which would be burdensome to perform using the in-built DHIS2 User management application."
+ ),
+ i18n.t(
+ "This application has been funded by the the Norwegian Refugee Council (NRC), the WHO Global Malaria Programme and Samaritan’s Purse to support countries in strengthening the collection and use of health data by using DHIS2. The application has been developed by [EyeSeeTea SL](http://eyeseetea.com). Source code, documentation and release notes can be found at the [EyeSeetea GitHub Project Page](https://eyeseetea.github.io/user-extended-app-blessed/)",
+ { nsSeparator: false }
+ ),
+ i18n.t(
+ "If you wish to contribute to the development of User Extended App with new features, please contact [EyeSeeTea](mailto:hello@eyeseetea.com).",
+ { nsSeparator: false }
+ ),
+ ].join("\n\n");
+
+ const goBack = React.useCallback(() => {
+ navigate(-1);
+ }, [navigate]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+