104 |
188 |
189 | );
190 | }
191 | }
192 |
193 | export default injectStripe(CheckoutForm);
--------------------------------------------------------------------------------
/src/components/Checkout/styles.scss:
--------------------------------------------------------------------------------
1 | .card-number-input {
2 | margin-top: 15px;
3 | margin-block-end: 15px;
4 | }
--------------------------------------------------------------------------------
/src/components/DrawerMenu/styles.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | flex-grow: 1;
3 | height: 440px;
4 | z-index: 1;
5 | overflow: hidden;
6 | position: relative;
7 | display: flex;
8 | }
9 |
10 | .dark {
11 | .drawer-paper {
12 | >div {
13 | background-color: #0e1e25 !important;
14 | }
15 |
16 | .list-item {
17 | background-color: #0e1e25;
18 | color: #e3e3e3;
19 |
20 | svg {
21 | fill: #e3e3e3;
22 | }
23 | }
24 |
25 | .route-text {
26 | span {
27 | color: #e3e3e3;
28 | }
29 | }
30 | }
31 | }
32 |
33 | .light {
34 | .drawer-paper {
35 | >div {
36 | background-color: white !important;
37 | }
38 |
39 | .list-item {
40 | background-color: white;
41 | color: #0e1e25 !important;
42 |
43 | svg {
44 | fill: #0e1e25;
45 | }
46 | }
47 | .route-text {
48 | span {
49 | color: #0e1e25;
50 | }
51 | }
52 | }
53 | }
54 |
55 | .drawer-paper {
56 | position: relative;
57 | width: 240px;
58 |
59 | div+div {
60 | width: 240px !important;
61 | }
62 | .progress-container {
63 | // width: 50px!important;
64 | text-align: center;
65 | margin-top: 50px;
66 | }
67 | }
68 |
69 | .MuiListItem-root-91 {
70 | padding-top: 13px !important;
71 | padding-bottom: 13px !important;
72 | }
73 |
74 | .signout-icon {
75 | g {
76 | path {
77 | fill: #fafafa
78 | }
79 | }
80 | }
81 |
82 | .list-item {
83 | padding-left: 24px !important;
84 | padding-right: 24px !important;
85 |
86 | &.active {
87 | background-color: rgba(0, 0, 0, 0.09);
88 |
89 | div {
90 | background-color: rgba(0, 0, 0, 0);
91 | }
92 | }
93 | }
94 |
95 | .toolbar {
96 | background: #00ad9f;
97 | display: flex;
98 | align-items: center;
99 | // justify-content: center;
100 | h1 {
101 | margin: 0 auto;
102 | font-size: 1.75em;
103 | color: white;
104 | }
105 | }
--------------------------------------------------------------------------------
/src/components/File/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Typography from '@material-ui/core/Typography';
3 |
4 | import './styles.scss';
5 |
6 | import dayjs from 'dayjs';
7 |
8 | import Card from '@material-ui/core/Card';
9 | import CardHeader from '@material-ui/core/CardHeader';
10 | import CardActions from '@material-ui/core/CardActions';
11 | import IconButton from '@material-ui/core/IconButton';
12 | import EditIcon from '@material-ui/icons/Edit';
13 | import DeleteIcon from '@material-ui/icons/Delete';
14 | import Tooltip from '@material-ui/core/Tooltip';
15 | import strings from 'strings';
16 | import CardMedia from '@material-ui/core/CardMedia';
17 | import LinkIcon from '@material-ui/icons/Link';
18 | import {copy} from 'utils';
19 |
20 | class File extends React.Component {
21 |
22 | copyLink = () => copy(this.props.data.url);
23 |
24 | render() {
25 | return (
26 | {props.children}
;
134 | }
135 |
136 | function Menu(props) {
137 | return (
138 |
46 |
47 |
48 | {provided => (
49 |
74 |
75 |
76 | );
77 | }
78 | }
79 |
80 | export default Sorter;
--------------------------------------------------------------------------------
/src/components/Track/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Typography from '@material-ui/core/Typography';
3 |
4 | import './styles.scss';
5 |
6 | import dayjs from 'dayjs';
7 |
8 | import Card from '@material-ui/core/Card';
9 | import CardHeader from '@material-ui/core/CardHeader';
10 | import CardActions from '@material-ui/core/CardActions';
11 | import IconButton from '@material-ui/core/IconButton';
12 | import EditIcon from '@material-ui/icons/Edit';
13 | import DeleteIcon from '@material-ui/icons/Delete';
14 | import Tooltip from '@material-ui/core/Tooltip';
15 | import strings from 'strings';
16 | import CardMedia from '@material-ui/core/CardMedia';
17 |
18 | import PlayArrow from '@material-ui/icons/PlayArrow';
19 |
20 | class Track extends React.Component {
21 | render() {
22 | console.log(this.props.data.image);
23 | return (
24 |
50 | {this.props.items.map((item, i) => (
51 |
52 | {provided => (
53 |
69 | )
70 | )}
71 |
72 | )}
73 |
58 |
59 | this.props.onDefaultSet(item)}
62 | onDelete={() => this.props.onDelete(item)}
63 | onEdit={() => this.props.onEdit(item)}
64 | data={item}
65 | />
66 |
67 | )}
68 |
131 |
134 |
135 | this.setState({name: e.target.value})}
141 | margin="normal"
142 | fullWidth
143 | />
144 |
145 |
146 |
158 |
159 | {this.state.descriptions.map((desc, i) => (
160 |
161 | this.handleChangeDescription(e, i)}
168 | margin="dense"
169 | fullWidth
170 | InputProps={{
171 | endAdornment: (
172 |
173 | {this.state.descriptions.length > 1 && this.handleDescriptionRemove(i)}
175 | >
176 | }
177 |
178 | )
179 | }}
180 | />
181 |
182 | ))}
183 | {this.state.error &&
184 | {this.state.errorMsg}
185 | }
186 |
187 |
188 |
189 | }
190 |
191 | );
192 | }
193 | }
194 |
195 | export default withRouter(withSnackbar(About));
--------------------------------------------------------------------------------
/src/pages/dashboard/About/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-about {
2 | textarea {
3 | overflow: hidden;
4 | }
5 | .title-div {
6 | display: flex;
7 | margin-bottom: 15px;
8 | h2 {
9 | display: inline-block!important;
10 | margin-right: 15px;
11 | }
12 | }
13 |
14 | .description-input {
15 | margin-bottom: 25px;
16 | }
17 |
18 | .save-button {
19 | margin-bottom: 25px;
20 | }
21 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/Access/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-access {
2 | .new-collab-button {
3 | margin-top: 15px;
4 | }
5 |
6 | .collab-list {
7 | margin-top: 15px;
8 | }
9 |
10 | .docs-btn {
11 | margin-top: 10px;
12 | }
13 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/Album/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-album {
2 | .tracks-container {
3 | display: flex;
4 | flex-direction: column;
5 | flex-wrap: wrap;
6 | margin-left: -12px
7 | }
8 | }
9 |
10 | .edit-track-dialog {
11 | img {
12 | max-width: 50%;
13 | }
14 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/Albums/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Fab from '@material-ui/core/Fab';
4 | import AddIcon from '@material-ui/icons/Add';
5 |
6 |
7 | import Button from '@material-ui/core/Button';
8 | import TextField from '@material-ui/core/TextField';
9 | import Dialog from '@material-ui/core/Dialog';
10 | import DialogActions from '@material-ui/core/DialogActions';
11 | import DialogContent from '@material-ui/core/DialogContent';
12 | import DialogContentText from '@material-ui/core/DialogContentText';
13 | import DialogTitle from '@material-ui/core/DialogTitle';
14 |
15 | import {withRouter} from 'react-router';
16 |
17 | import client from 'services/client';
18 |
19 | import strings from 'strings';
20 |
21 | import Album from '../../../components/Album';
22 |
23 | import './styles.scss';
24 | import CircularProgress from '@material-ui/core/CircularProgress';
25 | import {sortByIndex} from 'utils';
26 | import FileSelector from 'components/FileSelector';
27 | import InputAdornment from '@material-ui/core/InputAdornment';
28 | import StorageIcon from '@material-ui/icons/Storage';
29 | import IconButton from '@material-ui/core/IconButton';
30 | import Sorter from 'components/Sorter';
31 |
32 | class Albums extends React.Component {
33 |
34 | constructor(props) {
35 | super(props);
36 | this.state = {
37 | albums: [],
38 | fetched: false,
39 | createAlbum: false,
40 |
41 | title: "",
42 | cover: "",
43 | fileSelector: false,
44 |
45 | confirmDelete: false
46 | }
47 | }
48 |
49 | fetchAlbums = () => {
50 | this.setState({fetched: false});
51 | client.get('/albums/' + this.props.match.params.name).then(response => {
52 | const albums = response.data.payload || [];
53 | sortByIndex(albums);
54 | this.setState({albums, fetched: true});
55 | console.log(albums);
56 | }).catch(err => {
57 | if(err) throw err;
58 | });
59 | }
60 |
61 | componentDidMount() {
62 | this.fetchAlbums();
63 | }
64 |
65 | handleClose = () => this.setState({
66 | createAlbum: false
67 | });
68 |
69 | openCreateDialog = () => this.setState({
70 | createAlbum: true
71 | });
72 |
73 |
74 | onDragEnd = albums => {
75 | this.setState({albums});
76 | client.put('/albums/' + this.props.match.params.name + '/indexes', albums).then(response => {
77 | console.log(response.data);
78 | }).catch(err => {
79 | if(err) throw err;
80 | });
81 |
82 | }
83 |
84 | createAlbum = e => {
85 | e.preventDefault();
86 | client.post('/albums/' + this.props.match.params.name, {
87 | title: this.state.title,
88 | cover: this.state.cover,
89 | }).then(response => {
90 | console.log(response.data);
91 | this.fetchAlbums();
92 | this.handleClose();
93 | }).catch(err => {
94 | if(err) throw err;
95 | });
96 | }
97 |
98 | onImageSelected = file => {
99 | this.setState({cover: file.url});
100 | this.closeFileSelector();
101 | }
102 |
103 | closeFileSelector = () => this.setState({
104 | fileSelector: false
105 | });
106 |
107 | openFileSelector = () => this.setState({
108 | fileSelector: true
109 | });
110 |
111 | closeDelete = () => this.setState({
112 | confirmDelete: false
113 | });
114 |
115 | deleteAlbum = () => {
116 | client.delete('/albums/' + this.props.match.params.name + '/' + this.state.albumToDelete.id).then(response => {
117 | console.log(response.data);
118 | this.fetchAlbums();
119 | this.closeDelete();
120 | }).catch(err => {
121 | if(err) throw err;
122 | });
123 | }
124 |
125 | editAlbum = album => {
126 | this.props.history.push('/site/' + this.props.match.params.name + '/albums/' + album.id);
127 | }
128 |
129 | render() {
130 | return (
131 | {strings.ABOUT}
132 | {!this.state.fetched &&
147 |
149 |
156 |
157 | {strings.DESCRIPTIONS}
148 |
132 |
137 |
140 | {this.state.albums.length < 1 && this.state.fetched && }
144 | this.setState({
153 | confirmDelete: true,
154 | albumToDelete: a,
155 | })}
156 | />
157 |
158 |
234 | );
235 | }
236 | }
237 |
238 | export default withRouter(Albums);
--------------------------------------------------------------------------------
/src/pages/dashboard/Albums/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-albums {
2 | .albums-container {
3 | display: flex;
4 | flex-direction: column;
5 | flex-wrap: wrap;
6 | margin-left: -12px
7 | }
8 | }
9 |
10 | .edit-album-dialog {
11 | img {
12 | max-width: 50%;
13 | }
14 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/Articles/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {withRouter} from 'react-router';
4 | import strings from 'strings';
5 |
6 | import Fab from '@material-ui/core/Fab';
7 | import AddIcon from '@material-ui/icons/Add';
8 |
9 | import ArticleBox from 'components/ArticleBox';
10 |
11 | import './styles.scss';
12 | import Button from '@material-ui/core/Button';
13 | import DialogContent from '@material-ui/core/DialogContent';
14 |
15 | import Dialog from '@material-ui/core/Dialog';
16 | import DialogTitle from '@material-ui/core/DialogTitle';
17 | import DialogContentText from '@material-ui/core/DialogContentText';
18 | import DialogActions from '@material-ui/core/DialogActions';
19 | import client from 'services/client';
20 | import CircularProgress from '@material-ui/core/CircularProgress';
21 |
22 | class Articles extends React.Component {
23 |
24 | constructor(props) {
25 | super(props);
26 | this.state = {
27 | articles: [],
28 | confirmDelete: false,
29 | articleToDelete: {},
30 | fetched: false
31 | }
32 | }
33 |
34 | fetchArticles = () => {
35 | this.setState({fetched: false});
36 | client.get('/articles/'+this.props.match.params.name).then(response => {
37 | const articles = response.data.payload || [];
38 | articles.sort(function(a,b){
39 | return new Date(b.updated_at) - new Date(a.updated_at);
40 | });
41 | console.log(articles);
42 | this.setState({articles, fetched: true});
43 | }).catch(err => {
44 | if(err) throw err;
45 | });
46 | }
47 |
48 | componentDidMount() {
49 | this.fetchArticles();
50 | }
51 |
52 | editArticle = id => {
53 | this.props.history.push('/site/' + this.props.match.params.name + '/articles/edit/' + id);
54 | }
55 |
56 | handleCreateArticle = () => {
57 | this.props.history.push('/site/' + this.props.match.params.name + '/articles/new');
58 | }
59 |
60 | closeConfirmDelete = () => this.setState({
61 | confirmDelete: false
62 | });
63 |
64 | confirmDelete = article => this.setState({
65 | confirmDelete: true,
66 | articleToDelete: article
67 | });
68 |
69 | deleteArticle = () => {
70 | client.delete('/articles/' + this.props.match.params.name + '/' + this.state.articleToDelete.id).then(response => {
71 | this.closeConfirmDelete();
72 | this.fetchArticles();
73 | }).catch(err => {
74 | if(err) throw err;
75 | });
76 | }
77 |
78 | render() {
79 | return (
80 |
133 |
135 | {!this.state.fetched && {strings.MODULE_MUSIC}
134 |
81 |
82 |
85 |
120 | )
121 | }
122 | }
123 |
124 | export default withRouter(Articles);
--------------------------------------------------------------------------------
/src/pages/dashboard/Articles/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-articles {
2 | .articles-container {
3 | display: flex;
4 | flex-direction: column;
5 | flex-wrap: wrap;
6 |
7 | padding-bottom: 25px;
8 | @media screen and (max-width: 600px) {
9 | position: relative;
10 | }
11 | }
12 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/Contact/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {withRouter} from 'react-router';
4 |
5 | import TextField from '@material-ui/core/TextField';
6 | import Grid from '@material-ui/core/Grid';
7 | import Button from '@material-ui/core/Button';
8 | import FormHelperText from '@material-ui/core/FormHelperText';
9 |
10 | import strings from 'strings';
11 |
12 | import client from 'services/client';
13 | import CircularProgress from '@material-ui/core/CircularProgress';
14 | import { withSnackbar } from 'notistack';
15 |
16 | class Contact extends React.Component {
17 |
18 | constructor(props) {
19 | super(props);
20 | this.state = {
21 | name: "",
22 | address: "",
23 | phone: "",
24 | email: "",
25 | facebook_url: "",
26 | instagram_url: "",
27 | twitter_url: "",
28 |
29 | error: false,
30 | errorField: "",
31 | errorMsg: "",
32 | fetched: false
33 | }
34 | }
35 |
36 | fetchContact = () => {
37 | client.get('/contact/' + this.props.match.params.name).then(response => {
38 | const contact = response.data.payload;
39 | this.setState({...contact, fetched: true});
40 | }).catch(err => {
41 | this.setState({fetched: true});
42 | if(err) throw err;
43 | });
44 | }
45 |
46 | componentDidMount() {
47 | this.fetchContact();
48 | }
49 |
50 | saveContact = () => {
51 | client.put('/contact/' + this.props.match.params.name, {
52 | ...this.state
53 | }).then(response => {
54 | this.setState({error: false, errorField: "", errorMsg: ""});
55 | this.props.enqueueSnackbar(strings.SAVED, {variant: "success"})
56 | }).catch(err => {
57 | this.checkError(err);
58 | if(err) throw err;
59 | });
60 | }
61 |
62 | checkError = err => {
63 | const errType = err.data.message;
64 | switch(errType) {
65 | case "name_too_long": {
66 | this.setState({
67 | errorField: "name",
68 | errorMsg: strings.NAME_TOO_LONG,
69 | error: true
70 | });
71 | break;
72 | }
73 | case "phone_too_long": {
74 | this.setState({
75 | errorField: "phone",
76 | errorMsg: strings.PHONE_TOO_LONG,
77 | error: true
78 | });
79 | break;
80 | }
81 | case "email_too_long": {
82 | this.setState({
83 | errorField: "email",
84 | errorMsg: strings.EMAIL_TOO_LONG,
85 | error: true
86 | });
87 | break;
88 | }
89 | case "address_too_long": {
90 | this.setState({
91 | errorField: "address",
92 | errorMsg: strings.ADDRESS_TOO_LONG,
93 | error: true
94 | });
95 | break;
96 | }
97 | case "facebook_url_too_long": {
98 | this.setState({
99 | errorField: "facebook",
100 | errorMsg: strings.FACEBOOK_TOO_LONG,
101 | error: true
102 | });
103 | break;
104 | }
105 | case "instagram_url_too_long": {
106 | this.setState({
107 | errorField: "instagram",
108 | errorMsg: strings.INSTAGRAM_TOO_LONG,
109 | error: true
110 | });
111 | break;
112 | }
113 | case "twitter_url_too_long": {
114 | this.setState({
115 | errorField: "twitter",
116 | errorMsg: strings.TWITTER_TOO_LONG,
117 | error: true
118 | });
119 | break;
120 | }
121 | default:
122 | break
123 | }
124 | }
125 |
126 | render() {
127 | return (
128 |
86 |
88 | {this.state.articles.length < 1 && this.state.fetched && }
92 |
93 | {!this.state.fetched && {strings.DRAWER_ARTICLES}
87 |
95 | {this.state.articles.map((article, i) => {
96 | return this.confirmDelete(article)} key={i} onOpen={() => this.editArticle(article.id)} article={article}/>;
97 | })}
98 |
99 |
100 |
119 |
129 |
132 |
133 | this.setState({name: e.target.value})}
139 | margin="normal"
140 | fullWidth
141 | />
142 |
143 |
144 | this.setState({address: e.target.value})}
151 | margin="normal"
152 | fullWidth
153 | />
154 |
155 |
156 | this.setState({phone: e.target.value})}
162 | margin="normal"
163 | fullWidth
164 | />
165 |
166 |
167 | this.setState({email: e.target.value})}
174 | margin="normal"
175 | fullWidth
176 | />
177 |
178 |
179 | this.setState({facebook_url: e.target.value})}
185 | margin="normal"
186 | fullWidth
187 | />
188 |
189 |
190 | this.setState({instagram_url: e.target.value})}
196 | margin="normal"
197 | fullWidth
198 |
199 | />
200 |
201 |
202 | this.setState({twitter_url: e.target.value})}
208 | margin="normal"
209 | fullWidth
210 | />
211 |
212 | {this.state.error &&
213 | {this.state.errorMsg}
214 | }
215 |
216 |
217 |
218 | }
219 |
220 | );
221 | }
222 | }
223 |
224 | export default withRouter(withSnackbar(Contact));
--------------------------------------------------------------------------------
/src/pages/dashboard/EditArticle/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {withRouter} from 'react-router';
4 | import TextField from '@material-ui/core/TextField';
5 | import Button from '@material-ui/core/Button';
6 | import strings from 'strings';
7 | import Grid from '@material-ui/core/Grid';
8 |
9 | import Markdown from 'react-markdown/src/react-markdown';
10 |
11 | import highlight from 'highlight.js';
12 | import DialogContent from '@material-ui/core/DialogContent';
13 |
14 | import './styles.scss';
15 | import 'highlight.js/styles/atom-one-dark.css';
16 | import Dialog from '@material-ui/core/Dialog';
17 | import DialogTitle from '@material-ui/core/DialogTitle';
18 | import DialogContentText from '@material-ui/core/DialogContentText';
19 | import DialogActions from '@material-ui/core/DialogActions';
20 | import client from 'services/client';
21 | import CircularProgress from '@material-ui/core/CircularProgress';
22 | import { withSnackbar } from 'notistack';
23 |
24 | class EditArticle extends React.Component {
25 |
26 | constructor(props) {
27 | super(props);
28 | this.state = {
29 | errorField: "",
30 | error: false,
31 | fetched: false,
32 | confirmDelete: false,
33 | // Article data
34 | title: "",
35 | content: "## My new article",
36 | // meta
37 | id: ""
38 | }
39 | }
40 |
41 | fetchArticle = () => {
42 | const id = this.props.match.params.id;
43 | this.setState({fetched: false});
44 | client.get('/articles/' + this.props.match.params.name + '/' + id).then(response => {
45 | console.log(response.data);
46 | const article = response.data.payload;
47 | this.setState({...article, fetched: true}, () => this.showColors());
48 | }).catch(err => {
49 | if(err) throw err;
50 | });
51 | }
52 |
53 | componentDidMount() {
54 | if(!this.props.new) {
55 | this.fetchArticle();
56 | }
57 | }
58 |
59 | onType = e => {
60 | this.setState({content: e.target.value});
61 | }
62 |
63 |
64 |
65 | showColors = () => {
66 | const elements = document.getElementsByTagName("code");
67 | for(let i = 0; i < elements.length; i++) {
68 | const element = elements[i];
69 | highlight.highlightBlock(element);
70 | }
71 | setTimeout(() => {
72 | this.showColors();
73 | }, 2000);
74 | }
75 |
76 | handleSave = e => {
77 | e.preventDefault();
78 | console.log("isUpdate?", !this.props.new);
79 | console.log(this.props.match.params);
80 | const article = {
81 | title: this.state.title,
82 | content: this.state.content,
83 | id: this.state.id
84 | }
85 | client.put('/articles/'+this.props.match.params.name, article).then(response => {
86 | console.log(response.data);
87 | this.props.history.push('/site/' + this.props.match.params.name + '/articles/edit/' + response.data.payload.id);
88 | this.props.enqueueSnackbar(strings.ARTICLE_SAVED, {variant: "success"})
89 | }).catch(err => {
90 | if(err) throw err;
91 | });
92 | }
93 |
94 | closeConfirmDelete = () => this.setState({
95 | confirmDelete: false
96 | });
97 |
98 | confirmDelete = () => this.setState({
99 | confirmDelete: true
100 | });
101 |
102 | deleteArticle = () => {
103 | client.delete('/articles/' + this.props.match.params.name + '/' + this.state.id).then(response => {
104 | this.closeConfirmDelete();
105 | this.props.history.push('/site/' + this.props.match.params.name + '/articles');
106 | }).catch(err => {
107 | if(err) throw err;
108 | });
109 | }
110 |
111 | render() {
112 | return (
113 | {strings.CONTACT}
130 | {!this.state.fetched &&
114 |
189 | )
190 | }
191 | }
192 |
193 | export default withRouter(withSnackbar(EditArticle));
--------------------------------------------------------------------------------
/src/pages/dashboard/EditArticle/styles.scss:
--------------------------------------------------------------------------------
1 | .markdown-preview {
2 | margin-top: 16px;
3 | border: solid 2px #00ad9f;
4 | border-radius: 4px;
5 | padding: 18.5px 14px;
6 | min-height: calc(100% - 65px);
7 | color: white;
8 | word-break: break-word;
9 |
10 | img {
11 | max-width: 100%;
12 | }
13 |
14 | h1,h2,h3,h4,h5,h6,a {
15 | color: #00ad9f!important;
16 | }
17 | a {
18 | font-weight: bold;
19 | }
20 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/EditGallery/styles.scss:
--------------------------------------------------------------------------------
1 | .edit-gallery-dialog {
2 | padding: 0;
3 | .margintop {
4 | margin-top: 15px;
5 | }
6 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/EditPhoto/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {withRouter}from 'react-router';
3 |
4 | import Button from '@material-ui/core/Button';
5 | import FormHelperText from '@material-ui/core/FormHelperText';
6 | import TextField from '@material-ui/core/TextField';
7 | import FormControl from '@material-ui/core/FormControl';
8 | import strings from 'strings';
9 |
10 | import Select from '@material-ui/core/Select';
11 | import MenuItem from '@material-ui/core/MenuItem';
12 | import client from 'services/client';
13 |
14 | import CircularProgress from '@material-ui/core/CircularProgress';
15 | import InputAdornment from '@material-ui/core/InputAdornment';
16 | import IconButton from '@material-ui/core/IconButton';
17 | import UploadIcon from '@material-ui/icons/CloudUpload';
18 | import FileUploader from 'components/FileUploader';
19 | import './styles.scss';
20 | class EditPhoto extends React.Component {
21 |
22 | constructor(props) {
23 | super(props);
24 | this.state = {
25 | photos : [],
26 | title: "",
27 | photo: "",
28 | fetched: false,
29 | loading: false,
30 | newPhotoDialog: false,
31 | confirmDelete: false,
32 | gallery_id: "none",
33 | galleries: [],
34 |
35 | importFiles: false
36 |
37 | }
38 | }
39 |
40 | componentDidMount() {
41 | this.fetchGalleries();
42 | this.fetchPhoto(this.props.match.params.id);
43 | }
44 |
45 | componentWillReceiveProps() {
46 | this.fetchGalleries();
47 | this.fetchPhoto(this.props.match.params.id);
48 | }
49 |
50 | openUploader = () => {
51 | this.setState({importFiles: true});
52 | }
53 |
54 | fetchGalleries = () => {
55 | client.get('/galleries/'+ this.props.match.params.name).then(response => {
56 | const galleries = response.data.payload || [];
57 | this.setState({
58 | galleries
59 | });
60 | }).catch(err => {
61 | if(err) throw err;
62 | });
63 | }
64 |
65 | fetchPhoto = id => {
66 | client.get('/photos/' + this.props.match.params.name + "/" + id).then(response => {
67 | const photo = response.data.payload;
68 | if(!photo.gallery_id) photo.gallery_id = "none";
69 | console.log(photo.gallery_id);
70 | this.setState({...photo, fetched: true});
71 | }).catch(err => {
72 | if(err) throw err;
73 | });
74 | }
75 |
76 | checkError = err => {
77 | const errType = err.data.message;
78 | switch(errType) {
79 | case "name_too_short": {
80 | this.setState({
81 | nameHasError: true,
82 | errorMsg: strings.NAME_TOO_SHORT,
83 | error: true
84 | });
85 | break;
86 | }
87 | case "name_too_long": {
88 | this.setState({
89 | nameHasError: true,
90 | errorMsg: strings.NAME_TOO_LONG,
91 | error: true
92 | });
93 | break;
94 | }
95 | default:
96 | break
97 | }
98 | }
99 |
100 | handleNameChange = e => this.setState({
101 | title: e.target.value
102 | });
103 |
104 | handleContentchange = e => this.setState({
105 | content: e.target.value
106 | });
107 |
108 | closeConfirmDelete = () => this.setState({
109 | confirmDelete: false
110 | });
111 |
112 | onGallerychange = e => {
113 | this.setState({gallery_id: e.target.value});
114 | }
115 |
116 | onUploadDone = () => {
117 | this.fetchPhoto(this.props.match.params.id);
118 | }
119 |
120 | save = () => {
121 | client.put('/photos/' + this.props.match.params.name + '/' + this.props.match.params.id, {
122 | title: this.state.title,
123 | content: this.state.content,
124 | url: this.state.url,
125 | gallery_id: this.state.gallery_id !== "none" ? this.state.gallery_id : null
126 | }).then(response => {
127 | console.log(response.data);
128 | }).catch(err => {
129 | if(err) throw err;
130 | })
131 | }
132 |
133 | onUploadDone = () => {
134 | this.setState({importFiles: false});
135 | this.fetchPhoto(this.props.match.params.id);
136 | }
137 |
138 | render() {
139 | return (
140 | {this.props.new ? strings.NEW_ARTICLE : strings.EDIT_ARTICLE}
115 | {!this.state.fetched && !this.props.new &&
141 |
147 |
148 |
159 |
160 | {strings.GALLERY}
161 |
171 |
172 | {
179 | this.setState({content: e.target.value})
180 | }}
181 | margin="normal"
182 | rows={10}
183 | rowsMax={100}
184 | fullWidth
185 | />
186 | {/* */}
187 | this.setState({url: e.target.value})}
191 | margin="normal"
192 | fullWidth
193 | InputProps={{
194 | endAdornment:
195 |
196 |
198 | ,
199 | }}
200 | />
201 | 
211 |
214 | {this.state.error &&
215 | {this.state.errorMsg}
216 | }
217 | }
218 |
219 | )
220 | }
221 | }
222 |
223 | export default withRouter(EditPhoto);
--------------------------------------------------------------------------------
/src/pages/dashboard/EditPhoto/styles.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/backpulse/dashboard/02ac7a964f938124c23f9bac59e750b5fa220abe/src/pages/dashboard/EditPhoto/styles.scss
--------------------------------------------------------------------------------
/src/pages/dashboard/Galleries/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Fab from '@material-ui/core/Fab';
3 | import AddIcon from '@material-ui/icons/Add';
4 | import {withRouter}from 'react-router';
5 |
6 | import Button from '@material-ui/core/Button';
7 | import FormHelperText from '@material-ui/core/FormHelperText';
8 | import TextField from '@material-ui/core/TextField';
9 | import DialogContent from '@material-ui/core/DialogContent';
10 | import FormControl from '@material-ui/core/FormControl';
11 | import strings from 'strings';
12 |
13 | import Dialog from '@material-ui/core/Dialog';
14 | import DialogTitle from '@material-ui/core/DialogTitle';
15 | import DialogContentText from '@material-ui/core/DialogContentText';
16 | import DialogActions from '@material-ui/core/DialogActions';
17 | import client from 'services/client';
18 |
19 | import CircularProgress from '@material-ui/core/CircularProgress';
20 |
21 | import GalleryBox from 'components/GalleryBox';
22 |
23 | import './styles.scss';
24 |
25 | import Sorter from '../../../components/Sorter';
26 |
27 | import {sortByIndex} from 'utils';
28 |
29 | class Galleries extends React.Component {
30 |
31 | constructor(props) {
32 | super(props);
33 | this.state = {
34 | galleries : [],
35 | fetched: false,
36 | titles: [],
37 | descriptions: [],
38 | languages: [],
39 | photos: [],
40 | editGalleryDialog: false,
41 | newGalleryDialog: false,
42 | galleryName: "",
43 | importDialog: false,
44 | confirmDelete: false,
45 | nameHasError: false,
46 | error: false,
47 | errorMsg: "",
48 | galleryToDelete: {},
49 |
50 | loading: false
51 | }
52 | }
53 |
54 | componentDidMount() {
55 | this.fetchGalleries();
56 | }
57 |
58 | componentWillReceiveProps() {
59 | this.fetchGalleries();
60 | }
61 |
62 |
63 | fetchGalleries = () => {
64 | client.get('/galleries/' + this.props.match.params.name).then(response => {
65 | const galleries = response.data.payload || [];
66 | sortByIndex(galleries);
67 | this.setState({galleries, fetched: true});
68 | }).catch(err => {
69 | if(err) throw err;
70 | });
71 | }
72 |
73 | handleCreateGallery = () => {
74 | this.setState({ galleryName: "",newGalleryDialog: true, error: false, errorMsg: "", nameHasError: false});
75 | }
76 |
77 | checkError = err => {
78 | const errType = err.data.message;
79 | switch(errType) {
80 | case "name_too_short": {
81 | this.setState({
82 | nameHasError: true,
83 | errorMsg: strings.NAME_TOO_SHORT,
84 | error: true
85 | });
86 | break;
87 | }
88 | case "name_too_long": {
89 | this.setState({
90 | nameHasError: true,
91 | errorMsg: strings.NAME_TOO_LONG,
92 | error: true
93 | });
94 | break;
95 | }
96 | default:
97 | break
98 | }
99 | }
100 |
101 | handleCloseNewGalleryDialog = () => this.setState({
102 | newGalleryDialog: false
103 | });
104 |
105 | createGallery = e => {
106 | e.preventDefault();
107 | client.post('/galleries/'+this.props.match.params.name + '/' + this.state.galleryName).then(response => {
108 | this.fetchGalleries();
109 | this.handleCloseNewGalleryDialog();
110 | }).catch(err => {
111 | this.checkError(err);
112 | if(err) throw err;
113 | })
114 | }
115 |
116 | editGallery = gallery => {
117 | this.props.history.push('/site/' + this.props.match.params.name + '/galleries/' + gallery.id);
118 | }
119 |
120 | handleNameChange = e => this.setState({
121 | galleryName: e.target.value
122 | });
123 |
124 | onDragEnd = galleries => {
125 | this.setState({galleries});
126 | client.put('/galleries/' + this.props.match.params.name + '/indexes', galleries).then(response => {
127 | console.log(response.data);
128 | }).catch(err => {
129 | if(err) throw err;
130 | });
131 | }
132 |
133 | closeConfirmDelete = () => this.setState({
134 | confirmDelete: false
135 | });
136 |
137 | confirmDelete = gallery => this.setState({
138 | confirmDelete: true,
139 | galleryToDelete: gallery
140 | });
141 |
142 | deleteGallery = () => {
143 | client.delete('/gallery/' + this.state.galleryToDelete.id).then(response => {
144 | this.closeConfirmDelete();
145 | this.fetchGalleries();
146 | }).catch(err => {
147 | if(err) throw err;
148 | });
149 | }
150 |
151 | onDefaultSet = gallery => {
152 | client.put('/galleries/' + this.props.match.params.name + '/default/' + gallery.id).then(response => {
153 | console.log(response.data);
154 | this.fetchGalleries();
155 | }).catch(err => {
156 | if(err) throw err;
157 | });
158 | }
159 |
160 | render() {
161 | return (
162 |
142 |
144 | {!this.state.fetched && {strings.PHOTO}
143 |
163 |
164 |
167 | this.editGallery(g)}
186 | onDelete={g => this.confirmDelete(g)}
187 | onDefaultSet={g => this.onDefaultSet(g)}
188 | />
189 | }
190 |
191 |
229 |
230 |
249 |
250 | )
251 | }
252 | }
253 |
254 | export default withRouter(Galleries);
--------------------------------------------------------------------------------
/src/pages/dashboard/Galleries/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-galleries {
2 | .galleries-container {
3 | display: flex;
4 | flex-direction: column;
5 | flex-wrap: wrap;
6 | margin-left: -12px;
7 | margin-top: -15px;
8 | @media screen and (max-width: 600px) {
9 | position: relative;
10 | }
11 | }
12 | }
13 |
14 |
15 |
16 | input[type="file"] {
17 | display: none;
18 | }
19 |
20 | .dialog-gallery-edit {
21 | .gallery-photos-container {
22 | margin-left: -10px;
23 | }
24 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/Modules/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './styles.scss';
4 | import strings from 'strings';
5 |
6 | import {withRouter} from 'react-router';
7 | import AddIcon from '@material-ui/icons/Add';
8 |
9 | import client from 'services/client';
10 | import List from '@material-ui/core/List';
11 | import ListItem from '@material-ui/core/ListItem';
12 | import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
13 | import ListItemText from '@material-ui/core/ListItemText';
14 | import IconButton from '@material-ui/core/IconButton';
15 | import DeleteIcon from '@material-ui/icons/Delete';
16 |
17 | import Grid from '@material-ui/core/Grid';
18 | import ExtensionIcon from '@material-ui/icons/Extension';
19 | import ListItemIcon from '@material-ui/core/ListItemIcon';
20 |
21 | import Dialog from '@material-ui/core/Dialog';
22 | import DialogContent from '@material-ui/core/DialogContent';
23 | import DialogTitle from '@material-ui/core/DialogTitle';
24 | import DialogContentText from '@material-ui/core/DialogContentText';
25 | import DialogActions from '@material-ui/core/DialogActions';
26 | import Select from '@material-ui/core/Select';
27 | import FormControl from '@material-ui/core/FormControl';
28 | import FormHelperText from '@material-ui/core/FormHelperText';
29 | import MenuItem from '@material-ui/core/MenuItem';
30 |
31 | import CircularProgress from '@material-ui/core/CircularProgress';
32 | import Button from '@material-ui/core/Button';
33 |
34 | class Modules extends React.Component {
35 |
36 | constructor(props) {
37 | super(props);
38 | this.state = {
39 | modules: [],
40 | fetched: false,
41 |
42 | open: false,
43 | confirm: false,
44 |
45 | moduleToAdd: ""
46 | }
47 |
48 | this.modules = ["projects", "galleries", "articles", "videos", "music"];
49 | }
50 |
51 | fetchModules = () => {
52 | client.get('/sites/' + this.props.match.params.name + '/modules').then(response => {
53 | const modules = response.data.payload;
54 | this.setState({modules, fetched: true});
55 | console.log(modules);
56 | }).catch(err => {
57 | if(err) throw err;
58 | });
59 | }
60 |
61 | componentDidMount() {
62 | this.fetchModules();
63 | }
64 |
65 | getModuleName = m => {
66 | if(m === "galleries") return strings.MODULE_GALLERIES;
67 | if(m === "projects") return strings.MODULE_PROJECTS;
68 | if(m === "articles") return strings.MODULE_ARTICLES;
69 | if(m === "videos") return strings.MODULE_VIDEOS;
70 | if(m === "music") return strings.MODULE_MUSIC;
71 | }
72 |
73 | openModuleSelector = () => this.setState({
74 | open: true
75 | });
76 |
77 | closeModuleSelector = () => this.setState({
78 | open: false
79 | });
80 |
81 | getModules = () => {
82 | const modules = this.modules;
83 |
84 | const availableModules = [];
85 |
86 | for(let i = 0; i < modules.length; i++) {
87 | let exists = false;
88 | for(let j = 0; j < this.state.modules.length; j++) {
89 | if(modules[i] === this.state.modules[j]) {
90 | exists = true;
91 | }
92 | }
93 | if (!exists) {
94 | availableModules.push(modules[i]);
95 | }
96 | }
97 | return availableModules;
98 | }
99 |
100 | onSelect = e => {
101 | const m = e.target.value;
102 | this.setState({
103 | moduleToAdd: m
104 | });
105 | }
106 |
107 | addModule = e => {
108 | e.preventDefault();
109 | client.post('/sites/' + this.props.match.params.name + '/modules/' + this.state.moduleToAdd).then(response => {
110 | window.location.reload();
111 | }).catch(err => {
112 | if(err) throw err;
113 | });
114 | }
115 |
116 | confirmRemove = m => this.setState({
117 | confirm: true,
118 | moduleToDelete: m
119 | });
120 |
121 | closeConfirm = () => this.setState({
122 | confirm: false
123 | });
124 |
125 | removeModule = () => {
126 | client.delete('/sites/' + this.props.match.params.name + '/modules/' + this.state.moduleToDelete).then(response => {
127 | window.location.reload();
128 | }).catch(err => {
129 | if(err) throw err
130 | });
131 | }
132 |
133 | render() {
134 | return (
135 |
168 |
170 | {!this.state.fetched && {strings.DRAWER_GALLERIES}
169 |
136 |
143 | {this.state.fetched &&
144 |
162 |
163 |
182 |
183 |
217 |
218 | )
219 | }
220 |
221 | }
222 | export default withRouter(Modules);
--------------------------------------------------------------------------------
/src/pages/dashboard/Modules/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-modules {
2 | .add-module-btn {
3 | margin-top: 15px;
4 | }
5 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/MyAccount/styles.scss:
--------------------------------------------------------------------------------
1 | .page.my-account {
2 | padding-left: 20%!important;
3 | padding-right: 20%!important;
4 |
5 | @media screen and (max-width: 700px) {
6 | padding-left: 5% !important;
7 | padding-right: 5% !important;
8 | }
9 |
10 | h1 {
11 | margin-bottom: 25px;
12 | }
13 | h2 {
14 | margin-bottom: -15px;
15 |
16 | }
17 |
18 | .group {
19 | margin-bottom: 25px;
20 | .divider {
21 | margin-top: 25px;
22 | }
23 | button {
24 | margin-top: 15px;
25 | }
26 | .warning-text {
27 | margin-top: 15px;
28 | }
29 | }
30 |
31 | }
32 |
33 | .dark {
34 | .page.my-account {
35 | h2 {
36 | color: #00ad9f!important;
37 | }
38 | }
39 | }
40 |
41 |
42 | .inline-grid {
43 | display: flex;
44 | justify-content: space-between;
45 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/MySites/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './styles.scss';
4 |
5 | import client from 'services/client';
6 |
7 | import Fab from '@material-ui/core/Fab';
8 | import AddIcon from '@material-ui/icons/Add';
9 |
10 | import Dialog from '@material-ui/core/Dialog';
11 | import DialogContent from '@material-ui/core/DialogContent';
12 | import Button from '@material-ui/core/Button';
13 | import DialogTitle from '@material-ui/core/DialogTitle';
14 | import DialogContentText from '@material-ui/core/DialogContentText';
15 | import DialogActions from '@material-ui/core/DialogActions';
16 | import TextField from '@material-ui/core/TextField';
17 | import FormControl from '@material-ui/core/FormControl';
18 | import FormHelperText from '@material-ui/core/FormHelperText';
19 |
20 | import CircularProgress from '@material-ui/core/CircularProgress';
21 |
22 |
23 | import strings from 'strings';
24 | import SiteBox from 'components/SiteBox';
25 |
26 | import AppBar from 'components/AppBar';
27 |
28 | class MySites extends React.Component {
29 |
30 | constructor(props) {
31 | super(props);
32 | this.state = {
33 | newSiteDialog: false,
34 | siteName: "",
35 | siteType: "",
36 | sites: [],
37 |
38 | nameHasError: false,
39 | error: false,
40 | errorMsg: "",
41 | fetched: false
42 | }
43 | }
44 |
45 | fetchSites = () => {
46 | client.get('/sites').then(response => {
47 | const sites = response.data.payload || [];
48 | this.setState({sites, fetched: true});
49 | }).catch(err => {
50 | if(err) throw err;
51 | });
52 | }
53 |
54 | componentDidMount() {
55 | this.fetchSites();
56 | }
57 |
58 |
59 | handleNewSite = () => {
60 | this.setState({newSiteDialog: true, errorMsg: "", error: false, nameHasError: false, siteName: "", siteType: ""})
61 | };
62 | handleNewSiteDialogClose = () => this.setState({newSiteDialog: false});
63 |
64 | handleTypeChange = e => {
65 | this.setState({siteType: e.target.value});
66 | }
67 |
68 | handleNameChange = e => {
69 | this.setState({
70 | siteName: e.target.value,
71 | error: false,
72 | errorMsg: "",
73 | nameHasError: false
74 | });
75 | }
76 |
77 | onKeyDown = e => {
78 | if(e.keyCode === 32) e.preventDefault();
79 | }
80 |
81 | createSite = e => {
82 | e.preventDefault();
83 | client.post('/sites', {
84 | name: this.state.siteName,
85 | type: this.state.siteType
86 | }).then(response => {
87 | this.fetchSites();
88 | this.handleNewSiteDialogClose();
89 | }).catch(err => {
90 | this.checkError(err);
91 | if(err) throw err;
92 | });
93 | }
94 |
95 | checkError = err => {
96 | const errType = err.data.message;
97 | switch(errType) {
98 | case "name_too_short": {
99 | this.setState({
100 | nameHasError: true,
101 | errorMsg: strings.NAME_TOO_SHORT,
102 | error: true
103 | });
104 | break;
105 | }
106 | case "name_too_long": {
107 | this.setState({
108 | nameHasError: true,
109 | errorMsg: strings.NAME_TOO_LONG,
110 | error: true
111 | });
112 | break;
113 | }
114 | case "site_exists": {
115 | this.setState({
116 | nameHasError: true,
117 | errorMsg: strings.SITE_EXISTS,
118 | error: true
119 | });
120 | break;
121 | }
122 | case "incorrect_characters": {
123 | this.setState({
124 | nameHasError: true,
125 | errorMsg: strings.SITE_NAME_INCORRECT,
126 | error: true
127 | });
128 | break;
129 | }
130 | default:
131 | break
132 | }
133 | }
134 |
135 | favoriteSite = site => {
136 | const sites = this.state.sites;
137 | sites.forEach((s, i) => {
138 | if(s.name === site.name) {
139 | sites[i].favorite = !sites[i].favorite;
140 | }
141 | });
142 | this.setState({sites});
143 | client.put('/sites/favorite/' + site.name).then(response => {
144 | this.fetchSites();
145 | }).catch(err => {
146 | if(err) throw err;
147 | });
148 | }
149 |
150 | render() {
151 | return (
152 | {strings.DRAWER_MODULES}
137 | 141 | {!this.state.fetched &&-
145 | {this.state.modules.map((m, i) => (
146 |
153 |
154 |
155 |
158 |
159 |
215 | );
216 | }
217 | }
218 |
219 | export default MySites;
--------------------------------------------------------------------------------
/src/pages/dashboard/MySites/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-my-sites {
2 | padding-left: 10%!important;
3 | padding-right: 10%!important;
4 |
5 | .new-site-button {
6 | margin-top: 15px;
7 | }
8 |
9 | @media screen and (max-width: 750px) {
10 | padding-left: 5%!important;
11 | padding-right: 5%!important;
12 | .sites-container {
13 | justify-content: center;
14 | .sitebox {
15 | width: 100%;
16 | }
17 | }
18 |
19 | }
20 |
21 | .sites-container {
22 | display: flex;
23 | flex-direction: row;
24 | flex-wrap: wrap;
25 | margin-left: -12px
26 | }
27 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/Overview/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import client from 'services/client';
4 |
5 | import {withRouter}from 'react-router';
6 | import CircularProgress from '@material-ui/core/CircularProgress';
7 |
8 | class Overview extends React.Component {
9 |
10 | constructor(props) {
11 | super(props);
12 | this.state = {
13 | fetched: false,
14 | display_name: "",
15 | name: "",
16 | total_size: 0,
17 | files: 0,
18 | galleries: 0,
19 | articles: 0,
20 | projects: 0,
21 | videogroups: 0,
22 | albums: 0,
23 | collaborators: [],
24 |
25 | }
26 | }
27 |
28 | fetchOverview = () => {
29 | this.setState({fetched: false});
30 | client.get('/sites/' + this.props.match.params.name + '/overview').then(response => {
31 | const overview = response.data.payload;
32 | this.setState({...overview, fetched: true});
33 | }).then(err => {
34 | if(err) throw err;
35 | });
36 | }
37 |
38 | componentDidMount() {
39 | this.fetchOverview();
40 | }
41 |
42 | render() {
43 | return (
44 | {strings.MENU_MY_SITES}
160 | {!this.state.fetched &&
167 | {this.state.sites.map((site, i) => (
168 | this.openSite(site)}
170 | favorite={() => this.favoriteSite(site)}
171 | key={i}
172 | site={site}/>
173 | ))}
174 |
175 |
176 |
214 |
45 |
48 | );
49 | }
50 | }
51 |
52 | export default withRouter(Overview);
--------------------------------------------------------------------------------
/src/pages/dashboard/Photos/styles.scss:
--------------------------------------------------------------------------------
1 | .dashboard-photos {
2 | padding-bottom: 25px;
3 | .photos-container {
4 | .draggable {
5 | margin: 20px 0;
6 | }
7 | }
8 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/Projects/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Fab from '@material-ui/core/Fab';
3 | import AddIcon from '@material-ui/icons/Add';
4 | import {withRouter}from 'react-router';
5 |
6 | import Button from '@material-ui/core/Button';
7 | import CircularProgress from '@material-ui/core/CircularProgress';
8 |
9 | import ProjectBox from 'components/ProjectBox';
10 |
11 | import strings from 'strings';
12 |
13 | import client from 'services/client';
14 |
15 | import './styles.scss';
16 |
17 | class Projects extends React.Component {
18 |
19 | constructor(props) {
20 | super(props);
21 | this.state = {
22 | projects: [],
23 | fetched: false
24 | }
25 | }
26 |
27 | componentWillReceiveProps() {
28 | this.fetchProjects();
29 | }
30 |
31 | componentDidMount() {
32 | this.fetchProjects();
33 | }
34 |
35 | fetchProjects = () => {
36 | this.setState({fetched: false});
37 | client.get('/projects/'+ this.props.match.params.name).then(response => {
38 | const projects = response.data.payload || [];
39 | this.setState({projects, fetched: true});
40 | }).catch(err => {
41 | if(err) throw err;
42 | });
43 | }
44 |
45 | editProject = project => {
46 | this.props.history.push('/site/' + this.props.match.params.name + '/projects/edit/' + project.id);
47 | }
48 |
49 | handleNewProject = () => {
50 | this.props.history.push('/site/' + this.props.match.params.name + '/projects/new');
51 | }
52 |
53 | render() {
54 | return (
55 | {this.state.display_name}
46 | {!this.state.fetched &&
56 |
57 |
60 |
74 | );
75 | }
76 | }
77 |
78 | export default withRouter(Projects);
--------------------------------------------------------------------------------
/src/pages/dashboard/Projects/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-projects {
2 | .projects-container {
3 | display: flex;
4 | flex-direction: row;
5 | flex-wrap: wrap;
6 | margin-left: -12px
7 | }
8 | }
9 |
10 | .dialog-content {
11 | padding-top: 15px!important;
12 | @media screen and(max-width: 960px) {
13 | margin-left: 0px;
14 | }
15 | margin-left: 50px;
16 |
17 | .url-input {
18 | width: calc(100% + 8px);
19 | }
20 | }
21 | .topbar {
22 | position: relative!important;
23 | }
24 |
25 | .remove-button {
26 | cursor: pointer;
27 | }
28 | .no-padding {
29 | padding-right: 0px!important
30 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/Settings/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-settings {
2 | h5 {
3 | margin-top: 15px;
4 | }
5 | hr {
6 | margin-top: 15px;
7 | }
8 |
9 | .red-text {
10 | color: #e74c3c!important;
11 | }
12 |
13 | .margin {
14 | margin-top: 15px;
15 | }
16 | }
17 |
18 | .dark {
19 | .page.dashboard-settings {
20 | h2.primary {
21 | color: #00ad9f!important;
22 | }
23 | }
24 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/SiteEditor/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {withRouter} from 'react-router';
4 |
5 | import './styles.scss';
6 |
7 | import client from 'services/client';
8 | import DrawerMenu from 'components/DrawerMenu';
9 | import AppBar from 'components/AppBar';
10 |
11 | class SiteEditor extends React.Component {
12 |
13 | constructor(props) {
14 | super(props);
15 | this.state = {
16 | site: {}
17 | }
18 | }
19 |
20 | fetchSite = () => {
21 | client.get('/sites/' + this.props.match.params.name).then(response => {
22 | const site = response.data.payload || {};
23 | this.setState({site});
24 | }).catch(err => {
25 | if(err) throw err;
26 | });
27 | }
28 |
29 | componentDidMount() {
30 | this.fetchSite();
31 | }
32 |
33 | render() {
34 | return (
35 |
61 |
63 | {!this.state.fetched && {strings.DRAWER_PROJECTS}
62 |
69 | {this.state.projects.map((project, i) => {
70 | return this.editProject(project)} project={project}/>;
71 | })}
72 |
73 |
36 |
37 |
38 |
39 | );
40 | }
41 | }
42 |
43 | export default withRouter(SiteEditor);
--------------------------------------------------------------------------------
/src/pages/dashboard/SiteEditor/styles.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/backpulse/dashboard/02ac7a964f938124c23f9bac59e750b5fa220abe/src/pages/dashboard/SiteEditor/styles.scss
--------------------------------------------------------------------------------
/src/pages/dashboard/Storage/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import strings from 'strings';
4 | import {withRouter} from 'react-router';
5 | import CircularProgress from '@material-ui/core/CircularProgress';
6 | import AddIcon from '@material-ui/icons/Add';
7 | import Fab from '@material-ui/core/Fab';
8 | import FileUploader from 'components/FileUploader';
9 | import File from 'components/File';
10 |
11 | import client from 'services/client';
12 | import './styles.scss';
13 | import Masonry from 'react-masonry-component';
14 |
15 | import Dialog from '@material-ui/core/Dialog';
16 | import DialogContent from '@material-ui/core/DialogContent';
17 | import DialogTitle from '@material-ui/core/DialogTitle';
18 | import DialogContentText from '@material-ui/core/DialogContentText';
19 | import DialogActions from '@material-ui/core/DialogActions';
20 | import Button from '@material-ui/core/Button';
21 | import FormControl from '@material-ui/core/FormControl';
22 | import TextField from '@material-ui/core/TextField';
23 |
24 | class Storage extends React.Component {
25 |
26 | constructor(props) {
27 | super(props);
28 | this.state = {
29 | files: [],
30 | importFiles: false,
31 | confirmDelete: false,
32 | editFile: false,
33 | newFilename: ""
34 | }
35 | }
36 |
37 | componentDidMount() {
38 | this.fetchFiles();
39 | }
40 |
41 | fetchFiles = () => {
42 | this.setState({fetched: false});
43 | client.get('/files/' + this.props.match.params.name).then(response => {
44 | const files = response.data.payload || [];
45 | files.reverse();
46 | this.setState({files, fetched: true});
47 | console.log(files);
48 | }).catch(err => {
49 | if(err) throw err;
50 | });
51 | }
52 |
53 | importFiles = () => this.setState({
54 | importFiles: true
55 | })
56 |
57 | closeImport = () => this.setState({
58 | importFiles: false
59 | });
60 |
61 | onUploadDone = data => {
62 | console.log(data);
63 | this.fetchFiles();
64 | this.closeImport();
65 | }
66 |
67 | closeConfirm = () => this.setState({
68 | confirmDelete: false
69 | })
70 |
71 | removeFile = () => {
72 | client.delete('/files/' + this.props.match.params.name + '/' + [this.state.fileToDelete.id]).then(response => {
73 | console.log(response.data);
74 | this.closeConfirm();
75 | this.fetchFiles();
76 | }).catch(err => {
77 | if(err) throw err;
78 | });
79 | }
80 |
81 | closeEdit = () => this.setState({
82 | editFile: false
83 | });
84 |
85 | editFile = e => {
86 | e.preventDefault();
87 | client.put('/files/' + this.props.match.params.name + '/' + this.state.fileToEdit.id + '/' + this.state.newFilename).then(response => {
88 | this.fetchFiles();
89 | this.closeEdit();
90 | }).catch(err => {
91 | if(err) throw err;
92 | });
93 | }
94 |
95 | render() {
96 | return (
97 |
98 |
101 |
104 |
105 |
106 | {this.state.files.map((file, i) => (
107 | this.setState({
109 | fileToDelete: file,
110 | confirmDelete: true
111 | })}
112 | onEdit={() => this.setState({
113 | fileToEdit: file,
114 | editFile: true,
115 | newFilename: file.name
116 | })}
117 | data={file}
118 | key={i}
119 | />
120 | ))}
121 |
122 |
123 |
186 | );
187 | }
188 | }
189 |
190 | export default withRouter(Storage);
--------------------------------------------------------------------------------
/src/pages/dashboard/Storage/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-storage {
2 | .files-container {
3 | display: flex;
4 | flex-direction: row;
5 | flex-wrap: wrap;
6 | margin-left: -12px;
7 | @media screen and(max-width: 960px) {
8 | margin-left: -22px;
9 | }
10 | }
11 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/Track/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {withRouter} from 'react-router';
4 |
5 | import client from 'services/client';
6 | import TextField from '@material-ui/core/TextField';
7 | import Button from '@material-ui/core/Button';
8 | import strings from 'strings';
9 | import CircularProgress from '@material-ui/core/CircularProgress';
10 |
11 | import Grid from '@material-ui/core/Grid';
12 | import FileSelector from 'components/FileSelector';
13 | import InputAdornment from '@material-ui/core/InputAdornment';
14 | import StorageIcon from '@material-ui/icons/Storage';
15 | import IconButton from '@material-ui/core/IconButton';
16 | import './styles.scss';
17 |
18 | class Track extends React.Component {
19 |
20 | constructor(props) {
21 | super(props);
22 | this.state = {
23 | fetched: false,
24 | url: "",
25 | title: "",
26 | image: "",
27 | description: "",
28 |
29 | fileSelector: false,
30 | audioSelector: false
31 | }
32 | }
33 |
34 | fetchTrack = () => {
35 | client.get('/tracks/' + this.props.match.params.name + '/' + this.props.match.params.id).then(response => {
36 | const track = response.data.payload;
37 | this.setState({...track, fetched: true});
38 | }).catch(err => {
39 | if(err) throw err;
40 | });
41 | }
42 |
43 | componentDidMount() {
44 | this.fetchTrack();
45 | }
46 |
47 | saveTrack = e => {
48 | e.preventDefault();
49 | client.put('/tracks/' + this.props.match.params.name + '/' + this.props.match.params.id, {
50 | title: this.state.title,
51 | content: this.state.content,
52 | url: this.state.url,
53 | image: this.state.image,
54 | }).then(response => {
55 | console.log(response.data);
56 | }).catch(err => {
57 | if(err) throw err;
58 | });
59 | }
60 |
61 | onImageSelected = file => {
62 | this.setState({image: file.url});
63 | this.closeFileSelector();
64 | }
65 |
66 | onAudioSelected = file => {
67 | this.setState({url: file.url});
68 | this.closeAudioSelector();
69 | }
70 |
71 | closeFileSelector = () => this.setState({
72 | fileSelector: false
73 | });
74 |
75 | openFileSelector = () => this.setState({
76 | fileSelector: true
77 | });
78 |
79 | closeAudioSelector = () => this.setState({
80 | audioSelector: false
81 | });
82 |
83 | openAudioSelector = () => this.setState({
84 | audioSelector: true
85 | });
86 |
87 | render() {
88 | return (
89 | {strings.DRAWER_STORAGE}
99 | {!this.state.fetched &&
90 |
176 | );
177 | }
178 | }
179 |
180 | export default withRouter(Track);
--------------------------------------------------------------------------------
/src/pages/dashboard/Track/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-track {
2 | img {
3 | width: 300px;
4 | }
5 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/Video/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {withRouter} from 'react-router';
4 |
5 | import client from 'services/client';
6 | import TextField from '@material-ui/core/TextField';
7 | import Button from '@material-ui/core/Button';
8 | import strings from 'strings';
9 | import CircularProgress from '@material-ui/core/CircularProgress';
10 | import {youtubeParser} from 'utils';
11 |
12 | import Grid from '@material-ui/core/Grid';
13 |
14 | class Video extends React.Component {
15 |
16 | constructor(props) {
17 | super(props);
18 | this.state = {
19 | fetched: false,
20 | youtube_url: "",
21 | title: "",
22 | content: ""
23 | }
24 | }
25 |
26 | fetchVideo = () => {
27 | client.get('/videos/' + this.props.match.params.name + '/' + this.props.match.params.videoid).then(response => {
28 | console.log(response.data);
29 | const video = response.data.payload;
30 | this.setState({...video, fetched: true});
31 | }).catch(err => {
32 | if(err) throw err;
33 | });
34 | }
35 |
36 | componentDidMount() {
37 | this.fetchVideo();
38 | }
39 |
40 | saveVideo = () => {
41 | client.put('/videos/' + this.props.match.params.name + '/' + this.props.match.params.videoid, {
42 | content: this.state.content,
43 | title: this.state.title,
44 | youtube_url: this.state.youtube_url
45 | }).then(response => {
46 | console.log(response.data);
47 | }).catch(err => {
48 | if(err) throw err;
49 | });
50 | }
51 |
52 | render() {
53 | return (
54 | {strings.EDIT_TRACK}
91 | {!this.state.fetched &&
55 |
58 |
59 | this.setState({
65 | youtube_url: e.target.value
66 | })}
67 | margin="normal"
68 | fullWidth
69 | />
70 | this.setState({
76 | title: e.target.value
77 | })}
78 | margin="normal"
79 | fullWidth
80 | />
81 | this.setState({
88 | content: e.target.value
89 | })}
90 | margin="normal"
91 | fullWidth
92 | />
93 | ![thumbnail]({"https://img.youtube.com/vi/")
94 |
95 |
96 |
102 |
103 |
104 | }
105 |
106 | );
107 | }
108 | }
109 |
110 | export default withRouter(Video);
--------------------------------------------------------------------------------
/src/pages/dashboard/VideoGroup/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-videogroup {
2 |
3 | .videos-container {
4 | display: flex;
5 | flex-direction: column;
6 | flex-wrap: wrap;
7 | margin-left: -12px
8 | }
9 | }
10 |
11 | .edit-group-dialog {
12 | img {
13 | max-width: 50%;
14 | }
15 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/VideoGroups/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Fab from '@material-ui/core/Fab';
4 | import AddIcon from '@material-ui/icons/Add';
5 |
6 |
7 | import Button from '@material-ui/core/Button';
8 | import TextField from '@material-ui/core/TextField';
9 | import Dialog from '@material-ui/core/Dialog';
10 | import DialogActions from '@material-ui/core/DialogActions';
11 | import DialogContent from '@material-ui/core/DialogContent';
12 | import DialogContentText from '@material-ui/core/DialogContentText';
13 | import DialogTitle from '@material-ui/core/DialogTitle';
14 |
15 | import {withRouter} from 'react-router';
16 |
17 | import client from 'services/client';
18 |
19 | import strings from 'strings';
20 |
21 | import VideoGroup from '../../../components/VideoGroup';
22 |
23 | import './styles.scss';
24 | import CircularProgress from '@material-ui/core/CircularProgress';
25 | import {sortByIndex} from 'utils';
26 |
27 | import Sorter from 'components/Sorter';
28 |
29 | class Videos extends React.Component {
30 |
31 | constructor(props) {
32 | super(props);
33 | this.state = {
34 | videos: [],
35 | fetched: false,
36 | groups: [],
37 | title: "",
38 | addVideoGroup: false,
39 | confirmDelete: false
40 | }
41 | }
42 |
43 | fetchVideoGroups = () => {
44 | this.setState({fetched: false});
45 | client.get('/videogroups/' + this.props.match.params.name).then(response => {
46 | const groups = response.data.payload || [];
47 | sortByIndex(groups);
48 | this.setState({groups, fetched: true});
49 | }).catch(err => {
50 | if(err) throw err;
51 | });
52 | }
53 |
54 | openAddVideoGroup = () => this.setState({
55 | addVideoGroup: true
56 | });
57 |
58 | handleClose = () => this.setState({
59 | addVideoGroup: false
60 | });
61 |
62 | addVideoGroup = e => {
63 | e.preventDefault();
64 | client.post('/videogroups/' + this.props.match.params.name, {
65 | title: this.state.title
66 | }).then(response => {
67 | this.fetchVideoGroups();
68 | this.handleClose();
69 | this.setState({
70 | title: ""
71 | })
72 | console.log(response.data);
73 | }).catch(err => {
74 | if(err) throw err;
75 | });
76 | }
77 |
78 | componentWillMount() {
79 | this.fetchVideoGroups();
80 | }
81 |
82 | closeConfirm = () => this.setState({
83 | confirmDelete: false
84 | });
85 |
86 |
87 | editGroup = group => {
88 | this.props.history.push('/site/' + this.props.match.params.name + '/videogroups/' + group.id);
89 | }
90 |
91 | deleteGroup = () => {
92 | client.delete('/videogroups/' + this.props.match.params.name + '/' + this.state.groupToDelete.id).then(response => {
93 | console.log(response.data);
94 | this.fetchVideoGroups();
95 | this.closeConfirm();
96 |
97 | }).catch(err => {
98 | if(err) throw err;
99 | });
100 | }
101 |
102 | onDragEnd = groups => {
103 | this.setState({groups});
104 | client.put('/videogroups/' + this.props.match.params.name + '/indexes', groups).then(response => {
105 | console.log(response.data);
106 | }).catch(err => {
107 | if(err) throw err;
108 | });
109 | }
110 |
111 | render() {
112 | return (
113 | {strings.EDIT_VIDEO}
56 | {!this.state.fetched &&
94 |
114 |
119 |
122 | {this.state.groups.length < 1 && this.state.fetched && }
126 |
127 | this.editGroup(g)}
135 | onDelete={g => this.setState({
136 | confirmDelete: true,
137 | groupToDelete: g,
138 | })}
139 | />
140 |
141 |
173 |
174 |
193 |
194 | );
195 | }
196 | }
197 |
198 | export default withRouter(Videos);
--------------------------------------------------------------------------------
/src/pages/dashboard/VideoGroups/styles.scss:
--------------------------------------------------------------------------------
1 | .page.dashboard-videogroups {
2 | .groups-container {
3 | display: flex;
4 | flex-direction: column;
5 | flex-wrap: wrap;
6 | margin-left: -12px
7 | }
8 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/index.js:
--------------------------------------------------------------------------------
1 | import About from './About';
2 | import Contact from './Contact';
3 | import Projects from './Projects';
4 | import MySites from './MySites';
5 | import SiteEditor from './SiteEditor';
6 | import Settings from './Settings';
7 | import Overview from './Overview';
8 | import Galleries from './Galleries';
9 | import EditProject from './EditProject';
10 | import EditGallery from './EditGallery';
11 | import MyAccount from './MyAccount';
12 | import Access from './Access';
13 | import Modules from './Modules';
14 | import Articles from './Articles';
15 | import EditArticle from './EditArticle';
16 | import VideoGroups from './VideoGroups';
17 | import VideoGroup from './VideoGroup';
18 | import Video from './Video';
19 | import Albums from './Albums';
20 | import Storage from './Storage';
21 | import Album from './Album';
22 | import Track from './Track';
23 | import Photos from './Photos';
24 | import EditPhoto from './EditPhoto';
25 |
26 | export {
27 | MySites,
28 | About,
29 | Contact,
30 | Projects,
31 | SiteEditor,
32 | Settings,
33 | Overview,
34 | Galleries,
35 | EditProject,
36 | EditGallery,
37 | MyAccount,
38 | Access,
39 | Modules,
40 | Articles,
41 | EditArticle,
42 | VideoGroups,
43 | VideoGroup,
44 | Video,
45 | Albums,
46 | Album,
47 | Track,
48 | Storage,
49 | Photos,
50 | EditPhoto
51 | }
--------------------------------------------------------------------------------
/src/pages/homepage/Authentication/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './styles.scss';
4 |
5 | import strings from 'strings';
6 |
7 | import Paper from '@material-ui/core/Paper';
8 | import TextField from '@material-ui/core/TextField';
9 | import FormControl from '@material-ui/core/FormControl';
10 | import Button from '@material-ui/core/Button';
11 | import FormHelperText from '@material-ui/core/FormHelperText';
12 |
13 | import client from 'services/client';
14 | import { saveJWT } from '../../../utils/token';
15 | import CircularProgress from '@material-ui/core/CircularProgress';
16 |
17 | class Authentication extends React.Component {
18 |
19 | constructor(props) {
20 | super(props);
21 | this.state = {
22 | email: "",
23 | password: "",
24 |
25 | errorMsg: "",
26 | error: false,
27 | emailHasError: false,
28 | passHasError: false,
29 |
30 | authenticating: false
31 | }
32 | }
33 |
34 | onSubmit = e => {
35 | e.preventDefault();
36 |
37 | this.setState({authenticating: true});
38 | client.post(this.props.type === "login" ? "/users/authenticate" : "/users", {
39 | email: this.state.email,
40 | password: this.state.password
41 | }).then(response => {
42 | saveJWT(response.data.payload);
43 | window.location = "/";
44 | }).catch(err => {
45 | this.checkError(err);
46 | this.setState({authenticating: false});
47 | if(err) throw err;
48 | });
49 | }
50 |
51 | checkError = err => {
52 | console.log(err);
53 | const errType = err.data.message;
54 | switch (errType) {
55 | case "password_too_short":
56 | this.setState({
57 | errorMsg: strings.PASSWORD_TOO_SHORT,
58 | passHasError: true,
59 | emailHasError: false,
60 | error: true
61 | });
62 | break;
63 | case "password_too_long":
64 | this.setState({
65 | errorMsg: strings.PASSWORD_TOO_LONG,
66 | passHasError: true,
67 | emailHasError: false,
68 | error: true
69 | });
70 | break;
71 |
72 | case "email_exists":
73 | this.setState({
74 | errorMsg: strings.EMAIL_EXISTS,
75 | emailHasError: true,
76 | passHasError: false,
77 | error: true
78 | });
79 | break;
80 |
81 | case "auth_fail":
82 | this.setState({
83 | errorMsg: strings.AUTHENTICATION_FAIL,
84 | emailHasError: true,
85 | passHasError: true,
86 | error: true
87 | });
88 | break;
89 | default:
90 | break;
91 | }
92 | }
93 |
94 | render() {
95 | return (
96 |
115 |
117 | {!this.state.fetched && {strings.VIDEO_GROUPS}
116 |
97 |
147 | );
148 | }
149 | }
150 |
151 | export default Authentication;
--------------------------------------------------------------------------------
/src/pages/homepage/Authentication/styles.scss:
--------------------------------------------------------------------------------
1 | .homepage.homepage-authentication {
2 | min-height: 100vh;
3 | background: #0e1e25;
4 |
5 | color: white;
6 |
7 | display: flex;
8 | justify-content: center;
9 |
10 |
11 | h1 {
12 | font-size: 36px;
13 | font-weight: 300;
14 | line-height: 48px;
15 | margin-bottom: 52px;
16 | text-align: center;
17 | margin-top: 150px;
18 | }
19 |
20 | .form {
21 | padding: 32px 40px 40px;
22 | width: 70%;
23 | margin: 0 auto;
24 | position: relative;
25 |
26 | input {
27 | color: #0e1e25!important;
28 | }
29 |
30 | p {
31 | position: absolute;
32 | margin-top: 0;
33 | }
34 |
35 | button {
36 | margin-top: 20px;
37 | }
38 |
39 | a {
40 | font-size: 12px;
41 | color: #0e1e25;
42 | bottom: 7px;
43 | position: absolute;
44 | }
45 | }
46 | }
--------------------------------------------------------------------------------
/src/pages/homepage/Home/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './styles.scss';
4 |
5 | class Home extends React.Component {
6 | render() {
7 | return (
8 |
98 |
100 |
138 | {this.props.type === "login" &&
139 | {strings.NOT_REGISTERED_YET}
140 | }
141 | {this.props.type !== "login" &&
142 | {strings.ALREADY_REGISTERED}
143 | }
144 |
145 |
146 | {this.props.type === "login" ? strings.AUTHENTICATION_LOGIN_TO_BACKPULSE : strings.AUTHENICATION_CREATE_BACKPULSE_ACCOUNT}
99 |
9 | Homepage home
10 |
11 | );
12 | }
13 | }
14 |
15 | export default Home;
--------------------------------------------------------------------------------
/src/pages/homepage/Home/styles.scss:
--------------------------------------------------------------------------------
1 | .homepage.homepage-home {
2 | min-height: 100vh;
3 | // background: #0e1e25;
4 | }
--------------------------------------------------------------------------------
/src/pages/homepage/index.js:
--------------------------------------------------------------------------------
1 | import Home from './Home';
2 | import Authentication from './Authentication';
3 |
4 | export {
5 | Home,
6 | Authentication
7 | };
--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
1 | import About from './About';
2 | import Contact from './Contact';
3 | import Projects from './Projects';
4 | import MySites from './MySites';
5 | import SiteEditor from './SiteEditor';
6 | import Settings from './Settings';
7 | import Overview from './Overview';
8 | import Galleries from './Galleries';
9 | import EditProject from './EditProject';
10 | import EditGallery from './EditGallery';
11 |
12 | export {
13 | MySites,
14 | About,
15 | Contact,
16 | Projects,
17 | SiteEditor,
18 | Settings,
19 | Overview,
20 | Galleries,
21 | EditProject,
22 | EditGallery
23 | }
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read http://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/src/services/client.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import {getLanguage} from 'utils';
3 | import {getJWT} from 'utils/token';
4 |
5 | const httpClient = axios.create({
6 | baseURL: process.env.NODE_ENV === "development" ? process.env.REACT_APP_DEV_ENDPOINT : process.env.REACT_APP_PROD_ENDPOINT,
7 | headers: {
8 | "Language": getLanguage(),
9 | "Authorization": getJWT()
10 | }
11 | });
12 |
13 | httpClient.interceptors.response.use((response) => {
14 | return response;
15 | }, function (error) {
16 | return Promise.reject(error.response);
17 | });
18 |
19 | export default httpClient;
--------------------------------------------------------------------------------
/src/styles/fonts.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/backpulse/dashboard/02ac7a964f938124c23f9bac59e750b5fa220abe/src/styles/fonts.scss
--------------------------------------------------------------------------------
/src/styles/styles.scss:
--------------------------------------------------------------------------------
1 | body, html, #root,.app,.app-container {
2 | height: 100%;
3 | margin: 0;
4 | padding: 0;
5 | font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
6 | }
7 |
8 | .page {
9 | button[type="submit"] {
10 | margin-bottom: 15px;
11 | }
12 | }
13 |
14 | .app {
15 | div.page {
16 | padding-top: 85px;
17 | padding-left: 275px;
18 | padding-right: 25px;
19 | min-height: calc(100% - 85px);
20 |
21 | @media screen and(max-width: 960px) {
22 | padding-left: 25px;
23 | }
24 |
25 | h1 {
26 | font-size: 36px;
27 | font-weight: 300;
28 | line-height: 48px;
29 | }
30 | }
31 | }
32 |
33 | .pointer {
34 | cursor: pointer;
35 | }
36 |
37 | .dark {
38 | input,textarea {
39 | color: white!important;
40 | }
41 | div.page {
42 | background-color: #0e1e25fa;
43 | }
44 | h1,h2,h3,h4,h5 {
45 | color: #e3e3e3!important;
46 | }
47 | }
48 |
49 | .light {
50 | div.page {
51 | }
52 | h1 {
53 | color: #0e1e25;
54 | }
55 | }
56 |
57 |
58 | .c-div {
59 | @media screen and (max-width: 600px) {
60 | width: 100%;
61 | }
62 |
63 | width: fit-content;
64 | }
65 |
66 | h1,h2,h3,h4,h5 {
67 | font-weight: 300;
68 | line-height: 48px;
69 | }
70 |
71 | h1 {
72 | font-size: 36px;
73 | }
74 |
75 | h2 {
76 | font-size: 30px;
77 | }
78 |
79 | h1,h2,h3,p {
80 | margin: 0;
81 | }
82 |
83 | a {
84 | text-decoration: none!important;
85 | // color: rgba(0, 0, 0, 0.87)!important;
86 | }
87 |
88 | .hide-desktop {
89 | @media screen and (min-width: 960px) {
90 | display: none!important;
91 | }
92 | }
93 |
94 | .fab {
95 | position: fixed!important;
96 | bottom: 15px;
97 | right: 15px;
98 | z-index: 99;
99 | }
100 |
101 | .divider {
102 | border-color: #eef1f6;
103 | border-bottom-style: solid;
104 | border-bottom-width: 1px;
105 | }
106 |
107 | .menu-appbar {
108 | *:focus {outline:0;}
109 | }
110 |
111 | .MuiTypography-body1-50 {
112 | line-height: 1.75!important;
113 | }
114 |
115 | .overflow-hidden {
116 | textarea {
117 | overflow: hidden!important;
118 | }
119 | }
120 |
121 | .button-danger {
122 | color: white!important;
123 | background-color: #f44336!important;
124 |
125 | &:disabled {
126 | opacity: 0.6;
127 | }
128 | }
129 | .button-danger-outlined {
130 | border-color: #f44336!important;
131 | color: #f44336!important;
132 | }
133 |
134 | .value-container {
135 | display: flex!important;
136 | flex-wrap: wrap!important;
137 | flex: 1!important;
138 | align-items: center!important;
139 | overflow: hidden!important;
140 | }
141 |
142 | .select-placeholder {
143 | position: absolute!important;
144 | left: 2px!important;
145 | font-size: 16px!important;
146 | }
147 |
148 | .select-menu {
149 | position: absolute!important;
150 | z-index: 1!important;
151 | margin-top: 8px!important;
152 | left: 0!important;
153 | right: 0!important;
154 | }
155 |
156 | .select-input {
157 | flex: 1!important;
158 | padding: 0!important;
159 | }
160 |
161 | .title-div {
162 | display: flex;
163 | margin-bottom: 15px;
164 | align-items: center;
165 | h1 {
166 | display: inline-block!important;
167 | margin-right: 15px;
168 | }
169 | }
170 |
171 | .margin-10 {
172 | margin: 10px;
173 | }
174 |
175 | .progress {
176 | margin-top: 6px;
177 | position: absolute;
178 |
179 | .circular {
180 | margin-top: 24px!important;
181 | position: absolute;
182 | }
183 | }
184 |
185 |
186 | .red-text {
187 | color: #e74c3c!important;
188 | }
189 |
190 | .draggable {
191 | margin: 10px;
192 | }
193 |
194 | .fit-content {
195 | width: fit-content;
196 | }
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export const copy = text => {
2 | const el = document.createElement('textarea');
3 | el.id = "dummy";
4 | el.value = text;
5 | document.body.appendChild(el);
6 | el.select();
7 | document.execCommand('copy');
8 | document.body.removeChild(el);
9 | }
10 |
11 | export const getTheme = () => {
12 | const theme = localStorage.getItem("theme");
13 | if (theme === "light") return "light";
14 | return "dark";
15 | }
16 |
17 | export const toggleTheme = () => {
18 | const theme = getTheme();
19 | if (theme === "dark") {
20 | localStorage.setItem("theme", "light");
21 | } else {
22 | localStorage.setItem("theme", "dark");
23 | }
24 | }
25 |
26 | export const getLanguage = () => {
27 | const navigatorLang = navigator.language.substr(0, 2);
28 | let lang = localStorage.getItem("language") || navigatorLang;
29 | if (lang !== "fr" && lang !== "en") {
30 | lang = "en";
31 | }
32 | return lang;
33 | }
34 |
35 | export const setLanguage = lang => {
36 | localStorage.setItem("language", lang);
37 | window.dispatchEvent(new CustomEvent("language"), {
38 | detail: {
39 | language: lang
40 | }
41 | });
42 | }
43 |
44 | export function validateEmail(email) {
45 | var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
46 | return re.test(String(email).toLowerCase());
47 | }
48 |
49 | export function toTitleCase(str) {
50 | return str.replace(
51 | /\w\S*/g,
52 | function(txt) {
53 | return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
54 | }
55 | );
56 | }
57 |
58 | export const reorder = (list, startIndex, endIndex) => {
59 | const result = Array.from(list);
60 | const [removed] = result.splice(startIndex, 1);
61 | result.splice(endIndex, 0, removed);
62 | return result;
63 | };
64 |
65 | export const sortByIndex = array => {
66 | return array.sort(function(a, b){return a.index - b.index});
67 | }
68 |
69 | export const youtubeParser = url => {
70 | const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
71 | const match = url.match(regExp);
72 | return (match&&match[7].length===11)? match[7] : false;
73 | }
--------------------------------------------------------------------------------
/src/utils/token.js:
--------------------------------------------------------------------------------
1 | export function saveJWT(token) {
2 | localStorage.setItem("JWT", "Bearer " + token);
3 | }
4 |
5 | export function getJWT() {
6 | return localStorage.getItem("JWT");
7 | }
8 |
9 | export function removeJWT() {
10 | localStorage.setItem("JWT", "");
11 | }
12 |
13 | export function signOut() {
14 | removeJWT();
15 | window.location = "https://backpulse.io";
16 | }
17 |
18 | export function getUser() {
19 | const token = getJWT();
20 | if(token) {
21 | var base64Url = token.split('.')[1];
22 | var base64 = base64Url.replace('-', '+').replace('_', '/');
23 | return JSON.parse(window.atob(base64));
24 | }
25 | }
--------------------------------------------------------------------------------