lfss 0.1.0__py3-none-any.whl → 0.2.1__py3-none-any.whl

frontend/scripts.js

@@ -0,0 +1,419 @@
+import Connector from './api.js';
+import { permMap } from './api.js';
+import { formatSize, decodePathURI, ensurePathURI, copyToClipboard, getRandomString, cvtGMT2Local, debounce } from './utils.js';
+
+const conn = new Connector();
+let userRecord = null;
+
+const endpointInput = document.querySelector('input#endpoint');
+const tokenInput = document.querySelector('input#token');
+const pathInput = document.querySelector('input#path');
+const pathBackButton = document.querySelector('span#back-btn');
+const pathHintDiv = document.querySelector('#position-hint');
+const pathHintLabel = document.querySelector('#position-hint label');
+const tbody = document.querySelector('#files-table-body');
+const uploadFilePrefixLabel = document.querySelector('#upload-file-prefix');
+const uploadFileSelector = document.querySelector('#file-selector');
+const uploadFileNameInput = document.querySelector('#file-name');
+const uploadButton = document.querySelector('#upload-btn');
+const randomizeFnameButton = document.querySelector('#randomize-fname-btn');
+
+conn.config.endpoint = endpointInput.value;
+conn.config.token = tokenInput.value;
+
+{
+    const endpoint = window.localStorage.getItem('endpoint');
+    if (endpoint){
+        endpointInput.value = endpoint;
+        conn.config.endpoint = endpoint;
+    }
+    const token = window.localStorage.getItem('token');
+    if (token){
+        tokenInput.value = token;
+        conn.config.token = token;
+    }
+    const path = window.localStorage.getItem('path');
+    if (path){
+        pathInput.value = path;
+    }
+    uploadFilePrefixLabel.textContent = pathInput.value;
+    maybeRefreshUserRecord().then(
+        () => maybeRefreshFileList()
+    );
+}
+
+function onPathChange(){
+    uploadFilePrefixLabel.textContent = pathInput.value;
+    window.localStorage.setItem('path', pathInput.value);
+    maybeRefreshFileList();
+}
+
+endpointInput.addEventListener('blur', () => {
+    conn.config.endpoint = endpointInput.value;
+    window.localStorage.setItem('endpoint', endpointInput.value);
+    maybeRefreshUserRecord().then(
+        () => maybeRefreshFileList()
+    );
+});
+tokenInput.addEventListener('blur', () => {
+    conn.config.token = tokenInput.value;
+    window.localStorage.setItem('token', tokenInput.value);
+    maybeRefreshUserRecord().then(
+        () => maybeRefreshFileList()
+    );
+});
+pathInput.addEventListener('input', () => {
+    onPathChange();
+});
+pathBackButton.addEventListener('click', () => {
+    const path = pathInput.value;
+    if (path.endsWith('/')){
+        pathInput.value = path.split('/').slice(0, -2).join('/') + '/';
+    }
+    else {
+        pathInput.value = path.split('/').slice(0, -1).join('/') + '/';
+    }
+    onPathChange();
+});
+
+function onFileNameInpuChange(){
+    const fileName = uploadFileNameInput.value;
+    if (fileName.length === 0){
+        uploadFileNameInput.classList.remove('duplicate');
+    }
+    else {
+        const p = ensurePathURI(pathInput.value + fileName);
+        conn.getMetadata(p).then(
+            (data) => {
+                console.log("Got file meta", data);
+                if (data===null) uploadFileNameInput.classList.remove('duplicate');
+                else if (data.url) uploadFileNameInput.classList.add('duplicate');
+                else throw new Error('Invalid response');
+            }
+        );
+    }
+}
+
+randomizeFnameButton.addEventListener('click', () => {
+    let currentName = uploadFileNameInput.value;
+    let newName = getRandomString(24);
+    const dotSplit = currentName.split('.');
+    let ext = '';
+    if (dotSplit.length > 1){
+        ext = dotSplit.pop();
+    }
+    if (ext.length > 0){
+        newName += '.' + ext;
+    }
+    uploadFileNameInput.value = newName;
+    onFileNameInpuChange();
+});
+uploadFileSelector.addEventListener('change', () => {
+    uploadFileNameInput.value = uploadFileSelector.files[0].name;
+    onFileNameInpuChange();
+});
+uploadButton.addEventListener('click', () => {
+    const file = uploadFileSelector.files[0];
+    let path = pathInput.value;
+    let fileName = uploadFileNameInput.value;
+    if (fileName.length === 0){
+        throw new Error('File name cannot be empty');
+    }
+    if (fileName.endsWith('/')){
+        throw new Error('File name cannot end with /');
+    }
+    path = path + fileName;
+    conn.put(path, file)
+        .then(() => {
+            refreshFileList();
+            uploadFileNameInput.value = '';
+            onFileNameInpuChange();
+        }
+    );
+});
+
+uploadFileNameInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter'){
+        uploadButton.click();
+    }
+});
+uploadFileNameInput.addEventListener('input', debounce(onFileNameInpuChange, 500));
+
+{
+    window.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    });
+    window.addEventListener('drop', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const files = e.dataTransfer.files;
+        if (files.length == 1){
+            uploadFileSelector.files = files;
+            uploadFileNameInput.value = files[0].name;
+            uploadFileNameInput.focus();
+        }
+        else if (files.length > 1){
+            let dstPath = pathInput.value + uploadFileNameInput.value;
+            if (!dstPath.endsWith('/')){ dstPath += '/'; }
+            if (!confirm(`
+You are trying to upload multiple files at once. 
+This will directly upload the files to the [${dstPath}] directory without renaming. 
+Note that same name files will be overwritten.
+Are you sure you want to proceed?
+                `)){ return; }
+            
+            let counter = 0;
+            async function uploadFile(...args){
+                const [file, path] = args;
+                await conn.put(path, file);
+                counter += 1;
+                console.log("Uploading file: ", counter, "/", files.length);
+            }
+            
+            let promises = [];
+            for (let i = 0; i < files.length; i++){
+                const file = files[i];
+                const path = dstPath + file.name;
+                promises.push(uploadFile(file, path));
+            }
+            Promise.all(promises).then(
+                () => {
+                    refreshFileList();
+                }
+            );
+        }
+    });
+}
+
+function maybeRefreshFileList(){
+    if (
+        pathInput.value && pathInput.value.length > 0 && pathInput.value.endsWith('/')
+    ){
+        refreshFileList();
+    }
+}
+
+function refreshFileList(){
+    conn.listPath(pathInput.value)
+        .then(data => {
+            pathHintDiv.classList.remove('disconnected');
+            pathHintDiv.classList.add('connected');
+            pathHintLabel.textContent = pathInput.value;
+            tbody.innerHTML = '';
+
+            console.log("Got data", data);
+
+            if (!data.dirs){ data.dirs = []; }
+            if (!data.files){ data.files = []; }
+
+            data.dirs.forEach(dir => {
+                const tr = document.createElement('tr');
+                {
+                    const nameTd = document.createElement('td');
+                    if (dir.url.endsWith('/')){
+                        dir.url = dir.url.slice(0, -1);
+                    }
+                    const dirName = dir.url.split('/').pop();
+                    const dirLink = document.createElement('a');
+                    dirLink.textContent = decodePathURI(dirName);
+                    dirLink.addEventListener('click', () => {
+                        let dstUrl = dir.url + (dir.url.endsWith('/') ? '' : '/');
+                        dstUrl = decodePathURI(dstUrl);
+                        pathInput.value = dstUrl;
+                        onPathChange();
+                    });
+                    dirLink.href = '#';
+                    nameTd.appendChild(dirLink);
+
+                    tr.appendChild(nameTd);
+                    tbody.appendChild(tr);
+                }
+
+                {
+                    const sizeTd = document.createElement('td');
+                    sizeTd.textContent = formatSize(dir.size);
+                    tr.appendChild(sizeTd);
+                }
+                {
+                    const dateTd = document.createElement('td');
+                    tr.appendChild(dateTd);
+                }
+                {
+                    const dateTd = document.createElement('td');
+                    tr.appendChild(dateTd);
+                }
+                {
+                    const accessTd = document.createElement('td');
+                    tr.appendChild(accessTd);
+                }
+                {
+                    const actTd = document.createElement('td');
+                    const actContainer = document.createElement('div');
+                    actContainer.classList.add('action-container');
+
+                    const downloadButton = document.createElement('a');
+                    downloadButton.textContent = 'Download';
+                    downloadButton.href = conn.config.endpoint + '/_api/bundle?path=' + dir.url + (dir.url.endsWith('/') ? '' : '/');
+                    actContainer.appendChild(downloadButton);
+
+                    const deleteButton = document.createElement('a');
+                    deleteButton.textContent = 'Delete';
+                    deleteButton.href = '#';
+                    deleteButton.addEventListener('click', () => {
+                        const dirurl = dir.url + (dir.url.endsWith('/') ? '' : '/');
+                        if (!confirm('[Important] Are you sure you want to delete path ' + dirurl + '?')){
+                            return;
+                        }
+                        conn.delete(dirurl)
+                            .then(() => {
+                                refreshFileList();
+                            });
+                    });
+                    actContainer.appendChild(deleteButton);
+                    actTd.appendChild(actContainer);
+                    tr.appendChild(actTd);
+                }
+
+            });
+            data.files.forEach(file => {
+                const tr = document.createElement('tr');
+                {
+                    const nameTd = document.createElement('td');
+                    const plainUrl = decodePathURI(file.url);
+                    const fileName = plainUrl.split('/').pop();
+                    nameTd.textContent = fileName;
+                    tr.appendChild(nameTd);
+                    tbody.appendChild(tr);
+                }
+
+                {
+                    const sizeTd = document.createElement('td');
+                    const fileSize = file.file_size;
+                    sizeTd.textContent = formatSize(fileSize);
+                    tr.appendChild(sizeTd);
+                }
+
+                {
+                    const dateTd = document.createElement('td');
+                    const accessTime = file.access_time;
+                    dateTd.textContent = cvtGMT2Local(accessTime);
+                    tr.appendChild(dateTd);
+                }
+
+                {
+                    const dateTd = document.createElement('td');
+                    const createTime = file.create_time;
+                    dateTd.textContent = cvtGMT2Local(createTime);
+                    tr.appendChild(dateTd);
+                }
+
+                {
+                    const accessTd = document.createElement('td');
+                    if (file.owner_id === userRecord.id || userRecord.is_admin){
+                        const select = document.createElement('select');
+                        select.classList.add('access-select');
+                        const options = ['unset', 'public', 'protected', 'private'];
+                        options.forEach(opt => {
+                            const option = document.createElement('option');
+                            option.textContent = opt;
+                            select.appendChild(option);
+                        });
+                        select.value = permMap[file.permission];
+                        select.addEventListener('change', () => {
+                            const perm = options.indexOf(select.value);
+                            {
+                                // ensure the permission is correct!
+                                const permStr = options[perm];
+                                const permStrFromMap = permMap[perm];
+                                if (permStr !== permStrFromMap){
+                                    console.warn("Permission string mismatch", permStr, permStrFromMap);
+                                }
+                            }
+                            conn.setFilePermission(file.url, perm)
+                        });
+                            
+                        accessTd.appendChild(select);
+                    }
+                    tr.appendChild(accessTd);
+                }
+
+                {
+                    const actTd = document.createElement('td');
+                    const actContainer = document.createElement('div');
+                    actContainer.classList.add('action-container');
+
+                    const copyButton = document.createElement('a');
+                    copyButton.textContent = 'Copy';
+                    copyButton.href = '#';
+                    copyButton.addEventListener('click', () => {
+                        copyToClipboard(conn.config.endpoint + '/' + file.url);
+                    });
+                    actContainer.appendChild(copyButton);
+
+                    const viewButton = document.createElement('a');
+                    viewButton.textContent = 'View';
+                    viewButton.href = conn.config.endpoint + '/' + file.url + '?token=' + conn.config.token;
+                    viewButton.target = '_blank';
+                    actContainer.appendChild(viewButton);
+
+                    const downloadBtn = document.createElement('a');
+                    downloadBtn.textContent = 'Download';
+                    downloadBtn.href = conn.config.endpoint + '/' + file.url + '?asfile=true&token=' + conn.config.token;
+                    actContainer.appendChild(downloadBtn);
+
+                    const deleteButton = document.createElement('a');
+                    deleteButton.textContent = 'Delete';
+                    deleteButton.href = '#';
+                    deleteButton.addEventListener('click', () => {
+                        if (!confirm('Are you sure you want to delete ' + file.url + '?')){
+                            return;
+                        }
+                        conn.delete(file.url)
+                            .then(() => {
+                                refreshFileList();
+                            });
+                    });
+                    actContainer.appendChild(deleteButton);
+
+                    actTd.appendChild(actContainer);
+                    tr.appendChild(actTd);
+                }
+
+            });
+        }, 
+        (err) => {
+            pathHintDiv.classList.remove('connected');
+            pathHintDiv.classList.add('disconnected');
+            pathHintLabel.textContent = pathInput.value;
+            tbody.innerHTML = '';
+            console.log("Error");
+            console.error(err);
+        }
+    );
+}
+
+
+async function maybeRefreshUserRecord(){
+    if (endpointInput.value && tokenInput.value){
+        await refreshUserRecord();
+    }
+}
+
+async function refreshUserRecord(){
+    try{
+        userRecord = await conn.whoami();
+        console.log("User record: ", userRecord);
+    }
+    catch (err){
+        userRecord = null;
+        console.error("Failed to get user record");
+        return false;
+    }
+
+    // UI updates.
+
+    return true;
+}
+
+console.log("Hello World");

frontend/styles.css

@@ -0,0 +1,211 @@
+
+body{
+    font-family: Arial, sans-serif;
+    background-color: #f1f1f1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+input[type=button], button{
+    background-color: #195f8b;
+    color: white;
+    padding: 0.8rem;
+    margin: 0;
+    border: none;
+    border-radius: 0.2rem;
+    cursor: pointer;
+}
+
+input[type=text], input[type=password]
+{
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 0.2rem;
+    height: 1rem;
+}
+
+
+div.container.header, div.container.footer{
+    position: fixed;
+    left: 0;
+    width: 100%;
+    background-color: white;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+div.container.header{
+    top: 0;
+    height: 10rem;
+}
+div.container.footer{
+    bottom: 0;
+    height: 4rem;
+}
+
+div.container.content{
+    width: 100%;
+    padding-inline: 0.5rem;
+    margin-top: calc(10rem + 1rem);
+    margin-bottom: calc(4rem + 0.5rem);
+}
+
+.input-group{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: calc(100% - 2rem);
+    gap: 10px;
+}
+.input-group label{
+    min-width: 5rem;
+}
+
+span#back-btn{
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    left: 1.5rem;
+    width: 1rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+    background-color: rgb(189, 203, 211);
+    cursor: pointer;
+}
+
+span#back-btn:hover{
+    background-color: rgb(169, 183, 191);
+}
+
+span#randomize-fname-btn{
+    position: absolute;
+    right: calc(6rem + 1rem + 1rem);
+    height: 2rem;
+    width: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+span#randomize-fname-btn:hover{
+    background-color: rgb(240, 244, 246);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    transform: scale(1.1);
+}
+span#randomize-fname-btn:active{
+    transform: none;
+}
+
+input#path{
+    padding-left: 3rem;
+}
+
+#upload-btn{
+    background-color: #195f8b;
+    color: white;
+    min-width: 6rem;
+    margin: 0;
+    border: none;
+    border-radius: 0.2rem;
+    cursor: pointer;
+}
+
+div#position-hint{
+    color: rgb(138, 138, 138);
+    border-radius: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.25rem;
+    height: 1rem;
+    margin-bottom: 0.25rem;
+
+    padding: 0.25rem;
+}
+div#position-hint span{
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+}
+div#position-hint.disconnected span{
+    background-color: red;
+}
+div#position-hint.connected span{
+    background-color: rgb(0, 166, 0);
+}
+
+div#settings {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+label#bucket-label{
+    color: #195f8b;
+}
+
+table#files {
+    width: 100%;
+    border-collapse: collapse;
+}
+table#files th {
+    background-color: #195f8b;
+    color: white;
+}
+table#files th, table#files td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+table#files tr {
+    white-space: nowrap;
+}
+table#files tr:hover {
+    background-color: #eaeaea;
+    transition: all 0.2s;
+}
+table#files tr td:nth-child(2), table#files tr td:nth-child(5){
+    width: 1%;
+}
+table#files tr td:nth-child(3), table#files tr td:nth-child(4), table#files tr td:nth-child(6){
+    width: 12%;
+}
+
+label#upload-file-prefix{
+    width: 800px;
+    text-align: right;
+}
+input#file-name.duplicate{
+    background-color: #ff001511
+}
+
+.action-container{
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+a{
+    color: #195f8b;
+    text-decoration: none;
+}
+.action-container a{
+    padding: 0.2rem;
+    padding-inline: 0.5rem;
+    border: 1px solid #195f8b;
+    border-radius: 0.25rem;
+    color: #195f8b;
+    transition: all 0.2s;
+}
+.action-container a:hover{
+    background-color: #195f8b;
+    transform: scale(1.1);
+    color: white;
+}

frontend/utils.js

@@ -0,0 +1,83 @@
+
+export function formatSize(size){
+    const sizeInKb = size / 1024;
+    const sizeInMb = sizeInKb / 1024;
+    const sizeInGb = sizeInMb / 1024;
+    if (sizeInGb > 1){
+        return sizeInGb.toFixed(2) + ' GB';
+    }
+    else if (sizeInMb > 1){
+        return sizeInMb.toFixed(2) + ' MB';
+    }
+    else if (sizeInKb > 1){
+        return sizeInKb.toFixed(2) + ' KB';
+    }
+    else {
+        return size + ' B';
+    }
+}
+
+export function copyToClipboard(text){
+    function secureCopy(text){
+        navigator.clipboard.writeText(text);
+    }
+    function unsecureCopy(text){
+        const el = document.createElement('textarea');
+        el.value = text;
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand('copy');
+        document.body.removeChild(el);
+    }
+    if (navigator.clipboard){
+        secureCopy(text);
+    }
+    else {
+        unsecureCopy(text);
+    }
+}
+
+export function encodePathURI(path){
+    return path.split('/').map(encodeURIComponent).join('/');
+}
+
+export function decodePathURI(path){
+    return path.split('/').map(decodeURIComponent).join('/');
+}
+
+export function ensurePathURI(path){
+    return encodePathURI(decodePathURI(path));
+}
+
+export function getRandomString(n, additionalCharset='0123456789_-(=)[]{}'){
+    let result = '';
+    let charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    const firstChar = charset[Math.floor(Math.random() * charset.length)];
+    const lastChar = charset[Math.floor(Math.random() * charset.length)];
+    result += firstChar;
+    charset += additionalCharset;
+    for (let i = 0; i < n-2; i++){
+        result += charset[Math.floor(Math.random() * charset.length)];
+    }
+    result += lastChar;
+    return result;
+};
+
+/**
+ * @param {string} dateStr 
+ * @returns {string}
+ */
+export function cvtGMT2Local(dateStr){
+    const gmtdate = new Date(dateStr);
+    const localdate = new Date(gmtdate.getTime() + gmtdate.getTimezoneOffset() * 60000);
+    return localdate.toISOString().slice(0, 19).replace('T', ' ');
+}
+
+export function debounce(fn,wait){
+    let timeout;
+    return function(...args){
+        const context = this;
+        if (timeout) clearTimeout(timeout);
+        timeout = setTimeout(() => fn.apply(context, args), wait);
+    }
+}