├── .gitignore
├── src
    ├── vite-env.d.ts
    ├── database.ts
    ├── server
    │   ├── models
    │   │   ├── index.ts
    │   │   ├── Snippet.ts
    │   │   └── User.ts
    │   ├── routes
    │   │   ├── index.ts
    │   │   ├── static.ts
    │   │   ├── admin.ts
    │   │   ├── auth.ts
    │   │   └── snippets.ts
    │   └── index.ts
    ├── main.tsx
    ├── config.ts
    ├── types.ts
    ├── App.css
    ├── index.css
    ├── App.tsx
    ├── components
    │   ├── Register.tsx
    │   ├── Login.tsx
    │   ├── SnippetList.tsx
    │   └── Editor.tsx
    ├── styles.ts
    └── assets
    │   └── react.svg
├── docker-compose.yml
├── tsconfig.node.json
├── tsconfig.server.json
├── index.html
├── vite.config.ts
├── tsconfig.json
├── Dockerfile
├── tsconfig.app.json
├── eslint.config.js
├── public
    └── vite.svg
├── package.json
├── README.md
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/
3 | database.sqlite
4 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/database.ts:
--------------------------------------------------------------------------------
1 | import Database from 'better-sqlite3';
2 | 
3 | const DB_PATH = './database.sqlite';
4 | const db = new Database(DB_PATH); // This opens the DB synchronously
5 | 
6 | export default db;
7 | 


--------------------------------------------------------------------------------
/src/server/models/index.ts:
--------------------------------------------------------------------------------
1 | import { Sequelize } from 'sequelize';
2 | 
3 | export const sequelize = new Sequelize({
4 |   dialect: 'sqlite',
5 |   storage: './database.sqlite',
6 |   logging: false
7 | });


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | services:
 2 |   app:
 3 |     build:
 4 |       context: .
 5 |     ports:
 6 |       - "3000:3000"
 7 |     volumes:
 8 |       - ./data:/app/data
 9 |     environment:
10 |       - NODE_ENV=production
11 |       - PORT=3000


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App';
4 | 
5 | ReactDOM.createRoot(document.getElementById('root')!).render(
6 |   <React.StrictMode>
7 |     <App />
8 |   </React.StrictMode>
9 | );


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }


--------------------------------------------------------------------------------
/src/config.ts:
--------------------------------------------------------------------------------
1 | export const API_BASE_URL = ''; // Empty string for same-origin requests
2 | export const API_ENDPOINTS = {
3 |   LOGIN: `/api/auth/login`,
4 |   REGISTER: `/api/auth/register`,
5 |   SNIPPETS: `/api/snippets`,
6 |   SNIPPET: (id: string) => `/api/snippets/${id}`,
7 | };
8 | export const JWT_SECRET_KEY = 'jwt-secret-key';


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | export interface Snippet {
 2 |   id?: string;
 3 |   title: string;
 4 |   content: string;
 5 |   language: string;
 6 |   userId: string;  // Added to track snippet ownership
 7 | }
 8 | 
 9 | export interface User {
10 |   username: string;
11 |   token: string;
12 | }
13 | 
14 | export enum Role {
15 |   USER,
16 |   ADMIN,
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.server.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "node",
 6 |     "esModuleInterop": true,
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "skipLibCheck": true,
10 |     "outDir": "./dist",
11 |     "rootDir": "./src"
12 |   },
13 |   "include": ["src/server/**/*"],
14 |   "exclude": ["node_modules"]
15 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>CodeSignal Learn Pastebin</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite';
 2 | import react from '@vitejs/plugin-react';
 3 | 
 4 | export default defineConfig({
 5 |   plugins: [react()],
 6 |   server: {
 7 |     host: '0.0.0.0',
 8 |     port: 3000,
 9 |     allowedHosts: true,
10 |     proxy: {
11 |       '/api': {
12 |         target: 'http://localhost:3001',
13 |         changeOrigin: true
14 |       }
15 |     }
16 |   },
17 |   build: {
18 |     outDir: 'dist/client'
19 |   }
20 | });


--------------------------------------------------------------------------------
/src/server/routes/index.ts:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import authRoutes from './auth';
 3 | import snippetRoutes from './snippets';
 4 | import adminRoutes from './admin';
 5 | import staticRoutes from './static';
 6 | 
 7 | const router = express.Router();
 8 | 
 9 | router.use('/api', express.json());
10 | router.use('/api/auth', authRoutes);
11 | router.use('/api/snippets', snippetRoutes);
12 | router.use('/api/admin', adminRoutes);
13 | router.use('/', staticRoutes);
14 | 
15 | export default router;
16 | 


--------------------------------------------------------------------------------
/src/server/routes/static.ts:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import { join } from 'path';
 3 | import { fileURLToPath } from 'url';
 4 | import { dirname } from 'path';
 5 | 
 6 | const __filename = fileURLToPath(import.meta.url);
 7 | const __dirname = dirname(__filename);
 8 | 
 9 | const router = express.Router();
10 | 
11 | // Catch-all route to serve index.html for client-side routing
12 | router.get('*', (_, res) => {
13 |   res.sendFile(join(__dirname, '../../../dist/client/index.html'));
14 | });
15 | 
16 | export default router;


--------------------------------------------------------------------------------
/src/server/models/Snippet.ts:
--------------------------------------------------------------------------------
 1 | import { DataTypes, Model } from 'sequelize';
 2 | import { sequelize } from './index.js';
 3 | 
 4 | export class Snippet extends Model {
 5 |   declare id: string;
 6 |   declare title: string;
 7 |   declare content: string;
 8 |   declare language: string;
 9 |   declare userId: number;
10 | }
11 | 
12 | Snippet.init({
13 |   id: {
14 |     type: DataTypes.STRING,
15 |     primaryKey: true
16 |   },
17 |   title: DataTypes.STRING,
18 |   content: DataTypes.TEXT,
19 |   language: DataTypes.STRING,
20 |   userId: DataTypes.INTEGER
21 | }, {
22 |   sequelize,
23 |   modelName: 'Snippet'
24 | });


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 |     "allowImportingTsExtensions": true,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "noEmit": true,
13 |     "jsx": "react-jsx",
14 |     "strict": true,
15 |     "noUnusedLocals": true,
16 |     "noUnusedParameters": true,
17 |     "noFallthroughCasesInSwitch": true,
18 |     "moduleResolution": "Node" // This is necessary to avoid IDE warnings
19 |   },
20 |   "include": ["src"],
21 |   "references": [{ "path": "./tsconfig.node.json" }]
22 | }


--------------------------------------------------------------------------------
/src/server/models/User.ts:
--------------------------------------------------------------------------------
 1 | import { DataTypes, Model } from 'sequelize';
 2 | import { sequelize } from './index.js';
 3 | import { Role } from '../../types.js';
 4 | 
 5 | export class User extends Model {
 6 |   declare id: number;
 7 |   declare username: string;
 8 |   declare password: string;
 9 |   declare role: string; // new field for user role
10 | }
11 | 
12 | User.init({
13 |   id: {
14 |     type: DataTypes.INTEGER,
15 |     primaryKey: true,
16 |     autoIncrement: true
17 |   },
18 |   username: DataTypes.STRING,
19 |   password: DataTypes.STRING,
20 |   role: {
21 |     type: DataTypes.ENUM(Role.USER.toString(), Role.ADMIN.toString()),
22 |     defaultValue: Role.USER.toString(),
23 |   }
24 | }, {
25 |   sequelize,
26 |   modelName: 'User'
27 | });
28 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | # Use Node.js as base image
 2 | FROM node:20-slim
 3 | 
 4 | # Install build dependencies for sqlite3
 5 | RUN apt-get update
 6 | RUN apt-get install -y \
 7 |     python3 \
 8 |     make \
 9 |     g++ \
10 |     && rm -rf /var/lib/apt/lists/*
11 | 
12 | # Set working directory
13 | WORKDIR /app
14 | 
15 | # Copy package files
16 | COPY package*.json ./
17 | 
18 | # Install dependencies
19 | RUN npm install
20 | 
21 | # Copy source code
22 | COPY . .
23 | 
24 | # Build the frontend
25 | RUN npm run build
26 | 
27 | # Build the server
28 | RUN npm run build:server
29 | 
30 | # Rebuild sqlite3 from source
31 | RUN npm rebuild sqlite3 --build-from-source
32 | 
33 | # Expose port
34 | EXPOSE 3000
35 | 
36 | # Start the server
37 | CMD ["npm", "run", "start"]
38 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 4 |     "target": "ES2020",
 5 |     "useDefineForClassFields": true,
 6 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 7 |     "module": "ESNext",
 8 |     "skipLibCheck": true,
 9 | 
10 |     /* Bundler mode */
11 |     "moduleResolution": "bundler",
12 |     "allowImportingTsExtensions": true,
13 |     "isolatedModules": true,
14 |     "moduleDetection": "force",
15 |     "noEmit": true,
16 |     "jsx": "react-jsx",
17 | 
18 |     /* Linting */
19 |     "strict": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "noFallthroughCasesInSwitch": true,
23 |     "noUncheckedSideEffectImports": true
24 |   },
25 |   "include": ["src"]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | #root {
 2 |   max-width: 1280px;
 3 |   margin: 0 auto;
 4 |   padding: 2rem;
 5 |   text-align: center;
 6 | }
 7 | 
 8 | .logo {
 9 |   height: 6em;
10 |   padding: 1.5em;
11 |   will-change: filter;
12 |   transition: filter 300ms;
13 | }
14 | .logo:hover {
15 |   filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 |   filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 | 
21 | @keyframes logo-spin {
22 |   from {
23 |     transform: rotate(0deg);
24 |   }
25 |   to {
26 |     transform: rotate(360deg);
27 |   }
28 | }
29 | 
30 | @media (prefers-reduced-motion: no-preference) {
31 |   a:nth-of-type(2) .logo {
32 |     animation: logo-spin infinite 20s linear;
33 |   }
34 | }
35 | 
36 | .card {
37 |   padding: 2em;
38 | }
39 | 
40 | .read-the-docs {
41 |   color: #888;
42 | }
43 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | import tseslint from 'typescript-eslint'
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ['**/*.{ts,tsx}'],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       'react-hooks': reactHooks,
18 |       'react-refresh': reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       'react-refresh/only-export-components': [
23 |         'warn',
24 |         { allowConstantExport: true },
25 |       ],
26 |     },
27 |   },
28 | )
29 | 


--------------------------------------------------------------------------------
/src/server/index.ts:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import cors from 'cors';
 3 | import { fileURLToPath } from 'url';
 4 | import { dirname, join } from 'path';
 5 | import bcrypt from 'bcryptjs';
 6 | import { User } from './models/User.js';
 7 | import { sequelize } from './models/index.js';
 8 | import routes from './routes/index.js';
 9 | import { Role } from '../types';
10 | 
11 | const __filename = fileURLToPath(import.meta.url);
12 | const __dirname = dirname(__filename);
13 | 
14 | const app = express();
15 | app.use(cors());
16 | 
17 | // Serve static files from the dist/client directory
18 | app.use(express.static(join(__dirname, '../../dist/client')));
19 | 
20 | const PORT = process.env.PORT || 3001;
21 | 
22 | // Initialize database
23 | sequelize.sync({ alter: true }).then(async () => {
24 |   try {
25 |     console.log("Database synchronized with alter: true.");
26 |     // Create default user
27 |     const hashedPassword = await bcrypt.hash('admin', 10);
28 |     await User.findOrCreate({
29 |       where: { username: 'admin' },
30 |       defaults: { password: hashedPassword, role: Role.ADMIN.toString() }
31 |     });
32 |   } catch (error) {
33 |     console.error("Error initializing database:", error);
34 |   }
35 | });
36 | 
37 | // Use routes
38 | app.use(routes);
39 | 
40 | app.listen(PORT, () => {
41 |   console.log(`Server running on port ${PORT}`);
42 | });


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 3 |   line-height: 1.5;
 4 |   font-weight: 400;
 5 | 
 6 |   color-scheme: light dark;
 7 |   color: rgba(255, 255, 255, 0.87);
 8 |   background-color: #242424;
 9 | 
10 |   font-synthesis: none;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | a {
17 |   font-weight: 500;
18 |   color: #646cff;
19 |   text-decoration: inherit;
20 | }
21 | a:hover {
22 |   color: #535bf2;
23 | }
24 | 
25 | body {
26 |   margin: 0;
27 |   display: flex;
28 |   place-items: center;
29 |   min-width: 320px;
30 |   min-height: 100vh;
31 | }
32 | 
33 | h1 {
34 |   font-size: 3.2em;
35 |   line-height: 1.1;
36 | }
37 | 
38 | button {
39 |   border-radius: 8px;
40 |   border: 1px solid transparent;
41 |   padding: 0.6em 1.2em;
42 |   font-size: 1em;
43 |   font-weight: 500;
44 |   font-family: inherit;
45 |   background-color: #1a1a1a;
46 |   cursor: pointer;
47 |   transition: border-color 0.25s;
48 | }
49 | button:hover {
50 |   border-color: #646cff;
51 | }
52 | button:focus,
53 | button:focus-visible {
54 |   outline: 4px auto -webkit-focus-ring-color;
55 | }
56 | 
57 | @media (prefers-color-scheme: light) {
58 |   :root {
59 |     color: #213547;
60 |     background-color: #ffffff;
61 |   }
62 |   a:hover {
63 |     color: #747bff;
64 |   }
65 |   button {
66 |     background-color: #f9f9f9;
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/server/routes/admin.ts:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import jwt from 'jsonwebtoken';
 3 | import { User } from '../models/User';
 4 | import { JWT_SECRET_KEY } from '../../config';
 5 | import { Role } from '../../types';
 6 | import db from '../../database';
 7 | 
 8 | const router = express.Router();
 9 | 
10 | // Admin-only test endpoint
11 | router.get('/test', async (req, res) => {
12 |   const authHeader = req.headers.authorization;
13 |   if (!authHeader) {
14 |     return res.status(401).json({ error: "Missing authorization header" });
15 |   }
16 |   const token = authHeader.split(' ')[1];
17 |   try {
18 |     const decoded: any = jwt.verify(token, JWT_SECRET_KEY);
19 |     const user = await User.findByPk(decoded.userId);
20 |     if (!user || user.role !== Role.ADMIN.toString()) {
21 |       return res.status(403).json({ error: "Access denied" });
22 |     }
23 |     res.json({ message: "Admin test endpoint accessed successfully" });
24 |   } catch (error) {
25 |     console.error("Error verifying token:", error);
26 |     res.status(401).json({ error: "Invalid token" });
27 |   }
28 | });
29 | 
30 | router.get('/testOpen', async (_req, res) => {
31 |   res.json({ message: "Test endpoint is working!" });
32 | });
33 | 
34 | // Secure account info endpoint
35 | router.get('/accountInfo', (req, res) => {
36 |   const userId = req.query.id;
37 |   if (!userId) {
38 |     return res.status(400).json({ error: "Missing user ID parameter" });
39 |   }
40 | 
41 |   try {
42 |     const query = `SELECT * FROM users WHERE id = ?`;
43 |     // Prepare and execute the query synchronously
44 |     const stmt = db.prepare(query);
45 |     const results = stmt.all(userId);
46 |     res.json(results);
47 |   } catch (error) {
48 |     console.error("Database query error:", error);
49 |     res.status(500).json({ error: "Internal server error" });
50 |   }
51 | });
52 | 
53 | 
54 | 
55 | export default router;


--------------------------------------------------------------------------------
/src/server/routes/auth.ts:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import jwt from 'jsonwebtoken';
 3 | import bcrypt from 'bcryptjs';
 4 | import { User } from '../models/User';
 5 | import { JWT_SECRET_KEY } from '../../config';
 6 | import { Role } from '../../types';
 7 | 
 8 | const router = express.Router();
 9 | 
10 | router.post('/register', async (req, res) => {
11 |   const { username, password, role } = req.body;
12 |   // Ensure role is either 'admin' or 'user'; default to 'user'
13 |   const userRole = role === Role.ADMIN.toString() ? Role.ADMIN : Role.USER;
14 |   try {
15 |     const existingUser = await User.findOne({ where: { username } });
16 |     if (existingUser) {
17 |       return res.status(400).json({ error: "Username already exists" });
18 |     }
19 |     const hashedPassword = await bcrypt.hash(password, 10);
20 |     const user = await User.create({
21 |       username,
22 |       password: hashedPassword,
23 |       role: userRole.toString(),
24 |     });
25 |     res.json({ message: "User registered successfully", userId: user.id });
26 |   } catch (error) {
27 |     console.error("Error during registration:", error);
28 |     res.status(500).json({ error: "Internal server error" });
29 |   }
30 | });
31 | 
32 | // Login endpoint
33 | router.post('/login', async (req, res) => {
34 |   try {
35 |     const { username, password } = req.body;
36 |     const user = await User.findOne({ where: { username } });
37 |   
38 |     if (user && await bcrypt.compare(password, user.password)) {
39 |       const token = jwt.sign({ userId: user.id }, JWT_SECRET_KEY);
40 |       return res.json({ token });
41 |     } else {
42 |       return res.status(401).json({ error: 'Invalid credentials' });
43 |     }
44 |   } catch (error) {
45 |     console.error("Error during login:", error);
46 |     res.status(500).json({ error: 'Internal server error' });
47 |   }
48 | });
49 | 
50 | export default router;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pastebin-demo",
 3 |   "private": true,
 4 |   "version": "0.0.1",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview",
11 |     "server": "npm run build:server && npm run start:server",
12 |     "build:server": "tsc --project tsconfig.server.json",
13 |     "start:server": "node dist/server/index.js",
14 |     "start": "npm run build && npm run build:server && npm run start:server",
15 |     "dev:server": "tsx watch src/server/index.ts",
16 |     "dev:all": "concurrently \"npm run dev\" \"npm run dev:server\""
17 |   },
18 |   "dependencies": {
19 |     "@codemirror/lang-cpp": "6.0.2",
20 |     "@codemirror/lang-java": "6.0.1",
21 |     "@codemirror/lang-javascript": "6.2.1",
22 |     "@codemirror/lang-python": "6.1.3",
23 |     "@uiw/react-codemirror": "4.21.21",
24 |     "bcryptjs": "2.4.3",
25 |     "better-sqlite3": "^11.8.1",
26 |     "cors": "2.8.5",
27 |     "express": "4.18.2",
28 |     "jsonwebtoken": "9.0.2",
29 |     "react": "18.2.0",
30 |     "react-dom": "18.2.0",
31 |     "react-router-dom": "6.22.1",
32 |     "sequelize": "6.37.1",
33 |     "sqlite3": "5.1.7"
34 |   },
35 |   "devDependencies": {
36 |     "@types/bcryptjs": "2.4.6",
37 |     "@types/better-sqlite3": "^7.6.12",
38 |     "@types/cors": "2.8.17",
39 |     "@types/express": "4.17.21",
40 |     "@types/jsonwebtoken": "9.0.5",
41 |     "@types/node": "20.17.17",
42 |     "@types/react": "18.2.55",
43 |     "@types/react-dom": "18.2.19",
44 |     "@types/uuid": "^10.0.0",
45 |     "@typescript-eslint/eslint-plugin": "6.21.0",
46 |     "@typescript-eslint/parser": "6.21.0",
47 |     "@vitejs/plugin-react": "4.2.1",
48 |     "concurrently": "8.2.2",
49 |     "eslint": "8.56.0",
50 |     "eslint-plugin-react-hooks": "4.6.0",
51 |     "eslint-plugin-react-refresh": "0.4.5",
52 |     "ts-node": "10.9.2",
53 |     "tsx": "4.7.0",
54 |     "typescript": "5.7.3",
55 |     "vite": "5.1.0"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 2 | import { useState, useEffect } from 'react';
 3 | import Editor from './components/Editor';
 4 | import Login from './components/Login';
 5 | import Register from './components/Register';
 6 | import SnippetList from './components/SnippetList';
 7 | import { User } from './types';
 8 | import { styles } from './styles';
 9 | 
10 | function App() {
11 |   const [user, setUser] = useState<User | null>(() => {
12 |     const savedUser = localStorage.getItem('user');
13 |     return savedUser ? JSON.parse(savedUser) : null;
14 |   });
15 | 
16 |   useEffect(() => {
17 |     if (user) {
18 |       localStorage.setItem('user', JSON.stringify(user));
19 |     } else {
20 |       localStorage.removeItem('user');
21 |     }
22 |   }, [user]);
23 | 
24 |   const handleLogout = () => {
25 |     setUser(null);
26 |     window.location.href = '/login';
27 |   };
28 | 
29 |   return (
30 |     <Router>
31 |       <div style={styles.container}>
32 |         <header style={styles.header}>
33 |           <div style={{ width: '100%', textAlign: 'center' }}>
34 |             <h1>CodeSignal Code Snippet Tool</h1>
35 |           </div>
36 |           {user && (
37 |             <div style={styles.headerControls}>
38 |               <SnippetList />
39 |               <button 
40 |                 onClick={handleLogout} 
41 |                 style={{ ...styles.button, ...styles.logoutButton }}
42 |               >
43 |                 Logout
44 |               </button>
45 |             </div>
46 |           )}
47 |         </header>
48 |         <Routes>
49 |           {user ? (
50 |             <>
51 |               <Route path="/" element={<Editor />} />
52 |               <Route path="/snippet/:id" element={<Editor />} />
53 |             </>
54 |           ) : (
55 |             <>
56 |               <Route path="/login" element={<Login onLogin={setUser} />} />
57 |               <Route path="/register" element={<Register />} />
58 |               <Route path="*" element={<Login onLogin={setUser} />} />
59 |             </>
60 |           )}
61 |         </Routes>
62 |       </div>
63 |     </Router>
64 |   );
65 | }
66 | 
67 | export default App;
68 | 


--------------------------------------------------------------------------------
/src/components/Register.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import { useNavigate } from 'react-router-dom';
 3 | import { styles } from '../styles';
 4 | import { API_ENDPOINTS } from '../config';
 5 | 
 6 | function Register() {
 7 |   const [username, setUsername] = useState('');
 8 |   const [password, setPassword] = useState('');
 9 |   const [role, setRole] = useState('user');
10 |   const [error, setError] = useState('');
11 |   const navigate = useNavigate();
12 | 
13 |   const handleSubmit = async (e: React.FormEvent) => {
14 |     e.preventDefault();
15 |     setError('');
16 |     try {
17 |       const response = await fetch(API_ENDPOINTS.REGISTER, {
18 |         method: 'POST',
19 |         headers: { 'Content-Type': 'application/json' },
20 |         body: JSON.stringify({ username, password, role }),
21 |       });
22 |       if (response.ok) {
23 |         // Registration successful, navigate to login
24 |         alert("Registration successful! Please log in.");
25 |         navigate('/login');
26 |       } else {
27 |         const data = await response.json();
28 |         setError(data.error || 'Registration failed');
29 |       }
30 |     } catch (err) {
31 |       setError('Connection error. Please try again.');
32 |     }
33 |   };
34 | 
35 |   return (
36 |     <div style={styles.loginContainer}>
37 |       <h2 style={styles.loginTitle}>Register</h2>
38 |       <form style={styles.loginForm} onSubmit={handleSubmit}>
39 |         <input
40 |           style={styles.input}
41 |           type="text"
42 |           placeholder="Username"
43 |           value={username}
44 |           onChange={(e) => setUsername(e.target.value)}
45 |         />
46 |         <input
47 |           style={styles.input}
48 |           type="password"
49 |           placeholder="Password"
50 |           value={password}
51 |           onChange={(e) => setPassword(e.target.value)}
52 |         />
53 |         <select
54 |           style={styles.select}
55 |           value={role}
56 |           onChange={(e) => setRole(e.target.value)}
57 |         >
58 |           <option value="user">User</option>
59 |           <option value="admin">Admin</option>
60 |         </select>
61 |         {error && <div style={{ color: 'red', textAlign: 'center' }}>{error}</div>}
62 |         <button type="submit" style={styles.button}>Register</button>
63 |       </form>
64 |     </div>
65 |   );
66 | }
67 | 
68 | export default Register;
69 | 


--------------------------------------------------------------------------------
/src/components/Login.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import { useNavigate, Link } from 'react-router-dom';
 3 | import { User } from '../types';
 4 | import { styles } from '../styles';
 5 | import { API_ENDPOINTS } from '../config';
 6 | 
 7 | interface LoginProps {
 8 |   onLogin: (user: User) => void;
 9 | }
10 | 
11 | function Login({ onLogin }: LoginProps) {
12 |   const [username, setUsername] = useState('');
13 |   const [password, setPassword] = useState('');
14 |   const [error, setError] = useState('');
15 |   const navigate = useNavigate(); 
16 | 
17 |   const handleSubmit = async (e: React.FormEvent) => {
18 |     e.preventDefault();
19 |     setError('');
20 |     
21 |     try {
22 |       const response = await fetch(API_ENDPOINTS.LOGIN, {
23 |         method: 'POST',
24 |         headers: { 'Content-Type': 'application/json' },
25 |         body: JSON.stringify({ username, password }),
26 |       });
27 |       
28 |       if (response.ok) {
29 |         const { token } = await response.json();
30 |         onLogin({ username, token });
31 |         navigate("/");
32 |       } else {
33 |         setError('Invalid credentials');
34 |       }
35 |     } catch (err) {
36 |       setError('Connection error. Please try again.');
37 |     }
38 |   };
39 | 
40 |   return (
41 |     <div style={styles.loginContainer}>
42 |       <h2 style={styles.loginTitle}>Login to CodeSignal Code Snippet Tool</h2>
43 |       <form style={styles.loginForm} onSubmit={handleSubmit}>
44 |         <input
45 |           style={styles.input}
46 |           type="text"
47 |           placeholder="Username"
48 |           value={username}
49 |           onChange={(e) => setUsername(e.target.value)}
50 |         />
51 |         <input
52 |           style={styles.input}
53 |           type="password"
54 |           placeholder="Password"
55 |           value={password}
56 |           onChange={(e) => setPassword(e.target.value)}
57 |         />
58 |         {error && <div style={{ color: 'red', textAlign: 'center' }}>{error}</div>}
59 |         <button type="submit" style={styles.button}>
60 |           Login
61 |         </button>
62 |       </form>
63 |       {/* New Register button */}
64 |       <div style={{ textAlign: 'center', marginTop: '10px' }}>
65 |         Don't have an account?{' '}
66 |         <Link to="/register" style={{ color: '#0070f3', textDecoration: 'none' }}>
67 |           Register
68 |         </Link>
69 |       </div>
70 |     </div>
71 |   );
72 | }
73 | 
74 | export default Login;
75 | 


--------------------------------------------------------------------------------
/src/components/SnippetList.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import { useNavigate, useLocation } from 'react-router-dom';
 3 | import { API_ENDPOINTS } from '../config';
 4 | import { Snippet } from '../types';
 5 | import { styles } from '../styles';
 6 | 
 7 | function SnippetList() {
 8 |   const [snippets, setSnippets] = useState<Snippet[]>([]);
 9 |   const navigate = useNavigate();
10 |   const location = useLocation();
11 | 
12 |   // Extract current snippet id from URL if present
13 |   const currentSnippetId = location.pathname.startsWith('/snippet/')
14 |     ? location.pathname.split('/snippet/')[1]
15 |     : '';
16 | 
17 |     useEffect(() => {
18 |         const storedUser = localStorage.getItem('user');
19 |         if (!storedUser) {
20 |             console.error("No user found in localStorage");
21 |             return;
22 |         }
23 |     
24 |         const token = JSON.parse(storedUser).token;
25 |         if (!token) {
26 |             console.error("No token found in user data");
27 |             return;
28 |         }
29 |     
30 |         fetch(API_ENDPOINTS.SNIPPETS, {
31 |             method: 'GET',
32 |             headers: {
33 |                 'Authorization': `Bearer ${token}`,
34 |                 'Content-Type': 'application/json'
35 |             },
36 |         })
37 |             .then(res => {
38 |                 if (!res.ok) {
39 |                     throw new Error(`Failed to fetch snippets: ${res.status}`);
40 |                 }
41 |                 return res.json();
42 |             })
43 |             .then(setSnippets)
44 |             .catch(error => {
45 |                 console.error("Error fetching snippets:", error);
46 |                 // Optionally handle unauthorized errors here
47 |                 if (error.message.includes('401')) {
48 |                     // Handle unauthorized access - maybe redirect to login
49 |                     navigate('/login');
50 |                 }
51 |             });
52 |     }, [location, navigate]);
53 | 
54 | 
55 |   const handleSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
56 |     const snippetId = e.target.value;
57 |     if (snippetId) {
58 |       navigate(`/snippet/${snippetId}`);
59 |     }
60 |   };
61 | 
62 |   return (
63 |     <div style={styles.snippetListContainer}>
64 |       <label htmlFor="snippet-select">Your Snippets:</label>
65 |       <select
66 |         id="snippet-select"
67 |         onChange={handleSelect}
68 |         value={currentSnippetId}  // Use controlled value here
69 |       >
70 |         <option value="" disabled>
71 |           Select a snippet
72 |         </option>
73 |         {snippets.map(snippet => (
74 |           <option key={snippet.id} value={snippet.id}>
75 |             {snippet.title}
76 |           </option>
77 |         ))}
78 |       </select>
79 |     </div>
80 |   );
81 | }
82 | 
83 | export default SnippetList;
84 | 


--------------------------------------------------------------------------------
/src/server/routes/snippets.ts:
--------------------------------------------------------------------------------
 1 |  import express from 'express';
 2 | import jwt from 'jsonwebtoken';
 3 | import { v4 as uuidv4 } from 'uuid';
 4 | import { Snippet } from '../models/Snippet';
 5 | import { JWT_SECRET_KEY } from '../../config';
 6 | 
 7 | const router = express.Router();
 8 | 
 9 | // Save snippet endpoint
10 | router.post('/', async (req, res) => {
11 |   const authHeader = req.headers.authorization;
12 |   if (!authHeader) {
13 |     return res.status(401).json({ error: "Missing authorization header" });
14 |   }
15 |   const token = authHeader.split(' ')[1];
16 |   let decoded: any;
17 |   try {
18 |     decoded = jwt.verify(token, JWT_SECRET_KEY);
19 |   } catch (error) {
20 |     return res.status(401).json({ error: "Invalid token" });
21 |   }
22 |   const userId = decoded.userId;
23 |   try {
24 |     const { title, content, language } = req.body;
25 |     const snippet = await Snippet.create({
26 |       id: uuidv4(),
27 |       title,
28 |       content,
29 |       language,
30 |       userId,
31 |     });
32 |     res.json(snippet);
33 |   } catch (error) {
34 |     console.error("Error saving snippet:", error);
35 |     res.status(500).json({ error: "Failed to save snippet" });
36 |   }
37 | });
38 | 
39 | // Get snippet endpoint
40 | router.get('/:id', async (req, res) => {
41 |   try {
42 |     const snippet = await Snippet.findByPk(req.params.id);
43 |     if (!snippet) {
44 |       return res.status(404).json({ error: "Snippet not found" });
45 |     }
46 |     res.json(snippet);
47 |   } catch (error) {
48 |     console.error("Error retrieving snippet:", error);
49 |     res.status(500).json({ error: "Failed to retrieve snippet" });
50 |   }
51 | });
52 | 
53 | router.get('/', async (req, res) => {
54 |   const authHeader = req.headers.authorization;
55 |   if (!authHeader) {
56 |     return res.status(401).json({ error: "Missing authorization header" });
57 |   }
58 |   const token = authHeader.split(' ')[1];
59 |   let decoded: any;
60 |   try {
61 |     decoded = jwt.verify(token, JWT_SECRET_KEY);
62 |   } catch (error) {
63 |     return res.status(401).json({ error: "Invalid token" });
64 |   }
65 |   const userId = decoded.userId;
66 |   try {
67 |     const snippets = await Snippet.findAll({ where: { userId } });
68 |     res.json(snippets);
69 |   } catch (error) {
70 |     console.error("Error retrieving snippets:", error);
71 |     res.status(500).json({ error: "Failed to retrieve snippets" });
72 |   }
73 | });
74 | 
75 | // Delete snippet endpoint
76 | router.delete('/:id', async (req, res) => {
77 |   try {
78 |     const snippet = await Snippet.findByPk(req.params.id);
79 |     if (!snippet) {
80 |       return res.status(404).json({ error: "Snippet not found" });
81 |     }
82 |     await snippet.destroy();
83 |     res.json({ message: "Snippet deleted successfully" });
84 |   } catch (error) {
85 |     console.error("Error deleting snippet:", error);
86 |     res.status(500).json({ error: "Failed to delete snippet" });
87 |   }
88 | });
89 | 
90 | export default router;
91 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Pastebin Demo Application
  2 | 
  3 | A simple Pastebin-like application built with React, TypeScript, and Express. This application is intentionally built with minimal security measures for educational purposes in security courses.
  4 | 
  5 | ## Features
  6 | 
  7 | - Code snippet creation and editing
  8 | - Support for multiple programming languages:
  9 |   - TypeScript
 10 |   - JavaScript
 11 |   - Python
 12 |   - Java
 13 |   - C++
 14 | - Syntax highlighting using CodeMirror
 15 | - File upload functionality
 16 | - Basic user authentication
 17 | - Unique URLs for each saved snippet
 18 | - SQLite database with Sequelize ORM
 19 | 
 20 | ## ⚠️ Security Notice
 21 | 
 22 | This application is deliberately built WITHOUT security measures for educational purposes. It contains various vulnerabilities including but not limited to:
 23 | - SQL Injection possibilities
 24 | - No input validation
 25 | - Weak authentication
 26 | - No CSRF protection
 27 | - Potential XSS vulnerabilities
 28 | 
 29 | DO NOT USE THIS IN PRODUCTION!
 30 | 
 31 | ## Prerequisites
 32 | 
 33 | - Node.js (v14 or higher)
 34 | - npm (Node Package Manager)
 35 | 
 36 | ## Installation
 37 | 
 38 | 1. Clone the repository:
 39 | ```bash
 40 | git clone [repository-url]
 41 | cd learn_paste-bin
 42 | ```
 43 | 
 44 | 2. Install dependencies:
 45 | ```bash
 46 | npm install
 47 | ```
 48 | 
 49 | 3. Start the backend and frontend development server:
 50 | ```bash
 51 | npm run dev:all
 52 | ```
 53 | 
 54 | ## Usage
 55 | 
 56 | 1. Access the application at `http://localhost:3000`
 57 | 
 58 | 2. Login with default credentials:
 59 |    - Username: `admin`
 60 |    - Password: `admin`
 61 | 
 62 | 3. Create new snippets:
 63 |    - Enter a title
 64 |    - Select a programming language
 65 |    - Write or paste your code
 66 |    - Click "Save" to generate a unique URL
 67 | 
 68 | 4. Upload files:
 69 |    - Click the file upload button
 70 |    - Select a text file
 71 |    - The content will be automatically loaded into the editor
 72 | 
 73 | 5. Access saved snippets:
 74 |    - Use the generated URL (format: `/snippet/:id`)
 75 |    - Edit and save changes as needed
 76 | 
 77 | ## Project Structure
 78 | 
 79 | ```
 80 | src/
 81 | ├── server/
 82 | │   ├── models/
 83 | │   │   ├── index.ts
 84 | │   │   ├── Snippet.ts
 85 | │   │   └── User.ts
 86 | │   └── index.ts
 87 | ├── components/
 88 | │   ├── Editor.tsx
 89 | │   └── Login.tsx
 90 | ├── types.ts
 91 | ├── App.tsx
 92 | └── main.tsx
 93 | ```
 94 | 
 95 | ## API Endpoints
 96 | 
 97 | - `POST /api/login` - User authentication
 98 | - `POST /api/snippets` - Create/update snippets
 99 | - `GET /api/snippets/:id` - Retrieve a specific snippet
100 | 
101 | ## Development
102 | 
103 | Both backend and frontend run on port 3000:
104 | ```bash
105 | npm run dev:all
106 | ```
107 | 
108 | ## Contributing
109 | 
110 | This is a demo application for educational purposes. If you find any bugs or want to suggest improvements, please open an issue or submit a pull request.
111 | 


--------------------------------------------------------------------------------
/src/styles.ts:
--------------------------------------------------------------------------------
  1 | export const styles = {
  2 |     container: {
  3 |       maxWidth: '1200px',
  4 |       margin: '0 auto',
  5 |       padding: '20px',
  6 |       fontFamily: 'system-ui, -apple-system, sans-serif',
  7 |     },
  8 |     header: {
  9 |       display: 'flex',
 10 |       justifyContent: 'space-between',
 11 |       alignItems: 'center',
 12 |       marginBottom: '20px',
 13 |       padding: '10px 0',
 14 |       borderBottom: '1px solid #eaeaea',
 15 |     },
 16 |     headerControls: {
 17 |       display: "flex",
 18 |       gap: "10px",
 19 |     },
 20 |     deleteButton: {
 21 |       backgroundColor: "#ff0000",
 22 |       color: "#fff",
 23 |     },
 24 |     snippetListContainer: {
 25 |       display: "flex",
 26 |       flexDirection: "column" as "column",
 27 |       gap: "10px",
 28 |     },
 29 |     editorContainer: {
 30 |       display: 'flex',
 31 |       flexDirection: 'column' as const,
 32 |       gap: '15px',
 33 |     },
 34 |     controls: {
 35 |       display: 'flex',
 36 |       gap: '10px',
 37 |       flexWrap: 'wrap' as const,
 38 |       alignItems: 'center',
 39 |     },
 40 |     input: {
 41 |       padding: '8px 12px',
 42 |       border: '1px solid #ddd',
 43 |       borderRadius: '4px',
 44 |       fontSize: '14px',
 45 |       flex: '1',
 46 |       minWidth: '200px',
 47 |     },
 48 |     select: {
 49 |       padding: '8px 12px',
 50 |       border: '1px solid #ddd',
 51 |       borderRadius: '4px',
 52 |       fontSize: '14px',
 53 |       backgroundColor: 'white',
 54 |     },
 55 |     button: {
 56 |       padding: '8px 16px',
 57 |       backgroundColor: '#0070f3',
 58 |       color: 'white',
 59 |       border: 'none',
 60 |       borderRadius: '4px',
 61 |       cursor: 'pointer',
 62 |       fontSize: '14px',
 63 |       transition: 'background-color 0.2s',
 64 |       '&:hover': {
 65 |         backgroundColor: '#0051cc',
 66 |       },
 67 |     },
 68 |     logoutButton: {
 69 |       backgroundColor: '#ff4444',
 70 |       '&:hover': {
 71 |         backgroundColor: '#cc0000',
 72 |       },
 73 |     },
 74 |     fileInput: {
 75 |       display: 'none',
 76 |     },
 77 |     fileLabel: {
 78 |       padding: '8px 16px',
 79 |       backgroundColor: '#28a745',
 80 |       color: 'white',
 81 |       borderRadius: '4px',
 82 |       cursor: 'pointer',
 83 |       fontSize: '14px',
 84 |       transition: 'background-color 0.2s',
 85 |       '&:hover': {
 86 |         backgroundColor: '#218838',
 87 |       },
 88 |     },
 89 |     loginContainer: {
 90 |       maxWidth: '400px',
 91 |       margin: '100px auto',
 92 |       padding: '20px',
 93 |       borderRadius: '8px',
 94 |       boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
 95 |       backgroundColor: 'white',
 96 |     },
 97 |     loginForm: {
 98 |       display: 'flex',
 99 |       flexDirection: 'column' as const,
100 |       gap: '15px',
101 |     },
102 |     loginTitle: {
103 |       textAlign: 'center' as const,
104 |       marginBottom: '20px',
105 |       color: '#333',
106 |     },
107 |     editorWrapper: {
108 |       border: '1px solid #ddd',
109 |       borderRadius: '4px',
110 |       overflow: 'hidden',
111 |     },
112 |   };


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Elastic License 2.0
 2 | 
 3 | URL: https://www.elastic.co/licensing/elastic-license
 4 | 
 5 | ## Acceptance
 6 | 
 7 | By using the software, you agree to all of the terms and conditions below.
 8 | 
 9 | ## Copyright License
10 | 
11 | The licensor grants you a non-exclusive, royalty-free, worldwide,
12 | non-sublicensable, non-transferable license to use, copy, distribute, make
13 | available, and prepare derivative works of the software, in each case subject to
14 | the limitations and conditions below.
15 | 
16 | ## Limitations
17 | 
18 | You may not provide the software to third parties as a hosted or managed
19 | service, where the service provides users with access to any substantial set of
20 | the features or functionality of the software.
21 | 
22 | You may not move, change, disable, or circumvent the license key functionality
23 | in the software, and you may not remove or obscure any functionality in the
24 | software that is protected by the license key.
25 | 
26 | You may not alter, remove, or obscure any licensing, copyright, or other notices
27 | of the licensor in the software. Any use of the licensor’s trademarks is subject
28 | to applicable law.
29 | 
30 | ## Patents
31 | 
32 | The licensor grants you a license, under any patent claims the licensor can
33 | license, or becomes able to license, to make, have made, use, sell, offer for
34 | sale, import and have imported the software, in each case subject to the
35 | limitations and conditions in this license. This license does not cover any
36 | patent claims that you cause to be infringed by modifications or additions to
37 | the software. If you or your company make any written claim that the software
38 | infringes or contributes to infringement of any patent, your patent license for
39 | the software granted under these terms ends immediately. If your company makes
40 | such a claim, your patent license ends immediately for work on behalf of your
41 | company.
42 | 
43 | ## Notices
44 | 
45 | You must ensure that anyone who gets a copy of any part of the software from you
46 | also gets a copy of these terms.
47 | 
48 | If you modify the software, you must include in any modified copies of the
49 | software prominent notices stating that you have modified the software.
50 | 
51 | ## No Other Rights
52 | 
53 | These terms do not imply any licenses other than those expressly granted in
54 | these terms.
55 | 
56 | ## Termination
57 | 
58 | If you use the software in violation of these terms, such use is not licensed,
59 | and your licenses will automatically terminate. If the licensor provides you
60 | with a notice of your violation, and you cease all violation of this license no
61 | later than 30 days after you receive that notice, your licenses will be
62 | reinstated retroactively. However, if you violate these terms after such
63 | reinstatement, any additional violation of these terms will cause your licenses
64 | to terminate automatically and permanently.
65 | 
66 | ## No Liability
67 | 
68 | *As far as the law allows, the software comes as is, without any warranty or
69 | condition, and the licensor will not be liable to you for any damages arising
70 | out of these terms or the use or nature of the software, under any kind of
71 | legal claim.*
72 | 
73 | ## Definitions
74 | 
75 | The **licensor** is the entity offering these terms, and the **software** is the
76 | software the licensor makes available under these terms, including any portion
77 | of it.
78 | 
79 | **you** refers to the individual or entity agreeing to these terms.
80 | 
81 | **your company** is any legal entity, sole proprietorship, or other kind of
82 | organization that you work for, plus all organizations that have control over,
83 | are under the control of, or are under common control with that
84 | organization. **control** means ownership of substantially all the assets of an
85 | entity, or the power to direct its management and policies by vote, contract, or
86 | otherwise. Control can be direct or indirect.
87 | 
88 | **your licenses** are all the licenses granted to you for the software under
89 | these terms.
90 | 
91 | **use** means anything you do with the software requiring one of your licenses.
92 | 
93 | **trademark** means trademarks, service marks, and similar rights.
94 | 


--------------------------------------------------------------------------------
/src/components/Editor.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react';
  2 | import { useParams, useNavigate } from 'react-router-dom';
  3 | import CodeMirror from '@uiw/react-codemirror';
  4 | import { javascript } from '@codemirror/lang-javascript';
  5 | import { python } from '@codemirror/lang-python';
  6 | import { java } from '@codemirror/lang-java';
  7 | import { cpp } from '@codemirror/lang-cpp';
  8 | import { Snippet } from '../types';
  9 | import { styles } from '../styles';
 10 | import { API_ENDPOINTS } from '../config';
 11 | 
 12 | const languages = {
 13 |   typescript: javascript({ typescript: true }),
 14 |   javascript: javascript(),
 15 |   python: python(),
 16 |   java: java(),
 17 |   cpp: cpp()
 18 | };
 19 | 
 20 | const storedUser = localStorage.getItem('user');
 21 | const userId = storedUser ? JSON.parse(storedUser).id : '';
 22 | 
 23 | function Editor() {
 24 |   const { id } = useParams();
 25 |   const navigate = useNavigate();
 26 |   const [snippet, setSnippet] = useState<Snippet>({
 27 |     userId: '',
 28 |     title: '',
 29 |     content: '',
 30 |     language: 'typescript'
 31 |   });
 32 |   const [saving, setSaving] = useState(false);
 33 | 
 34 |   useEffect(() => {
 35 |     if (id) {
 36 |       fetch(API_ENDPOINTS.SNIPPET(id))
 37 |         .then(res => res.json())
 38 |         .then(setSnippet)
 39 |         .catch(error => console.error("Error fetching snippet:", error));
 40 |     }
 41 |   }, [id]);
 42 | 
 43 |   const handleSave = async () => {
 44 |     setSaving(true);
 45 |     try {
 46 |       // Retrieve the token from the stored user
 47 |       const storedUser = localStorage.getItem('user');
 48 |       const token = storedUser ? JSON.parse(storedUser).token : '';
 49 |   
 50 |       const response = await fetch(API_ENDPOINTS.SNIPPETS, {
 51 |         method: 'POST',
 52 |         headers: { 
 53 |           'Content-Type': 'application/json',
 54 |           'Authorization': `Bearer ${token}`  // include token here
 55 |         },
 56 |         body: JSON.stringify(snippet),
 57 |       });
 58 |       if (!response.ok) {
 59 |         throw new Error('Failed to save snippet');
 60 |       }
 61 |       const savedSnippet = await response.json();
 62 |       navigate(`/snippet/${savedSnippet.id}`);
 63 |     } catch (error) {
 64 |       console.error('Error saving snippet:', error);
 65 |     } finally {
 66 |       setSaving(false);
 67 |     }
 68 |   };
 69 |   
 70 |   // Delete handler with confirmation and state clearing
 71 |   const handleDelete = async () => {
 72 |     if (!snippet.id) return;
 73 |     const confirmDelete = window.confirm('Are you sure you want to delete this snippet?');
 74 |     if (!confirmDelete) return;
 75 |     try {
 76 |       const response = await fetch(API_ENDPOINTS.SNIPPET(snippet.id), {
 77 |         method: 'DELETE',
 78 |       });
 79 |       if (!response.ok) {
 80 |         throw new Error('Failed to delete snippet');
 81 |       }
 82 |       // Clear snippet state so the Editor becomes empty
 83 |       setSnippet({ userId, title: '', content: '', language: 'typescript' });
 84 |       // Navigate back to home (empty snippet page)
 85 |       navigate('/');
 86 |     } catch (error) {
 87 |       console.error("Error deleting snippet:", error);
 88 |     }
 89 |   };
 90 | 
 91 |   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
 92 |     const file = e.target.files?.[0];
 93 |     if (file) {
 94 |       const reader = new FileReader();
 95 |       reader.onload = (e) => {
 96 |         setSnippet(prev => ({
 97 |           ...prev,
 98 |           content: e.target?.result as string
 99 |         }));
100 |       };
101 |       reader.readAsText(file);
102 |     }
103 |   };
104 | 
105 |   return (
106 |     <div style={styles.editorContainer}>
107 |       <div style={styles.controls}>
108 |         <input
109 |           style={styles.input}
110 |           type="text"
111 |           placeholder="Title"
112 |           value={snippet.title}
113 |           onChange={(e) => setSnippet(prev => ({ ...prev, title: e.target.value }))}
114 |         />
115 |         <select
116 |           style={styles.select}
117 |           value={snippet.language}
118 |           onChange={(e) => setSnippet(prev => ({ ...prev, language: e.target.value }))}
119 |         >
120 |           {Object.keys(languages).map(lang => (
121 |             <option key={lang} value={lang}>{lang}</option>
122 |           ))}
123 |         </select>
124 |         <label style={styles.fileLabel}>
125 |           Upload File
126 |           <input
127 |             style={styles.fileInput}
128 |             type="file"
129 |             onChange={handleFileUpload}
130 |           />
131 |         </label>
132 |         <button 
133 |           style={styles.button}
134 |           onClick={handleSave}
135 |           disabled={saving}
136 |         >
137 |           {saving ? 'Saving...' : 'Save'}
138 |         </button>
139 |         {/* Delete button is shown only when a snippet exists (i.e. snippet.id is present) */}
140 |         {snippet.id && (
141 |           <button 
142 |             style={{ ...styles.button, ...styles.deleteButton }}
143 |             onClick={handleDelete}
144 |           >
145 |             Delete
146 |           </button>
147 |         )}
148 |       </div>
149 |       
150 |       <div style={styles.editorWrapper}>
151 |         <CodeMirror
152 |           value={snippet.content}
153 |           height="600px"
154 |           theme="dark"
155 |           extensions={[languages[snippet.language as keyof typeof languages]]}
156 |           onChange={(value) => setSnippet(prev => ({ ...prev, content: value }))}
157 |         />
158 |       </div>
159 |     </div>
160 |   );
161 | }
162 | 
163 | export default Editor;
164 | 


--------------------------------------------------------------------------------