adding ui sharing

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"

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,
+    password_hash TEXT NOT NULL,
-    role VARCHAR(10) NOT NULL CHECK (role IN ('admin', 'user')),
+    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,
+    user_id VARCHAR(36) NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
-    refresh_token VARCHAR(255) NOT NULL,
+    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,
+    revoked BOOLEAN NOT NULL DEFAULT FALSE
-    UNIQUE (user_id, refresh_token)
 );
 
+-- 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 (
+CREATE TABLE IF NOT EXISTS auth.user_files (
-    file_id VARCHAR(36) PRIMARY KEY,
+    id SERIAL PRIMARY KEY,
-    user_id VARCHAR(36) NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    user_id VARCHAR(36) NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
-    path VARCHAR(1024) NOT NULL,
+    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 indexes for user_files
-CREATE TABLE IF NOT EXISTS folder_ownership (
+CREATE INDEX IF NOT EXISTS idx_user_files_user_id ON auth.user_files(user_id);
-    folder_id VARCHAR(36) PRIMARY KEY,
+CREATE INDEX IF NOT EXISTS idx_user_files_file_id ON auth.user_files(file_id);
-    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 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;
+) 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';

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

fix-userrole.sql

@@ -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
-$$;

migrations/20240320_create_auth_schema.sql

@@ -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';

migrations/20240323_add_userrole_type.sql

@@ -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
-$$;

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_str: Option<String> = row.try_get("role_text").unwrap_or(None);
-        let role = match role_str.as_str() {
+        let role = match role_str.as_deref() {
-            "admin" => UserRole::Admin,
+            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_str: Option<String> = row.try_get("role_text").unwrap_or(None);
-        let role = match role_str.as_str() {
+        let role = match role_str.as_deref() {
-            "admin" => UserRole::Admin,
+            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_str: Option<String> = row.try_get("role_text").unwrap_or(None);
-        let role = match role_str.as_str() {
+        let role = match role_str.as_deref() {
-            "admin" => UserRole::Admin,
+            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_str: Option<String> = row.try_get("role_text").unwrap_or(None);
-                let role = match role_str.as_str() {
+                let role = match role_str.as_deref() {
-                    "admin" => UserRole::Admin,
+                    Some("admin") => UserRole::Admin,
                     _ => UserRole::User,
                 };
                 

static/css/style.css

@@ -888,61 +888,620 @@ body {
     color: #718096;
 }
 
-/* Compartir diálogo */
+/* Dialogs (Rename, Move, Share) */
-.share-dialog {
+.rename-dialog, .share-dialog {
-    position: absolute;
+    position: fixed;
-    top: 50%;
+    top: 0;
-    right: 50px;
+    left: 0;
-    width: 250px;
+    width: 100%;
-    background-color: white;
+    height: 100%;
-    border-radius: 8px;
+    background-color: rgba(0, 0, 0, 0.5);
-    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+    display: none;
-    z-index: 1000;
+    justify-content: center;
-    padding: 15px;
+    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 {
+.share-url {
-    width: 24px;
+    font-size: 12px;
-    height: 24px;
+    overflow: hidden;
-    border-radius: 50%;
+    text-overflow: ellipsis;
-    background-color: #dfe4ea;
+    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;
+    cursor: pointer;
-    margin-right: 10px;
+    transition: all 0.2s;
 }
 
-.user-name {
+.action-btn:hover {
-    font-size: 13px;
+    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;
+    gap: 5px;
-    padding: 8px;
+}
-    margin-top: 10px;
+
-    background-color: #f0f3f7;
+.password-setting, .expiration-setting {
-    border-radius: 50px;
+    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;
+    font-size: 12px;
-    color: #718096;
+    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 */

static/index.html

@@ -14,6 +14,7 @@
     <script src="/js/i18n.js"></script>
     <script src="/js/languageSelector.js"></script>
     <script src="/js/fileRenderer.js"></script>
+    <script src="/js/fileSharing.js"></script>
     <script src="/js/contextMenus.js"></script>
     <script src="/js/fileOperations.js"></script>
     <script src="/js/search.js"></script>
@@ -49,7 +50,7 @@
                 <i class="fas fa-folder"></i>
                 <span data-i18n="nav.files">Files</span>
             </div>
-            <div class="nav-item">
+            <div class="nav-item" id="nav-shared">
                 <i class="fas fa-share-alt"></i>
                 <span data-i18n="nav.shared">Shared</span>
             </div>

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
+    // Initialize file sharing module first
-    ui.initializeContextMenus();
+    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

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');
+let loginPanel, registerPanel, adminSetupPanel;
-const registerPanel = document.getElementById('register-panel');
+let loginForm, registerForm, adminSetupForm;
-const adminSetupPanel = document.getElementById('admin-setup-panel');
+let loginError, registerError, registerSuccess, adminSetupError;
 
-const loginForm = document.getElementById('login-form');
+// Initialize DOM elements only if we're on the login page
-const registerForm = document.getElementById('register-form');
+function initLoginElements() {
-const adminSetupForm = document.getElementById('admin-setup-form');
+    // 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');
+    loginForm = document.getElementById('login-form');
-const registerError = document.getElementById('register-error');
+    registerForm = document.getElementById('register-form');
-const registerSuccess = document.getElementById('register-success');
+    adminSetupForm = document.getElementById('admin-setup-form');
-const adminSetupError = document.getElementById('admin-setup-error');
 
-// Panel toggles
+    loginError = document.getElementById('login-error');
-document.getElementById('show-register').addEventListener('click', () => {
+    registerError = document.getElementById('register-error');
-    loginPanel.style.display = 'none';
+    registerSuccess = document.getElementById('register-success');
-    registerPanel.style.display = 'block';
+    adminSetupError = document.getElementById('admin-setup-error');
-    adminSetupPanel.style.display = 'none';
-});
 
-document.getElementById('show-login').addEventListener('click', () => {
+    // Panel toggles
-    loginPanel.style.display = 'block';
+    document.getElementById('show-register').addEventListener('click', () => {
-    registerPanel.style.display = 'none';
+        loginPanel.style.display = 'none';
-    adminSetupPanel.style.display = 'none';
+        registerPanel.style.display = 'block';
-});
+        adminSetupPanel.style.display = 'none';
+    });
 
-document.getElementById('show-admin-setup').addEventListener('click', () => {
+    document.getElementById('show-login').addEventListener('click', () => {
-    loginPanel.style.display = 'none';
+        loginPanel.style.display = 'block';
-    registerPanel.style.display = 'none';
+        registerPanel.style.display = 'none';
-    adminSetupPanel.style.display = 'block';
+        adminSetupPanel.style.display = 'none';
-});
+    });
 
-document.getElementById('back-to-login').addEventListener('click', () => {
+    document.getElementById('show-admin-setup').addEventListener('click', () => {
-    loginPanel.style.display = 'block';
+        loginPanel.style.display = 'none';
-    registerPanel.style.display = 'none';
+        registerPanel.style.display = 'none';
-    adminSetupPanel.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) => {
+if (isLoginPage && loginForm) {
-    e.preventDefault();
+    loginForm.addEventListener('submit', async (e) => {
-    
+        e.preventDefault();
-    // Clear previous errors
+        
-    loginError.style.display = 'none';
+        // Clear previous errors
-    
+        loginError.style.display = 'none';
-    const username = document.getElementById('login-username').value;
+        
-    const password = document.getElementById('login-password').value;
+        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
 

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 = `
+                    <div class="share-url">${share.url}</div>
+                    <div class="share-info">
+                        ${share.password_protected ? '<span class="share-protected"><i class="fas fa-lock"></i> Con contraseña</span>' : ''}
+                        <span class="share-expiration">${expiresText}</span>
+                    </div>
+                    <div class="share-actions">
+                        <button class="btn btn-small copy-link-btn" data-share-url="${share.url}">
+                            <i class="fas fa-copy"></i> Copiar
+                        </button>
+                        <button class="btn btn-small btn-danger delete-link-btn" data-share-id="${share.id}">
+                            <i class="fas fa-trash"></i> Eliminar
+                        </button>
+                    </div>
+                `;
+                
+                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;
     }
 };
 

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<boolean>} - 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<Object>} - 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>} - 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>} - 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<boolean>} - 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<boolean>} 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;

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 = '<span class="action-icon">✏️</span>';
+            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 = '<span class="action-icon">📧</span>';
+            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 = '<span class="action-icon">📋</span>';
+            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 = '<span class="action-icon">🗑️</span>';
+            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);
+    }
+});

static/js/ui.js

@@ -21,6 +21,9 @@ const ui = {
                 <div class="context-menu-item" id="move-folder-option">
                     <i class="fas fa-exchange-alt"></i> <span data-i18n="actions.move">Mover a...</span>
                 </div>
+                <div class="context-menu-item" id="share-folder-option">
+                    <i class="fas fa-share-alt"></i> <span data-i18n="actions.share">Compartir</span>
+                </div>
                 <div class="context-menu-item" id="delete-folder-option">
                     <i class="fas fa-trash"></i> <span data-i18n="actions.delete">Eliminar</span>
                 </div>
@@ -34,6 +37,9 @@ const ui = {
             fileMenu.className = 'context-menu';
             fileMenu.id = 'file-context-menu';
             fileMenu.innerHTML = `
+                <div class="context-menu-item" id="share-file-option">
+                    <i class="fas fa-share-alt"></i> <span data-i18n="actions.share">Compartir</span>
+                </div>
                 <div class="context-menu-item" id="move-file-option">
                     <i class="fas fa-exchange-alt"></i> <span data-i18n="actions.move">Mover a...</span>
                 </div>
@@ -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 = `
+                <div class="share-dialog-content">
+                    <div class="share-dialog-header" data-i18n="dialogs.share_file">Compartir archivo</div>
+                    <div class="shared-item-info">
+                        <strong>Elemento:</strong> <span id="shared-item-name"></span>
+                    </div>
+                    
+                    <div id="existing-shares-section" style="display:none; margin: 15px 0;">
+                        <h3 data-i18n="dialogs.existing_shares">Enlaces compartidos existentes</h3>
+                        <div id="existing-shares-container"></div>
+                    </div>
+                    
+                    <div class="share-options">
+                        <h3 data-i18n="dialogs.share_options">Opciones de compartición</h3>
+                        
+                        <div class="form-group">
+                            <label for="share-password" data-i18n="dialogs.password">Contraseña (opcional):</label>
+                            <input type="password" id="share-password" placeholder="Proteger con contraseña">
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="share-expiration" data-i18n="dialogs.expiration">Fecha de vencimiento (opcional):</label>
+                            <input type="date" id="share-expiration">
+                        </div>
+                        
+                        <div class="form-group">
+                            <label data-i18n="dialogs.permissions">Permisos:</label>
+                            <div class="permission-options">
+                                <div class="permission-option">
+                                    <input type="checkbox" id="share-permission-read" checked>
+                                    <label for="share-permission-read" data-i18n="permissions.read">Lectura</label>
+                                </div>
+                                <div class="permission-option">
+                                    <input type="checkbox" id="share-permission-write">
+                                    <label for="share-permission-write" data-i18n="permissions.write">Escritura</label>
+                                </div>
+                                <div class="permission-option">
+                                    <input type="checkbox" id="share-permission-reshare">
+                                    <label for="share-permission-reshare" data-i18n="permissions.reshare">Permitir compartir</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div id="new-share-section" style="display:none; margin: 15px 0;">
+                        <h3 data-i18n="dialogs.generated_link">Enlace generado</h3>
+                        <div class="form-group">
+                            <input type="text" id="generated-share-url" readonly>
+                            <div class="share-link-actions">
+                                <button class="btn btn-small" id="copy-share-btn">
+                                    <i class="fas fa-copy"></i> <span data-i18n="actions.copy">Copiar</span>
+                                </button>
+                                <button class="btn btn-small" id="notify-share-btn">
+                                    <i class="fas fa-envelope"></i> <span data-i18n="actions.notify">Notificar</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="share-dialog-buttons">
+                        <button class="btn" id="share-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
+                        <button class="btn btn-primary" id="share-confirm-btn" data-i18n="actions.share">Compartir</button>
+                    </div>
+                </div>
+            `;
+            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 = `
+                <div class="share-dialog-content">
+                    <div class="share-dialog-header" data-i18n="dialogs.notify">Notificar enlace compartido</div>
+                    
+                    <p><strong>URL:</strong> <span id="notification-share-url"></span></p>
+                    
+                    <div class="form-group">
+                        <label for="notification-email" data-i18n="dialogs.recipient">Destinatario:</label>
+                        <input type="email" id="notification-email" placeholder="Correo electrónico">
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="notification-message" data-i18n="dialogs.message">Mensaje (opcional):</label>
+                        <textarea id="notification-message" rows="3"></textarea>
+                    </div>
+                    
+                    <div class="share-dialog-buttons">
+                        <button class="btn" id="notification-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
+                        <button class="btn btn-primary" id="notification-send-btn" data-i18n="actions.send">Enviar</button>
+                    </div>
+                </div>
+            `;
+            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');
+        }
     },
 
     /**

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",

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",

static/shared.html

@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OxiCloud - Shared Resources</title>
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+</head>
+<body>
+    <header>
+        <div class="header-container">
+            <a href="/" class="logo-container">
+                <img src="/oxicloud-logo.svg" alt="OxiCloud Logo" class="logo">
+                <h1>OxiCloud</h1>
+            </a>
+            <div class="header-actions">
+                <div class="language-selector">
+                    <select id="language-selector">
+                        <option value="en">English</option>
+                        <option value="es">Español</option>
+                    </select>
+                </div>
+                <button id="go-to-files" class="header-button">
+                    <span data-i18n="shared_backToFiles">Back to Files</span>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="shared-page-container">
+        <div class="shared-header">
+            <h2 data-i18n="shared_pageTitle">Shared Resources</h2>
+            <p data-i18n="shared_pageDescription">Manage your shared files and folders</p>
+        </div>
+
+        <div class="shared-filters">
+            <div class="filter-group">
+                <label for="filter-type" data-i18n="shared_filterType">Type:</label>
+                <select id="filter-type">
+                    <option value="all" data-i18n="shared_filterAll">All</option>
+                    <option value="file" data-i18n="shared_filterFiles">Files</option>
+                    <option value="folder" data-i18n="shared_filterFolders">Folders</option>
+                </select>
+            </div>
+            <div class="filter-group">
+                <label for="sort-by" data-i18n="shared_sortBy">Sort by:</label>
+                <select id="sort-by">
+                    <option value="name" data-i18n="shared_sortByName">Name</option>
+                    <option value="date" data-i18n="shared_sortByDate">Date shared</option>
+                    <option value="expiration" data-i18n="shared_sortByExpiration">Expiration</option>
+                </select>
+            </div>
+            <div class="search-box">
+                <input type="text" id="shared-search" placeholder="Search shared items...">
+                <button id="shared-search-btn"><span data-i18n="shared_search">Search</span></button>
+            </div>
+        </div>
+
+        <div class="shared-list-container">
+            <table class="shared-list">
+                <thead>
+                    <tr>
+                        <th data-i18n="shared_colName">Name</th>
+                        <th data-i18n="shared_colType">Type</th>
+                        <th data-i18n="shared_colDateShared">Date Shared</th>
+                        <th data-i18n="shared_colExpiration">Expiration</th>
+                        <th data-i18n="shared_colPermissions">Permissions</th>
+                        <th data-i18n="shared_colPassword">Password</th>
+                        <th data-i18n="shared_colActions">Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="shared-items-list">
+                    <!-- Shared items will be loaded here dynamically -->
+                </tbody>
+            </table>
+        </div>
+
+        <div id="empty-shared-state" class="empty-state" style="display:none;">
+            <div class="empty-state-icon">📂</div>
+            <h3 data-i18n="shared_emptyStateTitle">No shared resources yet</h3>
+            <p data-i18n="shared_emptyStateDesc">When you share files or folders, they will appear here</p>
+            <a href="/" class="button primary" data-i18n="shared_goToFiles">Go to Files</a>
+        </div>
+    </main>
+
+    <!-- Share Link Dialog (for editing existing shares) -->
+    <div id="share-dialog" class="dialog">
+        <div class="dialog-content">
+            <div class="dialog-header">
+                <h3 data-i18n="share_dialogTitle">Share Link</h3>
+                <button class="close-dialog-btn">&times;</button>
+            </div>
+            <div class="dialog-body">
+                <div class="share-item-info">
+                    <span id="share-dialog-icon" class="item-icon">📄</span>
+                    <span id="share-dialog-name" class="item-name">filename.ext</span>
+                </div>
+                
+                <div class="share-link-section">
+                    <label for="share-link-url" data-i18n="share_linkLabel">Share Link:</label>
+                    <div class="share-link-container">
+                        <input type="text" id="share-link-url" readonly>
+                        <button id="copy-link-btn" data-i18n="share_copyLink">Copy</button>
+                    </div>
+                </div>
+                
+                <div class="share-settings">
+                    <div class="share-setting">
+                        <label data-i18n="share_permissions">Permissions:</label>
+                        <div class="permissions-options">
+                            <label>
+                                <input type="checkbox" id="permission-read" checked>
+                                <span data-i18n="share_permissionRead">Read</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" id="permission-write">
+                                <span data-i18n="share_permissionWrite">Write</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" id="permission-reshare">
+                                <span data-i18n="share_permissionReshare">Reshare</span>
+                            </label>
+                        </div>
+                    </div>
+                    
+                    <div class="share-setting">
+                        <label for="share-password" data-i18n="share_password">Password Protection:</label>
+                        <div class="password-setting">
+                            <input type="checkbox" id="enable-password">
+                            <input type="password" id="share-password" placeholder="Enter password" disabled>
+                            <button id="generate-password" data-i18n="share_generatePassword">Generate</button>
+                        </div>
+                    </div>
+                    
+                    <div class="share-setting">
+                        <label for="share-expiration" data-i18n="share_expiration">Expiration Date:</label>
+                        <div class="expiration-setting">
+                            <input type="checkbox" id="enable-expiration">
+                            <input type="date" id="share-expiration" disabled>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="share-actions">
+                    <button id="update-share-btn" class="button primary" data-i18n="share_update">Update Share</button>
+                    <button id="remove-share-btn" class="button danger" data-i18n="share_remove">Remove Share</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Email Notification Dialog -->
+    <div id="share-notification-dialog" class="dialog">
+        <div class="dialog-content">
+            <div class="dialog-header">
+                <h3 data-i18n="share_notifyTitle">Send Notification</h3>
+                <button class="close-dialog-btn">&times;</button>
+            </div>
+            <div class="dialog-body">
+                <div class="share-item-info">
+                    <span id="notify-dialog-icon" class="item-icon">📄</span>
+                    <span id="notify-dialog-name" class="item-name">filename.ext</span>
+                </div>
+                
+                <div class="notification-form">
+                    <div class="form-group">
+                        <label for="notification-email" data-i18n="share_notifyEmailLabel">Email Address:</label>
+                        <input type="email" id="notification-email" placeholder="Enter recipient email">
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="notification-message" data-i18n="share_notifyMessageLabel">Message (optional):</label>
+                        <textarea id="notification-message" placeholder="Add a personal message" rows="3"></textarea>
+                    </div>
+                </div>
+                
+                <div class="notification-actions">
+                    <button id="send-notification-btn" class="button primary" data-i18n="share_notifySend">Send Notification</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Notification Banner -->
+    <div id="notification-banner" class="notification-banner">
+        <span id="notification-message"></span>
+        <button id="close-notification" class="close-notification-btn">×</button>
+    </div>
+
+    <script src="/js/i18n.js"></script>
+    <script src="/js/languageSelector.js"></script>
+    <script src="/js/fileSharing.js"></script>
+    <script src="/js/shared.js"></script>
+</body>
+</html>