From 07df273f3725bc673b9bc2206796908f58c2500a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 8 Oct 2022 06:01:11 +0200 Subject: [PATCH] [Glitch] Change privacy policy to be rendered in web UI, add REST API Port a2ba01132603174c43c5788a95f9ee127b684c0a to glitch-soc Signed-off-by: Claire --- .../glitch/features/privacy_policy/index.js | 60 +++++++++++++ .../features/ui/components/link_footer.js | 2 +- .../flavours/glitch/features/ui/index.js | 2 + .../features/ui/util/async-components.js | 4 + .../glitch/styles/components/columns.scss | 3 +- .../glitch/styles/components/index.scss | 1 + .../styles/components/privacy_policy.scss | 84 +++++++++++++++++++ 7 files changed, 154 insertions(+), 2 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/privacy_policy/index.js create mode 100644 app/javascript/flavours/glitch/styles/components/privacy_policy.scss diff --git a/app/javascript/flavours/glitch/features/privacy_policy/index.js b/app/javascript/flavours/glitch/features/privacy_policy/index.js new file mode 100644 index 0000000000..8160102946 --- /dev/null +++ b/app/javascript/flavours/glitch/features/privacy_policy/index.js @@ -0,0 +1,60 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { title } from 'flavours/glitch/initial_state'; +import { Helmet } from 'react-helmet'; +import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl'; +import Column from 'flavours/glitch/components/column'; +import api from 'flavours/glitch/api'; +import Skeleton from 'flavours/glitch/components/skeleton'; + +const messages = defineMessages({ + title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' }, +}); + +export default @injectIntl +class PrivacyPolicy extends React.PureComponent { + + static propTypes = { + intl: PropTypes.object, + }; + + state = { + content: null, + lastUpdated: null, + isLoading: true, + }; + + componentDidMount () { + api().get('/api/v1/instance/privacy_policy').then(({ data }) => { + this.setState({ content: data.content, lastUpdated: data.updated_at, isLoading: false }); + }).catch(() => { + this.setState({ isLoading: false }); + }); + } + + render () { + const { intl } = this.props; + const { isLoading, content, lastUpdated } = this.state; + + return ( + +
+
+

+

: }} />

+
+ +
+
+ + + {intl.formatMessage(messages.title)} - {title} + + + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.js b/app/javascript/flavours/glitch/features/ui/components/link_footer.js index cd32c8a3db..8c55a73372 100644 --- a/app/javascript/flavours/glitch/features/ui/components/link_footer.js +++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.js @@ -54,7 +54,7 @@ class LinkFooter extends React.PureComponent { items.push(); items.push(); items.push(); - items.push(); + items.push(); items.push(); if (profileDirectory) { diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 8ea7a0b028..ea99e50973 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -53,6 +53,7 @@ import { Explore, FollowRecommendations, About, + PrivacyPolicy, } from './util/async-components'; import { HotKeys } from 'react-hotkeys'; import { me, title } from 'flavours/glitch/initial_state'; @@ -186,6 +187,7 @@ class SwitchingColumnsArea extends React.PureComponent { + diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js index 7ef06ceb7d..5bf8d7fd64 100644 --- a/app/javascript/flavours/glitch/features/ui/util/async-components.js +++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js @@ -185,3 +185,7 @@ export function Explore () { export function About () { return import(/*webpackChunkName: "features/glitch/async/about" */'flavours/glitch/features/about'); } + +export function PrivacyPolicy () { + return import(/*webpackChunkName: "features/glitch/async/privacy_policy" */'flavours/glitch/features/privacy_policy'); +} diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index b63f2c86f2..1827e8c01b 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -357,7 +357,8 @@ $ui-header-height: 55px; > .scrollable { background: $ui-base-color; - border-radius: 0 0 4px 4px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 1c3540b338..a04482a794 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1778,3 +1778,4 @@ noscript { @import 'announcements'; @import 'explore'; @import 'signed_out'; +@import 'privacy_policy'; diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss new file mode 100644 index 0000000000..f69bf1a076 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss @@ -0,0 +1,84 @@ +.privacy-policy { + background: $ui-base-color; + padding: 20px; + + @media screen and (min-width: $no-gap-breakpoint) { + border-radius: 4px; + } + + &__body { + margin-top: 20px; + color: $secondary-text-color; + font-size: 15px; + line-height: 22px; + + h1, + p, + ul, + ol { + margin-bottom: 20px; + } + + ul { + list-style: disc; + } + + ol { + list-style: decimal; + } + + ul, + ol { + padding-left: 1em; + } + + li { + margin-bottom: 10px; + + &::marker { + color: $darker-text-color; + } + + &:last-child { + margin-bottom: 0; + } + } + + h1 { + color: $primary-text-color; + font-size: 19px; + line-height: 24px; + font-weight: 700; + margin-top: 30px; + + &:first-child { + margin-top: 0; + } + } + + strong { + font-weight: 700; + color: $primary-text-color; + } + + em { + font-style: italic; + } + + a { + color: $highlight-text-color; + text-decoration: underline; + + &:focus, + &:hover, + &:active { + text-decoration: none; + } + } + + hr { + border: 1px solid lighten($ui-base-color, 4%); + margin: 30px 0; + } + } +}