Add /sketch service

components/UI/CopyToClipboard.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Clipboard from '../../assets/icons/clipboard.svg';
+import TextButton from './TextButton';
+
+const CopyToClipboard = ({ content, title }) => {
+    const [wasContentCopied, setWasContentCopied] = useState(false);
+    const { t } = useTranslation();
+
+    const copyToClipboard = async () => {
+        navigator.clipboard.writeText(content);
+        setWasContentCopied(true);
+        await new Promise(r => setTimeout(r, 2000));
+        setWasContentCopied(false);
+    };
+
+    return (
+        <TextButton title={title || t('Copy link to clipboard')} onClick={copyToClipboard}>
+            { wasContentCopied ?
+                '✓':
+                <Clipboard fill="var(--color-fg)" /> }
+        </TextButton>
+    );
+};
+export default CopyToClipboard;

components/UI/ServiceLink.js

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import Link from 'next/link';
+import styled from 'styled-components';
+
+import LockIcon from '../../assets/icons/lock.svg';
+import { ServiceTable } from './ServiceTable';
+
+const LockIconResized = styled(LockIcon)`
+  display: block;
+  transform: scale(0.9);
+`;
+
+const ServiceLink = forwardRef(({ name, href, selected, passwordProtected }, ref) => {
+    const { t } = useTranslation();
+
+    return (
+        <ServiceTable.Row>
+            <ServiceTable.Cell selected={selected}>
+                <Link ref={ref} href={href}>{ name }</Link>
+            </ServiceTable.Cell>
+            { /* Show a lock icon if this Link is password protected */ }
+            { passwordProtected && (
+                <ServiceTable.Cell title={t('password protected')}>
+                    <LockIconResized />
+                </ServiceTable.Cell>
+            ) }
+        </ServiceTable.Row>
+    );
+});
+
+export default ServiceLink;

components/UI/TextButton.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 const TextButton = styled.button`
   padding: 0;
   font: inherit;
+  color: var(--color-foreground);
   cursor: pointer;
   background: none;
   border: none;

components/layouts/partials/navigation.js

@@ -63,6 +63,13 @@ export default function Navigation({ closeNavigation }) {
                         </Link>
                     </li>
                 ) }
+                { _.get(getConfig(), 'publicRuntimeConfig.authProviders.spacedeck.path') && (
+                    <li>
+                        <Link href={getConfig().publicRuntimeConfig.authProviders.spacedeck.path}>
+                            { getConfig().publicRuntimeConfig.authProviders.spacedeck.path }
+                        </Link>
+                    </li>
+                ) }
             </List>
             <List>
                 <li><Link href="/logout">/logout</Link></li>

lib/Auth.js

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import MatrixAuthProvider from './auth/MatrixAuthProvider';
 import PeerTubeAuthProvider from './auth/PeerTubeAuthProvider';
 import MyPadsAuthProvider from './auth/MyPadsAuthProvider';
+import SpacedeckAuthProvider from './auth/SpacedeckAuthProvider';
 
 /*
     Mapping of authentication provider types and which corresponding class should be used to actually perform
@@ -16,6 +17,7 @@ const AuthProviders = {
     matrix: MatrixAuthProvider,
     peerTube: PeerTubeAuthProvider,
     etherpad: MyPadsAuthProvider,
+    spacedeck: SpacedeckAuthProvider,
 };
 
 function useAuthProvider() {

lib/Spacedeck.js

@@ -0,0 +1,5 @@
+import getConfig from 'next/config';
+
+const path = getConfig().publicRuntimeConfig.authProviders.spacedeck.path || '/spacedeck';
+
+export { path };

lib/auth/SpacedeckAuthProvider.js

@@ -0,0 +1,215 @@
+import _ from 'lodash';
+class SpacedeckAuthProvider {
+    constructor(configuration) {
+        this.allSpaces = {};
+        this.allFolder = {};
+        this.structure = {};
+        this.url = configuration.baseUrl;
+        if (typeof window !== 'undefined' && window.localStorage.getItem('x-spacedeck-auth')) {
+            this.token = window.localStorage.getItem('x-spacedeck-auth');
+        }
+    }
+
+    async signin(usr, pwd) {
+        const login = await this._login(this.url, usr, pwd);
+        if (!login) return;
+        this.token = login.token;
+        window.localStorage.setItem('x-spacedeck-auth', this.token);
+
+        this.user_id = login.user_id;
+        this.pwd = '';
+        this.userData = await this._getInititalUserData();
+
+        this.homeFolderId = this.userData?.home_folder_id;
+
+        this.structure = await this._getData(this.url, this.token);
+    }
+
+    async signout() {
+        const response = await fetch(this.url + '/api/sessions/current', {
+            method: 'DELETE',
+            headers: {
+                'X-Spacedeck-Auth': this.token,
+            },
+        });
+        if (!response) return;
+    }
+
+    async _getInititalUserData() {
+        const response = await fetch(this.url + '/api/users/current', {
+            method: 'GET',
+            headers: {
+                'X-Spacedeck-Auth': this.token,
+            },
+        });
+        if (!response) return;
+        const content = await response?.json();
+
+        return content;
+    }
+
+    async _getData(baseUrl = this.url, token = this.token, parentId) {
+        const structure = {};
+        structure.children = {};
+        let requestUrl = '';
+        if (parentId) {
+            requestUrl = baseUrl + '/api/spaces?parent_space_id=' + parentId;
+        } else {
+            requestUrl = baseUrl + '/api/spaces';
+        }
+        const response = await fetch(requestUrl, {
+            method: 'get',
+            headers: {
+                'X-Spacedeck-Auth': token,
+            },
+        });
+        if (!response) return;
+        const content = await response?.json();
+        await Promise.all(_.map(content, async (element) => {
+            structure.children[element._id] = {
+                name: element.name,
+                id: element._id,
+                access_mode: element.access_mode,
+                password: element.password ? element.password : '',
+                created_at: element.created_at,
+                updated_at: element.updated_at,
+                creator: element.creator,
+            };
+            if (element.space_type === 'space') {
+                structure.children[element._id].type = 'space';
+                structure.children[element._id].thumbnail_url = element.thumbnail_url ? element.thumbnail_url : '';
+                structure.children[element._id].thumbnail_updated_at = element.thumbnail_updated_at ? element.thumbnail_updated_at : '';
+                structure.children[element._id].width = element.width;
+                structure.children[element._id].height = element.height;
+                structure.children[element._id].shareUrl = baseUrl + 's/' + element.edit_hash + '-' + element.name;
+                structure.children[element._id].access_mode = element.access_mode;
+                this.allSpaces[element._id] = element;
+                this.allSpaces[element._id].id = element._id;
+            } else if (element.space_type === 'folder') {
+                structure.children[element._id] = await this._getData(baseUrl, token, element._id);
+                structure.children[element._id].type = 'folder';
+                structure.children[element._id].name = element.name;
+                structure.children[element._id].id = element._id;
+                this.allFolder[element._id] = element;
+            }
+        }));
+
+        return structure.children;
+    }
+
+    async _login(baseUrl, usr, password) {
+        const response = await fetch(baseUrl + '/api/sessions', {
+            method: 'POST',
+            body: JSON.stringify({
+                email: usr,
+                password: password,
+            }),
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            credentials: 'include',
+        });
+        const data = await response.json();
+        if (data?.user_id && data?.token) {
+            return data;
+        }
+    }
+
+    async _createElement(name, parentFolderId = this.homeFolderId, type = 'space') {
+        const response = await fetch(this.url + '/api/spaces', {
+            method: 'post',
+            headers: {
+                'X-Spacedeck-Auth': this.token,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                name: name,
+                space_type: type,
+                parent_space_id: parentFolderId,
+            }),
+        });
+
+        if (!response) return;
+        const content = await response?.json();
+        if (!content) return;
+
+        return content;
+    }
+
+    // Public functions
+
+    getAllSpaces() {
+        return this.allSpaces;
+    }
+
+    getStructure() {
+        return this.structure;
+    }
+
+    async createSpace(spaceName, parentFolderId = this.homeFolderId) {
+        const data = this._createElement(spaceName, parentFolderId, 'space');
+        if (!data) return;
+        this.allSpaces[data._id] = data;
+        await this.syncAllSpaces();
+
+        return data;
+    }
+
+    async deleteSpaceById(spaceId) {
+        if (!this.getSpaceById(spaceId)) return;
+        const response = await fetch(this.url + '/api/spaces/' + spaceId, {
+            method: 'DELETE',
+            headers: {
+                'x-spacedeck-auth': this.token,
+            },
+        }).catch((e) => {
+            console.log(e);
+        });
+
+        return response;
+    }
+
+    getElementById(id) {
+        let foundElement = this.getSpaceById(id);
+        if (foundElement) {
+            return foundElement;
+        } else {
+            foundElement = this.getFolderById(id);
+            if (foundElement) return foundElement;
+        }
+    }
+
+    getSpaceById(id) {
+        return _.find(this.allSpaces, { id: id });
+    }
+
+    getFolderById(id) {
+        return _.find(this.allFolder, { id: id });
+    }
+
+    getFolderByName(name) {
+        return _.filter(this.allFolder, { name: name });
+    }
+
+    getSpaceByName(name) {
+        return _.filter(this.allSpaces, { name: name });
+    }
+
+    getElementByName(name) {
+        let foundElement = this.getSpaceByName(name);
+        if (foundElement) {
+            return foundElement;
+        } else {
+            foundElement = this.getFolderByName(name);
+            if (foundElement) return foundElement;
+        }
+    }
+
+    async syncAllSpaces() {
+        this.structure = await this._getData(this.url, this.token);
+
+        return this.structure;
+    }
+}
+
+export default SpacedeckAuthProvider;

next.config.example.js

@@ -12,11 +12,16 @@ module.exports = {
                 // important: path has to start with "/"
                 path: '/write',
                 baseUrl: 'https://pad.riseup.net/p',
-                myPads: {
-                    api: 'http://etherpad.localhost/mypads/api',
-                    spacesGroupName: '/spaces', // optional, defaults to publicRuntimeConfig.name
-                },
+                // myPads: {
+                //     api: 'http://etherpad.localhost/mypads/api',
+                //     spacesGroupName: '/spaces', // optional, defaults to publicRuntimeConfig.name
+
+                // },
             },
+            // spacedeck: {
+            //     path: '/sketch',
+            //     baseUrl: 'http://spacedeck.localhost',
+            // },
         },
         contextRootSpaceRoomId: '!gB.....Ewlvdq:matrix.org',
         account: {
@@ -26,17 +31,32 @@ module.exports = {
             pathToElement: '//localhost/element',
         },
     },
-    async rewrites() {
-        return [
-            {
+    rewrites() {
+        const rewriteConfig = [];
+
+        if (this.publicRuntimeConfig.authProviders.etherpad) {
+            rewriteConfig.push({
                 source: this.publicRuntimeConfig.authProviders.etherpad.path,
                 destination: '/etherpad',
             },
             {
                 source: this.publicRuntimeConfig.authProviders.etherpad.path + '/:roomId',
                 destination: '/etherpad/:roomId',
-            },
-        ];
+            });
+        }
+        if (this.publicRuntimeConfig.authProviders.spacedeck) {
+            rewriteConfig.push(
+                {
+                    source: this.publicRuntimeConfig.authProviders.spacedeck.path,
+                    destination: '/spacedeck',
+                },
+                {
+                    source: this.publicRuntimeConfig.authProviders.spacedeck.path + '/:roomId',
+                    destination: '/spacedeck/:roomId',
+                });
+        }
+
+        return rewriteConfig;
     },
     webpack: WebpackConfig,
 };