feat: add privacy policy page and route it in the application
This commit is contained in:
@@ -4,6 +4,7 @@ import SettingsPage from "@/pages/settings";
|
|||||||
import LoginPage from "@/pages/login";
|
import LoginPage from "@/pages/login";
|
||||||
import RegisterPage from "@/pages/register";
|
import RegisterPage from "@/pages/register";
|
||||||
import DashboardPage from "@/pages/dashboard";
|
import DashboardPage from "@/pages/dashboard";
|
||||||
|
import PrivacyPolicyPage from "@/pages/privacy-policy";
|
||||||
import Layout from "@/components/layout";
|
import Layout from "@/components/layout";
|
||||||
import { useSync } from "@/lib/sync";
|
import { useSync } from "@/lib/sync";
|
||||||
import { useMobileStatusBar } from "@/hooks/use-mobile-status-bar";
|
import { useMobileStatusBar } from "@/hooks/use-mobile-status-bar";
|
||||||
@@ -14,6 +15,9 @@ function App() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
|
{/* Public Routes (accessible to everyone) */}
|
||||||
|
<Route path="/privacy-policy" element={<PrivacyPolicyPage />} />
|
||||||
|
|
||||||
{/* Public Routes (only accessible if NOT logged in) */}
|
{/* Public Routes (only accessible if NOT logged in) */}
|
||||||
<Route element={<PublicRoute />}>
|
<Route element={<PublicRoute />}>
|
||||||
<Route path="/login" element={<LoginPage />} />
|
<Route path="/login" element={<LoginPage />} />
|
||||||
|
|||||||
293
k-notes-frontend/src/pages/privacy-policy.tsx
Normal file
293
k-notes-frontend/src/pages/privacy-policy.tsx
Normal file
@@ -0,0 +1,293 @@
|
|||||||
|
import { FileText, Shield, Database, Lock, Mail, Calendar } from "lucide-react";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
|
||||||
|
export default function PrivacyPolicyPage() {
|
||||||
|
const lastUpdated = "December 26, 2025";
|
||||||
|
const appName = "K-Notes";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-background via-background to-muted/20">
|
||||||
|
<div className="max-w-4xl mx-auto px-4 py-12 space-y-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center space-y-4 mb-12">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<Shield className="h-16 w-16 text-primary" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60">
|
||||||
|
Privacy Policy
|
||||||
|
</h1>
|
||||||
|
<div className="flex items-center justify-center gap-2 text-muted-foreground">
|
||||||
|
<Calendar className="h-4 w-4" />
|
||||||
|
<p className="text-sm">Last Updated: {lastUpdated}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Introduction */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<FileText className="h-5 w-5" />
|
||||||
|
Introduction
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 text-muted-foreground">
|
||||||
|
<div className="bg-primary/10 border border-primary/20 rounded-lg p-4 mb-4">
|
||||||
|
<p className="font-semibold text-foreground mb-2">🏠 Self-Hosted Application</p>
|
||||||
|
<p className="text-sm">
|
||||||
|
{appName} is designed as a self-hosted application. This means you run your own
|
||||||
|
instance of the backend server, and <strong className="text-foreground">you have complete
|
||||||
|
control over your data</strong>. The app developer does not collect, store, or have
|
||||||
|
access to any of your personal information or notes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
This Privacy Policy describes how the {appName} application handles data when you
|
||||||
|
self-host it. Since you control the backend infrastructure, you are responsible for
|
||||||
|
the security and privacy of your own data.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Please read this privacy policy carefully to understand how the application processes
|
||||||
|
information on your self-hosted instance.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Information We Collect */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Database className="h-5 w-5" />
|
||||||
|
Data Stored on Your Instance
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 text-muted-foreground">
|
||||||
|
<p className="text-sm bg-muted/50 p-3 rounded-md">
|
||||||
|
<strong className="text-foreground">Important:</strong> All data described below is stored
|
||||||
|
exclusively on your self-hosted backend server. The app developer has no access to this data.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-foreground mb-2">Account Information</h3>
|
||||||
|
<p>Your self-hosted instance stores:</p>
|
||||||
|
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
|
||||||
|
<li>Email address (for account authentication on your instance)</li>
|
||||||
|
<li>Username</li>
|
||||||
|
<li>Password (hashed using industry-standard encryption)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-foreground mb-2">User Content</h3>
|
||||||
|
<p>Your instance stores the content you create:</p>
|
||||||
|
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
|
||||||
|
<li>Notes and their content</li>
|
||||||
|
<li>Tags and categories</li>
|
||||||
|
<li>Metadata (creation date, modification date, etc.)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-foreground mb-2">Technical Data</h3>
|
||||||
|
<p>Your instance may log technical information:</p>
|
||||||
|
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
|
||||||
|
<li>Server logs (if you enable logging)</li>
|
||||||
|
<li>Session data for authentication</li>
|
||||||
|
<li>Any other data you configure your instance to collect</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* How We Use Your Information */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Lock className="h-5 w-5" />
|
||||||
|
How the Application Uses Data
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 text-muted-foreground">
|
||||||
|
<p>The {appName} application uses data stored on your instance for:</p>
|
||||||
|
<ul className="list-disc list-inside ml-4 space-y-2">
|
||||||
|
<li><strong className="text-foreground">Core Functionality:</strong> To provide note-taking features, organize content, and manage your account</li>
|
||||||
|
<li><strong className="text-foreground">Synchronization:</strong> To sync your notes across devices when using the same instance</li>
|
||||||
|
<li><strong className="text-foreground">Authentication:</strong> To secure your account and protect your data from unauthorized access</li>
|
||||||
|
<li><strong className="text-foreground">Data Integrity:</strong> To maintain the consistency and reliability of your notes</li>
|
||||||
|
</ul>
|
||||||
|
<p className="mt-4 text-sm bg-muted/50 p-3 rounded-md">
|
||||||
|
Since you control the backend, you decide how your data is used, stored, and managed.
|
||||||
|
The app developer does not have access to or control over your self-hosted instance.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Data Storage and Security */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Shield className="h-5 w-5" />
|
||||||
|
Data Storage and Security
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 text-muted-foreground">
|
||||||
|
<p className="text-sm bg-amber-500/10 border border-amber-500/20 p-3 rounded-md">
|
||||||
|
<strong className="text-foreground">Your Responsibility:</strong> As a self-hosted application,
|
||||||
|
the security of your data depends on how you configure and maintain your instance. You are
|
||||||
|
responsible for securing your server infrastructure.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p className="mt-4">
|
||||||
|
The {appName} application includes the following security features:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc list-inside ml-4 space-y-2">
|
||||||
|
<li><strong className="text-foreground">Password Hashing:</strong> Passwords are hashed using industry-standard algorithms (never stored in plain text)</li>
|
||||||
|
<li><strong className="text-foreground">Session Management:</strong> Secure session handling for authenticated users</li>
|
||||||
|
<li><strong className="text-foreground">HTTPS Support:</strong> The application supports HTTPS when properly configured on your server</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div className="mt-4 p-3 bg-muted/50 rounded-md space-y-2">
|
||||||
|
<p className="font-semibold text-foreground">Security Recommendations:</p>
|
||||||
|
<ul className="list-disc list-inside ml-4 space-y-1 text-sm">
|
||||||
|
<li>Always use HTTPS in production</li>
|
||||||
|
<li>Keep your server software and dependencies updated</li>
|
||||||
|
<li>Use strong passwords and enable proper authentication</li>
|
||||||
|
<li>Regularly backup your data</li>
|
||||||
|
<li>Follow security best practices for your hosting environment</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Data Retention */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Data Retention and Deletion</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 text-muted-foreground">
|
||||||
|
<p>
|
||||||
|
Since you control your own {appName} instance, you have complete control over data retention:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc list-inside ml-4 space-y-2">
|
||||||
|
<li>You can delete your account and all associated data at any time through the application</li>
|
||||||
|
<li>You can export your data using the built-in export functionality</li>
|
||||||
|
<li>You control backup and archival policies for your instance</li>
|
||||||
|
<li>You can permanently delete all data by removing your instance's database</li>
|
||||||
|
</ul>
|
||||||
|
<p className="mt-4">
|
||||||
|
The app developer does not retain any of your data, as all information exists solely
|
||||||
|
on your self-hosted server.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Third-Party Services */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Third-Party Services and Data Sharing</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 text-muted-foreground">
|
||||||
|
<p>
|
||||||
|
<strong className="text-foreground">No Data Sharing by Developer:</strong> The app developer
|
||||||
|
does not share your data with any third parties, as they do not have access to it.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
However, if you integrate third-party services with your self-hosted instance (such as
|
||||||
|
external authentication providers, backup services, or hosting platforms), those services
|
||||||
|
may have access to your data according to their own privacy policies.
|
||||||
|
</p>
|
||||||
|
<p className="text-sm bg-muted/50 p-3 rounded-md">
|
||||||
|
Review the privacy policies of any third-party services you choose to integrate with
|
||||||
|
your instance.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Children's Privacy */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Children's Privacy</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 text-muted-foreground">
|
||||||
|
<p>
|
||||||
|
Our service is not intended for use by children under the age of 13. We do not knowingly
|
||||||
|
collect personally identifiable information from children under 13. If you are a parent
|
||||||
|
or guardian and you are aware that your child has provided us with personal information,
|
||||||
|
please contact us so we can take necessary action.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Your Data Rights */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Your Data Rights</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 text-muted-foreground">
|
||||||
|
<p>Depending on your location, you may have the following rights regarding your personal data:</p>
|
||||||
|
<ul className="list-disc list-inside ml-4 space-y-2">
|
||||||
|
<li><strong className="text-foreground">Access:</strong> Request access to your personal data</li>
|
||||||
|
<li><strong className="text-foreground">Correction:</strong> Request correction of inaccurate data</li>
|
||||||
|
<li><strong className="text-foreground">Deletion:</strong> Request deletion of your personal data</li>
|
||||||
|
<li><strong className="text-foreground">Export:</strong> Request a copy of your data in a portable format</li>
|
||||||
|
<li><strong className="text-foreground">Objection:</strong> Object to processing of your personal data</li>
|
||||||
|
</ul>
|
||||||
|
<p className="mt-4">
|
||||||
|
You can exercise many of these rights directly through the app's settings page
|
||||||
|
(export/import data functionality). For other requests, please contact us.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Changes to This Policy */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Changes to This Privacy Policy</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 text-muted-foreground">
|
||||||
|
<p>
|
||||||
|
We may update our Privacy Policy from time to time. We will notify you of any changes
|
||||||
|
by posting the new Privacy Policy on this page and updating the "Last Updated" date.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
You are advised to review this Privacy Policy periodically for any changes. Changes
|
||||||
|
to this Privacy Policy are effective when they are posted on this page.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Contact Us */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Mail className="h-5 w-5" />
|
||||||
|
Questions or Concerns
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 text-muted-foreground">
|
||||||
|
<p>
|
||||||
|
If you have questions about this Privacy Policy or how {appName} handles data,
|
||||||
|
you can:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc list-inside ml-4 space-y-2">
|
||||||
|
<li>Review the source code and documentation on GitHub</li>
|
||||||
|
<li>Open an issue in the project repository</li>
|
||||||
|
<li>Contact the project maintainer</li>
|
||||||
|
</ul>
|
||||||
|
<div className="bg-muted/50 rounded-lg p-4 mt-4">
|
||||||
|
<p className="text-sm">
|
||||||
|
<strong className="text-foreground">Remember:</strong> As the operator of your own
|
||||||
|
instance, you control your data. For questions about data stored on your server,
|
||||||
|
you are responsible for your own data management practices.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="text-center text-sm text-muted-foreground pt-8 border-t">
|
||||||
|
<p>© {new Date().getFullYear()} {appName}. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user