adding ui sharing

This commit is contained in:
DioCrafts
2025-03-28 08:09:18 +01:00
parent f9955bb710
commit fb276d9b24
18 changed files with 2452 additions and 295 deletions
+62
View File
@@ -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"
+67 -24
View File
@@ -1,12 +1,27 @@
-- OxiCloud Authentication Database Schema
-- Create schema for auth-related tables
CREATE SCHEMA IF NOT EXISTS auth;
-- Create UserRole enum type
DO $BODY$
BEGIN
IF NOT EXISTS (
SELECT 1 FROM pg_type t
JOIN pg_catalog.pg_namespace n ON n.oid = t.typnamespace
WHERE t.typname = 'userrole' AND n.nspname = 'auth'
) THEN
CREATE TYPE auth.userrole AS ENUM ('admin', 'user');
END IF;
END $BODY$;
-- Users table
CREATE TABLE IF NOT EXISTS users (
CREATE TABLE IF NOT EXISTS auth.users (
id VARCHAR(36) PRIMARY KEY,
username VARCHAR(32) UNIQUE NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL,
password_hash VARCHAR(255) NOT NULL,
role VARCHAR(10) NOT NULL CHECK (role IN ('admin', 'user')),
password_hash TEXT NOT NULL,
role auth.userrole NOT NULL,
storage_quota_bytes BIGINT NOT NULL DEFAULT 10737418240, -- 10GB default
storage_used_bytes BIGINT NOT NULL DEFAULT 0,
created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
@@ -15,40 +30,47 @@ CREATE TABLE IF NOT EXISTS users (
active BOOLEAN NOT NULL DEFAULT TRUE
);
-- Create indexes for users table
CREATE INDEX IF NOT EXISTS idx_users_username ON auth.users(username);
CREATE INDEX IF NOT EXISTS idx_users_email ON auth.users(email);
-- Sessions table for refresh tokens
CREATE TABLE IF NOT EXISTS sessions (
CREATE TABLE IF NOT EXISTS auth.sessions (
id VARCHAR(36) PRIMARY KEY,
user_id VARCHAR(36) NOT NULL REFERENCES users(id) ON DELETE CASCADE,
refresh_token VARCHAR(255) NOT NULL,
user_id VARCHAR(36) NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
refresh_token VARCHAR(255) NOT NULL UNIQUE,
expires_at TIMESTAMP WITH TIME ZONE NOT NULL,
ip_address VARCHAR(45), -- to support IPv6
user_agent TEXT,
created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
revoked BOOLEAN NOT NULL DEFAULT FALSE,
UNIQUE (user_id, refresh_token)
revoked BOOLEAN NOT NULL DEFAULT FALSE
);
-- Create indexes for sessions table
CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON auth.sessions(user_id);
CREATE INDEX IF NOT EXISTS idx_sessions_refresh_token ON auth.sessions(refresh_token);
CREATE INDEX IF NOT EXISTS idx_sessions_expires_at ON auth.sessions(expires_at);
CREATE INDEX IF NOT EXISTS idx_sessions_active ON auth.sessions(user_id, revoked, expires_at)
WHERE NOT revoked AND expires_at > NOW();
-- File ownership tracking
CREATE TABLE IF NOT EXISTS file_ownership (
file_id VARCHAR(36) PRIMARY KEY,
user_id VARCHAR(36) NOT NULL REFERENCES users(id) ON DELETE CASCADE,
path VARCHAR(1024) NOT NULL,
CREATE TABLE IF NOT EXISTS auth.user_files (
id SERIAL PRIMARY KEY,
user_id VARCHAR(36) NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
file_path TEXT NOT NULL,
file_id VARCHAR(255) NOT NULL,
size_bytes BIGINT NOT NULL DEFAULT 0,
created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
UNIQUE (user_id, path)
UNIQUE(user_id, file_path)
);
-- Folder ownership tracking
CREATE TABLE IF NOT EXISTS folder_ownership (
folder_id VARCHAR(36) PRIMARY KEY,
user_id VARCHAR(36) NOT NULL REFERENCES users(id) ON DELETE CASCADE,
path VARCHAR(1024) NOT NULL,
created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
UNIQUE (user_id, path)
);
-- Create indexes for user_files
CREATE INDEX IF NOT EXISTS idx_user_files_user_id ON auth.user_files(user_id);
CREATE INDEX IF NOT EXISTS idx_user_files_file_id ON auth.user_files(file_id);
-- Create admin user (password: Admin123!)
INSERT INTO users (
INSERT INTO auth.users (
id,
username,
email,
@@ -62,4 +84,25 @@ INSERT INTO users (
'$argon2id$v=19$m=65536,t=3,p=4$c2FsdHNhbHRzYWx0c2FsdA$H3VxE8LL2qPT31DM3loTg6D+O4MSc2sD7GjlQ5h7Jkw', -- Admin123!
'admin',
107374182400 -- 100GB for admin
) ON CONFLICT (id) DO NOTHING;
) 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';
+1 -1
View File
@@ -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
-69
View File
@@ -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
$$;
@@ -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';
-37
View File
@@ -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
$$;
@@ -85,7 +85,7 @@ impl UserRepository for UserPgRepository {
let row = sqlx::query(
r#"
SELECT
id, username, email, password_hash, role,
id, username, email, password_hash, role::text as role_text,
storage_quota_bytes, storage_used_bytes,
created_at, updated_at, last_login_at, active
FROM auth.users
@@ -98,9 +98,9 @@ impl UserRepository for UserPgRepository {
.map_err(Self::map_sqlx_error)?;
// Convert role string to UserRole enum
let role_str: String = row.get("role");
let role = match role_str.as_str() {
"admin" => UserRole::Admin,
let role_str: Option<String> = row.try_get("role_text").unwrap_or(None);
let role = match role_str.as_deref() {
Some("admin") => UserRole::Admin,
_ => UserRole::User,
};
@@ -124,7 +124,7 @@ impl UserRepository for UserPgRepository {
let row = sqlx::query(
r#"
SELECT
id, username, email, password_hash, role,
id, username, email, password_hash, role::text as role_text,
storage_quota_bytes, storage_used_bytes,
created_at, updated_at, last_login_at, active
FROM auth.users
@@ -137,9 +137,9 @@ impl UserRepository for UserPgRepository {
.map_err(Self::map_sqlx_error)?;
// Convert role string to UserRole enum
let role_str: String = row.get("role");
let role = match role_str.as_str() {
"admin" => UserRole::Admin,
let role_str: Option<String> = row.try_get("role_text").unwrap_or(None);
let role = match role_str.as_deref() {
Some("admin") => UserRole::Admin,
_ => UserRole::User,
};
@@ -163,7 +163,7 @@ impl UserRepository for UserPgRepository {
let row = sqlx::query(
r#"
SELECT
id, username, email, password_hash, role,
id, username, email, password_hash, role::text as role_text,
storage_quota_bytes, storage_used_bytes,
created_at, updated_at, last_login_at, active
FROM auth.users
@@ -176,9 +176,9 @@ impl UserRepository for UserPgRepository {
.map_err(Self::map_sqlx_error)?;
// Convert role string to UserRole enum
let role_str: String = row.get("role");
let role = match role_str.as_str() {
"admin" => UserRole::Admin,
let role_str: Option<String> = row.try_get("role_text").unwrap_or(None);
let role = match role_str.as_deref() {
Some("admin") => UserRole::Admin,
_ => UserRole::User,
};
@@ -276,7 +276,7 @@ impl UserRepository for UserPgRepository {
let rows = sqlx::query(
r#"
SELECT
id, username, email, password_hash, role,
id, username, email, password_hash, role::text as role_text,
storage_quota_bytes, storage_used_bytes,
created_at, updated_at, last_login_at, active
FROM auth.users
@@ -293,9 +293,9 @@ impl UserRepository for UserPgRepository {
let users = rows.into_iter()
.map(|row| {
// Convert role string to UserRole enum for each row
let role_str: String = row.get("role");
let role = match role_str.as_str() {
"admin" => UserRole::Admin,
let role_str: Option<String> = row.try_get("role_text").unwrap_or(None);
let role = match role_str.as_deref() {
Some("admin") => UserRole::Admin,
_ => UserRole::User,
};
+609 -33
View File
@@ -888,61 +888,620 @@ body {
color: #718096;
}
/* Compartir diálogo */
.share-dialog {
position: absolute;
top: 50%;
right: 50px;
width: 250px;
background-color: white;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
z-index: 1000;
padding: 15px;
/* Dialogs (Rename, Move, Share) */
.rename-dialog, .share-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 2000;
}
.share-title {
.rename-dialog-content, .share-dialog-content {
background-color: white;
padding: 20px;
border-radius: 8px;
width: 400px;
max-width: 90%;
}
.share-dialog-content {
width: 500px;
}
.rename-dialog-header, .share-dialog-header {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: #2d3748;
padding-bottom: 10px;
border-bottom: 1px solid #e0e6ed;
}
.share-user {
.rename-dialog input, .share-dialog input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
.rename-dialog-buttons, .share-dialog-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Share dialog specific styles */
.shared-item-info {
padding: 10px 0;
margin-bottom: 15px;
border-bottom: 1px solid #eee;
}
.share-options h3, #existing-shares-section h3, #new-share-section h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.permission-options {
display: flex;
gap: 15px;
margin-top: 5px;
}
.permission-option {
display: flex;
align-items: center;
gap: 5px;
}
.existing-share-item {
background-color: #f8f9fa;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
}
.user-avatar-small {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #dfe4ea;
.share-url {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 5px;
color: #1565c0;
}
.share-info {
font-size: 11px;
display: flex;
gap: 15px;
margin-bottom: 10px;
color: #757575;
}
.share-protected {
color: #1565c0;
}
.share-expiration {
color: #b71c1c;
}
.share-actions {
display: flex;
gap: 5px;
justify-content: flex-end;
}
.share-link-actions {
display: flex;
gap: 10px;
margin-top: 5px;
}
.btn-small {
font-size: 12px;
padding: 5px 10px;
}
#notification-message {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
}
/* Shared Resources Page Styles */
/* Header styles for shared page */
header {
background-color: white;
border-bottom: 1px solid #e6e6e6;
padding: 15px 20px;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1280px;
margin: 0 auto;
}
.header-actions {
display: flex;
align-items: center;
gap: 15px;
}
.header-button {
padding: 8px 15px;
background-color: #f0f3f7;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.header-button:hover {
background-color: #e6e9ed;
}
/* Shared page container */
.shared-page-container {
max-width: 1280px;
margin: 20px auto;
padding: 0 20px;
}
.shared-header {
margin-bottom: 25px;
}
.shared-header h2 {
font-size: 24px;
color: #2d3748;
margin-bottom: 8px;
}
.shared-header p {
color: #718096;
font-size: 16px;
}
/* Filters and search */
.shared-filters {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
flex-wrap: wrap;
gap: 15px;
}
.filter-group {
display: flex;
align-items: center;
gap: 10px;
}
.filter-group label {
font-size: 14px;
color: #4a5568;
}
.filter-group select {
padding: 8px 12px;
border: 1px solid #e2e8f0;
border-radius: 6px;
background-color: white;
font-size: 14px;
}
.search-box {
display: flex;
gap: 10px;
}
.search-box input {
padding: 8px 15px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 14px;
width: 250px;
}
.search-box button {
padding: 8px 15px;
background-color: #ff5e3a;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s;
}
.search-box button:hover {
background-color: #e64a29;
}
/* Shared items list */
.shared-list-container {
background-color: white;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
overflow: hidden;
}
.shared-list {
width: 100%;
border-collapse: collapse;
}
.shared-list thead th {
padding: 15px;
text-align: left;
font-weight: 600;
color: #2d3748;
background-color: #f8f9fa;
border-bottom: 1px solid #e0e6ed;
}
.shared-list tbody td {
padding: 15px;
border-bottom: 1px solid #f0f0f0;
vertical-align: middle;
}
.shared-item-name {
display: flex;
align-items: center;
gap: 10px;
}
.shared-item-actions {
display: flex;
gap: 10px;
}
.action-btn {
width: 32px;
height: 32px;
border: 1px solid #e2e8f0;
border-radius: 6px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
margin-right: 10px;
cursor: pointer;
transition: all 0.2s;
}
.user-name {
font-size: 13px;
.action-btn:hover {
background-color: #f0f8ff;
border-color: #90cdf4;
}
.action-icon {
font-size: 14px;
}
/* Empty state */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.empty-state-icon {
font-size: 40px;
margin-bottom: 20px;
color: #a0aec0;
}
.empty-state h3 {
font-size: 18px;
color: #2d3748;
margin-bottom: 10px;
}
.empty-state p {
color: #718096;
margin-bottom: 20px;
text-align: center;
}
/* Dialog styles */
.dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.dialog.active {
display: flex;
}
.dialog-content {
background-color: white;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
width: 500px;
max-width: 90%;
max-height: 90vh;
overflow-y: auto;
}
.dialog-header {
padding: 15px 20px;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: space-between;
}
.dialog-header h3 {
font-size: 18px;
color: #2d3748;
margin: 0;
}
.close-dialog-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #a0aec0;
}
.dialog-body {
padding: 20px;
}
/* Share dialog specific styles */
.share-item-info {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.item-icon {
font-size: 24px;
}
.item-name {
font-size: 16px;
font-weight: 500;
color: #2d3748;
}
.add-user {
.share-link-section {
margin-bottom: 20px;
}
.share-link-container {
display: flex;
gap: 10px;
}
.share-link-container input {
flex-grow: 1;
padding: 10px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 14px;
}
.share-link-container button {
padding: 0 15px;
background-color: #4a5568;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s;
}
.share-link-container button:hover {
background-color: #2d3748;
}
.share-settings {
margin-bottom: 20px;
}
.share-setting {
margin-bottom: 15px;
}
.share-setting label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #4a5568;
}
.permissions-options {
display: flex;
gap: 20px;
}
.permissions-options label {
font-weight: normal;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
margin-top: 10px;
background-color: #f0f3f7;
border-radius: 50px;
gap: 5px;
}
.password-setting, .expiration-setting {
display: flex;
align-items: center;
gap: 10px;
}
.password-setting input[type="checkbox"], .expiration-setting input[type="checkbox"] {
width: auto;
}
.password-setting input[type="password"], .expiration-setting input[type="date"] {
flex-grow: 1;
padding: 8px 10px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 14px;
}
.password-setting button {
padding: 8px 12px;
background-color: #4a5568;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: #718096;
font-size: 12px;
transition: background-color 0.2s;
}
.password-setting button:hover {
background-color: #2d3748;
}
.share-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Form styles */
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #4a5568;
}
.form-group input, .form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 14px;
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
/* Button styles */
.button {
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.primary {
background-color: #ff5e3a;
color: white;
}
.primary:hover {
background-color: #e64a29;
}
.secondary {
background-color: #e2e8f0;
color: #4a5568;
}
.secondary:hover {
background-color: #cbd5e0;
}
.danger {
background-color: #f56565;
color: white;
}
.danger:hover {
background-color: #e53e3e;
}
/* Notification banner */
.notification-banner {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: space-between;
max-width: 400px;
z-index: 2000;
transform: translateY(-100px);
opacity: 0;
transition: transform 0.3s, opacity 0.3s;
}
.notification-banner.active {
transform: translateY(0);
opacity: 1;
}
.notification-banner.success {
border-left: 4px solid #48bb78;
}
.notification-banner.error {
border-left: 4px solid #f56565;
}
.close-notification-btn {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
color: #a0aec0;
margin-left: 10px;
}
/* Responsive */
@@ -968,6 +1527,23 @@ body {
.nav-item span {
display: none;
}
/* Responsive styles for shared page */
.shared-filters {
flex-direction: column;
align-items: flex-start;
}
.shared-list thead th:nth-child(4),
.shared-list thead th:nth-child(5),
.shared-list tbody td:nth-child(4),
.shared-list tbody td:nth-child(5) {
display: none;
}
.dialog-content {
width: 95%;
}
}
/* Folder selection for move dialog */
+2 -1
View File
@@ -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>
+22 -2
View File
@@ -15,6 +15,10 @@ const app = {
isTrashView: false, // Whether we're in trash view
currentSection: 'files', // Current section: 'files' or 'trash'
isSearchMode: false, // Whether we're in search mode
// File sharing related properties
shareDialogItem: null, // Item being shared in share dialog
shareDialogItemType: null, // Type of item being shared ('file' or 'folder')
notificationShareUrl: null // URL for notification dialog
};
// DOM elements
@@ -29,8 +33,17 @@ function initApp() {
// Cache DOM elements
cacheElements();
// Create menus and dialogs
ui.initializeContextMenus();
// Initialize file sharing module first
if (window.fileSharing && window.fileSharing.init) {
window.fileSharing.init();
} else {
console.warn('fileSharing module not fully initialized');
}
// Then create menus and dialogs after modules have initialized
setTimeout(() => {
ui.initializeContextMenus();
}, 100);
// Setup event listeners
setupEventListeners();
@@ -152,6 +165,13 @@ function setupEventListeners() {
// Add active class to clicked item
item.classList.add('active');
// Check if this is the shared item
if (item.querySelector('span').getAttribute('data-i18n') === 'nav.shared') {
// Navigate to the shared page
window.location.href = '/shared.html';
return;
}
// Check if this is the trash item
if (item === elements.trashBtn) {
// Show trash view
+81 -42
View File
@@ -17,46 +17,78 @@ const TOKEN_EXPIRY_KEY = 'oxicloud_token_expiry';
const USER_DATA_KEY = 'oxicloud_user';
// DOM elements
const loginPanel = document.getElementById('login-panel');
const registerPanel = document.getElementById('register-panel');
const adminSetupPanel = document.getElementById('admin-setup-panel');
let loginPanel, registerPanel, adminSetupPanel;
let loginForm, registerForm, adminSetupForm;
let loginError, registerError, registerSuccess, adminSetupError;
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');
const adminSetupForm = document.getElementById('admin-setup-form');
// Initialize DOM elements only if we're on the login page
function initLoginElements() {
// Check if we're on the login page
if (!document.getElementById('login-form')) {
console.log('Not on login page, skipping element initialization');
return false;
}
loginPanel = document.getElementById('login-panel');
registerPanel = document.getElementById('register-panel');
adminSetupPanel = document.getElementById('admin-setup-panel');
const loginError = document.getElementById('login-error');
const registerError = document.getElementById('register-error');
const registerSuccess = document.getElementById('register-success');
const adminSetupError = document.getElementById('admin-setup-error');
loginForm = document.getElementById('login-form');
registerForm = document.getElementById('register-form');
adminSetupForm = document.getElementById('admin-setup-form');
// Panel toggles
document.getElementById('show-register').addEventListener('click', () => {
loginPanel.style.display = 'none';
registerPanel.style.display = 'block';
adminSetupPanel.style.display = 'none';
});
loginError = document.getElementById('login-error');
registerError = document.getElementById('register-error');
registerSuccess = document.getElementById('register-success');
adminSetupError = document.getElementById('admin-setup-error');
document.getElementById('show-login').addEventListener('click', () => {
loginPanel.style.display = 'block';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'none';
});
// Panel toggles
document.getElementById('show-register').addEventListener('click', () => {
loginPanel.style.display = 'none';
registerPanel.style.display = 'block';
adminSetupPanel.style.display = 'none';
});
document.getElementById('show-admin-setup').addEventListener('click', () => {
loginPanel.style.display = 'none';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'block';
});
document.getElementById('show-login').addEventListener('click', () => {
loginPanel.style.display = 'block';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'none';
});
document.getElementById('back-to-login').addEventListener('click', () => {
loginPanel.style.display = 'block';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'none';
});
document.getElementById('show-admin-setup').addEventListener('click', () => {
loginPanel.style.display = 'none';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'block';
});
document.getElementById('back-to-login').addEventListener('click', () => {
loginPanel.style.display = 'block';
registerPanel.style.display = 'none';
adminSetupPanel.style.display = 'none';
});
return true;
}
// Initialize login elements if on login page
const isLoginPage = initLoginElements();
// Check if we already have a valid token
document.addEventListener('DOMContentLoaded', async () => {
let authInitialized = false;
document.addEventListener('DOMContentLoaded', () => {
// Check if we're on the login page
if (!document.getElementById('login-form')) {
console.log('Not on login page, skipping auth check');
return;
}
if (authInitialized) {
console.log('Auth already initialized, skipping');
return;
}
authInitialized = true;
(async () => {
try {
const tokenExpiry = localStorage.getItem(TOKEN_EXPIRY_KEY);
if (tokenExpiry && new Date(tokenExpiry) > new Date()) {
@@ -87,17 +119,19 @@ document.addEventListener('DOMContentLoaded', async () => {
} catch (error) {
console.error('Authentication check failed:', error);
}
})();
});
// Login form submission
loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
// Clear previous errors
loginError.style.display = 'none';
const username = document.getElementById('login-username').value;
const password = document.getElementById('login-password').value;
if (isLoginPage && loginForm) {
loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
// Clear previous errors
loginError.style.display = 'none';
const username = document.getElementById('login-username').value;
const password = document.getElementById('login-password').value;
try {
const data = await login(username, password);
@@ -161,9 +195,11 @@ loginForm.addEventListener('submit', async (e) => {
loginError.style.display = 'block';
}
});
}
// Register form submission
registerForm.addEventListener('submit', async (e) => {
if (isLoginPage && registerForm) {
registerForm.addEventListener('submit', async (e) => {
e.preventDefault();
// Clear previous messages
@@ -202,9 +238,11 @@ registerForm.addEventListener('submit', async (e) => {
registerError.style.display = 'block';
}
});
}
// Admin setup form submission
adminSetupForm.addEventListener('submit', async (e) => {
if (isLoginPage && adminSetupForm) {
adminSetupForm.addEventListener('submit', async (e) => {
e.preventDefault();
// Clear previous errors
@@ -235,6 +273,7 @@ adminSetupForm.addEventListener('submit', async (e) => {
adminSetupError.style.display = 'block';
}
});
}
// API Functions
+234
View File
@@ -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;
}
};
+379
View File
@@ -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;
+469
View File
@@ -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);
}
});
+142 -1
View File
@@ -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');
}
},
/**
+86 -2
View File
@@ -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",
+86 -2
View File
@@ -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",
+196
View File
@@ -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>