From fb276d9b24a782379193af5085f161d5169a6d1f Mon Sep 17 00:00:00 2001 From: DioCrafts Date: Fri, 28 Mar 2025 08:09:18 +0100 Subject: [PATCH] adding ui sharing --- apply-migrations.sh | 62 ++ db/schema.sql | 91 ++- docker-compose.yml | 2 +- fix-userrole.sql | 69 -- migrations/20240320_create_auth_schema.sql | 65 -- migrations/20240323_add_userrole_type.sql | 37 - .../repositories/pg/user_pg_repository.rs | 32 +- static/css/style.css | 642 +++++++++++++++++- static/index.html | 3 +- static/js/app.js | 24 +- static/js/auth.js | 123 ++-- static/js/contextMenus.js | 234 +++++++ static/js/fileSharing.js | 379 +++++++++++ static/js/shared.js | 469 +++++++++++++ static/js/ui.js | 143 +++- static/locales/en.json | 88 ++- static/locales/es.json | 88 ++- static/shared.html | 196 ++++++ 18 files changed, 2452 insertions(+), 295 deletions(-) create mode 100755 apply-migrations.sh delete mode 100644 fix-userrole.sql delete mode 100644 migrations/20240320_create_auth_schema.sql delete mode 100644 migrations/20240323_add_userrole_type.sql create mode 100644 static/js/fileSharing.js create mode 100644 static/js/shared.js create mode 100644 static/shared.html diff --git a/apply-migrations.sh b/apply-migrations.sh new file mode 100755 index 00000000..67965393 --- /dev/null +++ b/apply-migrations.sh @@ -0,0 +1,62 @@ +#!/bin/bash + +# This script is used to apply all migrations in order +# It can be run manually or as part of container initialization + +# Determine run mode +if [ -z "$POSTGRES_DB" ]; then + # Manual mode - script was run from command line + + # Verify we are in the right environment + if [ ! -f "Cargo.toml" ]; then + echo "Error: This script must be run from the OxiCloud project root directory" + exit 1 + fi + + # Check if postgres container is running + POSTGRES_ID=$(docker-compose ps -q postgres 2>/dev/null) + if [ -z "$POSTGRES_ID" ]; then + echo "Error: PostgreSQL container is not running. Start it with 'docker-compose up -d postgres'" + exit 1 + fi + + # Set parameters for manual mode + DB_NAME="oxicloud" + MIGRATIONS_DIR="./migrations" + MIGRATIONS_CMD="docker-compose exec -T postgres psql -U postgres" +else + # Auto mode - script is running inside postgres container during initialization + echo "Running in PostgreSQL container initialization mode" + + # Set parameters for auto mode + DB_NAME="$POSTGRES_DB" + MIGRATIONS_DIR="/docker-entrypoint-initdb.d/migrations" + MIGRATIONS_CMD="psql -U $POSTGRES_USER" +fi + +echo "Applying migrations from $MIGRATIONS_DIR to database $DB_NAME" + +# Ensure schema is created (fallback) +$MIGRATIONS_CMD -d "$DB_NAME" -c "CREATE SCHEMA IF NOT EXISTS auth;" 2>/dev/null + +# Get each SQL file from migrations directory in alphabetical order +for sql_file in $(find $MIGRATIONS_DIR -name "*.sql" | sort); do + echo "Applying migration: $(basename $sql_file)" + + # Run the migration + if [ -z "$POSTGRES_DB" ]; then + # Manual mode - run through docker-compose + docker-compose exec -T postgres psql -U postgres -d "$DB_NAME" -f "/docker-entrypoint-initdb.d/migrations/$(basename $sql_file)" + else + # Auto mode - run directly + psql -U "$POSTGRES_USER" -d "$DB_NAME" -f "$sql_file" + fi + + # Check if migration was successful + if [ $? -ne 0 ]; then + echo "Error: Failed to apply migration $sql_file" + exit 1 + fi +done + +echo "All migrations applied successfully" \ No newline at end of file diff --git a/db/schema.sql b/db/schema.sql index 82838ed9..355013a2 100644 --- a/db/schema.sql +++ b/db/schema.sql @@ -1,12 +1,27 @@ -- OxiCloud Authentication Database Schema +-- Create schema for auth-related tables +CREATE SCHEMA IF NOT EXISTS auth; + +-- Create UserRole enum type +DO $BODY$ +BEGIN + IF NOT EXISTS ( + SELECT 1 FROM pg_type t + JOIN pg_catalog.pg_namespace n ON n.oid = t.typnamespace + WHERE t.typname = 'userrole' AND n.nspname = 'auth' + ) THEN + CREATE TYPE auth.userrole AS ENUM ('admin', 'user'); + END IF; +END $BODY$; + -- Users table -CREATE TABLE IF NOT EXISTS users ( +CREATE TABLE IF NOT EXISTS auth.users ( id VARCHAR(36) PRIMARY KEY, username VARCHAR(32) UNIQUE NOT NULL, email VARCHAR(255) UNIQUE NOT NULL, - password_hash VARCHAR(255) NOT NULL, - role VARCHAR(10) NOT NULL CHECK (role IN ('admin', 'user')), + password_hash TEXT NOT NULL, + role auth.userrole NOT NULL, storage_quota_bytes BIGINT NOT NULL DEFAULT 10737418240, -- 10GB default storage_used_bytes BIGINT NOT NULL DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP, @@ -15,40 +30,47 @@ CREATE TABLE IF NOT EXISTS users ( active BOOLEAN NOT NULL DEFAULT TRUE ); +-- Create indexes for users table +CREATE INDEX IF NOT EXISTS idx_users_username ON auth.users(username); +CREATE INDEX IF NOT EXISTS idx_users_email ON auth.users(email); + -- Sessions table for refresh tokens -CREATE TABLE IF NOT EXISTS sessions ( +CREATE TABLE IF NOT EXISTS auth.sessions ( id VARCHAR(36) PRIMARY KEY, - user_id VARCHAR(36) NOT NULL REFERENCES users(id) ON DELETE CASCADE, - refresh_token VARCHAR(255) NOT NULL, + user_id VARCHAR(36) NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, + refresh_token VARCHAR(255) NOT NULL UNIQUE, expires_at TIMESTAMP WITH TIME ZONE NOT NULL, + ip_address VARCHAR(45), -- to support IPv6 + user_agent TEXT, created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP, - revoked BOOLEAN NOT NULL DEFAULT FALSE, - UNIQUE (user_id, refresh_token) + revoked BOOLEAN NOT NULL DEFAULT FALSE ); +-- Create indexes for sessions table +CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON auth.sessions(user_id); +CREATE INDEX IF NOT EXISTS idx_sessions_refresh_token ON auth.sessions(refresh_token); +CREATE INDEX IF NOT EXISTS idx_sessions_expires_at ON auth.sessions(expires_at); +CREATE INDEX IF NOT EXISTS idx_sessions_active ON auth.sessions(user_id, revoked, expires_at) +WHERE NOT revoked AND expires_at > NOW(); + -- File ownership tracking -CREATE TABLE IF NOT EXISTS file_ownership ( - file_id VARCHAR(36) PRIMARY KEY, - user_id VARCHAR(36) NOT NULL REFERENCES users(id) ON DELETE CASCADE, - path VARCHAR(1024) NOT NULL, +CREATE TABLE IF NOT EXISTS auth.user_files ( + id SERIAL PRIMARY KEY, + user_id VARCHAR(36) NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, + file_path TEXT NOT NULL, + file_id VARCHAR(255) NOT NULL, size_bytes BIGINT NOT NULL DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP, - UNIQUE (user_id, path) + UNIQUE(user_id, file_path) ); --- Folder ownership tracking -CREATE TABLE IF NOT EXISTS folder_ownership ( - folder_id VARCHAR(36) PRIMARY KEY, - user_id VARCHAR(36) NOT NULL REFERENCES users(id) ON DELETE CASCADE, - path VARCHAR(1024) NOT NULL, - created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP, - updated_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP, - UNIQUE (user_id, path) -); +-- Create indexes for user_files +CREATE INDEX IF NOT EXISTS idx_user_files_user_id ON auth.user_files(user_id); +CREATE INDEX IF NOT EXISTS idx_user_files_file_id ON auth.user_files(file_id); -- Create admin user (password: Admin123!) -INSERT INTO users ( +INSERT INTO auth.users ( id, username, email, @@ -62,4 +84,25 @@ INSERT INTO users ( '$argon2id$v=19$m=65536,t=3,p=4$c2FsdHNhbHRzYWx0c2FsdA$H3VxE8LL2qPT31DM3loTg6D+O4MSc2sD7GjlQ5h7Jkw', -- Admin123! 'admin', 107374182400 -- 100GB for admin -) ON CONFLICT (id) DO NOTHING; \ No newline at end of file +) ON CONFLICT (id) DO NOTHING; + +-- Create test user (password: test123) +INSERT INTO auth.users ( + id, + username, + email, + password_hash, + role, + storage_quota_bytes +) VALUES ( + '11111111-1111-1111-1111-111111111111', + 'test', + 'test@oxicloud.local', + '$argon2id$v=19$m=65536,t=3,p=4$c2FsdHNhbHRzYWx0c2FsdA$ZG17Z7SFKhs9zWYbuk08CkHpyiznnZapYnxN5Vi62R4', -- test123 + 'user', + 10737418240 -- 10GB for test user +) ON CONFLICT (id) DO NOTHING; + +COMMENT ON TABLE auth.users IS 'Stores user account information'; +COMMENT ON TABLE auth.sessions IS 'Stores user session information for refresh tokens'; +COMMENT ON TABLE auth.user_files IS 'Tracks file ownership and storage utilization by users'; \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 29255615..1ea3becc 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -10,7 +10,7 @@ services: - "5432:5432" volumes: - pg_data:/var/lib/postgresql/data - - ./migrations:/docker-entrypoint-initdb.d + - ./db/schema.sql:/docker-entrypoint-initdb.d/10-schema.sql healthcheck: test: ["CMD-SHELL", "pg_isready -U postgres"] interval: 5s diff --git a/fix-userrole.sql b/fix-userrole.sql deleted file mode 100644 index 5f07d767..00000000 --- a/fix-userrole.sql +++ /dev/null @@ -1,69 +0,0 @@ --- First create the schema if it doesn't exist -CREATE SCHEMA IF NOT EXISTS auth; - --- Output diagnostic information -\echo 'Starting migration fix for auth.userrole' -\echo 'Current schemas:' -\dt auth.* -\echo 'Current types:' -SELECT n.nspname AS schema, t.typname AS type -FROM pg_type t -JOIN pg_catalog.pg_namespace n ON n.oid = t.typnamespace -WHERE n.nspname = 'auth'; -\echo '===============================' - --- Check if the type already exists and create it if not -DO $$ -BEGIN - IF NOT EXISTS ( - SELECT 1 FROM pg_type t - JOIN pg_catalog.pg_namespace n ON n.oid = t.typnamespace - WHERE t.typname = 'userrole' AND n.nspname = 'auth' - ) THEN - -- Create the type - CREATE TYPE auth.userrole AS ENUM ('admin', 'user'); - END IF; -END -$$; - --- Check if the users table exists and create it if not -DO $$ -BEGIN - IF NOT EXISTS ( - SELECT FROM information_schema.tables - WHERE table_schema = 'auth' AND table_name = 'users' - ) THEN - -- Create the users table with the proper enum type - CREATE TABLE auth.users ( - id VARCHAR(36) PRIMARY KEY, - username VARCHAR(32) NOT NULL UNIQUE, - email VARCHAR(255) NOT NULL UNIQUE, - password_hash TEXT NOT NULL, - role auth.userrole NOT NULL, - storage_quota_bytes BIGINT NOT NULL, - storage_used_bytes BIGINT NOT NULL DEFAULT 0, - created_at TIMESTAMPTZ NOT NULL, - updated_at TIMESTAMPTZ NOT NULL, - last_login_at TIMESTAMPTZ, - active BOOLEAN NOT NULL DEFAULT TRUE - ); - ELSE - -- Check if the role column is already auth.userrole type - IF EXISTS ( - SELECT FROM information_schema.columns - WHERE table_schema = 'auth' AND table_name = 'users' - AND column_name = 'role' AND data_type <> 'USER-DEFINED' - ) THEN - -- Try to convert the role column to the new enum type - BEGIN - ALTER TABLE auth.users ALTER COLUMN role TYPE auth.userrole USING - CASE WHEN role = 'admin' THEN 'admin'::auth.userrole - WHEN role = 'user' THEN 'user'::auth.userrole - ELSE 'user'::auth.userrole END; - EXCEPTION WHEN OTHERS THEN - RAISE NOTICE 'Error converting role column: %', SQLERRM; - END; - END IF; - END IF; -END -$$; \ No newline at end of file diff --git a/migrations/20240320_create_auth_schema.sql b/migrations/20240320_create_auth_schema.sql deleted file mode 100644 index 1124dc23..00000000 --- a/migrations/20240320_create_auth_schema.sql +++ /dev/null @@ -1,65 +0,0 @@ --- Create the auth schema -CREATE SCHEMA IF NOT EXISTS auth; - --- Create UserRole enum type -CREATE TYPE auth.userrole AS ENUM ('admin', 'user'); - --- Create the users table -CREATE TABLE IF NOT EXISTS auth.users ( - id VARCHAR(36) PRIMARY KEY, - username VARCHAR(32) NOT NULL UNIQUE, - email VARCHAR(255) NOT NULL UNIQUE, - password_hash TEXT NOT NULL, - role auth.userrole NOT NULL, - storage_quota_bytes BIGINT NOT NULL, - storage_used_bytes BIGINT NOT NULL DEFAULT 0, - created_at TIMESTAMPTZ NOT NULL, - updated_at TIMESTAMPTZ NOT NULL, - last_login_at TIMESTAMPTZ, - active BOOLEAN NOT NULL DEFAULT TRUE -); - --- Create an index on username and email for fast lookups -CREATE INDEX IF NOT EXISTS idx_users_username ON auth.users(username); -CREATE INDEX IF NOT EXISTS idx_users_email ON auth.users(email); - --- Create the sessions table -CREATE TABLE IF NOT EXISTS auth.sessions ( - id VARCHAR(36) PRIMARY KEY, - user_id VARCHAR(36) NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, - refresh_token VARCHAR(255) NOT NULL UNIQUE, - expires_at TIMESTAMPTZ NOT NULL, - ip_address VARCHAR(45), -- to support IPv6 - user_agent TEXT, - created_at TIMESTAMPTZ NOT NULL, - revoked BOOLEAN NOT NULL DEFAULT FALSE -); - --- Create indexes on user_id and refresh_token for fast lookups -CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON auth.sessions(user_id); -CREATE INDEX IF NOT EXISTS idx_sessions_refresh_token ON auth.sessions(refresh_token); -CREATE INDEX IF NOT EXISTS idx_sessions_expires_at ON auth.sessions(expires_at); - --- Create an index for getting active sessions -CREATE INDEX IF NOT EXISTS idx_sessions_active ON auth.sessions(user_id, revoked, expires_at) -WHERE NOT revoked AND expires_at > NOW(); - --- Create the user_files table to track ownership of files -CREATE TABLE IF NOT EXISTS auth.user_files ( - id SERIAL PRIMARY KEY, - user_id VARCHAR(36) NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, - file_path TEXT NOT NULL, - file_id VARCHAR(255) NOT NULL, - size_bytes BIGINT NOT NULL DEFAULT 0, - created_at TIMESTAMPTZ NOT NULL, - updated_at TIMESTAMPTZ NOT NULL, - UNIQUE(user_id, file_path) -); - --- Create indexes for user_files -CREATE INDEX IF NOT EXISTS idx_user_files_user_id ON auth.user_files(user_id); -CREATE INDEX IF NOT EXISTS idx_user_files_file_id ON auth.user_files(file_id); - -COMMENT ON TABLE auth.users IS 'Stores user account information'; -COMMENT ON TABLE auth.sessions IS 'Stores user session information for refresh tokens'; -COMMENT ON TABLE auth.user_files IS 'Tracks file ownership and storage utilization by users'; \ No newline at end of file diff --git a/migrations/20240323_add_userrole_type.sql b/migrations/20240323_add_userrole_type.sql deleted file mode 100644 index 94163c44..00000000 --- a/migrations/20240323_add_userrole_type.sql +++ /dev/null @@ -1,37 +0,0 @@ --- Fix the missing UserRole enum type -DO $$ -BEGIN - -- Check if the type already exists - IF NOT EXISTS ( - SELECT 1 FROM pg_type t - JOIN pg_catalog.pg_namespace n ON n.oid = t.typnamespace - WHERE t.typname = 'userrole' AND n.nspname = 'auth' - ) THEN - -- Create the type if it doesn't exist - CREATE TYPE auth.userrole AS ENUM ('admin', 'user'); - END IF; -END -$$; - --- If the table already exists but has a different role column type, --- we need to update it to use the new enum type -DO $$ -BEGIN - -- Check if the users table exists - IF EXISTS ( - SELECT FROM information_schema.tables - WHERE table_schema = 'auth' AND table_name = 'users' - ) THEN - -- Try to convert the role column to the new enum type - -- This will work if the column currently contains 'admin' or 'user' values - BEGIN - ALTER TABLE auth.users ALTER COLUMN role TYPE auth.userrole USING - CASE WHEN role = 'admin' THEN 'admin'::auth.userrole - WHEN role = 'user' THEN 'user'::auth.userrole - ELSE 'user'::auth.userrole END; - EXCEPTION WHEN OTHERS THEN - RAISE NOTICE 'Error converting role column: %', SQLERRM; - END; - END IF; -END -$$; \ No newline at end of file diff --git a/src/infrastructure/repositories/pg/user_pg_repository.rs b/src/infrastructure/repositories/pg/user_pg_repository.rs index 881f3bb2..59103efd 100644 --- a/src/infrastructure/repositories/pg/user_pg_repository.rs +++ b/src/infrastructure/repositories/pg/user_pg_repository.rs @@ -85,7 +85,7 @@ impl UserRepository for UserPgRepository { let row = sqlx::query( r#" SELECT - id, username, email, password_hash, role, + id, username, email, password_hash, role::text as role_text, storage_quota_bytes, storage_used_bytes, created_at, updated_at, last_login_at, active FROM auth.users @@ -98,9 +98,9 @@ impl UserRepository for UserPgRepository { .map_err(Self::map_sqlx_error)?; // Convert role string to UserRole enum - let role_str: String = row.get("role"); - let role = match role_str.as_str() { - "admin" => UserRole::Admin, + let role_str: Option = row.try_get("role_text").unwrap_or(None); + let role = match role_str.as_deref() { + Some("admin") => UserRole::Admin, _ => UserRole::User, }; @@ -124,7 +124,7 @@ impl UserRepository for UserPgRepository { let row = sqlx::query( r#" SELECT - id, username, email, password_hash, role, + id, username, email, password_hash, role::text as role_text, storage_quota_bytes, storage_used_bytes, created_at, updated_at, last_login_at, active FROM auth.users @@ -137,9 +137,9 @@ impl UserRepository for UserPgRepository { .map_err(Self::map_sqlx_error)?; // Convert role string to UserRole enum - let role_str: String = row.get("role"); - let role = match role_str.as_str() { - "admin" => UserRole::Admin, + let role_str: Option = row.try_get("role_text").unwrap_or(None); + let role = match role_str.as_deref() { + Some("admin") => UserRole::Admin, _ => UserRole::User, }; @@ -163,7 +163,7 @@ impl UserRepository for UserPgRepository { let row = sqlx::query( r#" SELECT - id, username, email, password_hash, role, + id, username, email, password_hash, role::text as role_text, storage_quota_bytes, storage_used_bytes, created_at, updated_at, last_login_at, active FROM auth.users @@ -176,9 +176,9 @@ impl UserRepository for UserPgRepository { .map_err(Self::map_sqlx_error)?; // Convert role string to UserRole enum - let role_str: String = row.get("role"); - let role = match role_str.as_str() { - "admin" => UserRole::Admin, + let role_str: Option = row.try_get("role_text").unwrap_or(None); + let role = match role_str.as_deref() { + Some("admin") => UserRole::Admin, _ => UserRole::User, }; @@ -276,7 +276,7 @@ impl UserRepository for UserPgRepository { let rows = sqlx::query( r#" SELECT - id, username, email, password_hash, role, + id, username, email, password_hash, role::text as role_text, storage_quota_bytes, storage_used_bytes, created_at, updated_at, last_login_at, active FROM auth.users @@ -293,9 +293,9 @@ impl UserRepository for UserPgRepository { let users = rows.into_iter() .map(|row| { // Convert role string to UserRole enum for each row - let role_str: String = row.get("role"); - let role = match role_str.as_str() { - "admin" => UserRole::Admin, + let role_str: Option = row.try_get("role_text").unwrap_or(None); + let role = match role_str.as_deref() { + Some("admin") => UserRole::Admin, _ => UserRole::User, }; diff --git a/static/css/style.css b/static/css/style.css index 997cefea..52817d26 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -888,61 +888,620 @@ body { color: #718096; } -/* Compartir diálogo */ -.share-dialog { - position: absolute; - top: 50%; - right: 50px; - width: 250px; - background-color: white; - border-radius: 8px; - box-shadow: 0 5px 20px rgba(0,0,0,0.15); - z-index: 1000; - padding: 15px; +/* Dialogs (Rename, Move, Share) */ +.rename-dialog, .share-dialog { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: none; + justify-content: center; + align-items: center; + z-index: 2000; } -.share-title { +.rename-dialog-content, .share-dialog-content { + background-color: white; + padding: 20px; + border-radius: 8px; + width: 400px; + max-width: 90%; +} + +.share-dialog-content { + width: 500px; +} + +.rename-dialog-header, .share-dialog-header { + font-size: 18px; font-weight: bold; margin-bottom: 15px; - color: #2d3748; - padding-bottom: 10px; - border-bottom: 1px solid #e0e6ed; } -.share-user { +.rename-dialog input, .share-dialog input { + width: 100%; + padding: 10px; + margin-bottom: 15px; + border: 1px solid #ddd; + border-radius: 4px; +} + +.rename-dialog-buttons, .share-dialog-buttons { + display: flex; + justify-content: flex-end; + gap: 10px; +} + +/* Share dialog specific styles */ +.shared-item-info { + padding: 10px 0; + margin-bottom: 15px; + border-bottom: 1px solid #eee; +} + +.share-options h3, #existing-shares-section h3, #new-share-section h3 { + font-size: 14px; + font-weight: 600; + margin-bottom: 10px; + color: #333; +} + +.form-group { + margin-bottom: 15px; +} + +.form-group label { + display: block; + margin-bottom: 5px; + font-weight: 500; +} + +.permission-options { + display: flex; + gap: 15px; + margin-top: 5px; +} + +.permission-option { display: flex; align-items: center; + gap: 5px; +} + +.existing-share-item { + background-color: #f8f9fa; + border-radius: 4px; + padding: 10px; margin-bottom: 10px; } -.user-avatar-small { - width: 24px; - height: 24px; - border-radius: 50%; - background-color: #dfe4ea; +.share-url { + font-size: 12px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 5px; + color: #1565c0; +} + +.share-info { + font-size: 11px; + display: flex; + gap: 15px; + margin-bottom: 10px; + color: #757575; +} + +.share-protected { + color: #1565c0; +} + +.share-expiration { + color: #b71c1c; +} + +.share-actions { + display: flex; + gap: 5px; + justify-content: flex-end; +} + +.share-link-actions { + display: flex; + gap: 10px; + margin-top: 5px; +} + +.btn-small { + font-size: 12px; + padding: 5px 10px; +} + +#notification-message { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + resize: vertical; +} + +/* Shared Resources Page Styles */ +/* Header styles for shared page */ +header { + background-color: white; + border-bottom: 1px solid #e6e6e6; + padding: 15px 20px; +} + +.header-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1280px; + margin: 0 auto; +} + +.header-actions { + display: flex; + align-items: center; + gap: 15px; +} + +.header-button { + padding: 8px 15px; + background-color: #f0f3f7; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 14px; + transition: background-color 0.2s; +} + +.header-button:hover { + background-color: #e6e9ed; +} + +/* Shared page container */ +.shared-page-container { + max-width: 1280px; + margin: 20px auto; + padding: 0 20px; +} + +.shared-header { + margin-bottom: 25px; +} + +.shared-header h2 { + font-size: 24px; + color: #2d3748; + margin-bottom: 8px; +} + +.shared-header p { + color: #718096; + font-size: 16px; +} + +/* Filters and search */ +.shared-filters { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 25px; + flex-wrap: wrap; + gap: 15px; +} + +.filter-group { + display: flex; + align-items: center; + gap: 10px; +} + +.filter-group label { + font-size: 14px; + color: #4a5568; +} + +.filter-group select { + padding: 8px 12px; + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: white; + font-size: 14px; +} + +.search-box { + display: flex; + gap: 10px; +} + +.search-box input { + padding: 8px 15px; + border: 1px solid #e2e8f0; + border-radius: 6px; + font-size: 14px; + width: 250px; +} + +.search-box button { + padding: 8px 15px; + background-color: #ff5e3a; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + transition: background-color 0.2s; +} + +.search-box button:hover { + background-color: #e64a29; +} + +/* Shared items list */ +.shared-list-container { + background-color: white; + border-radius: 10px; + box-shadow: 0 1px 3px rgba(0,0,0,0.05); + overflow: hidden; +} + +.shared-list { + width: 100%; + border-collapse: collapse; +} + +.shared-list thead th { + padding: 15px; + text-align: left; + font-weight: 600; + color: #2d3748; + background-color: #f8f9fa; + border-bottom: 1px solid #e0e6ed; +} + +.shared-list tbody td { + padding: 15px; + border-bottom: 1px solid #f0f0f0; + vertical-align: middle; +} + +.shared-item-name { + display: flex; + align-items: center; + gap: 10px; +} + +.shared-item-actions { + display: flex; + gap: 10px; +} + +.action-btn { + width: 32px; + height: 32px; + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: white; display: flex; align-items: center; justify-content: center; - font-size: 12px; - margin-right: 10px; + cursor: pointer; + transition: all 0.2s; } -.user-name { - font-size: 13px; +.action-btn:hover { + background-color: #f0f8ff; + border-color: #90cdf4; +} + +.action-icon { + font-size: 14px; +} + +/* Empty state */ +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 60px 20px; + background-color: white; + border-radius: 10px; + box-shadow: 0 1px 3px rgba(0,0,0,0.05); +} + +.empty-state-icon { + font-size: 40px; + margin-bottom: 20px; + color: #a0aec0; +} + +.empty-state h3 { + font-size: 18px; + color: #2d3748; + margin-bottom: 10px; +} + +.empty-state p { + color: #718096; + margin-bottom: 20px; + text-align: center; +} + +/* Dialog styles */ +.dialog { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: none; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.dialog.active { + display: flex; +} + +.dialog-content { + background-color: white; + border-radius: 10px; + box-shadow: 0 10px 25px rgba(0,0,0,0.1); + width: 500px; + max-width: 90%; + max-height: 90vh; + overflow-y: auto; +} + +.dialog-header { + padding: 15px 20px; + border-bottom: 1px solid #e2e8f0; + display: flex; + align-items: center; + justify-content: space-between; +} + +.dialog-header h3 { + font-size: 18px; + color: #2d3748; + margin: 0; +} + +.close-dialog-btn { + background: none; + border: none; + font-size: 24px; + cursor: pointer; + color: #a0aec0; +} + +.dialog-body { + padding: 20px; +} + +/* Share dialog specific styles */ +.share-item-info { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 20px; +} + +.item-icon { + font-size: 24px; +} + +.item-name { + font-size: 16px; + font-weight: 500; color: #2d3748; } -.add-user { +.share-link-section { + margin-bottom: 20px; +} + +.share-link-container { + display: flex; + gap: 10px; +} + +.share-link-container input { + flex-grow: 1; + padding: 10px; + border: 1px solid #e2e8f0; + border-radius: 6px; + font-size: 14px; +} + +.share-link-container button { + padding: 0 15px; + background-color: #4a5568; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + transition: background-color 0.2s; +} + +.share-link-container button:hover { + background-color: #2d3748; +} + +.share-settings { + margin-bottom: 20px; +} + +.share-setting { + margin-bottom: 15px; +} + +.share-setting label { + display: block; + margin-bottom: 8px; + font-weight: 500; + color: #4a5568; +} + +.permissions-options { + display: flex; + gap: 20px; +} + +.permissions-options label { + font-weight: normal; display: flex; align-items: center; - justify-content: center; - padding: 8px; - margin-top: 10px; - background-color: #f0f3f7; - border-radius: 50px; + gap: 5px; +} + +.password-setting, .expiration-setting { + display: flex; + align-items: center; + gap: 10px; +} + +.password-setting input[type="checkbox"], .expiration-setting input[type="checkbox"] { + width: auto; +} + +.password-setting input[type="password"], .expiration-setting input[type="date"] { + flex-grow: 1; + padding: 8px 10px; + border: 1px solid #e2e8f0; + border-radius: 6px; + font-size: 14px; +} + +.password-setting button { + padding: 8px 12px; + background-color: #4a5568; + color: white; + border: none; + border-radius: 6px; cursor: pointer; - font-size: 13px; - color: #718096; + font-size: 12px; + transition: background-color 0.2s; +} + +.password-setting button:hover { + background-color: #2d3748; +} + +.share-actions { + display: flex; + justify-content: flex-end; + gap: 10px; +} + +/* Form styles */ +.form-group { + margin-bottom: 15px; +} + +.form-group label { + display: block; + margin-bottom: 8px; + font-weight: 500; + color: #4a5568; +} + +.form-group input, .form-group textarea { + width: 100%; + padding: 10px; + border: 1px solid #e2e8f0; + border-radius: 6px; + font-size: 14px; +} + +.form-group textarea { + resize: vertical; + min-height: 80px; +} + +/* Button styles */ +.button { + padding: 8px 16px; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 14px; + transition: background-color 0.2s; +} + +.primary { + background-color: #ff5e3a; + color: white; +} + +.primary:hover { + background-color: #e64a29; +} + +.secondary { + background-color: #e2e8f0; + color: #4a5568; +} + +.secondary:hover { + background-color: #cbd5e0; +} + +.danger { + background-color: #f56565; + color: white; +} + +.danger:hover { + background-color: #e53e3e; +} + +/* Notification banner */ +.notification-banner { + position: fixed; + top: 20px; + right: 20px; + padding: 15px 20px; + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + display: flex; + align-items: center; + justify-content: space-between; + max-width: 400px; + z-index: 2000; + transform: translateY(-100px); + opacity: 0; + transition: transform 0.3s, opacity 0.3s; +} + +.notification-banner.active { + transform: translateY(0); + opacity: 1; +} + +.notification-banner.success { + border-left: 4px solid #48bb78; +} + +.notification-banner.error { + border-left: 4px solid #f56565; +} + +.close-notification-btn { + background: none; + border: none; + font-size: 18px; + cursor: pointer; + color: #a0aec0; + margin-left: 10px; } /* Responsive */ @@ -968,6 +1527,23 @@ body { .nav-item span { display: none; } + + /* Responsive styles for shared page */ + .shared-filters { + flex-direction: column; + align-items: flex-start; + } + + .shared-list thead th:nth-child(4), + .shared-list thead th:nth-child(5), + .shared-list tbody td:nth-child(4), + .shared-list tbody td:nth-child(5) { + display: none; + } + + .dialog-content { + width: 95%; + } } /* Folder selection for move dialog */ diff --git a/static/index.html b/static/index.html index d8bb0d63..b38c9705 100644 --- a/static/index.html +++ b/static/index.html @@ -14,6 +14,7 @@ + @@ -49,7 +50,7 @@ Files -
+ diff --git a/static/js/app.js b/static/js/app.js index 05429c6c..eb77490a 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -15,6 +15,10 @@ const app = { isTrashView: false, // Whether we're in trash view currentSection: 'files', // Current section: 'files' or 'trash' isSearchMode: false, // Whether we're in search mode + // File sharing related properties + shareDialogItem: null, // Item being shared in share dialog + shareDialogItemType: null, // Type of item being shared ('file' or 'folder') + notificationShareUrl: null // URL for notification dialog }; // DOM elements @@ -29,8 +33,17 @@ function initApp() { // Cache DOM elements cacheElements(); - // Create menus and dialogs - ui.initializeContextMenus(); + // Initialize file sharing module first + if (window.fileSharing && window.fileSharing.init) { + window.fileSharing.init(); + } else { + console.warn('fileSharing module not fully initialized'); + } + + // Then create menus and dialogs after modules have initialized + setTimeout(() => { + ui.initializeContextMenus(); + }, 100); // Setup event listeners setupEventListeners(); @@ -152,6 +165,13 @@ function setupEventListeners() { // Add active class to clicked item item.classList.add('active'); + // Check if this is the shared item + if (item.querySelector('span').getAttribute('data-i18n') === 'nav.shared') { + // Navigate to the shared page + window.location.href = '/shared.html'; + return; + } + // Check if this is the trash item if (item === elements.trashBtn) { // Show trash view diff --git a/static/js/auth.js b/static/js/auth.js index 6254ee06..acc9b8ff 100644 --- a/static/js/auth.js +++ b/static/js/auth.js @@ -17,46 +17,78 @@ const TOKEN_EXPIRY_KEY = 'oxicloud_token_expiry'; const USER_DATA_KEY = 'oxicloud_user'; // DOM elements -const loginPanel = document.getElementById('login-panel'); -const registerPanel = document.getElementById('register-panel'); -const adminSetupPanel = document.getElementById('admin-setup-panel'); +let loginPanel, registerPanel, adminSetupPanel; +let loginForm, registerForm, adminSetupForm; +let loginError, registerError, registerSuccess, adminSetupError; -const loginForm = document.getElementById('login-form'); -const registerForm = document.getElementById('register-form'); -const adminSetupForm = document.getElementById('admin-setup-form'); +// Initialize DOM elements only if we're on the login page +function initLoginElements() { + // Check if we're on the login page + if (!document.getElementById('login-form')) { + console.log('Not on login page, skipping element initialization'); + return false; + } + + loginPanel = document.getElementById('login-panel'); + registerPanel = document.getElementById('register-panel'); + adminSetupPanel = document.getElementById('admin-setup-panel'); -const loginError = document.getElementById('login-error'); -const registerError = document.getElementById('register-error'); -const registerSuccess = document.getElementById('register-success'); -const adminSetupError = document.getElementById('admin-setup-error'); + loginForm = document.getElementById('login-form'); + registerForm = document.getElementById('register-form'); + adminSetupForm = document.getElementById('admin-setup-form'); -// Panel toggles -document.getElementById('show-register').addEventListener('click', () => { - loginPanel.style.display = 'none'; - registerPanel.style.display = 'block'; - adminSetupPanel.style.display = 'none'; -}); + loginError = document.getElementById('login-error'); + registerError = document.getElementById('register-error'); + registerSuccess = document.getElementById('register-success'); + adminSetupError = document.getElementById('admin-setup-error'); -document.getElementById('show-login').addEventListener('click', () => { - loginPanel.style.display = 'block'; - registerPanel.style.display = 'none'; - adminSetupPanel.style.display = 'none'; -}); + // Panel toggles + document.getElementById('show-register').addEventListener('click', () => { + loginPanel.style.display = 'none'; + registerPanel.style.display = 'block'; + adminSetupPanel.style.display = 'none'; + }); -document.getElementById('show-admin-setup').addEventListener('click', () => { - loginPanel.style.display = 'none'; - registerPanel.style.display = 'none'; - adminSetupPanel.style.display = 'block'; -}); + document.getElementById('show-login').addEventListener('click', () => { + loginPanel.style.display = 'block'; + registerPanel.style.display = 'none'; + adminSetupPanel.style.display = 'none'; + }); -document.getElementById('back-to-login').addEventListener('click', () => { - loginPanel.style.display = 'block'; - registerPanel.style.display = 'none'; - adminSetupPanel.style.display = 'none'; -}); + document.getElementById('show-admin-setup').addEventListener('click', () => { + loginPanel.style.display = 'none'; + registerPanel.style.display = 'none'; + adminSetupPanel.style.display = 'block'; + }); + + document.getElementById('back-to-login').addEventListener('click', () => { + loginPanel.style.display = 'block'; + registerPanel.style.display = 'none'; + adminSetupPanel.style.display = 'none'; + }); + + return true; +} + +// Initialize login elements if on login page +const isLoginPage = initLoginElements(); // Check if we already have a valid token -document.addEventListener('DOMContentLoaded', async () => { +let authInitialized = false; +document.addEventListener('DOMContentLoaded', () => { + // Check if we're on the login page + if (!document.getElementById('login-form')) { + console.log('Not on login page, skipping auth check'); + return; + } + + if (authInitialized) { + console.log('Auth already initialized, skipping'); + return; + } + authInitialized = true; + + (async () => { try { const tokenExpiry = localStorage.getItem(TOKEN_EXPIRY_KEY); if (tokenExpiry && new Date(tokenExpiry) > new Date()) { @@ -87,17 +119,19 @@ document.addEventListener('DOMContentLoaded', async () => { } catch (error) { console.error('Authentication check failed:', error); } + })(); }); // Login form submission -loginForm.addEventListener('submit', async (e) => { - e.preventDefault(); - - // Clear previous errors - loginError.style.display = 'none'; - - const username = document.getElementById('login-username').value; - const password = document.getElementById('login-password').value; +if (isLoginPage && loginForm) { + loginForm.addEventListener('submit', async (e) => { + e.preventDefault(); + + // Clear previous errors + loginError.style.display = 'none'; + + const username = document.getElementById('login-username').value; + const password = document.getElementById('login-password').value; try { const data = await login(username, password); @@ -161,9 +195,11 @@ loginForm.addEventListener('submit', async (e) => { loginError.style.display = 'block'; } }); +} // Register form submission -registerForm.addEventListener('submit', async (e) => { +if (isLoginPage && registerForm) { + registerForm.addEventListener('submit', async (e) => { e.preventDefault(); // Clear previous messages @@ -202,9 +238,11 @@ registerForm.addEventListener('submit', async (e) => { registerError.style.display = 'block'; } }); +} // Admin setup form submission -adminSetupForm.addEventListener('submit', async (e) => { +if (isLoginPage && adminSetupForm) { + adminSetupForm.addEventListener('submit', async (e) => { e.preventDefault(); // Clear previous errors @@ -235,6 +273,7 @@ adminSetupForm.addEventListener('submit', async (e) => { adminSetupError.style.display = 'block'; } }); +} // API Functions diff --git a/static/js/contextMenus.js b/static/js/contextMenus.js index 2bf3c740..9e796fd2 100644 --- a/static/js/contextMenus.js +++ b/static/js/contextMenus.js @@ -23,6 +23,13 @@ const contextMenus = { } window.ui.closeContextMenu(); }); + + document.getElementById('share-folder-option').addEventListener('click', () => { + if (window.app.contextMenuTargetFolder) { + this.showShareDialog(window.app.contextMenuTargetFolder, 'folder'); + } + window.ui.closeContextMenu(); + }); document.getElementById('delete-folder-option').addEventListener('click', async () => { if (window.app.contextMenuTargetFolder) { @@ -42,6 +49,13 @@ const contextMenus = { window.ui.closeFileContextMenu(); }); + document.getElementById('share-file-option').addEventListener('click', () => { + if (window.app.contextMenuTargetFile) { + this.showShareDialog(window.app.contextMenuTargetFile, 'file'); + } + window.ui.closeFileContextMenu(); + }); + document.getElementById('delete-file-option').addEventListener('click', async () => { if (window.app.contextMenuTargetFile) { await window.fileOps.deleteFile( @@ -249,6 +263,226 @@ const contextMenus = { } catch (error) { console.error('Error loading folders:', error); } + }, + /** + * Show share dialog for files or folders + * @param {Object} item - File or folder object + * @param {string} itemType - 'file' or 'folder' + */ + showShareDialog(item, itemType) { + // Update dialog title based on item type + const dialogHeader = document.getElementById('share-dialog').querySelector('.share-dialog-header'); + const itemName = document.getElementById('shared-item-name'); + + // Update dialog content + dialogHeader.textContent = itemType === 'file' ? + (window.i18n ? window.i18n.t('dialogs.share_file') : 'Compartir archivo') : + (window.i18n ? window.i18n.t('dialogs.share_folder') : 'Compartir carpeta'); + + itemName.textContent = item.name; + + // Reset form + document.getElementById('share-password').value = ''; + document.getElementById('share-expiration').value = ''; + document.getElementById('share-permission-read').checked = true; + document.getElementById('share-permission-write').checked = false; + document.getElementById('share-permission-reshare').checked = false; + + // Store the current item and type for use when creating the share + window.app.shareDialogItem = item; + window.app.shareDialogItemType = itemType; + + // Check if item already has shares + const existingShares = window.fileSharing.getSharedLinksForItem(item.id, itemType); + const existingSharesContainer = document.getElementById('existing-shares-container'); + + // Clear existing shares container + existingSharesContainer.innerHTML = ''; + + if (existingShares.length > 0) { + document.getElementById('existing-shares-section').style.display = 'block'; + + // Create elements for each existing share + existingShares.forEach(share => { + const shareEl = document.createElement('div'); + shareEl.className = 'existing-share-item'; + + const expiresText = share.expires_at ? + `Vence: ${window.fileSharing.formatExpirationDate(share.expires_at)}` : + 'Sin vencimiento'; + + shareEl.innerHTML = ` + + + + `; + + existingSharesContainer.appendChild(shareEl); + }); + + // Add event listeners for copy and delete buttons + document.querySelectorAll('.copy-link-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + e.preventDefault(); + const url = btn.getAttribute('data-share-url'); + window.fileSharing.copyLinkToClipboard(url); + }); + }); + + document.querySelectorAll('.delete-link-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + e.preventDefault(); + const shareId = btn.getAttribute('data-share-id'); + + if (confirm('¿Estás seguro de que quieres eliminar este enlace compartido?')) { + window.fileSharing.removeSharedLink(shareId); + btn.closest('.existing-share-item').remove(); + + // Check if we still have shares + if (existingSharesContainer.children.length === 0) { + document.getElementById('existing-shares-section').style.display = 'none'; + } + } + }); + }); + } else { + document.getElementById('existing-shares-section').style.display = 'none'; + } + + // Show dialog + document.getElementById('share-dialog').style.display = 'flex'; + }, + + /** + * Create a shared link with the configured options + */ + createSharedLink() { + if (!window.app.shareDialogItem || !window.app.shareDialogItemType) { + window.ui.showNotification('Error', 'No se pudo compartir el elemento'); + return; + } + + // Get values from form + const password = document.getElementById('share-password').value; + const expirationDate = document.getElementById('share-expiration').value; + const permissionRead = document.getElementById('share-permission-read').checked; + const permissionWrite = document.getElementById('share-permission-write').checked; + const permissionReshare = document.getElementById('share-permission-reshare').checked; + + // Prepare options + const options = { + password: password || null, + expirationDate: expirationDate || null, + permissions: { + read: permissionRead, + write: permissionWrite, + reshare: permissionReshare + } + }; + + try { + const item = window.app.shareDialogItem; + const itemType = window.app.shareDialogItemType; + + // Create share + const shareInfo = window.fileSharing.generateSharedLink( + item.id, + itemType, + options + ); + + // Update UI with new share + const shareUrl = document.getElementById('generated-share-url'); + shareUrl.value = shareInfo.url; + document.getElementById('new-share-section').style.display = 'block'; + + // Focus and select for easy copying + shareUrl.focus(); + shareUrl.select(); + + // Show success message + window.ui.showNotification('Enlace creado', 'Enlace compartido creado correctamente'); + + // Reload existing shares + this.showShareDialog(item, itemType); + + } catch (error) { + console.error('Error creating shared link:', error); + window.ui.showNotification('Error', 'No se pudo crear el enlace compartido'); + } + }, + + /** + * Show email notification dialog + * @param {string} shareUrl - URL to share + */ + showEmailNotificationDialog(shareUrl) { + // Update dialog content + document.getElementById('notification-share-url').textContent = shareUrl; + document.getElementById('notification-email').value = ''; + document.getElementById('notification-message').value = ''; + + // Store the URL for later use + window.app.notificationShareUrl = shareUrl; + + // Show dialog + document.getElementById('notification-dialog').style.display = 'flex'; + }, + + /** + * Send share notification email + */ + sendShareNotification() { + const email = document.getElementById('notification-email').value.trim(); + const message = document.getElementById('notification-message').value.trim(); + const shareUrl = window.app.notificationShareUrl; + + if (!email || !shareUrl) { + window.ui.showNotification('Error', 'Por favor, ingresa un correo electrónico válido'); + return; + } + + // Validate email format + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(email)) { + window.ui.showNotification('Error', 'Por favor, ingresa un correo electrónico válido'); + return; + } + + try { + window.fileSharing.sendShareNotification(shareUrl, email, message); + document.getElementById('notification-dialog').style.display = 'none'; + } catch (error) { + console.error('Error sending notification:', error); + window.ui.showNotification('Error', 'No se pudo enviar la notificación'); + } + }, + + /** + * Close share dialog + */ + closeShareDialog() { + document.getElementById('share-dialog').style.display = 'none'; + window.app.shareDialogItem = null; + window.app.shareDialogItemType = null; + }, + + /** + * Close notification dialog + */ + closeNotificationDialog() { + document.getElementById('notification-dialog').style.display = 'none'; + window.app.notificationShareUrl = null; } }; diff --git a/static/js/fileSharing.js b/static/js/fileSharing.js new file mode 100644 index 00000000..3fd45e5b --- /dev/null +++ b/static/js/fileSharing.js @@ -0,0 +1,379 @@ +/** + * OxiCloud - File Sharing Module + * This file handles file sharing functionality (shared links, permissions, etc.) + */ + +// File Sharing Module +const fileSharing = { + /** + * Generate a shared link for a file or folder + * @param {string} itemId - ID of the file or folder + * @param {string} itemType - Type ('file' or 'folder') + * @param {Object} options - Sharing options (password, expiration, etc.) + * @returns {Object} - Shared link information + */ + generateSharedLink(itemId, itemType, options = {}) { + try { + // In a real implementation, this would be a call to the backend + // But for now, we'll simulate it with a mock response + + // Default options + const defaultOptions = { + password: null, + expirationDate: null, + permissions: { + read: true, + write: false, + reshare: false + } + }; + + // Merge options + const finalOptions = { ...defaultOptions, ...options }; + + // Generate a mock link (would normally come from server) + const linkId = Math.random().toString(36).substring(2, 15); + const shareToken = Math.random().toString(36).substring(2, 20); + const baseUrl = window.location.origin; + const sharedUrl = `${baseUrl}/s/${shareToken}`; + + // Create expiration date if set + let expiresAt = null; + if (finalOptions.expirationDate) { + expiresAt = new Date(finalOptions.expirationDate); + } + + // Create a mock response that matches what we'd expect from the server + const response = { + id: linkId, + type: itemType, + itemId: itemId, + url: sharedUrl, + token: shareToken, + password_protected: !!finalOptions.password, + expires_at: expiresAt ? expiresAt.toISOString() : null, + permissions: finalOptions.permissions, + created_at: new Date().toISOString(), + created_by: { + id: "current-user-id", // Would be the actual user ID + username: "current-user" // Would be the actual username + }, + access_count: 0, + // Add some UI friendly properties for shared.js compatibility + name: options.name || "Shared Item", + dateShared: new Date().toISOString(), + expiration: expiresAt ? expiresAt.toISOString() : null, + password: finalOptions.password + }; + + // In a real implementation, we would store this link in localStorage for now + // until backend implementation is ready + this.saveSharedLink(response); + + // Return the "response" as if it came from the server + return response; + } catch (error) { + console.error('Error generating shared link:', error); + throw error; + } + }, + + /** + * Save a shared link to localStorage (temporary storage until backend is ready) + * @param {Object} linkData - Shared link data + */ + saveSharedLink(linkData) { + try { + // Get existing shared links + const existingLinks = JSON.parse(localStorage.getItem('oxicloud_shared_links') || '[]'); + + // Add new link + existingLinks.push(linkData); + + // Save back to localStorage + localStorage.setItem('oxicloud_shared_links', JSON.stringify(existingLinks)); + } catch (error) { + console.error('Error saving shared link to local storage:', error); + } + }, + + /** + * Remove a shared link + * @param {string} linkId - ID of the shared link to remove + * @returns {Promise} - Success status + */ + removeSharedLink(linkId) { + try { + // Get existing shared links + const existingLinks = JSON.parse(localStorage.getItem('oxicloud_shared_links') || '[]'); + + // Filter out the link to remove + const updatedLinks = existingLinks.filter(link => link.id !== linkId); + + // Save back to localStorage + localStorage.setItem('oxicloud_shared_links', JSON.stringify(updatedLinks)); + + // Removed network delay simulation + + return true; + } catch (error) { + console.error('Error removing shared link:', error); + return false; + } + }, + + /** + * Update a shared link's properties + * @param {string} linkId - ID of the shared link to update + * @param {Object} updateData - Properties to update + * @returns {Promise} - Updated shared link + */ + updateSharedLink(linkId, updateData) { + try { + // Get existing shared links + const existingLinks = JSON.parse(localStorage.getItem('oxicloud_shared_links') || '[]'); + + // Find the link to update + const linkIndex = existingLinks.findIndex(link => link.id === linkId); + if (linkIndex === -1) { + throw new Error('Shared link not found'); + } + + // Update link data + existingLinks[linkIndex] = { + ...existingLinks[linkIndex], + ...updateData, + updated_at: new Date().toISOString() + }; + + // Save back to localStorage + localStorage.setItem('oxicloud_shared_links', JSON.stringify(existingLinks)); + + // Removed network delay simulation + + return existingLinks[linkIndex]; + } catch (error) { + console.error('Error updating shared link:', error); + throw error; + } + }, + + /** + * Get all shared links for the current user + * @returns {Promise} - Array of shared links + */ + getSharedLinks() { + try { + // Get shared links from localStorage + const links = JSON.parse(localStorage.getItem('oxicloud_shared_links') || '[]'); + + // Removed network delay simulation + + return links; + } catch (error) { + console.error('Error getting shared links:', error); + return []; + } + }, + + /** + * Get shared links for a specific item + * @param {string} itemId - ID of the file or folder + * @param {string} itemType - Type ('file' or 'folder') + * @returns {Promise} - Array of shared links for the item + */ + getSharedLinksForItem(itemId, itemType) { + try { + // Get all shared links + const allLinks = this.getSharedLinks(); + + // Filter by item ID and type + return allLinks.filter(link => link.itemId === itemId && link.type === itemType); + } catch (error) { + console.error('Error getting shared links for item:', error); + return []; + } + }, + + /** + * Check if an item has any shared links + * @param {string} itemId - ID of the file or folder + * @param {string} itemType - Type ('file' or 'folder') + * @returns {Promise} - True if the item has shared links + */ + hasSharedLinks(itemId, itemType) { + const links = this.getSharedLinksForItem(itemId, itemType); + return links.length > 0; + }, + + /** + * Copy a shared link to clipboard + * @param {string} url - URL to copy + * @returns {boolean} - Success status + */ + copyLinkToClipboard(url) { + try { + navigator.clipboard.writeText(url); + window.ui.showNotification('Enlace copiado', 'Enlace copiado al portapapeles'); + return true; + } catch (error) { + console.error('Error copying to clipboard:', error); + window.ui.showNotification('Error', 'No se pudo copiar el enlace'); + return false; + } + }, + + /** + * Format expiration date for display + * @param {string} dateString - ISO date string + * @returns {string} - Formatted date string + */ + formatExpirationDate(dateString) { + if (!dateString) return 'Sin vencimiento'; + + const date = new Date(dateString); + return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); + }, + + /** + * Send a notification about a shared resource + * @param {string} shareUrl - The URL of the shared resource + * @param {string} recipientEmail - Email of the recipient + * @param {string} message - Optional message to include + * @returns {boolean} - Success status + */ + sendShareNotification(shareUrl, recipientEmail, message = '') { + try { + // In a real implementation, this would call the backend + // For now, we'll just simulate a successful notification + console.log(`Share notification for ${shareUrl} sent to ${recipientEmail}`); + console.log(`Message: ${message || 'No message included'}`); + + // Simulate network delay + //await new Promise(resolve => setTimeout(resolve, 800)); + + window.ui.showNotification('Notificación enviada', `Se envió notificación a ${recipientEmail}`); + return true; + } catch (error) { + console.error('Error sending share notification:', error); + window.ui.showNotification('Error', 'No se pudo enviar la notificación'); + return false; + } + }, + + /** + * Initialize file sharing event listeners and UI elements + */ + init() { + // This will be called by the app.js initialization + console.log('File sharing module initialized'); + + // Add "Shared" view event listeners + document.querySelectorAll('.nav-item').forEach(item => { + if (item.querySelector('span').getAttribute('data-i18n') === 'nav.shared') { + item.addEventListener('click', () => { + window.location.href = '/shared.html'; + }); + } + }); + } +}; + +/** + * Get all shared links + * @returns {Array} Array of shared links + */ +function getSharedLinks() { + try { + return JSON.parse(localStorage.getItem('oxicloud_shared_links') || '[]'); + } catch (error) { + console.error('Error getting shared links:', error); + return []; + } +} + +/** + * Update a shared link + * @param {string} linkId - ID of the link to update + * @param {Object} updateData - Data to update + * @returns {boolean} Success status + */ +function updateSharedLink(linkId, updateData) { + try { + const links = getSharedLinks(); + const index = links.findIndex(link => link.id === linkId); + if (index === -1) return false; + + links[index] = {...links[index], ...updateData}; + localStorage.setItem('oxicloud_shared_links', JSON.stringify(links)); + return true; + } catch (error) { + console.error('Error updating shared link:', error); + return false; + } +} + +/** + * Remove a shared link + * @param {string} linkId - ID of the link to remove + * @returns {boolean} Success status + */ +function removeSharedLink(linkId) { + try { + const links = getSharedLinks(); + const filteredLinks = links.filter(link => link.id !== linkId); + localStorage.setItem('oxicloud_shared_links', JSON.stringify(filteredLinks)); + return true; + } catch (error) { + console.error('Error removing shared link:', error); + return false; + } +} + +/** + * Send a notification about a shared link + * @param {string} linkId - ID of the link + * @param {string} email - Recipient email + * @param {string} message - Optional message + * @returns {Promise} Success status + */ +function sendShareNotification(linkId, email, message = '') { + return new Promise((resolve) => { + console.log(`Notification for link ${linkId} sent to ${email}`); + console.log(`Message: ${message || 'No message'}`); + setTimeout(() => resolve(true), 500); + }); +} + +/** + * Translate text using i18n if available + * @param {string} key - Translation key + * @param {string} defaultText - Default text if translation not found + * @returns {string} Translated text + */ +function translate(key, defaultText) { + if (window.i18n && window.i18n.t) { + return window.i18n.t(key, defaultText); + } + return defaultText; +} + +/** + * Initialize i18n module + */ +function initializeI18n() { + if (window.i18n && window.i18n.init) { + window.i18n.init(); + } +} + +// Expose functions globally +window.getSharedLinks = getSharedLinks; +window.updateSharedLink = updateSharedLink; +window.removeSharedLink = removeSharedLink; +window.sendShareNotification = sendShareNotification; +window.translate = translate; +window.initializeI18n = initializeI18n; + +// Expose file sharing module globally +window.fileSharing = fileSharing; \ No newline at end of file diff --git a/static/js/shared.js b/static/js/shared.js new file mode 100644 index 00000000..164f4054 --- /dev/null +++ b/static/js/shared.js @@ -0,0 +1,469 @@ +/** + * OxiCloud Shared Resources Page + * Manages the display and interaction with shared files and folders + */ + +// Authentication check function +function checkAuthentication() { + // Names of variables from auth.js + const TOKEN_KEY = 'oxicloud_token'; + const TOKEN_EXPIRY_KEY = 'oxicloud_token_expiry'; + const USER_DATA_KEY = 'oxicloud_user'; + + const token = localStorage.getItem(TOKEN_KEY); + const tokenExpiry = localStorage.getItem(TOKEN_EXPIRY_KEY); + + if (!token || !tokenExpiry || new Date(tokenExpiry) < new Date()) { + // No token or expired token + window.location.href = '/login.html'; + return; + } + + // Display username in notification if available + const userData = JSON.parse(localStorage.getItem(USER_DATA_KEY) || '{}'); + if (userData.username) { + console.log(`Authenticated as ${userData.username}`); + } +} + +document.addEventListener('DOMContentLoaded', () => { + // Initialize i18n + initializeI18n(); + + // Elements + const sharedItemsList = document.getElementById('shared-items-list'); + const emptySharedState = document.getElementById('empty-shared-state'); + const filterType = document.getElementById('filter-type'); + const sortBy = document.getElementById('sort-by'); + const sharedSearch = document.getElementById('shared-search'); + const sharedSearchBtn = document.getElementById('shared-search-btn'); + const goToFilesBtn = document.getElementById('go-to-files'); + + // Share dialog elements + const shareDialog = document.getElementById('share-dialog'); + const shareDialogCloseBtn = shareDialog.querySelector('.close-dialog-btn'); + const shareDialogIcon = document.getElementById('share-dialog-icon'); + const shareDialogName = document.getElementById('share-dialog-name'); + const shareLinkUrl = document.getElementById('share-link-url'); + const copyLinkBtn = document.getElementById('copy-link-btn'); + const enablePassword = document.getElementById('enable-password'); + const sharePassword = document.getElementById('share-password'); + const generatePasswordBtn = document.getElementById('generate-password'); + const enableExpiration = document.getElementById('enable-expiration'); + const shareExpiration = document.getElementById('share-expiration'); + const permissionRead = document.getElementById('permission-read'); + const permissionWrite = document.getElementById('permission-write'); + const permissionReshare = document.getElementById('permission-reshare'); + const updateShareBtn = document.getElementById('update-share-btn'); + const removeShareBtn = document.getElementById('remove-share-btn'); + + // Notification dialog elements + const notificationDialog = document.getElementById('share-notification-dialog'); + const notificationCloseBtn = notificationDialog.querySelector('.close-dialog-btn'); + const notifyDialogIcon = document.getElementById('notify-dialog-icon'); + const notifyDialogName = document.getElementById('notify-dialog-name'); + const notificationEmail = document.getElementById('notification-email'); + const notificationMessage = document.getElementById('notification-message'); + const sendNotificationBtn = document.getElementById('send-notification-btn'); + + // Notification banner + const notificationBanner = document.getElementById('notification-banner'); + const notificationBannerMessage = document.getElementById('notification-message'); + const closeNotificationBtn = document.getElementById('close-notification'); + + // Current state + let currentSharedItem = null; + let allSharedItems = []; + let filteredItems = []; + + // Initialize the page + loadSharedItems(); + + // Event listeners + filterType.addEventListener('change', filterAndSortItems); + sortBy.addEventListener('change', filterAndSortItems); + sharedSearchBtn.addEventListener('click', filterAndSortItems); + sharedSearch.addEventListener('keyup', (e) => { + if (e.key === 'Enter') filterAndSortItems(); + }); + goToFilesBtn.addEventListener('click', () => window.location.href = '/'); + + // Check authentication before loading + checkAuthentication(); + + // Share dialog event listeners + shareDialogCloseBtn.addEventListener('click', () => closeShareDialog()); + copyLinkBtn.addEventListener('click', copyShareLink); + enablePassword.addEventListener('change', () => { + sharePassword.disabled = !enablePassword.checked; + if (enablePassword.checked) sharePassword.focus(); + }); + generatePasswordBtn.addEventListener('click', generatePassword); + enableExpiration.addEventListener('change', () => { + shareExpiration.disabled = !enableExpiration.checked; + if (enableExpiration.checked) shareExpiration.focus(); + }); + updateShareBtn.addEventListener('click', updateSharedItem); + removeShareBtn.addEventListener('click', removeSharedItem); + + // Notification dialog event listeners + notificationCloseBtn.addEventListener('click', () => closeNotificationDialog()); + sendNotificationBtn.addEventListener('click', sendNotification); + + // Notification banner event listeners + closeNotificationBtn.addEventListener('click', () => { + notificationBanner.classList.remove('active'); + }); + + /** + * Loads all shared items and displays them + */ + function loadSharedItems() { + // Get shared links from storage + allSharedItems = getSharedLinks(); + + // Display items + filterAndSortItems(); + } + + /** + * Filters and sorts the shared items based on current filters + */ + function filterAndSortItems() { + const type = filterType.value; + const sort = sortBy.value; + const searchTerm = sharedSearch.value.toLowerCase(); + + // Filter items + filteredItems = allSharedItems.filter(item => { + // Filter by type + if (type !== 'all' && item.type !== type) return false; + + // Filter by search term + const nameMatch = item.name.toLowerCase().includes(searchTerm); + return nameMatch; + }); + + // Sort items + filteredItems.sort((a, b) => { + if (sort === 'name') { + return a.name.localeCompare(b.name); + } else if (sort === 'date') { + return new Date(b.dateShared) - new Date(a.dateShared); + } else if (sort === 'expiration') { + // Handle null expiration dates (items without expiration come last) + if (!a.expiration && !b.expiration) return 0; + if (!a.expiration) return 1; + if (!b.expiration) return -1; + return new Date(a.expiration) - new Date(b.expiration); + } + return 0; + }); + + // Display filtered and sorted items + displaySharedItems(); + } + + /** + * Displays the filtered and sorted shared items + */ + function displaySharedItems() { + // Clear the list + sharedItemsList.innerHTML = ''; + + // Show empty state if no items + if (filteredItems.length === 0) { + emptySharedState.style.display = 'flex'; + document.querySelector('.shared-list-container').style.display = 'none'; + return; + } + + // Hide empty state and show table + emptySharedState.style.display = 'none'; + document.querySelector('.shared-list-container').style.display = 'block'; + + // Add items to the list + filteredItems.forEach(item => { + const row = document.createElement('tr'); + + // Icon and name + const nameCell = document.createElement('td'); + nameCell.className = 'shared-item-name'; + const icon = document.createElement('span'); + icon.className = 'item-icon'; + icon.textContent = item.type === 'file' ? '📄' : '📁'; + const name = document.createElement('span'); + name.textContent = item.name; + nameCell.appendChild(icon); + nameCell.appendChild(name); + + // Type + const typeCell = document.createElement('td'); + typeCell.textContent = item.type === 'file' ? translate('shared_typeFile', 'File') : translate('shared_typeFolder', 'Folder'); + + // Date shared + const dateCell = document.createElement('td'); + dateCell.textContent = formatDate(item.dateShared); + + // Expiration + const expirationCell = document.createElement('td'); + expirationCell.textContent = item.expiration ? formatDate(item.expiration) : translate('shared_noExpiration', 'No expiration'); + + // Permissions + const permissionsCell = document.createElement('td'); + const permissions = []; + if (item.permissions.read) permissions.push(translate('share_permissionRead', 'Read')); + if (item.permissions.write) permissions.push(translate('share_permissionWrite', 'Write')); + if (item.permissions.reshare) permissions.push(translate('share_permissionReshare', 'Reshare')); + permissionsCell.textContent = permissions.join(', '); + + // Password + const passwordCell = document.createElement('td'); + passwordCell.textContent = item.password ? translate('shared_hasPassword', 'Yes') : translate('shared_noPassword', 'No'); + + // Actions + const actionsCell = document.createElement('td'); + actionsCell.className = 'shared-item-actions'; + + // Edit button + const editBtn = document.createElement('button'); + editBtn.className = 'action-btn edit-btn'; + editBtn.innerHTML = '✏️'; + editBtn.title = translate('shared_editShare', 'Edit Share'); + editBtn.addEventListener('click', () => openShareDialog(item)); + + // Notify button + const notifyBtn = document.createElement('button'); + notifyBtn.className = 'action-btn notify-btn'; + notifyBtn.innerHTML = '📧'; + notifyBtn.title = translate('shared_notifyShare', 'Notify Someone'); + notifyBtn.addEventListener('click', () => openNotificationDialog(item)); + + // Copy link button + const copyBtn = document.createElement('button'); + copyBtn.className = 'action-btn copy-btn'; + copyBtn.innerHTML = '📋'; + copyBtn.title = translate('shared_copyLink', 'Copy Link'); + copyBtn.addEventListener('click', () => { + navigator.clipboard.writeText(item.url) + .then(() => showNotification(translate('shared_linkCopied', 'Link copied to clipboard!'))) + .catch(err => showNotification(translate('shared_linkCopyFailed', 'Failed to copy link'), 'error')); + }); + + // Remove button + const removeBtn = document.createElement('button'); + removeBtn.className = 'action-btn remove-btn'; + removeBtn.innerHTML = '🗑️'; + removeBtn.title = translate('shared_removeShare', 'Remove Share'); + removeBtn.addEventListener('click', () => { + currentSharedItem = item; + removeSharedItem(); + }); + + actionsCell.appendChild(editBtn); + actionsCell.appendChild(notifyBtn); + actionsCell.appendChild(copyBtn); + actionsCell.appendChild(removeBtn); + + // Add cells to row + row.appendChild(nameCell); + row.appendChild(typeCell); + row.appendChild(dateCell); + row.appendChild(expirationCell); + row.appendChild(permissionsCell); + row.appendChild(passwordCell); + row.appendChild(actionsCell); + + // Add row to table + sharedItemsList.appendChild(row); + }); + } + + /** + * Opens the share dialog for the given item + */ + function openShareDialog(item) { + currentSharedItem = item; + + // Set dialog content + shareDialogIcon.textContent = item.type === 'file' ? '📄' : '📁'; + shareDialogName.textContent = item.name; + shareLinkUrl.value = item.url; + + // Set permissions + permissionRead.checked = item.permissions.read; + permissionWrite.checked = item.permissions.write; + permissionReshare.checked = item.permissions.reshare; + + // Set password + enablePassword.checked = !!item.password; + sharePassword.disabled = !enablePassword.checked; + sharePassword.value = item.password || ''; + + // Set expiration + enableExpiration.checked = !!item.expiration; + shareExpiration.disabled = !enableExpiration.checked; + shareExpiration.value = item.expiration ? new Date(item.expiration).toISOString().split('T')[0] : ''; + + // Show dialog + shareDialog.classList.add('active'); + } + + /** + * Closes the share dialog + */ + function closeShareDialog() { + shareDialog.classList.remove('active'); + currentSharedItem = null; + } + + /** + * Opens the notification dialog for the given item + */ + function openNotificationDialog(item) { + currentSharedItem = item; + + // Set dialog content + notifyDialogIcon.textContent = item.type === 'file' ? '📄' : '📁'; + notifyDialogName.textContent = item.name; + notificationEmail.value = ''; + notificationMessage.value = ''; + + // Show dialog + notificationDialog.classList.add('active'); + } + + /** + * Closes the notification dialog + */ + function closeNotificationDialog() { + notificationDialog.classList.remove('active'); + currentSharedItem = null; + } + + /** + * Copies the current share link to clipboard + */ + function copyShareLink() { + navigator.clipboard.writeText(shareLinkUrl.value) + .then(() => showNotification(translate('shared_linkCopied', 'Link copied to clipboard!'))) + .catch(err => showNotification(translate('shared_linkCopyFailed', 'Failed to copy link'), 'error')); + } + + /** + * Generates a random password for the share + */ + function generatePassword() { + const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*'; + let password = ''; + for (let i = 0; i < 12; i++) { + password += chars.charAt(Math.floor(Math.random() * chars.length)); + } + sharePassword.value = password; + enablePassword.checked = true; + sharePassword.disabled = false; + } + + /** + * Updates the current shared item with new settings + */ + function updateSharedItem() { + if (!currentSharedItem) return; + + // Get updated settings + const permissions = { + read: permissionRead.checked, + write: permissionWrite.checked, + reshare: permissionReshare.checked + }; + + const password = enablePassword.checked ? sharePassword.value : null; + const expiration = enableExpiration.checked ? shareExpiration.value : null; + + // Update the shared link + updateSharedLink(currentSharedItem.id, { + permissions, + password, + expiration: expiration ? new Date(expiration).toISOString() : null + }); + + // Reload items and close dialog + loadSharedItems(); + closeShareDialog(); + + // Show notification + showNotification(translate('shared_itemUpdated', 'Share settings updated successfully')); + } + + /** + * Removes the current shared item + */ + function removeSharedItem() { + if (!currentSharedItem) return; + + // Remove the shared link + removeSharedLink(currentSharedItem.id); + + // Reload items and close dialog if open + loadSharedItems(); + closeShareDialog(); + + // Show notification + showNotification(translate('shared_itemRemoved', 'Share removed successfully')); + } + + /** + * Sends a notification email for the current shared item + */ + function sendNotification() { + if (!currentSharedItem) return; + + const email = notificationEmail.value.trim(); + const message = notificationMessage.value.trim(); + + // Validate email + if (!email || !validateEmail(email)) { + showNotification(translate('shared_invalidEmail', 'Please enter a valid email address'), 'error'); + return; + } + + // Send notification + sendShareNotification(currentSharedItem.id, email, message) + .then(() => { + closeNotificationDialog(); + showNotification(translate('shared_notificationSent', 'Notification sent successfully')); + }) + .catch(error => { + showNotification(translate('shared_notificationFailed', 'Failed to send notification'), 'error'); + }); + } + + /** + * Shows a notification banner with the given message + */ + function showNotification(message, type = 'success') { + notificationBannerMessage.textContent = message; + notificationBanner.className = 'notification-banner active ' + type; + + // Auto-hide after 5 seconds + setTimeout(() => { + notificationBanner.classList.remove('active'); + }, 5000); + } + + /** + * Validates an email address + */ + function validateEmail(email) { + const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return re.test(email); + } + + /** + * Formats a date string to a user-friendly format + */ + function formatDate(dateString) { + const options = { year: 'numeric', month: 'short', day: 'numeric' }; + return new Date(dateString).toLocaleDateString(undefined, options); + } +}); \ No newline at end of file diff --git a/static/js/ui.js b/static/js/ui.js index 4088413a..20c3827c 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -21,6 +21,9 @@ const ui = {
Mover a...
+
+ Compartir +
Eliminar
@@ -34,6 +37,9 @@ const ui = { fileMenu.className = 'context-menu'; fileMenu.id = 'file-context-menu'; fileMenu.innerHTML = ` +
+ Compartir +
Mover a...
@@ -85,9 +91,144 @@ const ui = { `; document.body.appendChild(moveDialog); } + + // Share dialog + if (!document.getElementById('share-dialog')) { + const shareDialog = document.createElement('div'); + shareDialog.className = 'share-dialog'; + shareDialog.id = 'share-dialog'; + shareDialog.innerHTML = ` + + `; + document.body.appendChild(shareDialog); + + // Add event listeners for share dialog + document.getElementById('share-cancel-btn').addEventListener('click', () => { + contextMenus.closeShareDialog(); + }); + + document.getElementById('share-confirm-btn').addEventListener('click', () => { + contextMenus.createSharedLink(); + }); + + document.getElementById('copy-share-btn').addEventListener('click', async () => { + const shareUrl = document.getElementById('generated-share-url').value; + await fileSharing.copyLinkToClipboard(shareUrl); + }); + + document.getElementById('notify-share-btn').addEventListener('click', () => { + const shareUrl = document.getElementById('generated-share-url').value; + contextMenus.showEmailNotificationDialog(shareUrl); + }); + } + + // Notification dialog + if (!document.getElementById('notification-dialog')) { + const notificationDialog = document.createElement('div'); + notificationDialog.className = 'share-dialog'; + notificationDialog.id = 'notification-dialog'; + notificationDialog.innerHTML = ` + + `; + document.body.appendChild(notificationDialog); + + // Add event listeners for notification dialog + document.getElementById('notification-cancel-btn').addEventListener('click', () => { + contextMenus.closeNotificationDialog(); + }); + + document.getElementById('notification-send-btn').addEventListener('click', () => { + contextMenus.sendShareNotification(); + }); + } // Assign events to menu items - contextMenus.assignMenuEvents(); + if (window.contextMenus) { + window.contextMenus.assignMenuEvents(); + } else { + console.warn('contextMenus module not loaded'); + } }, /** diff --git a/static/locales/en.json b/static/locales/en.json index e6fbaf56..0a95d54c 100644 --- a/static/locales/en.json +++ b/static/locales/en.json @@ -19,7 +19,76 @@ "move_to": "Move to", "delete": "Delete", "cancel": "Cancel", - "confirm": "Confirm" + "confirm": "Confirm", + "share": "Share", + "copy": "Copy", + "notify": "Notify", + "send": "Send" + }, + "share": { + "dialogTitle": "Share Link", + "linkLabel": "Share Link:", + "copyLink": "Copy", + "permissions": "Permissions:", + "permissionRead": "Read", + "permissionWrite": "Write", + "permissionReshare": "Reshare", + "password": "Password Protection:", + "generatePassword": "Generate", + "expiration": "Expiration Date:", + "update": "Update Share", + "remove": "Remove Share", + "notifyTitle": "Send Notification", + "notifyEmailLabel": "Email Address:", + "notifyMessageLabel": "Message (optional):", + "notifySend": "Send Notification", + "shareWithOthers": "Share with others", + "sharePublicly": "Share publicly", + "shareSettings": "Sharing settings", + "shareCopied": "Link copied to clipboard", + "shareCreated": "Share link created successfully", + "shareUpdated": "Share settings updated successfully", + "shareRemoved": "Share removed successfully" + }, + "shared": { + "backToFiles": "Back to Files", + "pageTitle": "Shared Resources", + "pageDescription": "Manage your shared files and folders", + "filterType": "Type:", + "filterAll": "All", + "filterFiles": "Files", + "filterFolders": "Folders", + "sortBy": "Sort by:", + "sortByName": "Name", + "sortByDate": "Date shared", + "sortByExpiration": "Expiration", + "search": "Search", + "colName": "Name", + "colType": "Type", + "colDateShared": "Date Shared", + "colExpiration": "Expiration", + "colPermissions": "Permissions", + "colPassword": "Password", + "colActions": "Actions", + "emptyStateTitle": "No shared resources yet", + "emptyStateDesc": "When you share files or folders, they will appear here", + "goToFiles": "Go to Files", + "typeFile": "File", + "typeFolder": "Folder", + "noExpiration": "No expiration", + "hasPassword": "Yes", + "noPassword": "No", + "editShare": "Edit Share", + "notifyShare": "Notify Someone", + "copyLink": "Copy Link", + "removeShare": "Remove Share", + "linkCopied": "Link copied to clipboard!", + "linkCopyFailed": "Failed to copy link", + "itemUpdated": "Share settings updated successfully", + "itemRemoved": "Share removed successfully", + "invalidEmail": "Please enter a valid email address", + "notificationSent": "Notification sent successfully", + "notificationFailed": "Failed to send notification" }, "files": { "name": "Name", @@ -47,12 +116,27 @@ "root": "Root", "delete_confirmation": "Are you sure you want to delete", "and_contents": "and all its contents", - "no_undo": "This action cannot be undone" + "no_undo": "This action cannot be undone", + "share_file": "Share File", + "existing_shares": "Existing Shares", + "share_options": "Share Options", + "password": "Password", + "expiration": "Expiration", + "permissions": "Permissions", + "generated_link": "Generated Link", + "notify": "Send Notification", + "recipient": "Recipient", + "message": "Message" }, "dropzone": { "drag_files": "Drag files here or click to select", "drop_files": "Drop files to upload" }, + "permissions": { + "read": "Read", + "write": "Write", + "reshare": "Reshare" + }, "errors": { "file_not_found": "File not found", "folder_not_found": "Folder not found", diff --git a/static/locales/es.json b/static/locales/es.json index fd89e047..ae863ae6 100644 --- a/static/locales/es.json +++ b/static/locales/es.json @@ -10,6 +10,71 @@ "favorites": "Favoritos", "trash": "Papelera" }, + "share": { + "dialogTitle": "Compartir Enlace", + "linkLabel": "Enlace compartido:", + "copyLink": "Copiar", + "permissions": "Permisos:", + "permissionRead": "Lectura", + "permissionWrite": "Escritura", + "permissionReshare": "Recompartir", + "password": "Protección con contraseña:", + "generatePassword": "Generar", + "expiration": "Fecha de caducidad:", + "update": "Actualizar compartido", + "remove": "Eliminar compartido", + "notifyTitle": "Enviar notificación", + "notifyEmailLabel": "Dirección de correo:", + "notifyMessageLabel": "Mensaje (opcional):", + "notifySend": "Enviar notificación", + "shareWithOthers": "Compartir con otros", + "sharePublicly": "Compartir públicamente", + "shareSettings": "Configuración de compartido", + "shareCopied": "Enlace copiado al portapapeles", + "shareCreated": "Enlace compartido creado correctamente", + "shareUpdated": "Configuración de compartido actualizada", + "shareRemoved": "Compartido eliminado correctamente" + }, + "shared": { + "backToFiles": "Volver a Archivos", + "pageTitle": "Recursos Compartidos", + "pageDescription": "Administra tus archivos y carpetas compartidos", + "filterType": "Tipo:", + "filterAll": "Todos", + "filterFiles": "Archivos", + "filterFolders": "Carpetas", + "sortBy": "Ordenar por:", + "sortByName": "Nombre", + "sortByDate": "Fecha compartido", + "sortByExpiration": "Caducidad", + "search": "Buscar", + "colName": "Nombre", + "colType": "Tipo", + "colDateShared": "Fecha compartido", + "colExpiration": "Caducidad", + "colPermissions": "Permisos", + "colPassword": "Contraseña", + "colActions": "Acciones", + "emptyStateTitle": "Aún no hay recursos compartidos", + "emptyStateDesc": "Cuando compartas archivos o carpetas, aparecerán aquí", + "goToFiles": "Ir a Archivos", + "typeFile": "Archivo", + "typeFolder": "Carpeta", + "noExpiration": "Sin caducidad", + "hasPassword": "Sí", + "noPassword": "No", + "editShare": "Editar compartido", + "notifyShare": "Notificar a alguien", + "copyLink": "Copiar enlace", + "removeShare": "Eliminar compartido", + "linkCopied": "¡Enlace copiado al portapapeles!", + "linkCopyFailed": "Error al copiar el enlace", + "itemUpdated": "Configuración de compartido actualizada", + "itemRemoved": "Compartido eliminado correctamente", + "invalidEmail": "Por favor, introduce una dirección de correo válida", + "notificationSent": "Notificación enviada correctamente", + "notificationFailed": "Error al enviar la notificación" + }, "actions": { "search": "Buscar archivos...", "new_folder": "Nueva carpeta", @@ -19,7 +84,11 @@ "move_to": "Mover a", "delete": "Eliminar", "cancel": "Cancelar", - "confirm": "Confirmar" + "confirm": "Confirmar", + "share": "Compartir", + "copy": "Copiar", + "notify": "Notificar", + "send": "Enviar" }, "files": { "name": "Nombre", @@ -47,12 +116,27 @@ "root": "Raíz", "delete_confirmation": "¿Estás seguro de que quieres eliminar", "and_contents": "y todo su contenido", - "no_undo": "Esta acción no se puede deshacer" + "no_undo": "Esta acción no se puede deshacer", + "share_file": "Compartir Archivo", + "existing_shares": "Compartidos Existentes", + "share_options": "Opciones de Compartición", + "password": "Contraseña", + "expiration": "Caducidad", + "permissions": "Permisos", + "generated_link": "Enlace Generado", + "notify": "Enviar Notificación", + "recipient": "Destinatario", + "message": "Mensaje" }, "dropzone": { "drag_files": "Arrastra archivos aquí o haz clic para seleccionar", "drop_files": "Suelta los archivos para subirlos" }, + "permissions": { + "read": "Lectura", + "write": "Escritura", + "reshare": "Recompartir" + }, "errors": { "file_not_found": "Archivo no encontrado", "folder_not_found": "Carpeta no encontrada", diff --git a/static/shared.html b/static/shared.html new file mode 100644 index 00000000..18bb439e --- /dev/null +++ b/static/shared.html @@ -0,0 +1,196 @@ + + + + + + OxiCloud - Shared Resources + + + + +
+
+ + +

OxiCloud

+ +
+
+ +
+ +
+
+
+ +
+
+

Shared Resources

+

Manage your shared files and folders

+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + + + + + + + + + + + + +
NameTypeDate SharedExpirationPermissionsPasswordActions
+
+ + +
+ + +
+
+
+

Share Link

+ +
+
+ + + + + + + +
+
+
+ + +
+
+
+

Send Notification

+ +
+
+ + +
+
+ + +
+ +
+ + +
+
+ +
+ +
+
+
+
+ + +
+ + +
+ + + + + + + \ No newline at end of file