lfss 0.12.3__py3-none-any.whl → 0.13.0__py3-none-any.whl

docs/changelog.md

@@ -1,3 +1,20 @@
+
+## 0.13
+
+### 0.13.0
+- Break: Py client GET API not handle 404 as None. 
+- Break & Fix: Move will transfer ownership.
+- Delete user transfer ownership of files outside their directory.
+- In favor of `Client` instead of `Connector` for API client class.
+- Add `/move` and `/set-perm` api for moving files and setting file permission.
+- Add `/user` prefix for user related api.
+- Add CLI command `mv`, `cp`, and `perm`. 
+- Add `name` method for record classes. 
+- Improve assertion error handling. 
+- Add user storage query api and query exists api.
+- Non-exist user path will return 404 instead of 400.
+- Frontend add editor page for text files.
+
 ## 0.12
 
 ### 0.12.3

frontend/api.js

@@ -59,13 +59,51 @@ async function fmtFailedResponse(res){
 export default class Connector {
 
     constructor(){
+        // get default endpoint from url
+        const searchParams = (new URL(window.location.href)).searchParams;
+        const defaultToken = searchParams.get('lfss-token') || '';
+        const defaultEndpoint = searchParams.get('lfss-endpoint') || 
+                        (searchParams.origin == 'null' ? 'http://localhost:8000' : searchParams.origin);
+
         /** @type {Config} */
         this.config = {
-            endpoint: 'http://localhost:8000',
-            token: ''
+            endpoint: defaultEndpoint,
+            token: defaultToken
         }
     }
 
+    async getText(path){
+        if (path.startsWith('/')){ path = path.slice(1); }
+        const res = await fetch(this.config.endpoint + '/' + path, {
+            method: 'GET',
+            headers: {
+             "Authorization": 'Bearer ' + this.config.token
+            },
+        });
+        if (res.status != 200){
+            throw new Error(`Failed to get file, status code: ${res.status}, message: ${await fmtFailedResponse(res)}`);
+        }
+        return await res.text();
+    }
+
+    /**
+     * @param {string} path - the path to the file (url)
+     * @param {string} text - the text content to upload
+     * @param {Object} [options] - Optional upload configuration.
+     * @param {'abort' | 'overwrite' | 'skip'} [options.conflict='abort'] - Conflict resolution strategy:  
+     * @param {string} [options.type='text/plain'] - The MIME type of the text file.
+     * NOTE: type is only a hint, the backend may ignore it...
+    */
+    async putText(path, text, {
+        conflict = 'abort',
+        type = 'text/plain'
+    }){
+        const file = new Blob([text], { type: type });
+        return await this.put(path, file, {
+            conflict: conflict
+        });
+    }
+
     /**
     * @param {string} path - the path to the file (url)
     * @param {File} file - the file to upload
@@ -393,7 +431,7 @@ export default class Connector {
      * @returns {Promise<UserRecord>} - the promise of the request
      */
     async whoami(){
-        const res = await fetch(this.config.endpoint + '/_api/whoami', {
+        const res = await fetch(this.config.endpoint + '/_api/user/whoami', {
             method: 'GET',
             headers: {
                 'Authorization': 'Bearer ' + this.config.token
@@ -405,13 +443,36 @@ export default class Connector {
         return await res.json();
     };
 
+    /**
+     * List peer users
+     * @param {Object} [options] - Optional configuration.
+     * @param {number} [options.level=1] - The level of users to list. 1 for at leaset read permission
+     * @param {boolean} [options.incoming=false] - Whether to list incoming users (can access me) or outgoing users (I can access)
+     * @returns {Promise<UserRecord[]>} - the promise of the request
+     */
+    async listPeers({ level = 1, incoming = false } = {}){
+        const dst = new URL(this.config.endpoint + '/_api/user/list-peers');
+        dst.searchParams.append('level', level);
+        dst.searchParams.append('incoming', incoming);
+        const res = await fetch(dst.toString(), {
+            method: 'GET',
+            headers: {
+                'Authorization': 'Bearer ' + this.config.token
+            },
+        });
+        if (res.status != 200){
+            throw new Error('Failed to list peer users, status code: ' + res.status);
+        }
+        return await res.json();
+    }
+
     /**
      * @param {string} path - file path(url)
      * @param {number} permission - please refer to the permMap
      */
     async setFilePermission(path, permission){
         if (path.startsWith('/')){ path = path.slice(1); }
-        const dst = new URL(this.config.endpoint + '/_api/meta');
+        const dst = new URL(this.config.endpoint + '/_api/set-perm');
         dst.searchParams.append('path', path);
         dst.searchParams.append('perm', permission);
         const res = await fetch(dst.toString(), {
@@ -432,9 +493,9 @@ export default class Connector {
     async move(path, newPath){
         if (path.startsWith('/')){ path = path.slice(1); }
         if (newPath.startsWith('/')){ newPath = newPath.slice(1); }
-        const dst = new URL(this.config.endpoint + '/_api/meta');
-        dst.searchParams.append('path', path);
-        dst.searchParams.append('new_path', newPath);
+        const dst = new URL(this.config.endpoint + '/_api/move');
+        dst.searchParams.append('src', path);
+        dst.searchParams.append('dst', newPath);
         const res = await fetch(dst.toString(), {
             method: 'POST',
             headers: {
@@ -496,8 +557,28 @@ export async function listPath(conn, path, {
 } = {}){
 
     if (path === '/' || path === ''){
-        // this handles separate case for the root directory... please refer to the backend implementation
-        return [await conn.listPath(''), {dirs: 0, files: 0}];
+        // this handles separate case for the root directory
+        const dirnames = [
+            (await conn.whoami()).username + '/'
+        ].concat(
+            (await conn.listPeers({ level: 1, incoming: false })).map(u => u.username + '/')
+        )
+        return [
+            {
+                dirs: dirnames.map(dirname => ({
+                    url: dirname,
+                    size: -1,
+                    create_time: '',
+                    update_time: '',
+                    access_time: '',
+                    n_files: -1
+                })),
+                files: []
+            }, {
+                dirs: dirnames.length,
+                files: 0
+            }
+        ]
     }
 
     orderBy = orderBy == 'none' ? '' : orderBy;

frontend/base.css

@@ -0,0 +1,33 @@
+
+
+html {
+    overflow: -moz-scrollbars-vertical;
+    overflow-y: scroll;
+}
+
+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.25rem;
+    cursor: pointer;
+}
+
+input[type=text], input[type=password]
+{
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+    height: 1rem;
+}

frontend/edit.css

@@ -0,0 +1,102 @@
+@import url('./base.css');
+
+body{
+    font-family: Arial, sans-serif;
+    background-color: #f1f1f1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+}
+
+div#header {
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+
+    background-color: white;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    padding-block: 0.5rem;
+    padding-inline: 1rem;
+    z-index: 1000;
+}
+
+div#header .left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    flex-grow: 1;
+    padding-inline: 0.5rem;
+}
+
+div#header .right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    padding-inline: 0.5rem;
+}
+
+span.unicode-btn{
+    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;
+}
+
+#file-path-label {
+    font-weight: bold;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+#new-hint{
+    font-size: small;
+    font-weight: bold;
+    color: green;
+    margin-left: 0.25rem;
+    background-color: #e0ffe0;
+    border-radius: 0.25rem;
+    padding: 0.1rem 0.25rem;
+    user-select: none;
+    pointer-events: none;
+}
+
+textarea#editor{
+    width: max(90vw, 500px);
+    height: 80vh;
+    margin-top: 1rem;
+    padding: 1rem;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    resize: none;
+    outline: none;
+}
+
+#save-hint{
+    font-size: 0.9rem;
+    color: white;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    background-color: green;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+}

frontend/edit.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LFSS-Editor</title>
+    <link rel="stylesheet" href="./edit.css">
+    <link rel="stylesheet" href="./login.css">
+</head>
+<body>
+    
+    <div id="header">
+        <div class="left">
+            <span id='home-btn' class="unicode-btn">⬅️</span>
+            <label id="file-path-label"></label>
+        </div>
+        <div class="right">
+            <span id='save-hint' class="hint">Saved</span>
+            <span id='save-btn' class="unicode-btn">💾</span>
+        </div>
+    </div>
+
+    <div class="container content" id="view">
+        <textarea id="editor"></textarea>
+    </div>
+
+    <script src="./edit.js" type="module"></script>
+</body>
+</html>

frontend/edit.js

@@ -0,0 +1,130 @@
+import { store } from './state.js';
+import { maybeShowLoginPanel } from './login.js';
+
+const MAX_FILE_SIZE_MB = 5;
+
+{
+    // initialization
+    store.init();
+    maybeShowLoginPanel(store, ).then(
+        (user) => {
+            console.log("User record", user);
+        }
+    )
+}
+
+const filePathLabel = document.getElementById('file-path-label');
+const textArea = document.querySelector('#editor');
+const backhomeBtn = document.getElementById('home-btn');
+const saveBtn = document.getElementById('save-btn');
+const saveHint = document.getElementById('save-hint');
+
+// disable until file is loaded
+saveBtn.disabled = true;
+textArea.disabled = true;
+
+backhomeBtn.addEventListener('click', () => {
+    const urlFrom = new URL(window.location.href);
+    if (urlFrom.searchParams.has('from')) {
+        const from = urlFrom.searchParams.get('from');
+        window.location.href = from;
+        return;
+    }
+    window.location.href = './index.html';
+});
+
+// make textarea tab insert spaces
+textArea.addEventListener('keydown', (e) => {
+    const TAB_SIZE = 4;
+    if (e.key === 'Tab') {
+        e.preventDefault();
+        const start = textArea.selectionStart;
+        const end = textArea.selectionEnd;
+        textArea.value = textArea.value.substring(0, start) + ' '.repeat(TAB_SIZE) + textArea.value.substring(end);
+        textArea.selectionStart = textArea.selectionEnd = start + TAB_SIZE;
+    }
+});
+
+const urlParams = new URLSearchParams(window.location.search);
+const filePath = urlParams.get('p') || urlParams.get('path');
+
+function raiseError(msg) {
+    filePathLabel.textContent = `Error: ${msg}`;
+    filePathLabel.style.color = 'darkred';
+    textArea.disabled = true;
+    throw new Error(msg);
+}
+
+
+if (!filePath) {
+    raiseError('No file specified');
+}
+if (filePath.endsWith('/')) {
+    raiseError('Path cannot be a directory');
+}
+
+async function loadContent() {
+    content = await store.conn.getText(filePath).catch((e) => {
+        raiseError(`Failed to read file "${filePath}": ${e.message}`);
+    });
+    textArea.value = content;
+    return content;
+}
+
+// check existence
+let ftype='';
+let content = '';
+
+const fmeta = await store.conn.getMetadata(filePath).catch((e) => {
+    raiseError(`File "${filePath}" does not exist or cannot be accessed.`);
+});
+filePathLabel.textContent = filePath;
+if (fmeta != null) {
+    ftype = fmeta.mime_type || '';
+    saveHint.style.opacity = 1;
+    if (fmeta.file_size && fmeta.file_size > MAX_FILE_SIZE_MB * 1024 * 1024) {
+        raiseError(`File too large (${(fmeta.file_size / (1024 * 1024)).toFixed(2)} MB). Max allowed size is ${MAX_FILE_SIZE_MB} MB.`);
+    }
+    content = await loadContent();
+}
+else {
+    const newHint = document.createElement('span');
+    newHint.id = 'new-hint';
+    newHint.textContent = 'new';
+    filePathLabel.appendChild(newHint);
+    textArea.focus();
+}
+
+async function saveFile() {
+    const content = textArea.value;
+    try {
+        await store.conn.putText(filePath, content, {conflict: 'overwrite', type: ftype? ftype : 'text/plain'});
+        saveHint.style.opacity = 1;
+        // remove new file hint if exists
+        const newHint = document.getElementById('new-hint');
+        if (newHint) { newHint.remove(); }
+    }
+    catch (e) {
+        raiseError(`Failed to save file "${filePath}": ${e.message}`);
+    }
+}
+
+// unfreeze elements
+saveBtn.disabled = false;
+textArea.disabled = false;
+
+saveBtn.addEventListener('click', saveFile);
+textArea.addEventListener('input', () => {
+    saveHint.style.opacity = 0;
+    if (content == textArea.value){
+        saveHint.style.opacity = 1;
+    }
+});
+
+// bind Ctrl+S to save
+document.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        saveBtn.click();
+    }
+});

frontend/login.css

@@ -1,3 +1,4 @@
+@import url('./popup.css');
 
 div#login-container{
     display: flex;

frontend/scripts.js

@@ -84,10 +84,11 @@ pathBackButton.addEventListener('click', () => {
 function onFileNameInpuChange(){
     const fileName = uploadFileNameInput.value;
     if (fileName.endsWith('/')){
-        uploadFileNameInput.classList.add('duplicate');
+        uploadFileNameInput.classList.add('red-bg');
         return;
     }
     if (fileName.length === 0){
+        uploadFileNameInput.classList.remove('red-bg');
         uploadFileNameInput.classList.remove('duplicate');
     }
     else {
@@ -95,9 +96,15 @@ function onFileNameInpuChange(){
         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');
+                if (data===null) {
+                    uploadFileNameInput.classList.remove('red-bg');
+                    uploadFileNameInput.classList.remove('duplicate');
+                }
+                else if (data.url){
+                    uploadFileNameInput.classList.add('duplicate');
+                }
                 else throw new Error('Invalid response');
+                updateFileUploadButton();
             }
         );
     }
@@ -117,11 +124,48 @@ randomizeFnameButton.addEventListener('click', () => {
     uploadFileNameInput.value = newName;
     onFileNameInpuChange();
 });
+function updateFileUploadButton(){
+    if (uploadFileSelector.files.length === 0){
+        // change background color to indicate new/edit
+        if (!uploadButton.classList.contains('toedit')){
+            uploadButton.classList.add('toedit');
+        }
+        if (uploadFileNameInput.classList.contains('duplicate') && !uploadFileNameInput.value.endsWith('/')){
+            uploadButton.innerHTML = 'Edit';
+            uploadButton.title = 'Edit the existing file with the specified name';
+        }
+        else {
+            uploadButton.innerHTML = 'New';
+            uploadButton.title = 'Create a new empty file with the specified name';
+        }
+    }
+    else {
+        // change background color to indicate upload
+        if (uploadButton.classList.contains('toedit')){
+            uploadButton.classList.remove('toedit');
+        }
+        uploadButton.innerHTML = 'Upload';
+        uploadButton.title = 'Upload the selected file';
+    }
+}
+updateFileUploadButton();
 uploadFileSelector.addEventListener('change', () => {
+    updateFileUploadButton();
     uploadFileNameInput.value = uploadFileSelector.files[0].name;
     onFileNameInpuChange();
 });
 uploadButton.addEventListener('click', () => {
+    // create new empty file or edit existing file
+    if (uploadFileSelector.files.length === 0){
+        const newUrl = ensurePathURI(store.dirpath + uploadFileNameInput.value);
+        const thisUrl = new URL(window.location.href);
+        thisUrl.pathname = thisUrl.pathname.replace(/\/[^\/]*$/, '/edit.html');
+        thisUrl.searchParams.set('path', newUrl);
+        thisUrl.searchParams.set('from', window.location.href);
+        window.location.href = thisUrl.href;
+        return;
+    }
+
     const file = uploadFileSelector.files[0];
     let path = store.dirpath;
     let fileName = uploadFileNameInput.value;
@@ -167,6 +211,9 @@ uploadFileNameInput.addEventListener('input', debounce(onFileNameInpuChange, 500
             uploadFileSelector.files = e.dataTransfer.files;
             uploadFileNameInput.value = e.dataTransfer.files[0].name;
             uploadFileNameInput.focus();
+            // trigger change event
+            updateFileUploadButton();
+            onFileNameInpuChange();
             return;
         }
 

frontend/styles.css

@@ -1,41 +1,9 @@
+@import "./base.css"; 
 @import "./popup.css";
 @import "./info.css";
 @import "./thumb.css";
 @import "./login.css"; 
 
-html {
-    overflow: -moz-scrollbars-vertical;
-    overflow-y: scroll;
-}
-
-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.25rem;
-    cursor: pointer;
-}
-
-input[type=text], input[type=password]
-{
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid #ccc;
-    border-radius: 0.25rem;
-    height: 1rem;
-}
-
-
 div.container.header, div.container.footer{
     position: fixed;
     left: 0;
@@ -128,6 +96,11 @@ input#path{
     border-radius: 0.2rem;
     cursor: pointer;
 }
+#upload-btn.toedit{
+    background-color: white; 
+    color: #195f8b;
+    box-shadow: 2px 2px 10px #195f8b33;
+}
 
 div#top-bar{
     color: grey;
@@ -217,9 +190,12 @@ label#upload-file-prefix{
     width: 800px;
     text-align: right;
 }
-input#file-name.duplicate{
+input#file-name.red-bg{
     background-color: #ff001511
 }
+input#file-name.duplicate{
+    background-color: #ffcc0011;
+}
 
 .action-container{
     display: flex;