Port a2ba011326
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
local
parent
b68b96a0cc
commit
07df273f37
7 changed files with 154 additions and 2 deletions
@ -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 ( |
||||
<Column> |
||||
<div className='scrollable privacy-policy'> |
||||
<div className='column-title'> |
||||
<h3><FormattedMessage id='privacy_policy.title' defaultMessage='Privacy Policy' /></h3> |
||||
<p><FormattedMessage id='privacy_policy.last_updated' defaultMessage='Last updated {date}' values={{ date: isLoading ? <Skeleton width='10ch' /> : <FormattedDate value={lastUpdated} year='numeric' month='short' day='2-digit' /> }} /></p> |
||||
</div> |
||||
|
||||
<div |
||||
className='privacy-policy__body' |
||||
dangerouslySetInnerHTML={{ __html: content }} |
||||
/> |
||||
</div> |
||||
|
||||
<Helmet> |
||||
<title>{intl.formatMessage(messages.title)} - {title}</title> |
||||
</Helmet> |
||||
</Column> |
||||
); |
||||
} |
||||
|
||||
} |
@ -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; |
||||
} |
||||
} |
||||
} |
Loading…
Reference in new issue