Compare commits
10 Commits
84019c3881
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 05fcb0a0d5 | |||
| d6da8177c1 | |||
| 237ba6b3c1 | |||
| 93dbf2023c | |||
| 85477e5499 | |||
| 7f06fa347a | |||
| 11940678f7 | |||
| bf7245d6d1 | |||
| 816476ed02 | |||
| 6e906436cc |
@@ -8,6 +8,7 @@ ARG VITE_FIREBASE_PROJECT_ID
|
||||
ARG VITE_FIREBASE_STORAGE_BUCKET
|
||||
ARG VITE_FIREBASE_MESSAGING_SENDER_ID
|
||||
ARG VITE_FIREBASE_APP_ID
|
||||
ARG VITE_FIREBASE_VAPID_KEY
|
||||
ARG VITE_API_URL=/api
|
||||
|
||||
ENV VITE_FIREBASE_API_KEY=${VITE_FIREBASE_API_KEY}
|
||||
@@ -16,6 +17,7 @@ ENV VITE_FIREBASE_PROJECT_ID=${VITE_FIREBASE_PROJECT_ID}
|
||||
ENV VITE_FIREBASE_STORAGE_BUCKET=${VITE_FIREBASE_STORAGE_BUCKET}
|
||||
ENV VITE_FIREBASE_MESSAGING_SENDER_ID=${VITE_FIREBASE_MESSAGING_SENDER_ID}
|
||||
ENV VITE_FIREBASE_APP_ID=${VITE_FIREBASE_APP_ID}
|
||||
ENV VITE_FIREBASE_VAPID_KEY=${VITE_FIREBASE_VAPID_KEY}
|
||||
ENV VITE_API_URL=${VITE_API_URL}
|
||||
|
||||
COPY package.json package-lock.json* ./
|
||||
|
||||
328
REMINDER_FEATURE_SETUP.md
Normal file
328
REMINDER_FEATURE_SETUP.md
Normal file
@@ -0,0 +1,328 @@
|
||||
# Daily Reminder Feature - Complete Setup & Context
|
||||
|
||||
**Date:** 2026-04-20
|
||||
**Status:** ✅ Enabled & Ready for Testing
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The Daily Reminder feature is a **fully implemented Firebase Cloud Messaging (FCM)** system that sends push notifications to remind users to journal. It works even when the browser is closed (on mobile PWA).
|
||||
|
||||
**Key Point:** All code was already in place but disabled in the UI. This document captures the setup and what was changed to enable it.
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
### Frontend Flow
|
||||
|
||||
**Files:** `src/hooks/useReminder.ts`, `src/hooks/reminderApi.ts`, `src/pages/SettingsPage.tsx`
|
||||
|
||||
1. User opens Settings → clicks "Daily Reminder" button
|
||||
2. Modal opens with time picker (`ClockTimePicker` component)
|
||||
3. User selects time (e.g., 08:00) → clicks "Save"
|
||||
4. `enableReminder()` is called:
|
||||
- Requests browser notification permission (`Notification.requestPermission()`)
|
||||
- Gets FCM token from service worker
|
||||
- Sends token to backend: `POST /api/notifications/fcm-token`
|
||||
- Sends settings to backend: `PUT /api/notifications/reminder/{userId}`
|
||||
- Stores time + enabled state in localStorage
|
||||
|
||||
**Message Handling:**
|
||||
|
||||
- `listenForegroundMessages()` called on app mount (in `src/main.tsx`)
|
||||
- When app is **focused**: Firebase SDK triggers `onMessage()` → shows notification manually
|
||||
- When app is **closed**: Service worker (`public/sw.js`) handles it via `onBackgroundMessage()` → shows notification
|
||||
|
||||
### Backend Flow
|
||||
|
||||
**Files:** `backend/scheduler.py`, `backend/routers/notifications.py`, `backend/main.py`
|
||||
|
||||
**Initialization:**
|
||||
|
||||
- `start_scheduler()` called in FastAPI app lifespan
|
||||
- Initializes Firebase Admin SDK (requires `FIREBASE_SERVICE_ACCOUNT_JSON`)
|
||||
- Starts APScheduler cron job
|
||||
|
||||
**Every Minute:**
|
||||
|
||||
1. Find all users with `reminder.enabled=true` and FCM tokens
|
||||
2. For each user:
|
||||
- Convert UTC time → user's timezone (stored in DB)
|
||||
- Check if current HH:MM matches `reminder.time` (e.g., "08:00")
|
||||
- Check if already notified today (via `reminder.lastNotifiedDate`)
|
||||
- Check if user has written a journal entry today
|
||||
- **If NOT written yet:** Send FCM push via `firebase_admin.messaging.send_each_for_multicast()`
|
||||
- Auto-prune stale tokens on failure
|
||||
- Mark as notified today
|
||||
|
||||
**Database Structure (MongoDB):**
|
||||
|
||||
```js
|
||||
users collection {
|
||||
_id: ObjectId,
|
||||
fcmTokens: [token1, token2, ...], // per device
|
||||
reminder: {
|
||||
enabled: boolean,
|
||||
time: "HH:MM", // 24-hour format
|
||||
timezone: "Asia/Kolkata", // IANA timezone
|
||||
lastNotifiedDate: "2026-04-16" // prevents duplicates today
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Changes Made (2026-04-20)
|
||||
|
||||
### 1. Updated Frontend Environment (`.env.local`)
|
||||
|
||||
**Changed:** Firebase credentials from mentor's project → personal test project
|
||||
|
||||
```env
|
||||
VITE_FIREBASE_API_KEY=AIzaSyAjGq7EFrp1mE_8Ni2iZz8LNk7ySVz-lX8
|
||||
VITE_FIREBASE_AUTH_DOMAIN=react-test-8cb04.firebaseapp.com
|
||||
VITE_FIREBASE_PROJECT_ID=react-test-8cb04
|
||||
VITE_FIREBASE_MESSAGING_SENDER_ID=1036594341832
|
||||
VITE_FIREBASE_APP_ID=1:1036594341832:web:9db6fa337e9cd2e953c2fd
|
||||
VITE_FIREBASE_VAPID_KEY=BLXhAWY-ms-ACW4PFpqnPak3VZobBIruylVE8Jt-Gm4x53g4aAzEhQzjTvGW8O7dX76-ZoUjlBV15b-EODr1IaY
|
||||
```
|
||||
|
||||
### 2. Updated Backend Environment (`backend/.env`)
|
||||
|
||||
**Changed:** Added Firebase service account JSON (from personal test project)
|
||||
|
||||
```env
|
||||
FIREBASE_SERVICE_ACCOUNT_JSON={"type":"service_account","project_id":"react-test-8cb04",...}
|
||||
```
|
||||
|
||||
### 3. Deleted Service Account JSON File
|
||||
|
||||
- Removed: `service account.json` (no longer needed — credentials now in env var)
|
||||
|
||||
### 4. Enabled Reminder UI (`src/pages/SettingsPage.tsx`)
|
||||
|
||||
**Before:**
|
||||
|
||||
```tsx
|
||||
<div className="settings-item" style={{ opacity: 0.5 }}>
|
||||
<label className="settings-toggle">
|
||||
<input type="checkbox" checked={false} disabled readOnly />
|
||||
</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
**After:**
|
||||
|
||||
```tsx
|
||||
<button
|
||||
type="button"
|
||||
className="settings-item settings-item-button"
|
||||
onClick={handleOpenReminderModal}
|
||||
>
|
||||
<div className="settings-item-content">
|
||||
<h4 className="settings-item-title">Daily Reminder</h4>
|
||||
<p className="settings-item-subtitle">
|
||||
{reminderEnabled && reminderTime
|
||||
? `Set for ${reminderTime}`
|
||||
: "Set a daily reminder"}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
```
|
||||
|
||||
- Changed from disabled toggle → interactive button
|
||||
- Shows current reminder time or "Set a daily reminder"
|
||||
- Clicking opens time picker modal
|
||||
|
||||
### 5. Removed Type Ignore Comment
|
||||
|
||||
**Before:**
|
||||
|
||||
```tsx
|
||||
// @ts-ignore — intentionally unused, reminder is disabled (coming soon)
|
||||
const handleReminderToggle = async () => {
|
||||
```
|
||||
|
||||
**After:**
|
||||
|
||||
```tsx
|
||||
const handleReminderToggle = async () => {
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Critical Code Files
|
||||
|
||||
| File | Purpose |
|
||||
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------ |
|
||||
| `src/hooks/useReminder.ts` | `enableReminder()`, `disableReminder()`, `reenableReminder()`, `getFcmToken()`, `listenForegroundMessages()` |
|
||||
| `src/hooks/reminderApi.ts` | `saveFcmToken()`, `saveReminderSettings()` |
|
||||
| `backend/scheduler.py` | `send_reminder_notifications()`, `_process_user()`, `_send_push()`, `init_firebase()` |
|
||||
| `backend/routers/notifications.py` | `POST /fcm-token`, `PUT /reminder/{user_id}` endpoints |
|
||||
| `public/sw.js` | Service worker background message handler |
|
||||
| `src/pages/SettingsPage.tsx` | UI: time picker modal, reminder state mgmt |
|
||||
| `src/main.tsx` | Calls `listenForegroundMessages()` on mount |
|
||||
| `backend/main.py` | Scheduler initialization in app lifespan |
|
||||
|
||||
---
|
||||
|
||||
## How to Test
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- ✅ Backend `.env` has Firebase service account JSON
|
||||
- ✅ Frontend `.env.local` has Firebase web config + VAPID key
|
||||
- ✅ UI is enabled (button visible in Settings)
|
||||
|
||||
### Steps
|
||||
|
||||
1. **Restart the backend** (so it picks up new `FIREBASE_SERVICE_ACCOUNT_JSON`)
|
||||
|
||||
```bash
|
||||
docker-compose down
|
||||
docker-compose up
|
||||
```
|
||||
|
||||
2. **Open the app** and go to **Settings**
|
||||
|
||||
3. **Click "Daily Reminder"** → time picker modal opens
|
||||
|
||||
4. **Pick a time** (e.g., 14:30 for testing: pick a time 1-2 minutes in the future)
|
||||
|
||||
5. **Click "Save"**
|
||||
- Browser asks for notification permission → Accept
|
||||
- Time is saved locally + sent to backend
|
||||
|
||||
6. **Monitor backend logs:**
|
||||
|
||||
```bash
|
||||
docker logs grateful-journal-backend-1 -f
|
||||
```
|
||||
|
||||
Look for: `Reminder sent to user {user_id}: X ok, 0 failed`
|
||||
|
||||
7. **At the reminder time:**
|
||||
- If browser is open: notification appears in-app
|
||||
- If browser is closed: PWA/OS notification appears (mobile)
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
| Issue | Solution |
|
||||
| --------------------------------------------------- | ---------------------------------------------------------------------------------- |
|
||||
| Browser asks for notification permission repeatedly | Check `Notification.permission === 'default'` in browser console |
|
||||
| FCM token is null | Check `VITE_FIREBASE_VAPID_KEY` is correct; browser may not support FCM |
|
||||
| Scheduler doesn't run | Restart backend; check `FIREBASE_SERVICE_ACCOUNT_JSON` is valid JSON |
|
||||
| Notification doesn't appear | Check `reminder.lastNotifiedDate` in MongoDB; trigger time must match exactly |
|
||||
| Token registration fails | Check backend logs; 400 error means invalid userId format (must be valid ObjectId) |
|
||||
|
||||
---
|
||||
|
||||
## Environment Variables Reference
|
||||
|
||||
### Frontend (`.env.local`)
|
||||
|
||||
```
|
||||
VITE_FIREBASE_API_KEY # Firebase API key
|
||||
VITE_FIREBASE_AUTH_DOMAIN # Firebase auth domain
|
||||
VITE_FIREBASE_PROJECT_ID # Firebase project ID
|
||||
VITE_FIREBASE_MESSAGING_SENDER_ID # Firebase sender ID
|
||||
VITE_FIREBASE_APP_ID # Firebase app ID
|
||||
VITE_FIREBASE_VAPID_KEY # FCM Web Push VAPID key (from Firebase Console → Messaging)
|
||||
VITE_API_URL # Backend API URL (e.g., http://localhost:8001/api)
|
||||
```
|
||||
|
||||
### Backend (`backend/.env`)
|
||||
|
||||
```
|
||||
FIREBASE_SERVICE_ACCOUNT_JSON # Entire Firebase service account JSON (minified single line)
|
||||
MONGODB_URI # MongoDB connection string
|
||||
MONGODB_DB_NAME # Database name
|
||||
API_PORT # Backend port
|
||||
ENVIRONMENT # production/development
|
||||
FRONTEND_URL # Frontend URL for CORS
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
### For Production
|
||||
|
||||
- Switch back to mentor's Firebase credentials (remove personal test project)
|
||||
- Update `.env.local` and `backend/.env` with production Firebase values
|
||||
|
||||
### Future Improvements
|
||||
|
||||
- Add UI toggle to enable/disable without removing settings
|
||||
- Show timezone in Settings (currently auto-detected)
|
||||
- Show last notification date in UI
|
||||
- Add snooze button to notifications
|
||||
- Let users set multiple reminder times
|
||||
|
||||
### Resetting to Disabled State
|
||||
|
||||
If you need to disable reminders again:
|
||||
|
||||
1. Revert `.env.local` and `backend/.env` to mentor's credentials
|
||||
2. Revert `src/pages/SettingsPage.tsx` to show "Coming soon" UI
|
||||
3. Add back `@ts-ignore` comment
|
||||
|
||||
---
|
||||
|
||||
## Technical Notes
|
||||
|
||||
### Why This Approach?
|
||||
|
||||
- **FCM:** Works on web, mobile, PWA; no polling needed
|
||||
- **Service Worker:** Handles background notifications even when browser closed
|
||||
- **Timezone:** Stores user's IANA timezone to support global users
|
||||
- **Duplicate Prevention:** Tracks `lastNotifiedDate` per user
|
||||
- **Smart Timing:** Only notifies if user hasn't written today (no spam)
|
||||
|
||||
### Security Considerations
|
||||
|
||||
- Firebase service account JSON should never be in git (only in env vars)
|
||||
- FCM tokens are device-specific; backend stores them securely
|
||||
- All reminder data is encrypted end-to-end (matches app's crypto design)
|
||||
|
||||
### Known Limitations
|
||||
|
||||
- Reminder check runs every minute (not more frequent)
|
||||
- FCM token refresh is handled by Firebase SDK automatically
|
||||
- Stale tokens are auto-pruned on failed sends
|
||||
- Timezone must be valid IANA format (not GMT±X)
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference Commands
|
||||
|
||||
**Check backend scheduler logs:**
|
||||
|
||||
```bash
|
||||
docker logs grateful-journal-backend-1 -f | grep -i "reminder\|firebase"
|
||||
```
|
||||
|
||||
**View user reminders in MongoDB:**
|
||||
|
||||
```bash
|
||||
docker exec grateful-journal-mongo-1 mongosh grateful_journal --eval "db.users.findOne({_id: ObjectId('...')})" --username admin --password internvps
|
||||
```
|
||||
|
||||
**Clear FCM tokens for a user (testing):**
|
||||
|
||||
```bash
|
||||
docker exec grateful-journal-mongo-1 mongosh grateful_journal --eval "db.users.updateOne({_id: ObjectId('...')}, {\$set: {fcmTokens: []}})" --username admin --password internvps
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Support
|
||||
|
||||
For questions about:
|
||||
|
||||
- **Reminders:** Check daily_reminder_feature.md in memory
|
||||
- **FCM:** Firebase Cloud Messaging docs
|
||||
- **APScheduler:** APScheduler documentation
|
||||
- **Firebase Admin SDK:** Firebase Admin SDK for Python docs
|
||||
115
about.html
Normal file
115
about.html
Normal file
@@ -0,0 +1,115 @@
|
||||
<!doctype html>
|
||||
<html lang="en" style="background-color:#eef6ee">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="apple-mobile-web-app-title" content="Grateful Journal" />
|
||||
<meta name="theme-color" content="#16a34a" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
|
||||
/>
|
||||
|
||||
<!-- SEO -->
|
||||
<title>About Grateful Journal | Private, Encrypted Gratitude Journaling</title>
|
||||
<meta name="description" content="Learn about Grateful Journal — a free, end-to-end encrypted daily gratitude journal. No ads, no tracking, no social feed. Just you and your thoughts." />
|
||||
<meta name="keywords" content="about grateful journal, private gratitude journal, encrypted journal app, gratitude journaling, mindfulness app" />
|
||||
<meta name="robots" content="index, follow, max-snippet:160, max-image-preview:large" />
|
||||
<link rel="canonical" href="https://gratefuljournal.online/about" />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:url" content="https://gratefuljournal.online/about" />
|
||||
<meta property="og:title" content="About Grateful Journal | Private, Encrypted Gratitude Journaling" />
|
||||
<meta property="og:description" content="A free, private gratitude journal with end-to-end encryption. Learn how we built a distraction-free space for your daily reflection practice." />
|
||||
<meta property="og:image" content="https://gratefuljournal.online/web-app-manifest-512x512.png" />
|
||||
<meta property="og:image:width" content="512" />
|
||||
<meta property="og:image:height" content="512" />
|
||||
<meta property="og:image:alt" content="Grateful Journal logo - a green sprout" />
|
||||
<meta property="og:site_name" content="Grateful Journal" />
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="About Grateful Journal | Private, Encrypted Gratitude Journaling" />
|
||||
<meta name="twitter:description" content="A free, private gratitude journal with end-to-end encryption. No ads, no tracking, no social feed." />
|
||||
<meta name="twitter:image" content="https://gratefuljournal.online/web-app-manifest-512x512.png" />
|
||||
<meta name="twitter:image:alt" content="Grateful Journal logo - a green sprout" />
|
||||
|
||||
<!-- JSON-LD: WebPage -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "AboutPage",
|
||||
"name": "About Grateful Journal",
|
||||
"url": "https://gratefuljournal.online/about",
|
||||
"description": "Learn about Grateful Journal — a free, end-to-end encrypted daily gratitude journal. No ads, no tracking, no social feed.",
|
||||
"isPartOf": {
|
||||
"@type": "WebSite",
|
||||
"name": "Grateful Journal",
|
||||
"url": "https://gratefuljournal.online/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- JSON-LD: Organization -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "Grateful Journal",
|
||||
"url": "https://gratefuljournal.online/",
|
||||
"logo": {
|
||||
"@type": "ImageObject",
|
||||
"url": "https://gratefuljournal.online/web-app-manifest-512x512.png",
|
||||
"width": 512,
|
||||
"height": 512
|
||||
},
|
||||
"description": "A private, end-to-end encrypted gratitude journal. No feeds, no noise — just you and your thoughts.",
|
||||
"sameAs": []
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<noscript>
|
||||
<main style="font-family:sans-serif;max-width:680px;margin:4rem auto;padding:1rem 1.5rem;color:#1a1a1a;line-height:1.7">
|
||||
<nav style="margin-bottom:2rem"><a href="/" style="color:#15803d">← Grateful Journal</a></nav>
|
||||
|
||||
<h1 style="color:#15803d">About Grateful Journal</h1>
|
||||
<p style="font-size:1.1rem">A private space for gratitude and reflection. No feeds. No noise. Just you and your thoughts.</p>
|
||||
|
||||
<h2>What is it?</h2>
|
||||
<p>Grateful Journal is a free, end-to-end encrypted daily journal focused on gratitude. You write a few things you're grateful for each day, and over time you build a private record of the good in your life — visible only to you.</p>
|
||||
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li><strong>End-to-end encrypted entries</strong> — your journal content is encrypted before leaving your device. We cannot read it.</li>
|
||||
<li><strong>No ads, no tracking</strong> — we don't sell your data or show you ads.</li>
|
||||
<li><strong>Works offline</strong> — installable as a PWA on Android, iOS, and desktop.</li>
|
||||
<li><strong>Daily prompts</strong> — gentle nudges to keep your practice consistent.</li>
|
||||
<li><strong>History view</strong> — browse past entries and reflect on how far you've come.</li>
|
||||
<li><strong>Free to use</strong> — no subscription, no paywall.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Why gratitude?</h2>
|
||||
<p>Research consistently shows that a regular gratitude practice improves mood, reduces stress, and builds resilience. Grateful Journal gives you the simplest possible tool to build that habit — without distractions or social pressure.</p>
|
||||
|
||||
<h2>Privacy first</h2>
|
||||
<p>We built Grateful Journal because we believe your inner thoughts deserve a private space. Your journal entries are end-to-end encrypted — only you can read them. App preferences such as your display name, profile photo, and background images are stored as plain account settings and are not encrypted. Read our full <a href="/privacy">Privacy Policy</a> for a complete breakdown of what is and isn't encrypted.</p>
|
||||
|
||||
<nav style="margin-top:2rem">
|
||||
<a href="/">← Back to Grateful Journal</a> ·
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
</nav>
|
||||
</main>
|
||||
</noscript>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
@@ -1,5 +1,8 @@
|
||||
from pydantic_settings import BaseSettings, SettingsConfigDict # type: ignore
|
||||
from functools import lru_cache
|
||||
from pathlib import Path
|
||||
|
||||
_ENV_FILE = str(Path(__file__).parent / ".env")
|
||||
|
||||
|
||||
class Settings(BaseSettings):
|
||||
@@ -12,7 +15,7 @@ class Settings(BaseSettings):
|
||||
firebase_service_account_json: str = ""
|
||||
|
||||
model_config = SettingsConfigDict(
|
||||
env_file=".env",
|
||||
env_file=_ENV_FILE,
|
||||
case_sensitive=False,
|
||||
extra="ignore", # ignore unknown env vars (e.g. VITE_* from root .env)
|
||||
)
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import logging
|
||||
from fastapi import FastAPI
|
||||
from fastapi.middleware.cors import CORSMiddleware
|
||||
from db import MongoDB
|
||||
@@ -7,6 +8,13 @@ from routers import notifications
|
||||
from scheduler import start_scheduler
|
||||
from contextlib import asynccontextmanager
|
||||
|
||||
logging.basicConfig(
|
||||
level=logging.INFO,
|
||||
format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
|
||||
force=True,
|
||||
)
|
||||
logging.getLogger("scheduler").setLevel(logging.DEBUG)
|
||||
|
||||
settings = get_settings()
|
||||
_scheduler = None
|
||||
|
||||
|
||||
@@ -54,6 +54,7 @@ async def register_user(user_data: UserCreate):
|
||||
"theme": user.get("theme", "light"),
|
||||
"backgroundImage": user.get("backgroundImage"),
|
||||
"backgroundImages": user.get("backgroundImages", []),
|
||||
"reminder": user.get("reminder"),
|
||||
"createdAt": user["createdAt"].isoformat(),
|
||||
"updatedAt": user["updatedAt"].isoformat(),
|
||||
"message": "User registered successfully" if result.upserted_id else "User already exists"
|
||||
@@ -83,6 +84,7 @@ async def get_user_by_email(email: str):
|
||||
"theme": user.get("theme", "light"),
|
||||
"backgroundImage": user.get("backgroundImage"),
|
||||
"backgroundImages": user.get("backgroundImages", []),
|
||||
"reminder": user.get("reminder"),
|
||||
"tutorial": user.get("tutorial"),
|
||||
"createdAt": user["createdAt"].isoformat(),
|
||||
"updatedAt": user["updatedAt"].isoformat()
|
||||
|
||||
@@ -49,79 +49,109 @@ def init_firebase():
|
||||
def send_reminder_notifications():
|
||||
"""Check all users and send reminders where due."""
|
||||
if not _firebase_initialized:
|
||||
log.warning("Reminder check skipped — Firebase not initialized")
|
||||
return
|
||||
|
||||
db = get_database()
|
||||
now_utc = datetime.utcnow().replace(second=0, microsecond=0)
|
||||
|
||||
# Find all users with reminder enabled and at least one FCM token
|
||||
users = db.users.find({
|
||||
candidates = list(db.users.find({
|
||||
"reminder.enabled": True,
|
||||
"fcmTokens": {"$exists": True, "$not": {"$size": 0}},
|
||||
"reminder.time": {"$exists": True},
|
||||
})
|
||||
}))
|
||||
|
||||
for user in users:
|
||||
log.debug(f"Reminder check at {now_utc.strftime('%H:%M')} UTC — {len(candidates)} candidate(s)")
|
||||
|
||||
for user in candidates:
|
||||
try:
|
||||
if user.get("reminder", {}).get("time"):
|
||||
_process_user(db, user, now_utc)
|
||||
_process_universal(db, user, now_utc)
|
||||
except Exception as e:
|
||||
log.error(f"Error processing reminder for user {user.get('_id')}: {e}")
|
||||
|
||||
|
||||
def _get_user_local_time(now_utc: datetime, timezone_str: str):
|
||||
"""Returns (now_local, today_str, user_tz)."""
|
||||
try:
|
||||
user_tz = pytz.timezone(timezone_str)
|
||||
except pytz.UnknownTimeZoneError:
|
||||
user_tz = pytz.utc
|
||||
now_local = now_utc.replace(tzinfo=pytz.utc).astimezone(user_tz)
|
||||
today_str = now_local.strftime("%Y-%m-%d")
|
||||
return now_local, today_str, user_tz
|
||||
|
||||
|
||||
def _wrote_today(db, user_id, now_local, user_tz) -> bool:
|
||||
today_start_local = now_local.replace(hour=0, minute=0, second=0, microsecond=0)
|
||||
today_start_utc = today_start_local.astimezone(pytz.utc).replace(tzinfo=None)
|
||||
today_end_utc = today_start_utc + timedelta(days=1)
|
||||
return db.entries.count_documents({
|
||||
"userId": user_id,
|
||||
"createdAt": {"$gte": today_start_utc, "$lt": today_end_utc},
|
||||
}) > 0
|
||||
|
||||
|
||||
def _process_user(db, user: dict, now_utc: datetime):
|
||||
uid = user.get("_id")
|
||||
reminder = user.get("reminder", {})
|
||||
reminder_time_str = reminder.get("time") # "HH:MM"
|
||||
reminder_time_str = reminder.get("time")
|
||||
timezone_str = reminder.get("timezone", "UTC")
|
||||
fcm_tokens: list = user.get("fcmTokens", [])
|
||||
|
||||
if not reminder_time_str or not fcm_tokens:
|
||||
return
|
||||
|
||||
try:
|
||||
user_tz = pytz.timezone(timezone_str)
|
||||
except pytz.UnknownTimeZoneError:
|
||||
user_tz = pytz.utc
|
||||
|
||||
# Current time in user's timezone
|
||||
now_local = now_utc.replace(tzinfo=pytz.utc).astimezone(user_tz)
|
||||
now_local, today_str, user_tz = _get_user_local_time(now_utc, timezone_str)
|
||||
current_hm = now_local.strftime("%H:%M")
|
||||
|
||||
if current_hm != reminder_time_str:
|
||||
return # Not the right minute
|
||||
|
||||
# Check if already notified today (in user's local date)
|
||||
today_local_str = now_local.strftime("%Y-%m-%d")
|
||||
last_notified = reminder.get("lastNotifiedDate", "")
|
||||
if last_notified == today_local_str:
|
||||
return # Already sent today
|
||||
|
||||
# Check if user has already written today (using createdAt in their timezone)
|
||||
today_start_local = now_local.replace(hour=0, minute=0, second=0, microsecond=0)
|
||||
today_start_utc = today_start_local.astimezone(pytz.utc).replace(tzinfo=None)
|
||||
today_end_utc = today_start_utc + timedelta(days=1)
|
||||
|
||||
entry_count = db.entries.count_documents({
|
||||
"userId": user["_id"],
|
||||
"createdAt": {"$gte": today_start_utc, "$lt": today_end_utc},
|
||||
})
|
||||
|
||||
if entry_count > 0:
|
||||
# Already wrote today — mark notified to avoid repeated checks
|
||||
db.users.update_one(
|
||||
{"_id": user["_id"]},
|
||||
{"$set": {"reminder.lastNotifiedDate": today_local_str}}
|
||||
)
|
||||
log.debug(f"User {uid}: skipped — current time {current_hm} != reminder time {reminder_time_str} ({timezone_str})")
|
||||
return
|
||||
|
||||
# Send FCM notification
|
||||
_send_push(user["_id"], fcm_tokens, db, today_local_str)
|
||||
if _wrote_today(db, uid, now_local, user_tz):
|
||||
log.debug(f"User {uid}: skipped — already wrote today")
|
||||
return
|
||||
|
||||
log.info(f"User {uid}: sending reminder (time={reminder_time_str}, tz={timezone_str})")
|
||||
_send_push(uid, fcm_tokens, db)
|
||||
|
||||
|
||||
def _send_push(user_id, tokens: list, db, today_local_str: str):
|
||||
def _process_universal(db, user: dict, now_utc: datetime):
|
||||
"""Universal 11pm reminder — fires if enabled and no entry written today."""
|
||||
uid = user.get("_id")
|
||||
reminder = user.get("reminder", {})
|
||||
timezone_str = reminder.get("timezone", "UTC")
|
||||
fcm_tokens: list = user.get("fcmTokens", [])
|
||||
|
||||
if not fcm_tokens:
|
||||
return
|
||||
|
||||
now_local, today_str, user_tz = _get_user_local_time(now_utc, timezone_str)
|
||||
|
||||
if now_local.strftime("%H:%M") != "23:00":
|
||||
return
|
||||
|
||||
if reminder.get("lastUniversalDate") == today_str:
|
||||
log.debug(f"User {uid}: universal reminder skipped — already sent today")
|
||||
return
|
||||
|
||||
if _wrote_today(db, uid, now_local, user_tz):
|
||||
log.debug(f"User {uid}: universal reminder skipped — already wrote today")
|
||||
db.users.update_one({"_id": uid}, {"$set": {"reminder.lastUniversalDate": today_str}})
|
||||
return
|
||||
|
||||
log.info(f"User {uid}: sending universal 11pm reminder (tz={timezone_str})")
|
||||
_send_push(uid, fcm_tokens, db, universal=True)
|
||||
db.users.update_one({"_id": uid}, {"$set": {"reminder.lastUniversalDate": today_str}})
|
||||
|
||||
|
||||
def _send_push(user_id, tokens: list, db, universal: bool = False):
|
||||
"""Send FCM multicast and prune stale tokens."""
|
||||
title = "Last chance to journal today 🌙" if universal else "Time to journal 🌱"
|
||||
message = messaging.MulticastMessage(
|
||||
notification=messaging.Notification(
|
||||
title="Time to journal 🌱",
|
||||
title=title,
|
||||
body="You haven't written today yet. Take a moment to reflect.",
|
||||
),
|
||||
tokens=tokens,
|
||||
@@ -143,7 +173,6 @@ def _send_push(user_id, tokens: list, db, today_local_str: str):
|
||||
response = messaging.send_each_for_multicast(message)
|
||||
log.info(f"Reminder sent to user {user_id}: {response.success_count} ok, {response.failure_count} failed")
|
||||
|
||||
# Remove tokens that are no longer valid
|
||||
stale_tokens = [
|
||||
tokens[i] for i, r in enumerate(response.responses)
|
||||
if not r.success and r.exception and "not-registered" in str(r.exception).lower()
|
||||
@@ -155,12 +184,6 @@ def _send_push(user_id, tokens: list, db, today_local_str: str):
|
||||
)
|
||||
log.info(f"Removed {len(stale_tokens)} stale FCM tokens for user {user_id}")
|
||||
|
||||
# Mark today as notified
|
||||
db.users.update_one(
|
||||
{"_id": user_id},
|
||||
{"$set": {"reminder.lastNotifiedDate": today_local_str}}
|
||||
)
|
||||
|
||||
|
||||
def start_scheduler() -> BackgroundScheduler:
|
||||
"""Initialize Firebase and start the minute-by-minute scheduler."""
|
||||
|
||||
@@ -10,6 +10,7 @@ services:
|
||||
VITE_FIREBASE_STORAGE_BUCKET: ${VITE_FIREBASE_STORAGE_BUCKET}
|
||||
VITE_FIREBASE_MESSAGING_SENDER_ID: ${VITE_FIREBASE_MESSAGING_SENDER_ID}
|
||||
VITE_FIREBASE_APP_ID: ${VITE_FIREBASE_APP_ID}
|
||||
VITE_FIREBASE_VAPID_KEY: ${VITE_FIREBASE_VAPID_KEY}
|
||||
VITE_API_URL: ${VITE_API_URL:-/api}
|
||||
depends_on:
|
||||
backend:
|
||||
|
||||
71
index.html
71
index.html
@@ -17,7 +17,7 @@
|
||||
/>
|
||||
|
||||
<!-- SEO -->
|
||||
<title>Grateful Journal — Your Private Gratitude Journal</title>
|
||||
<title>Private Gratitude Journal App | Grateful Journal</title>
|
||||
<meta name="description" content="A private, end-to-end encrypted gratitude journal. No feeds, no noise — just you and your thoughts. Grow your gratitude one moment at a time." />
|
||||
<meta name="keywords" content="gratitude journal, private journal, encrypted journal, daily gratitude, mindfulness, reflection" />
|
||||
<meta name="robots" content="index, follow, max-snippet:160, max-image-preview:large" />
|
||||
@@ -27,20 +27,20 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:url" content="https://gratefuljournal.online/" />
|
||||
<meta property="og:title" content="Grateful Journal — Your Private Gratitude Journal" />
|
||||
<meta property="og:title" content="Private Gratitude Journal App | Grateful Journal" />
|
||||
<meta property="og:description" content="A private, end-to-end encrypted gratitude journal. No feeds, no noise — just you and your thoughts." />
|
||||
<meta property="og:image" content="https://gratefuljournal.online/web-app-manifest-512x512.png" />
|
||||
<meta property="og:image:width" content="512" />
|
||||
<meta property="og:image:height" content="512" />
|
||||
<meta property="og:image:alt" content="Grateful Journal logo — a green sprout" />
|
||||
<meta property="og:image:alt" content="Grateful Journal logo - a green sprout" />
|
||||
<meta property="og:site_name" content="Grateful Journal" />
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Grateful Journal — Your Private Gratitude Journal" />
|
||||
<meta name="twitter:title" content="Private Gratitude Journal App | Grateful Journal" />
|
||||
<meta name="twitter:description" content="A private, end-to-end encrypted gratitude journal. No feeds, no noise — just you and your thoughts." />
|
||||
<meta name="twitter:image" content="https://gratefuljournal.online/web-app-manifest-512x512.png" />
|
||||
<meta name="twitter:image:alt" content="Grateful Journal logo — a green sprout" />
|
||||
<meta name="twitter:image:alt" content="Grateful Journal logo - a green sprout" />
|
||||
|
||||
<!-- JSON-LD: WebSite -->
|
||||
<script type="application/ld+json">
|
||||
@@ -140,24 +140,55 @@
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<noscript>
|
||||
<main style="font-family:sans-serif;max-width:640px;margin:4rem auto;padding:1rem;color:#1a1a1a">
|
||||
<h1>Grateful Journal — Your Private Gratitude Journal</h1>
|
||||
<p>A private, end-to-end encrypted gratitude journal. No feeds, no noise — just you and your thoughts. Grow your gratitude one moment at a time.</p>
|
||||
<h2>Features</h2>
|
||||
<main style="font-family:sans-serif;max-width:680px;margin:4rem auto;padding:1rem 1.5rem;color:#1a1a1a;line-height:1.7">
|
||||
<h1 style="color:#15803d">Grateful Journal - Your Private Gratitude Journal</h1>
|
||||
<p style="font-size:1.1rem">A free, private, end-to-end encrypted gratitude journal. No feeds, no noise — just you and your thoughts. Grow your gratitude one moment at a time.</p>
|
||||
|
||||
<h2>What is Grateful Journal?</h2>
|
||||
<p>Grateful Journal is a daily gratitude journaling app built for people who value privacy. You write a few things you're grateful for each day, and over time you build a private record of the good in your life — visible only to you. No social pressure, no algorithms, no distractions.</p>
|
||||
|
||||
<h2>Key Features</h2>
|
||||
<ul>
|
||||
<li>End-to-end encrypted journal entries — only you can read them</li>
|
||||
<li>Daily gratitude prompts to keep you consistent</li>
|
||||
<li>No ads, no tracking, no social feed</li>
|
||||
<li>Works offline as a Progressive Web App (PWA)</li>
|
||||
<li>Free to use</li>
|
||||
<li><strong>End-to-end encrypted entries</strong> — your journal content is encrypted on your device before it reaches our servers. We cannot read it.</li>
|
||||
<li><strong>No ads, no tracking</strong> — we do not sell your data, show ads, or use tracking pixels of any kind.</li>
|
||||
<li><strong>Works offline</strong> — installable as a Progressive Web App (PWA) on Android, iOS, and desktop. Write even without an internet connection.</li>
|
||||
<li><strong>Daily gratitude prompts</strong> — gentle nudges to keep your reflection practice consistent.</li>
|
||||
<li><strong>History view</strong> — browse past entries and see how far you've come.</li>
|
||||
<li><strong>Completely free</strong> — no subscription, no paywall, no hidden fees.</li>
|
||||
</ul>
|
||||
<h2>How it works</h2>
|
||||
<p>Sign in with Google, write a few things you're grateful for each day, and watch your mindset shift over time. Your entries are encrypted before they leave your device.</p>
|
||||
<p><a href="https://gratefuljournal.online/">Get started — it's free</a></p>
|
||||
<p>
|
||||
|
||||
<h2>Why a Private Gratitude Journal?</h2>
|
||||
<p>Research consistently shows that a regular gratitude practice improves mood, reduces stress, and builds resilience. But most journaling apps either sell your data or make your entries visible in social feeds. Grateful Journal gives you the simplest possible tool to build the gratitude habit — with your privacy as a non-negotiable foundation.</p>
|
||||
|
||||
<h2>How Encryption Works</h2>
|
||||
<p>Your journal entries are encrypted using XSalsa20-Poly1305 before leaving your device. The encryption key is derived from your account and never sent to our servers. We store only ciphertext — even a database breach would expose nothing readable. App preferences like your display name and theme are stored as plain settings, not journal content.</p>
|
||||
|
||||
<h2>Who Is It For?</h2>
|
||||
<ul>
|
||||
<li>Privacy-conscious users who want a digital journal without surveillance</li>
|
||||
<li>People building a daily gratitude or mindfulness practice</li>
|
||||
<li>Anyone who wants a distraction-free space for daily reflection</li>
|
||||
<li>Users looking for a free, encrypted alternative to Day One or Notion</li>
|
||||
</ul>
|
||||
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
<dl>
|
||||
<dt><strong>Is Grateful Journal free?</strong></dt>
|
||||
<dd>Yes, completely free. No subscription, no paywall.</dd>
|
||||
<dt><strong>Are my entries private?</strong></dt>
|
||||
<dd>Yes. Entries are end-to-end encrypted. Even we cannot read them.</dd>
|
||||
<dt><strong>Does it work offline?</strong></dt>
|
||||
<dd>Yes. Install it as a PWA on Android, iOS, or desktop for offline access.</dd>
|
||||
<dt><strong>Do you sell data or show ads?</strong></dt>
|
||||
<dd>No. We do not sell data, show ads, or use any tracking.</dd>
|
||||
</dl>
|
||||
|
||||
<p><a href="https://gratefuljournal.online/" style="color:#15803d;font-weight:bold">Get started — it's free</a></p>
|
||||
<nav>
|
||||
<a href="/about">About</a> ·
|
||||
<a href="/privacypolicy">Privacy Policy</a>
|
||||
</p>
|
||||
<a href="/privacy">Privacy Policy</a> ·
|
||||
<a href="/termsofservice">Terms of Service</a>
|
||||
</nav>
|
||||
</main>
|
||||
</noscript>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
|
||||
@@ -59,12 +59,26 @@ server {
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
# Known SPA routes — serve index.html
|
||||
# Homepage
|
||||
location = / {
|
||||
try_files /index.html =404;
|
||||
}
|
||||
|
||||
location ~ ^/(write|history|settings|privacy|about)(/|$) {
|
||||
# Pre-rendered public pages — each gets its own HTML with correct meta tags
|
||||
location ~ ^/about(/|$) {
|
||||
try_files /about.html =404;
|
||||
}
|
||||
|
||||
location ~ ^/privacy(/|$) {
|
||||
try_files /privacy.html =404;
|
||||
}
|
||||
|
||||
location ~ ^/termsofservice(/|$) {
|
||||
try_files /termsofservice.html =404;
|
||||
}
|
||||
|
||||
# Protected SPA routes — serve index.html (React handles auth redirect)
|
||||
location ~ ^/(write|history|settings)(/|$) {
|
||||
try_files /index.html =404;
|
||||
}
|
||||
|
||||
|
||||
103
privacy.html
Normal file
103
privacy.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!doctype html>
|
||||
<html lang="en" style="background-color:#eef6ee">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="apple-mobile-web-app-title" content="Grateful Journal" />
|
||||
<meta name="theme-color" content="#16a34a" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
|
||||
/>
|
||||
|
||||
<!-- SEO -->
|
||||
<title>Privacy Policy | Grateful Journal</title>
|
||||
<meta name="description" content="Grateful Journal's privacy policy. Your journal entries are end-to-end encrypted — we cannot read them. No ads, no tracking, no data selling." />
|
||||
<meta name="keywords" content="grateful journal privacy policy, encrypted journal, private journal app, data privacy" />
|
||||
<meta name="robots" content="index, follow, max-snippet:160, max-image-preview:large" />
|
||||
<link rel="canonical" href="https://gratefuljournal.online/privacy" />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:url" content="https://gratefuljournal.online/privacy" />
|
||||
<meta property="og:title" content="Privacy Policy | Grateful Journal" />
|
||||
<meta property="og:description" content="Your journal entries are end-to-end encrypted and private. App preferences like background images are stored unencrypted. No ads, no tracking, no data selling." />
|
||||
<meta property="og:image" content="https://gratefuljournal.online/web-app-manifest-512x512.png" />
|
||||
<meta property="og:image:width" content="512" />
|
||||
<meta property="og:image:height" content="512" />
|
||||
<meta property="og:image:alt" content="Grateful Journal logo - a green sprout" />
|
||||
<meta property="og:site_name" content="Grateful Journal" />
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Privacy Policy | Grateful Journal" />
|
||||
<meta name="twitter:description" content="Your journal entries are end-to-end encrypted. No ads, no tracking, no data selling." />
|
||||
<meta name="twitter:image" content="https://gratefuljournal.online/web-app-manifest-512x512.png" />
|
||||
<meta name="twitter:image:alt" content="Grateful Journal logo - a green sprout" />
|
||||
|
||||
<!-- JSON-LD: WebPage -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebPage",
|
||||
"name": "Privacy Policy",
|
||||
"url": "https://gratefuljournal.online/privacy",
|
||||
"description": "Grateful Journal's privacy policy. Your journal entries are end-to-end encrypted — we cannot read them.",
|
||||
"isPartOf": {
|
||||
"@type": "WebSite",
|
||||
"name": "Grateful Journal",
|
||||
"url": "https://gratefuljournal.online/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<noscript>
|
||||
<main style="font-family:sans-serif;max-width:680px;margin:4rem auto;padding:1rem 1.5rem;color:#1a1a1a;line-height:1.7">
|
||||
<nav style="margin-bottom:2rem"><a href="/" style="color:#15803d">← Grateful Journal</a></nav>
|
||||
|
||||
<h1 style="color:#15803d">Privacy Policy</h1>
|
||||
<p><em>Last updated: April 14, 2026</em></p>
|
||||
|
||||
<p>Grateful Journal is built on a simple promise: your journal entries are yours alone. We designed the app so that we cannot read your entries even if we wanted to.</p>
|
||||
|
||||
<h2>What we collect</h2>
|
||||
<ul>
|
||||
<li><strong>Account info</strong> — your name and email address via Google Sign-In, used solely to identify your account.</li>
|
||||
<li><strong>Journal entries</strong> — stored encrypted in our database. We do not have access to the content of your entries.</li>
|
||||
<li><strong>App preferences</strong> — your display name, profile photo, background images, and theme are stored unencrypted as account settings.</li>
|
||||
<li><strong>Usage data</strong> — no analytics, no tracking pixels, no third-party advertising SDKs.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Encryption</h2>
|
||||
<ul>
|
||||
<li><strong>Journal entries — end-to-end encrypted.</strong> Entries are encrypted on your device using XSalsa20-Poly1305 before being sent to our servers. We store only ciphertext. We cannot read your entries.</li>
|
||||
<li><strong>App preferences — not encrypted.</strong> Your display name, profile photo, background images, and theme setting are stored as plain data.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Data sharing</h2>
|
||||
<p>We do not sell, share, or rent your personal data to any third party. We use Firebase (Google) for authentication only.</p>
|
||||
|
||||
<h2>Data deletion</h2>
|
||||
<p>You can delete your account and all associated data at any time from the Settings page. Deletion is permanent and irreversible.</p>
|
||||
|
||||
<h2>Cookies</h2>
|
||||
<p>We use a single session cookie to keep you signed in. No advertising or tracking cookies are used.</p>
|
||||
|
||||
<nav style="margin-top:2rem">
|
||||
<a href="/">← Back to Grateful Journal</a> ·
|
||||
<a href="/about">About</a>
|
||||
</nav>
|
||||
</main>
|
||||
</noscript>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,19 +2,25 @@
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://gratefuljournal.online/</loc>
|
||||
<lastmod>2026-04-13</lastmod>
|
||||
<lastmod>2026-04-16</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://gratefuljournal.online/about</loc>
|
||||
<lastmod>2026-04-13</lastmod>
|
||||
<lastmod>2026-04-16</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://gratefuljournal.online/privacy</loc>
|
||||
<lastmod>2026-04-13</lastmod>
|
||||
<lastmod>2026-04-16</lastmod>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.5</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://gratefuljournal.online/termsofservice</loc>
|
||||
<lastmod>2026-04-16</lastmod>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.4</priority>
|
||||
</url>
|
||||
|
||||
462
src/App.css
462
src/App.css
@@ -19,6 +19,16 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eef6ee;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .page-loader {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.page-loader--transparent,
|
||||
[data-theme="dark"] .page-loader--transparent,
|
||||
[data-theme="liquid-glass"] .page-loader--transparent {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -1133,6 +1143,26 @@
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.entry-edit-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.625rem;
|
||||
height: 1.625rem;
|
||||
border-radius: 7px;
|
||||
border: 1px solid #dbeafe;
|
||||
background: #eff6ff;
|
||||
color: #3b82f6;
|
||||
cursor: pointer;
|
||||
transition: background 0.18s ease, border-color 0.18s ease;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.entry-edit-btn:hover {
|
||||
background: #dbeafe;
|
||||
border-color: #93c5fd;
|
||||
}
|
||||
|
||||
.entry-delete-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1580,6 +1610,12 @@
|
||||
.settings-theme-dot-dark {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.settings-theme-dot-glass {
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(209,250,229,0.7) 50%, rgba(167,243,208,0.5) 100%);
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
.settings-theme-dot:hover:not(:disabled) {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
@@ -1908,6 +1944,115 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Edit entry modal */
|
||||
.entry-modal-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.entry-modal-edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: #eff6ff;
|
||||
color: #3b82f6;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.entry-modal-edit:hover {
|
||||
background: #dbeafe;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.edit-entry-modal {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.edit-entry-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.edit-entry-title-input {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.875rem;
|
||||
border: 1.5px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
color: #111827;
|
||||
background: #f9fafb;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.edit-entry-title-input:focus {
|
||||
border-color: #6ee7b7;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.edit-entry-content-input {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.875rem;
|
||||
border: 1.5px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9375rem;
|
||||
font-family: "Sniglet", system-ui;
|
||||
color: #374151;
|
||||
background: #f9fafb;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
line-height: 1.6;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.edit-entry-content-input:focus {
|
||||
border-color: #6ee7b7;
|
||||
background: #fff;
|
||||
}
|
||||
.edit-entry-content-input:disabled,
|
||||
.edit-entry-title-input:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.edit-entry-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.edit-entry-save {
|
||||
flex: 1;
|
||||
max-width: 10rem;
|
||||
padding: 0.625rem 1rem;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
font-family: inherit;
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
}
|
||||
.edit-entry-save:hover:not(:disabled) {
|
||||
background: #059669;
|
||||
}
|
||||
.edit-entry-save:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ---- Responsive: tablet+ (≥ 768px) ---- */
|
||||
@media (min-width: 768px) {
|
||||
.entry-modal-overlay {
|
||||
@@ -1967,7 +2112,7 @@
|
||||
}
|
||||
|
||||
.confirm-modal {
|
||||
background: var(--color-surface);
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 1.75rem;
|
||||
max-width: 380px;
|
||||
@@ -2684,6 +2829,25 @@
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .entry-edit-btn {
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
border-color: rgba(59, 130, 246, 0.2);
|
||||
color: #60a5fa;
|
||||
}
|
||||
[data-theme="dark"] .entry-edit-btn:hover {
|
||||
background: rgba(59, 130, 246, 0.18);
|
||||
border-color: rgba(59, 130, 246, 0.35);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .entry-modal-edit {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #60a5fa;
|
||||
}
|
||||
[data-theme="dark"] .entry-modal-edit:hover {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .entry-delete-btn {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
@@ -2694,6 +2858,18 @@
|
||||
border-color: rgba(239, 68, 68, 0.35);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .edit-entry-title-input,
|
||||
[data-theme="dark"] .edit-entry-content-input {
|
||||
background: #1a1a1a;
|
||||
border-color: #2d2d2d;
|
||||
color: #e8f5e8;
|
||||
}
|
||||
[data-theme="dark"] .edit-entry-title-input:focus,
|
||||
[data-theme="dark"] .edit-entry-content-input:focus {
|
||||
border-color: #4ade80;
|
||||
background: #151515;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .delete-confirm-modal {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
@@ -2721,7 +2897,7 @@
|
||||
}
|
||||
|
||||
[data-theme="dark"] .confirm-modal {
|
||||
background: var(--color-surface);
|
||||
background: #1e1e1e;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@@ -2997,6 +3173,286 @@
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
LIQUID GLASS THEME
|
||||
============================ */
|
||||
|
||||
/* -- Pages must be transparent so body background shows through -- */
|
||||
[data-theme="liquid-glass"] .home-page,
|
||||
[data-theme="liquid-glass"] .history-page,
|
||||
[data-theme="liquid-glass"] .settings-page {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* -- Glass surface applied to all card/surface elements -- */
|
||||
[data-theme="liquid-glass"] .journal-card,
|
||||
[data-theme="liquid-glass"] .calendar-card,
|
||||
[data-theme="liquid-glass"] .entry-card,
|
||||
[data-theme="liquid-glass"] .entry-modal,
|
||||
[data-theme="liquid-glass"] .settings-profile,
|
||||
[data-theme="liquid-glass"] .settings-card,
|
||||
[data-theme="liquid-glass"] .settings-tutorial-btn,
|
||||
[data-theme="liquid-glass"] .settings-clear-btn,
|
||||
[data-theme="liquid-glass"] .settings-signout-btn,
|
||||
[data-theme="liquid-glass"] .bottom-nav,
|
||||
[data-theme="liquid-glass"] .lp__form {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
|
||||
/* -- Unified shadow (no individual overrides needed) -- */
|
||||
[data-theme="liquid-glass"] .journal-card,
|
||||
[data-theme="liquid-glass"] .calendar-card,
|
||||
[data-theme="liquid-glass"] .entry-card,
|
||||
[data-theme="liquid-glass"] .settings-profile,
|
||||
[data-theme="liquid-glass"] .settings-card {
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
|
||||
/* -- Bottom nav glass -- */
|
||||
[data-theme="liquid-glass"] .bottom-nav {
|
||||
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5), 0 -8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* -- Text colors — dark & crisp for readability on glass -- */
|
||||
[data-theme="liquid-glass"] .journal-prompt,
|
||||
[data-theme="liquid-glass"] .settings-header-text h1,
|
||||
[data-theme="liquid-glass"] .history-header-text h1,
|
||||
[data-theme="liquid-glass"] .settings-profile-name,
|
||||
[data-theme="liquid-glass"] .settings-item-title,
|
||||
[data-theme="liquid-glass"] .calendar-month,
|
||||
[data-theme="liquid-glass"] .entry-title {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
[data-theme="liquid-glass"] .journal-date {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
[data-theme="liquid-glass"] .settings-subtitle,
|
||||
[data-theme="liquid-glass"] .history-subtitle,
|
||||
[data-theme="liquid-glass"] .settings-item-subtitle,
|
||||
[data-theme="liquid-glass"] .settings-section-title,
|
||||
[data-theme="liquid-glass"] .entry-preview,
|
||||
[data-theme="liquid-glass"] .entry-date,
|
||||
[data-theme="liquid-glass"] .entry-time,
|
||||
[data-theme="liquid-glass"] .recent-entries-title,
|
||||
[data-theme="liquid-glass"] .calendar-weekday {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="liquid-glass"] .journal-title-input,
|
||||
[data-theme="liquid-glass"] .journal-entry-textarea {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
[data-theme="liquid-glass"] .journal-title-input::placeholder,
|
||||
[data-theme="liquid-glass"] .journal-entry-textarea::placeholder {
|
||||
color: rgba(30, 41, 59, 0.45);
|
||||
}
|
||||
|
||||
[data-theme="liquid-glass"] .journal-title-input {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
[data-theme="liquid-glass"] .journal-title-input:focus {
|
||||
border-bottom-color: #16a34a;
|
||||
}
|
||||
|
||||
/* -- Settings buttons text -- */
|
||||
[data-theme="liquid-glass"] .settings-tutorial-btn {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
[data-theme="liquid-glass"] .settings-clear-btn {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
[data-theme="liquid-glass"] .settings-signout-btn {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
/* -- Settings buttons hover -- */
|
||||
[data-theme="liquid-glass"] .settings-tutorial-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
[data-theme="liquid-glass"] .settings-clear-btn:hover {
|
||||
background: rgba(254, 202, 202, 0.35);
|
||||
}
|
||||
[data-theme="liquid-glass"] .settings-signout-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
/* -- Settings item hover -- */
|
||||
[data-theme="liquid-glass"] .settings-item-button:hover {
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
/* -- Settings divider -- */
|
||||
[data-theme="liquid-glass"] .settings-divider {
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
/* -- Settings theme dot -- */
|
||||
[data-theme="liquid-glass"] .settings-theme-dot {
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
[data-theme="liquid-glass"] .settings-theme-dot-active {
|
||||
border-color: #16a34a;
|
||||
box-shadow: 0 0 0 2px #16a34a;
|
||||
}
|
||||
|
||||
/* -- Settings icon backgrounds -- */
|
||||
[data-theme="liquid-glass"] .settings-item-icon-green {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #15803d;
|
||||
}
|
||||
[data-theme="liquid-glass"] .settings-item-icon-gray {
|
||||
background: rgba(100, 116, 139, 0.18);
|
||||
color: #475569;
|
||||
}
|
||||
[data-theme="liquid-glass"] .settings-item-icon-orange {
|
||||
background: rgba(251, 146, 60, 0.2);
|
||||
color: #c2410c;
|
||||
}
|
||||
[data-theme="liquid-glass"] .settings-item-icon-blue {
|
||||
background: rgba(59, 130, 246, 0.18);
|
||||
color: #1d4ed8;
|
||||
}
|
||||
[data-theme="liquid-glass"] .settings-item-icon-purple {
|
||||
background: rgba(139, 92, 246, 0.18);
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
/* -- Settings misc -- */
|
||||
[data-theme="liquid-glass"] .settings-toggle-slider {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
[data-theme="liquid-glass"] .settings-toggle input:checked + .settings-toggle-slider {
|
||||
background: #16a34a;
|
||||
}
|
||||
[data-theme="liquid-glass"] .settings-item-arrow {
|
||||
color: #334155;
|
||||
}
|
||||
[data-theme="liquid-glass"] .settings-enc {
|
||||
color: rgba(15, 23, 42, 0.45);
|
||||
}
|
||||
[data-theme="liquid-glass"] .settings-edit-btn {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
/* -- Calendar -- */
|
||||
[data-theme="liquid-glass"] .calendar-day {
|
||||
color: #334155;
|
||||
}
|
||||
[data-theme="liquid-glass"] .calendar-day:not(.calendar-day-empty):hover {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
color: #0f172a;
|
||||
}
|
||||
[data-theme="liquid-glass"] .calendar-day-has-entry {
|
||||
background: rgba(34, 197, 94, 0.22);
|
||||
color: #15803d;
|
||||
}
|
||||
[data-theme="liquid-glass"] .calendar-day-today {
|
||||
background: #16a34a;
|
||||
color: #fff;
|
||||
}
|
||||
[data-theme="liquid-glass"] .calendar-nav-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
/* -- Entry card -- */
|
||||
[data-theme="liquid-glass"] .entry-card {
|
||||
border-left-color: rgba(22, 163, 74, 0.5);
|
||||
}
|
||||
[data-theme="liquid-glass"] .entry-card:hover {
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
|
||||
}
|
||||
|
||||
/* -- Entry modal -- */
|
||||
[data-theme="liquid-glass"] .entry-modal {
|
||||
border-top-color: #16a34a;
|
||||
}
|
||||
[data-theme="liquid-glass"] .entry-modal-title {
|
||||
color: #0f172a;
|
||||
}
|
||||
[data-theme="liquid-glass"] .entry-modal-content {
|
||||
color: #1e293b;
|
||||
}
|
||||
[data-theme="liquid-glass"] .entry-modal-date,
|
||||
[data-theme="liquid-glass"] .entry-modal-time {
|
||||
color: #475569;
|
||||
}
|
||||
[data-theme="liquid-glass"] .entry-modal-badge {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #15803d;
|
||||
}
|
||||
[data-theme="liquid-glass"] .entry-modal-close {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
color: #475569;
|
||||
}
|
||||
[data-theme="liquid-glass"] .entry-modal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
/* -- Confirm/modal overlays -- */
|
||||
[data-theme="liquid-glass"] .confirm-modal-overlay,
|
||||
[data-theme="liquid-glass"] .entry-modal-overlay {
|
||||
background: rgba(15, 23, 42, 0.2);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
/* -- Modal boxes always opaque -- */
|
||||
[data-theme="liquid-glass"] .confirm-modal,
|
||||
[data-theme="liquid-glass"] .bg-modal {
|
||||
background: #ffffff;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
/* -- Bottom nav -- */
|
||||
[data-theme="liquid-glass"] .bottom-nav-btn {
|
||||
color: #475569;
|
||||
}
|
||||
[data-theme="liquid-glass"] .bottom-nav-btn:hover {
|
||||
color: #15803d;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
[data-theme="liquid-glass"] .bottom-nav-btn-active {
|
||||
background: #16a34a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* -- Write button -- */
|
||||
[data-theme="liquid-glass"] .journal-write-btn {
|
||||
background: #16a34a;
|
||||
box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
|
||||
}
|
||||
[data-theme="liquid-glass"] .journal-write-btn:hover:not(:disabled) {
|
||||
background: #15803d;
|
||||
box-shadow: 0 6px 24px rgba(22, 163, 74, 0.45);
|
||||
}
|
||||
|
||||
/* -- Desktop sidebar nav glass -- */
|
||||
@media (min-width: 860px) {
|
||||
[data-theme="liquid-glass"] .bottom-nav {
|
||||
background: var(--glass-bg);
|
||||
border-right-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
[data-theme="liquid-glass"] .bottom-nav-brand {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] .clock-picker__mode-btn--active {
|
||||
background: #4ade80;
|
||||
border-color: #4ade80;
|
||||
@@ -3371,7 +3827,7 @@ body.gj-has-bg .settings-page {
|
||||
============================ */
|
||||
|
||||
.bg-modal {
|
||||
background: var(--color-surface, #fff);
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 1.5rem;
|
||||
width: min(440px, calc(100vw - 2rem));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export function PageLoader() {
|
||||
export function PageLoader({ transparent }: { transparent?: boolean }) {
|
||||
return (
|
||||
<div className="page-loader" role="status" aria-label="Loading">
|
||||
<div className={`page-loader${transparent ? ' page-loader--transparent' : ''}`} role="status" aria-label="Loading">
|
||||
<svg
|
||||
className="page-loader__tree"
|
||||
viewBox="0 0 60 90"
|
||||
|
||||
@@ -1,23 +1,45 @@
|
||||
import { type ReactNode } from 'react'
|
||||
import { type ReactNode, Suspense, useState, useEffect } from 'react'
|
||||
import { Navigate, useLocation } from 'react-router-dom'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import { PageLoader } from './PageLoader'
|
||||
|
||||
type Props = {
|
||||
children: ReactNode
|
||||
// Mounts only once Suspense has resolved (chunk is ready).
|
||||
// Signals the parent to hide the loader and reveal content.
|
||||
function ContentReady({ onReady }: { onReady: () => void }) {
|
||||
useEffect(() => {
|
||||
onReady()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
return null
|
||||
}
|
||||
|
||||
type Props = { children: ReactNode }
|
||||
|
||||
export function ProtectedRoute({ children }: Props) {
|
||||
const { user, loading } = useAuth()
|
||||
const location = useLocation()
|
||||
|
||||
if (loading) {
|
||||
return <PageLoader />
|
||||
}
|
||||
// On page refresh: loading starts true → contentReady=false → loader shows throughout.
|
||||
// On in-app navigation: loading is already false → contentReady=true → no loader shown.
|
||||
const [contentReady, setContentReady] = useState(() => !loading)
|
||||
|
||||
if (!user) {
|
||||
if (!loading && !user) {
|
||||
return <Navigate to="/" state={{ from: location }} replace />
|
||||
}
|
||||
|
||||
return <>{children}</>
|
||||
const showLoader = loading || !contentReady
|
||||
|
||||
return (
|
||||
<>
|
||||
{showLoader && <PageLoader />}
|
||||
{!loading && user && (
|
||||
<div style={{ display: contentReady ? 'contents' : 'none' }}>
|
||||
<Suspense fallback={null}>
|
||||
<ContentReady onReady={() => setContentReady(true)} />
|
||||
{children}
|
||||
</Suspense>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -30,6 +30,7 @@ import {
|
||||
saveEncryptedSecretKey,
|
||||
getEncryptedSecretKey,
|
||||
} from '../lib/crypto'
|
||||
import { REMINDER_TIME_KEY, REMINDER_ENABLED_KEY } from '../hooks/useReminder'
|
||||
|
||||
type MongoUser = {
|
||||
id: string
|
||||
@@ -40,6 +41,11 @@ type MongoUser = {
|
||||
tutorial?: boolean
|
||||
backgroundImage?: string | null
|
||||
backgroundImages?: string[]
|
||||
reminder?: {
|
||||
enabled: boolean
|
||||
time?: string
|
||||
timezone?: string
|
||||
}
|
||||
}
|
||||
|
||||
type AuthContextValue = {
|
||||
@@ -135,6 +141,18 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
}
|
||||
}
|
||||
|
||||
function syncReminderFromDb(mongoUser: MongoUser) {
|
||||
const r = mongoUser.reminder
|
||||
if (r) {
|
||||
localStorage.setItem(REMINDER_ENABLED_KEY, r.enabled ? 'true' : 'false')
|
||||
if (r.time) localStorage.setItem(REMINDER_TIME_KEY, r.time)
|
||||
else localStorage.removeItem(REMINDER_TIME_KEY)
|
||||
} else {
|
||||
localStorage.setItem(REMINDER_ENABLED_KEY, 'false')
|
||||
localStorage.removeItem(REMINDER_TIME_KEY)
|
||||
}
|
||||
}
|
||||
|
||||
// Register or fetch user from MongoDB
|
||||
async function syncUserWithDatabase(authUser: User) {
|
||||
try {
|
||||
@@ -148,12 +166,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
try {
|
||||
console.log('[Auth] Fetching user by email:', email)
|
||||
const existingUser = await getUserByEmail(email, token) as MongoUser
|
||||
// console.log('[Auth] Found existing user:', existingUser.id)
|
||||
setUserId(existingUser.id)
|
||||
setMongoUser(existingUser)
|
||||
syncReminderFromDb(existingUser)
|
||||
} catch (error) {
|
||||
console.warn('[Auth] User not found, registering...', error)
|
||||
// User doesn't exist, register them
|
||||
const newUser = await registerUser(
|
||||
{
|
||||
email,
|
||||
@@ -165,6 +182,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
console.log('[Auth] Registered new user:', newUser.id)
|
||||
setUserId(newUser.id)
|
||||
setMongoUser(newUser)
|
||||
syncReminderFromDb(newUser)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[Auth] Error syncing user with database:', error)
|
||||
@@ -226,13 +244,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
}
|
||||
|
||||
async function signOut() {
|
||||
// Clear secret key from memory
|
||||
setSecretKey(null)
|
||||
setMongoUser(null)
|
||||
// Clear pending tour step (session state)
|
||||
localStorage.removeItem('gj-tour-pending-step')
|
||||
// Keep device key and encrypted key for next login
|
||||
// Do NOT clear localStorage or IndexedDB
|
||||
localStorage.removeItem(REMINDER_TIME_KEY)
|
||||
localStorage.removeItem(REMINDER_ENABLED_KEY)
|
||||
await firebaseSignOut(auth)
|
||||
setUserId(null)
|
||||
}
|
||||
|
||||
@@ -29,11 +29,21 @@ export function isReminderEnabled(): boolean {
|
||||
/** Get FCM token using the existing sw.js (which includes Firebase messaging). */
|
||||
async function getFcmToken(): Promise<string | null> {
|
||||
const messaging = await messagingPromise
|
||||
if (!messaging) return null
|
||||
if (!messaging) {
|
||||
console.warn('[FCM] Firebase Messaging not supported in this browser')
|
||||
return null
|
||||
}
|
||||
|
||||
// Use the already-registered sw.js — no second SW needed
|
||||
const swReg = await navigator.serviceWorker.ready
|
||||
return getToken(messaging, { vapidKey: VAPID_KEY, serviceWorkerRegistration: swReg })
|
||||
console.log('[FCM] Service worker ready:', swReg.active?.scriptURL)
|
||||
|
||||
const token = await getToken(messaging, { vapidKey: VAPID_KEY, serviceWorkerRegistration: swReg })
|
||||
if (token) {
|
||||
console.log('[FCM] Token obtained:', token.slice(0, 20) + '…')
|
||||
} else {
|
||||
console.warn('[FCM] getToken returned empty — VAPID key wrong or SW not registered?')
|
||||
}
|
||||
return token
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -64,16 +74,21 @@ export async function enableReminder(
|
||||
}
|
||||
|
||||
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
console.log('[FCM] Saving token and reminder settings:', { timeStr, timezone })
|
||||
|
||||
await saveFcmToken(userId, fcmToken, authToken)
|
||||
console.log('[FCM] Token saved to backend')
|
||||
|
||||
await saveReminderSettings(userId, { time: timeStr, enabled: true, timezone }, authToken)
|
||||
console.log('[FCM] Reminder settings saved to backend')
|
||||
|
||||
localStorage.setItem(REMINDER_TIME_KEY, timeStr)
|
||||
localStorage.setItem(REMINDER_ENABLED_KEY, 'true')
|
||||
return null
|
||||
} catch (err) {
|
||||
console.error('FCM reminder setup failed', err)
|
||||
return 'Failed to set up push notification. Please try again.'
|
||||
const msg = err instanceof Error ? err.message : String(err)
|
||||
console.error('[FCM] Reminder setup failed:', msg)
|
||||
return `Failed to set up reminder: ${msg}`
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,16 +113,21 @@ export async function listenForegroundMessages(): Promise<() => void> {
|
||||
const messaging = await messagingPromise
|
||||
if (!messaging) return () => {}
|
||||
|
||||
console.log('[FCM] Foreground message listener registered')
|
||||
|
||||
const unsubscribe = onMessage(messaging, (payload) => {
|
||||
console.log('[FCM] Foreground message received:', payload)
|
||||
const title = payload.notification?.title || 'Grateful Journal 🌱'
|
||||
const body = payload.notification?.body || "You haven't written today yet."
|
||||
if (Notification.permission === 'granted') {
|
||||
if (Notification.permission !== 'granted') {
|
||||
console.warn('[FCM] Notification permission not granted — cannot show notification')
|
||||
return
|
||||
}
|
||||
new Notification(title, {
|
||||
body,
|
||||
icon: '/web-app-manifest-192x192.png',
|
||||
tag: 'gj-daily-reminder',
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return unsubscribe
|
||||
|
||||
@@ -96,3 +96,28 @@ button:focus-visible {
|
||||
[data-theme="dark"] body {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
/* ── Liquid Glass theme root overrides ───────────────────── */
|
||||
[data-theme="liquid-glass"] {
|
||||
--glass-bg: rgba(255, 255, 255, 0.18);
|
||||
--glass-blur: blur(28px) saturate(200%) brightness(1.05);
|
||||
--glass-border: 1px solid rgba(255, 255, 255, 0.55);
|
||||
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
|
||||
--color-primary: #16a34a;
|
||||
--color-primary-hover: #15803d;
|
||||
--color-bg-soft: transparent;
|
||||
--color-surface: var(--glass-bg);
|
||||
--color-accent-light: rgba(220, 252, 231, 0.4);
|
||||
--color-text: #0f172a;
|
||||
--color-text-muted: #334155;
|
||||
--color-border: rgba(255, 255, 255, 0.4);
|
||||
|
||||
color: var(--color-text);
|
||||
background-color: transparent;
|
||||
caret-color: #16a34a;
|
||||
}
|
||||
|
||||
/* Same bg as light theme when no custom image is set */
|
||||
[data-theme="liquid-glass"] body:not(.gj-has-bg) {
|
||||
background: #eef6ee;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,10 @@ import './index.css'
|
||||
import App from './App.tsx'
|
||||
import { listenForegroundMessages } from './hooks/useReminder'
|
||||
|
||||
// Apply saved theme immediately to avoid flash
|
||||
const savedTheme = localStorage.getItem('gj-theme') || 'light'
|
||||
document.documentElement.setAttribute('data-theme', savedTheme)
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/sw.js')
|
||||
@@ -11,7 +15,9 @@ if ('serviceWorker' in navigator) {
|
||||
}
|
||||
|
||||
// Show FCM notifications when app is open in foreground
|
||||
listenForegroundMessages()
|
||||
listenForegroundMessages().catch((err) => {
|
||||
console.error('[FCM] Failed to set up foreground message listener:', err)
|
||||
})
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
|
||||
@@ -3,10 +3,10 @@ import { usePageMeta } from '../hooks/usePageMeta'
|
||||
|
||||
export default function AboutPage() {
|
||||
usePageMeta({
|
||||
title: 'About — Grateful Journal',
|
||||
title: 'About Grateful Journal | Private, Encrypted Gratitude Journaling',
|
||||
description: 'Learn about Grateful Journal — a free, end-to-end encrypted daily gratitude journal. No ads, no tracking, no social feed. Just you and your thoughts.',
|
||||
canonical: 'https://gratefuljournal.online/about',
|
||||
ogTitle: 'About Grateful Journal',
|
||||
ogTitle: 'About Grateful Journal | Private, Encrypted Gratitude Journaling',
|
||||
ogDescription: 'A free, private gratitude journal with end-to-end encryption. Learn how we built a distraction-free space for your daily reflection practice.',
|
||||
})
|
||||
return (
|
||||
@@ -30,7 +30,7 @@ export default function AboutPage() {
|
||||
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li><strong>End-to-end encrypted</strong> — your entries are encrypted before leaving your device. We cannot read them.</li>
|
||||
<li><strong>End-to-end encrypted entries</strong> — your journal content is encrypted before leaving your device. We cannot read it.</li>
|
||||
<li><strong>No ads, no tracking</strong> — we don't sell your data or show you ads.</li>
|
||||
<li><strong>Works offline</strong> — installable as a PWA on Android, iOS, and desktop.</li>
|
||||
<li><strong>Daily prompts</strong> — gentle nudges to keep your practice consistent.</li>
|
||||
@@ -48,7 +48,10 @@ export default function AboutPage() {
|
||||
<h2>Privacy first</h2>
|
||||
<p>
|
||||
We built Grateful Journal because we believe your inner thoughts deserve a private space.
|
||||
Read our full <Link to="/privacy">Privacy Policy</Link> to understand exactly how your data is protected.
|
||||
Your journal entries are end-to-end encrypted — only you can read them. App preferences
|
||||
such as your display name, profile photo, and background images are stored as plain account
|
||||
settings and are not encrypted. Read our full <Link to="/privacy">Privacy Policy</Link> for
|
||||
a complete breakdown of what is and isn't encrypted.
|
||||
</p>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import { getUserEntries, deleteEntry, type JournalEntry } from '../lib/api'
|
||||
import { decryptEntry } from '../lib/crypto'
|
||||
import { getUserEntries, deleteEntry, updateEntry, type JournalEntry } from '../lib/api'
|
||||
import { decryptEntry, encryptEntry } from '../lib/crypto'
|
||||
import { formatIST, getISTDateComponents } from '../lib/timezone'
|
||||
import BottomNav from '../components/BottomNav'
|
||||
import { useOnboardingTour, hasPendingTourStep, clearPendingTourStep } from '../hooks/useOnboardingTour'
|
||||
@@ -22,6 +22,10 @@ export default function HistoryPage() {
|
||||
const [selectedEntry, setSelectedEntry] = useState<DecryptedEntry | null>(null)
|
||||
const [entryToDelete, setEntryToDelete] = useState<DecryptedEntry | null>(null)
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
const [entryToEdit, setEntryToEdit] = useState<DecryptedEntry | null>(null)
|
||||
const [editTitle, setEditTitle] = useState('')
|
||||
const [editContent, setEditContent] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const { continueTourOnHistory } = useOnboardingTour()
|
||||
|
||||
@@ -178,6 +182,58 @@ export default function HistoryPage() {
|
||||
setSelectedDate(new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day))
|
||||
}
|
||||
|
||||
const isEntryFromToday = (createdAt: string): boolean => {
|
||||
const nowIST = new Date(new Date().getTime() + 5.5 * 60 * 60 * 1000)
|
||||
const components = getISTDateComponents(createdAt)
|
||||
return (
|
||||
components.year === nowIST.getUTCFullYear() &&
|
||||
components.month === nowIST.getUTCMonth() &&
|
||||
components.date === nowIST.getUTCDate()
|
||||
)
|
||||
}
|
||||
|
||||
const openEditModal = (entry: DecryptedEntry) => {
|
||||
setEntryToEdit(entry)
|
||||
setEditTitle(entry.decryptedTitle || '')
|
||||
setEditContent(entry.decryptedContent || '')
|
||||
}
|
||||
|
||||
const handleEditSave = async () => {
|
||||
if (!entryToEdit || !user || !userId || !secretKey) return
|
||||
setSaving(true)
|
||||
try {
|
||||
const token = await user.getIdToken()
|
||||
const combined = `${editTitle.trim()}\n\n${editContent.trim()}`
|
||||
const { ciphertext, nonce } = await encryptEntry(combined, secretKey)
|
||||
|
||||
await updateEntry(userId, entryToEdit.id, {
|
||||
title: undefined,
|
||||
content: undefined,
|
||||
encryption: {
|
||||
encrypted: true,
|
||||
ciphertext,
|
||||
nonce,
|
||||
algorithm: 'XSalsa20-Poly1305',
|
||||
},
|
||||
}, token)
|
||||
|
||||
const updatedEntry: DecryptedEntry = {
|
||||
...entryToEdit,
|
||||
encryption: { encrypted: true, ciphertext, nonce, algorithm: 'XSalsa20-Poly1305' },
|
||||
decryptedTitle: editTitle.trim(),
|
||||
decryptedContent: editContent.trim(),
|
||||
}
|
||||
|
||||
setEntries((prev) => prev.map((e) => e.id === entryToEdit.id ? updatedEntry : e))
|
||||
if (selectedEntry?.id === entryToEdit.id) setSelectedEntry(updatedEntry)
|
||||
setEntryToEdit(null)
|
||||
} catch (error) {
|
||||
console.error('Failed to update entry:', error)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (!entryToDelete || !user || !userId) return
|
||||
setDeleting(true)
|
||||
@@ -270,7 +326,7 @@ export default function HistoryPage() {
|
||||
</h3>
|
||||
|
||||
{loadingEntries ? (
|
||||
<PageLoader />
|
||||
<PageLoader transparent />
|
||||
) : (
|
||||
<div className="entries-list">
|
||||
{selectedDateEntries.length === 0 ? (
|
||||
@@ -291,6 +347,19 @@ export default function HistoryPage() {
|
||||
<span className="entry-date">{formatDate(entry.createdAt)}</span>
|
||||
<div className="entry-header-right">
|
||||
<span className="entry-time">{formatTime(entry.createdAt)}</span>
|
||||
{isEntryFromToday(entry.createdAt) && (
|
||||
<button
|
||||
type="button"
|
||||
className="entry-edit-btn"
|
||||
title="Edit entry"
|
||||
onClick={(e) => { e.stopPropagation(); openEditModal(entry) }}
|
||||
>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="entry-delete-btn"
|
||||
@@ -332,6 +401,20 @@ export default function HistoryPage() {
|
||||
<span className="entry-modal-date">{formatDate(selectedEntry.createdAt)}</span>
|
||||
<span className="entry-modal-time">{formatTime(selectedEntry.createdAt)}</span>
|
||||
</div>
|
||||
<div className="entry-modal-actions">
|
||||
{isEntryFromToday(selectedEntry.createdAt) && (
|
||||
<button
|
||||
type="button"
|
||||
className="entry-modal-edit"
|
||||
onClick={() => { setSelectedEntry(null); openEditModal(selectedEntry) }}
|
||||
title="Edit entry"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="entry-modal-close"
|
||||
@@ -344,6 +427,7 @@ export default function HistoryPage() {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="entry-modal-title">
|
||||
{selectedEntry.decryptedTitle || selectedEntry.title || '[Untitled]'}
|
||||
@@ -381,6 +465,71 @@ export default function HistoryPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Entry Modal */}
|
||||
{entryToEdit && (
|
||||
<div
|
||||
className="entry-modal-overlay"
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget && !saving) setEntryToEdit(null)
|
||||
}}
|
||||
>
|
||||
<div className="entry-modal edit-entry-modal">
|
||||
<div className="entry-modal-header">
|
||||
<span className="entry-modal-date">Edit Entry</span>
|
||||
<button
|
||||
type="button"
|
||||
className="entry-modal-close"
|
||||
onClick={() => setEntryToEdit(null)}
|
||||
disabled={saving}
|
||||
title="Close"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="edit-entry-fields">
|
||||
<input
|
||||
className="edit-entry-title-input"
|
||||
type="text"
|
||||
placeholder="Title"
|
||||
value={editTitle}
|
||||
onChange={(e) => setEditTitle(e.target.value)}
|
||||
disabled={saving}
|
||||
maxLength={200}
|
||||
/>
|
||||
<textarea
|
||||
className="edit-entry-content-input"
|
||||
placeholder="What are you grateful for today?"
|
||||
value={editContent}
|
||||
onChange={(e) => setEditContent(e.target.value)}
|
||||
disabled={saving}
|
||||
rows={8}
|
||||
/>
|
||||
</div>
|
||||
<div className="edit-entry-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="delete-confirm-cancel"
|
||||
onClick={() => setEntryToEdit(null)}
|
||||
disabled={saving}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="edit-entry-save"
|
||||
onClick={handleEditSave}
|
||||
disabled={saving || (!editTitle.trim() && !editContent.trim())}
|
||||
>
|
||||
{saving ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
{entryToDelete && (
|
||||
<div
|
||||
|
||||
@@ -8,7 +8,7 @@ import { usePageMeta } from '../hooks/usePageMeta'
|
||||
|
||||
export default function LoginPage() {
|
||||
usePageMeta({
|
||||
title: 'Grateful Journal — Your Private Gratitude Journal',
|
||||
title: 'Private Gratitude Journal App | Grateful Journal',
|
||||
description: 'A private, end-to-end encrypted gratitude journal. No feeds, no noise — just you and your thoughts. Grow your gratitude one moment at a time.',
|
||||
canonical: 'https://gratefuljournal.online/',
|
||||
})
|
||||
@@ -34,7 +34,10 @@ export default function LoginPage() {
|
||||
}
|
||||
}
|
||||
|
||||
if (loading || signingIn) {
|
||||
// Keep showing the loader until the navigate effect fires.
|
||||
// Without the `user` check here, the login form flashes for one frame
|
||||
// between loading→false and the useEffect redirect.
|
||||
if (loading || signingIn || user) {
|
||||
return <PageLoader />
|
||||
}
|
||||
|
||||
|
||||
@@ -3,11 +3,11 @@ import { usePageMeta } from '../hooks/usePageMeta'
|
||||
|
||||
export default function PrivacyPage() {
|
||||
usePageMeta({
|
||||
title: 'Privacy Policy — Grateful Journal',
|
||||
title: 'Privacy Policy | Grateful Journal',
|
||||
description: 'Grateful Journal\'s privacy policy. Your journal entries are end-to-end encrypted — we cannot read them. No ads, no tracking, no data selling.',
|
||||
canonical: 'https://gratefuljournal.online/privacy',
|
||||
ogTitle: 'Privacy Policy — Grateful Journal',
|
||||
ogDescription: 'Your journal entries are end-to-end encrypted and private. We cannot read them, we don\'t sell your data, and we use no advertising cookies.',
|
||||
ogTitle: 'Privacy Policy | Grateful Journal',
|
||||
ogDescription: 'Your journal entries are end-to-end encrypted and private. App preferences like background images are stored unencrypted. No ads, no tracking, no data selling.',
|
||||
})
|
||||
return (
|
||||
<div className="static-page">
|
||||
@@ -17,7 +17,7 @@ export default function PrivacyPage() {
|
||||
|
||||
<main className="static-page__content">
|
||||
<h1>Privacy Policy</h1>
|
||||
<p className="static-page__updated">Last updated: April 8, 2026</p>
|
||||
<p className="static-page__updated">Last updated: April 14, 2026</p>
|
||||
|
||||
<p>
|
||||
Grateful Journal is built on a simple promise: your journal entries are yours alone.
|
||||
@@ -28,13 +28,21 @@ export default function PrivacyPage() {
|
||||
<ul>
|
||||
<li><strong>Account info</strong> — your name and email address via Google Sign-In, used solely to identify your account.</li>
|
||||
<li><strong>Journal entries</strong> — stored encrypted in our database. We do not have access to the content of your entries.</li>
|
||||
<li><strong>App preferences</strong> — your display name, profile photo, background images, and theme are stored unencrypted as account settings. See the Encryption section below for the full breakdown.</li>
|
||||
<li><strong>Usage data</strong> — no analytics, no tracking pixels, no third-party advertising SDKs.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Encryption</h2>
|
||||
<p>
|
||||
Your journal entries are end-to-end encrypted. They are encrypted on your device before being sent to our servers.
|
||||
We store only the encrypted ciphertext — decryption happens locally in your browser using your account key.
|
||||
Encryption is applied selectively based on the sensitivity of each type of data:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Journal entries — end-to-end encrypted.</strong> Entries are encrypted on your device using XSalsa20-Poly1305 before being sent to our servers. We store only ciphertext. Decryption happens locally in your browser using a key derived from your account. We cannot read your entries.</li>
|
||||
<li><strong>App preferences — not encrypted.</strong> Your display name, profile photo, background images, and theme setting are stored as plain data. These are appearance and account settings, not personal journal content. They are accessible to us at the database level.</li>
|
||||
</ul>
|
||||
<p>
|
||||
If you upload a personal photo as a background image, be aware that it is stored unencrypted on our servers.
|
||||
For maximum privacy, use abstract or non-personal images as backgrounds.
|
||||
</p>
|
||||
|
||||
<h2>Data sharing</h2>
|
||||
|
||||
@@ -10,7 +10,7 @@ import { PageLoader } from '../components/PageLoader'
|
||||
import { usePWAInstall } from '../hooks/usePWAInstall'
|
||||
import {
|
||||
getSavedReminderTime, isReminderEnabled,
|
||||
enableReminder, disableReminder, reenableReminder,
|
||||
enableReminder, disableReminder,
|
||||
} from '../hooks/useReminder'
|
||||
import ClockTimePicker from '../components/ClockTimePicker'
|
||||
|
||||
@@ -54,8 +54,8 @@ export default function SettingsPage() {
|
||||
const { user, userId, mongoUser, signOut, loading, refreshMongoUser } = useAuth()
|
||||
// const [passcodeEnabled, setPasscodeEnabled] = useState(false) // Passcode lock — disabled for now
|
||||
// const [faceIdEnabled, setFaceIdEnabled] = useState(false) // Face ID — disabled for now
|
||||
const [theme, setTheme] = useState<'light' | 'dark'>(() => {
|
||||
return (localStorage.getItem('gj-theme') as 'light' | 'dark') || 'light'
|
||||
const [theme, setTheme] = useState<'light' | 'dark' | 'liquid-glass'>(() => {
|
||||
return (localStorage.getItem('gj-theme') as 'light' | 'dark' | 'liquid-glass') || 'light'
|
||||
})
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
|
||||
|
||||
@@ -229,7 +229,7 @@ export default function SettingsPage() {
|
||||
}
|
||||
|
||||
// Apply theme to DOM
|
||||
const applyTheme = useCallback((t: 'light' | 'dark') => {
|
||||
const applyTheme = useCallback((t: 'light' | 'dark' | 'liquid-glass') => {
|
||||
document.documentElement.setAttribute('data-theme', t)
|
||||
localStorage.setItem('gj-theme', t)
|
||||
}, [])
|
||||
@@ -239,10 +239,11 @@ export default function SettingsPage() {
|
||||
applyTheme(theme)
|
||||
}, [theme, applyTheme])
|
||||
|
||||
const handleThemeChange = (newTheme: 'light' | 'dark') => {
|
||||
const handleThemeChange = (newTheme: 'light' | 'dark' | 'liquid-glass') => {
|
||||
setTheme(newTheme)
|
||||
applyTheme(newTheme)
|
||||
setMessage({ type: 'success', text: `Switched to ${newTheme === 'light' ? 'Light' : 'Dark'} theme` })
|
||||
const label = newTheme === 'light' ? 'Light' : newTheme === 'dark' ? 'Dark' : 'Liquid Glass'
|
||||
setMessage({ type: 'success', text: `Switched to ${label} theme` })
|
||||
setTimeout(() => setMessage(null), 2000)
|
||||
}
|
||||
|
||||
@@ -310,33 +311,6 @@ export default function SettingsPage() {
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore — intentionally unused, reminder is disabled (coming soon)
|
||||
const handleReminderToggle = async () => {
|
||||
if (!user || !userId) return
|
||||
if (!reminderTime) {
|
||||
handleOpenReminderModal()
|
||||
return
|
||||
}
|
||||
if (reminderEnabled) {
|
||||
const authToken = await user.getIdToken()
|
||||
await disableReminder(userId, authToken)
|
||||
setReminderEnabled(false)
|
||||
} else {
|
||||
setReminderSaving(true)
|
||||
const authToken = await user.getIdToken()
|
||||
const error = await reenableReminder(userId, authToken)
|
||||
setReminderSaving(false)
|
||||
if (error) {
|
||||
setReminderError(error)
|
||||
setShowReminderModal(true)
|
||||
} else {
|
||||
setReminderEnabled(true)
|
||||
setMessage({ type: 'success', text: 'Reminder enabled!' })
|
||||
setTimeout(() => setMessage(null), 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSignOut = async () => {
|
||||
try {
|
||||
await signOut()
|
||||
@@ -476,8 +450,12 @@ export default function SettingsPage() {
|
||||
|
||||
<div className="settings-divider"></div>
|
||||
|
||||
{/* Daily Reminder — disabled for now, logic preserved */}
|
||||
<div className="settings-item" style={{ opacity: 0.5 }}>
|
||||
{/* Daily Reminder */}
|
||||
<button
|
||||
type="button"
|
||||
className="settings-item settings-item-button"
|
||||
onClick={handleOpenReminderModal}
|
||||
>
|
||||
<div className="settings-item-icon settings-item-icon-orange">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
||||
@@ -486,18 +464,14 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
<div className="settings-item-content">
|
||||
<h4 className="settings-item-title">Daily Reminder</h4>
|
||||
<p className="settings-item-subtitle">Coming soon</p>
|
||||
</div>
|
||||
<label className="settings-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={false}
|
||||
disabled
|
||||
readOnly
|
||||
/>
|
||||
<span className="settings-toggle-slider" style={{ cursor: 'not-allowed' }}></span>
|
||||
</label>
|
||||
<p className="settings-item-subtitle">
|
||||
{reminderEnabled && reminderTime ? `Set for ${reminderTime}` : 'Set a daily reminder' }
|
||||
</p>
|
||||
</div>
|
||||
<svg className="settings-item-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -560,7 +534,9 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
<div className="settings-item-content">
|
||||
<h4 className="settings-item-title">Theme</h4>
|
||||
<p className="settings-item-subtitle">Currently: {theme === 'light' ? 'Light' : 'Dark'}</p>
|
||||
<p className="settings-item-subtitle">
|
||||
Currently: {theme === 'light' ? 'Light' : theme === 'dark' ? 'Dark' : 'Liquid Glass'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="settings-theme-colors">
|
||||
<button
|
||||
@@ -575,6 +551,12 @@ export default function SettingsPage() {
|
||||
className={`settings-theme-dot settings-theme-dot-dark${theme === 'dark' ? ' settings-theme-dot-active' : ''}`}
|
||||
title="Dark theme"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleThemeChange('liquid-glass')}
|
||||
className={`settings-theme-dot settings-theme-dot-glass${theme === 'liquid-glass' ? ' settings-theme-dot-active' : ''}`}
|
||||
title="Liquid Glass theme"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -990,6 +972,35 @@ export default function SettingsPage() {
|
||||
{reminderSaving ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
{reminderEnabled && reminderTime && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
if (!user || !userId) return
|
||||
setReminderSaving(true)
|
||||
const authToken = await user.getIdToken()
|
||||
await disableReminder(userId, authToken)
|
||||
setReminderEnabled(false)
|
||||
setReminderSaving(false)
|
||||
setShowReminderModal(false)
|
||||
setMessage({ type: 'success', text: 'Reminder disabled' })
|
||||
setTimeout(() => setMessage(null), 2000)
|
||||
}}
|
||||
disabled={reminderSaving}
|
||||
style={{
|
||||
marginTop: '0.5rem',
|
||||
width: '100%',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: 'var(--color-error, #ef4444)',
|
||||
fontSize: '0.85rem',
|
||||
cursor: 'pointer',
|
||||
padding: '0.4rem',
|
||||
}}
|
||||
>
|
||||
Disable Reminder
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -3,11 +3,11 @@ import { usePageMeta } from '../hooks/usePageMeta'
|
||||
|
||||
export default function TermsOfServicePage() {
|
||||
usePageMeta({
|
||||
title: 'Terms of Service — Grateful Journal',
|
||||
description: 'Terms of Service for Grateful Journal. Read about the rules and guidelines for using our app.',
|
||||
title: 'Terms of Service | Grateful Journal',
|
||||
description: 'Terms of Service for Grateful Journal — a free, private gratitude journal app. Read about the rules and guidelines for using the service.',
|
||||
canonical: 'https://gratefuljournal.online/termsofservice',
|
||||
ogTitle: 'Terms of Service — Grateful Journal',
|
||||
ogDescription: 'Terms of Service for Grateful Journal. Read about the rules and guidelines for using our app.',
|
||||
ogTitle: 'Terms of Service | Grateful Journal',
|
||||
ogDescription: 'Terms of Service for Grateful Journal — a free, private gratitude journal app. Read about the rules and guidelines for using the service.',
|
||||
})
|
||||
return (
|
||||
<div className="static-page">
|
||||
@@ -39,8 +39,10 @@ export default function TermsOfServicePage() {
|
||||
<h2>3. Your Content</h2>
|
||||
<p>
|
||||
You own all journal entries and content you create. We do not claim any ownership over your
|
||||
content. Your entries are end-to-end encrypted and inaccessible to us. You are solely
|
||||
responsible for the content you store in the app.
|
||||
content. Your journal entries are end-to-end encrypted and inaccessible to us. App preferences
|
||||
such as your display name, profile photo, and background images are stored as plain account
|
||||
settings and are accessible to us at the database level. You are solely responsible for the
|
||||
content you store in the app, including any images you upload as backgrounds.
|
||||
</p>
|
||||
|
||||
<h2>4. Prohibited Conduct</h2>
|
||||
|
||||
108
termsofservice.html
Normal file
108
termsofservice.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!doctype html>
|
||||
<html lang="en" style="background-color:#eef6ee">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="apple-mobile-web-app-title" content="Grateful Journal" />
|
||||
<meta name="theme-color" content="#16a34a" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
|
||||
/>
|
||||
|
||||
<!-- SEO -->
|
||||
<title>Terms of Service | Grateful Journal</title>
|
||||
<meta name="description" content="Terms of Service for Grateful Journal — a free, private gratitude journal app. Read about the rules and guidelines for using the service." />
|
||||
<meta name="keywords" content="grateful journal terms of service, gratitude journal app terms, journal app conditions" />
|
||||
<meta name="robots" content="index, follow, max-snippet:160, max-image-preview:large" />
|
||||
<link rel="canonical" href="https://gratefuljournal.online/termsofservice" />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:url" content="https://gratefuljournal.online/termsofservice" />
|
||||
<meta property="og:title" content="Terms of Service | Grateful Journal" />
|
||||
<meta property="og:description" content="Terms of Service for Grateful Journal — a free, private gratitude journal app. Read about the rules and guidelines for using the service." />
|
||||
<meta property="og:image" content="https://gratefuljournal.online/web-app-manifest-512x512.png" />
|
||||
<meta property="og:image:width" content="512" />
|
||||
<meta property="og:image:height" content="512" />
|
||||
<meta property="og:image:alt" content="Grateful Journal logo - a green sprout" />
|
||||
<meta property="og:site_name" content="Grateful Journal" />
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Terms of Service | Grateful Journal" />
|
||||
<meta name="twitter:description" content="Terms of Service for Grateful Journal — a free, private gratitude journal app." />
|
||||
<meta name="twitter:image" content="https://gratefuljournal.online/web-app-manifest-512x512.png" />
|
||||
<meta name="twitter:image:alt" content="Grateful Journal logo - a green sprout" />
|
||||
|
||||
<!-- JSON-LD: WebPage -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebPage",
|
||||
"name": "Terms of Service",
|
||||
"url": "https://gratefuljournal.online/termsofservice",
|
||||
"description": "Terms of Service for Grateful Journal — a free, private gratitude journal app.",
|
||||
"isPartOf": {
|
||||
"@type": "WebSite",
|
||||
"name": "Grateful Journal",
|
||||
"url": "https://gratefuljournal.online/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<noscript>
|
||||
<main style="font-family:sans-serif;max-width:680px;margin:4rem auto;padding:1rem 1.5rem;color:#1a1a1a;line-height:1.7">
|
||||
<nav style="margin-bottom:2rem"><a href="/" style="color:#15803d">← Grateful Journal</a></nav>
|
||||
|
||||
<h1 style="color:#15803d">Terms of Service</h1>
|
||||
<p><em>Last updated: April 14, 2026</em></p>
|
||||
|
||||
<p>By using Grateful Journal, you agree to these Terms of Service. Please read them carefully.</p>
|
||||
|
||||
<h2>1. Use of the Service</h2>
|
||||
<p>Grateful Journal is a personal journaling app. You may use it for your own personal, non-commercial journaling purposes. You must be at least 13 years old to use the service.</p>
|
||||
|
||||
<h2>2. Your Account</h2>
|
||||
<p>You are responsible for maintaining the security of your account. We use Google Sign-In for authentication. Notify us immediately if you suspect unauthorized access to your account.</p>
|
||||
|
||||
<h2>3. Your Content</h2>
|
||||
<p>You own all journal entries and content you create. Your journal entries are end-to-end encrypted and inaccessible to us. You are solely responsible for the content you store in the app.</p>
|
||||
|
||||
<h2>4. Prohibited Conduct</h2>
|
||||
<p>You agree not to use the service for any unlawful purpose, attempt to gain unauthorized access to the service, or abuse the service in a way that impairs its operation for other users.</p>
|
||||
|
||||
<h2>5. Service Availability</h2>
|
||||
<p>We strive to keep Grateful Journal available at all times but do not guarantee uninterrupted access. We are not liable for any downtime or data loss.</p>
|
||||
|
||||
<h2>6. Account Termination</h2>
|
||||
<p>You may delete your account at any time from the Settings page. Deletion permanently removes your account and all associated data.</p>
|
||||
|
||||
<h2>7. Disclaimer of Warranties</h2>
|
||||
<p>Grateful Journal is provided "as is" without warranties of any kind. Use of the service is at your own risk.</p>
|
||||
|
||||
<h2>8. Limitation of Liability</h2>
|
||||
<p>To the maximum extent permitted by law, Grateful Journal and its creators shall not be liable for any indirect, incidental, or consequential damages arising from your use of the service.</p>
|
||||
|
||||
<h2>9. Changes to These Terms</h2>
|
||||
<p>We may update these Terms of Service from time to time. Continued use of the service after changes constitutes acceptance of the updated terms.</p>
|
||||
|
||||
<nav style="margin-top:2rem">
|
||||
<a href="/">← Back to Grateful Journal</a> ·
|
||||
<a href="/privacy">Privacy Policy</a> ·
|
||||
<a href="/about">About</a>
|
||||
</nav>
|
||||
</main>
|
||||
</noscript>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +1,7 @@
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import path, { resolve } from 'path'
|
||||
|
||||
function injectFirebaseConfig(content: string, env: Record<string, string>): string {
|
||||
return content
|
||||
@@ -60,6 +60,12 @@ export default defineConfig({
|
||||
build: {
|
||||
chunkSizeWarningLimit: 1000,
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
about: resolve(__dirname, 'about.html'),
|
||||
privacy: resolve(__dirname, 'privacy.html'),
|
||||
termsofservice: resolve(__dirname, 'termsofservice.html'),
|
||||
},
|
||||
output: {
|
||||
manualChunks(id) {
|
||||
if (id.includes('node_modules/firebase')) {
|
||||
|
||||
Reference in New Issue
Block a user