From e3eb82e318f1e040515436fcb454e1c58c4648d2 Mon Sep 17 00:00:00 2001 From: Parker Date: Wed, 18 Dec 2024 18:09:55 -0600 Subject: [PATCH 1/4] Bump vite 6.0.2 -> 6.0.3 --- app/package.json | 2 +- app/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/package.json b/app/package.json index d7b658b..2d2f2ed 100644 --- a/app/package.json +++ b/app/package.json @@ -29,7 +29,7 @@ "globals": "^15.11.0", "typescript": "~5.6.2", "typescript-eslint": "^8.11.0", - "vite": "^6.0.2" + "vite": "^6.0.3" }, "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/app/yarn.lock b/app/yarn.lock index 7182cab..d9b4d31 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -1593,10 +1593,10 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" -vite@^6.0.2: - version "6.0.2" - resolved "https://registry.yarnpkg.com/vite/-/vite-6.0.2.tgz#7a22630c73c7b663335ddcdb2390971ffbc14993" - integrity sha512-XdQ+VsY2tJpBsKGs0wf3U/+azx8BBpYRHFAyKm5VeEZNOJZRB63q7Sc8Iup3k0TrN3KO6QgyzFf+opSbfY1y0g== +vite@^6.0.3: + version "6.0.3" + resolved "https://registry.yarnpkg.com/vite/-/vite-6.0.3.tgz#cc01f403e326a9fc1e064235df8a6de084c8a491" + integrity sha512-Cmuo5P0ENTN6HxLSo6IHsjCLn/81Vgrp81oaiFFMRa8gGDj5xEjIcEpf2ZymZtZR8oU0P2JX5WuUp/rlXcHkAw== dependencies: esbuild "^0.24.0" postcss "^8.4.49" From 6362428118dab43defc1cb00a390f614f93bbc1f Mon Sep 17 00:00:00 2001 From: Parker Date: Wed, 18 Dec 2024 18:10:15 -0600 Subject: [PATCH 2/4] Remove debug print statement --- api/util/authentication.py | 1 - 1 file changed, 1 deletion(-) diff --git a/api/util/authentication.py b/api/util/authentication.py index 43b147a..021399a 100644 --- a/api/util/authentication.py +++ b/api/util/authentication.py @@ -45,7 +45,6 @@ def authenticate_user(db, username: str, password: str): if not user: return False if not verify_password(password, user.hashed_password): - print("WHY") return False return user From 90b3e8add1f5d1b34c080517aec21d22c138583d Mon Sep 17 00:00:00 2001 From: Parker Date: Wed, 18 Dec 2024 18:23:30 -0600 Subject: [PATCH 3/4] Correct font/box sizes for auth --- app/src/components/Signup.tsx | 4 ++-- app/src/styles/Auth.module.css | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/app/src/components/Signup.tsx b/app/src/components/Signup.tsx index 0822c46..300f189 100644 --- a/app/src/components/Signup.tsx +++ b/app/src/components/Signup.tsx @@ -66,9 +66,9 @@ function Signup() {

Create Account

-

+

{error} -

+

Date: Wed, 18 Dec 2024 19:24:43 -0600 Subject: [PATCH 4/4] Remove `/create` - add directly to dashboard page --- app/src/App.tsx | 2 - app/src/components/CreateLink.tsx | 100 ---------------------------- app/src/components/Dashboard.tsx | 71 +++++++++++++++++++- app/src/styles/Create.module.css | 11 --- app/src/styles/Dashboard.module.css | 56 +++++++++++++++- 5 files changed, 125 insertions(+), 115 deletions(-) delete mode 100644 app/src/components/CreateLink.tsx delete mode 100644 app/src/styles/Create.module.css diff --git a/app/src/App.tsx b/app/src/App.tsx index 06ead3b..54a500d 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -7,7 +7,6 @@ import { import Login from './components/Login'; import Signup from './components/Signup'; import Dashboard from './components/Dashboard'; -import CreateLink from './components/CreateLink'; function App() { return ( @@ -17,7 +16,6 @@ function App() { } /> } /> } /> - } /> ); diff --git a/app/src/components/CreateLink.tsx b/app/src/components/CreateLink.tsx deleted file mode 100644 index a6456f1..0000000 --- a/app/src/components/CreateLink.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { useState, FormEvent, useEffect } from 'react'; -import createStyles from '../styles/Create.module.css'; -import styles from '../styles/Auth.module.css'; -import { Link } from 'react-router-dom'; -import axios from 'axios'; -import Navbar from './Navbar'; -import { useNavigate } from 'react-router-dom'; - -function CreateLink() { - document.title = 'LinkLogger | Create Short Link'; - - const [link, setLink] = useState(''); - const [url, setURL] = useState(''); - const [isSubmitting, setIsSubmitting] = useState(false); - const [isCopied, setIsCopied] = useState(false); - const [error, setError] = useState(null); - const navigate = useNavigate(); - - // Get /api/users/me to make sure the user is logged in, and - // to get the username for rendering on screen - useEffect(() => { - axios - .get('/api/users/me') - .then((res) => { - if (res.status != 200) { - navigate('/login'); - } - }) - .catch(() => { - navigate('/login'); - }); - }, []); - - const handleSubmit = async (e: FormEvent) => { - e.preventDefault(); - setIsSubmitting(true); - try { - const res = await axios.post('/api/links', { url }); - if (res.status === 200) { - setLink(res.data.link); - } - } catch (error) { - setError('STRANGE'); - } - }; - - const copyLink = () => { - navigator.clipboard.writeText(`${window.location.origin}/c/${link}`); - setIsCopied(true); - // Wait 5 seconds, then set isCopied back to false - setTimeout(() => { - setIsCopied(false); - }, 5000); - }; - - return ( - <> - -
-

Create a new short link by entering the long URL below

-

- {error} -

-
- - setURL(e.target.value)} - required - /> - {link.length === 0 ? ( - - ) : ( - - )} - -
-

- - Click here - {' '} - to visit your dashboard. -

-
- - ); -} - -export default CreateLink; diff --git a/app/src/components/Dashboard.tsx b/app/src/components/Dashboard.tsx index d699efb..913b566 100644 --- a/app/src/components/Dashboard.tsx +++ b/app/src/components/Dashboard.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, FormEvent } from 'react'; import axios from 'axios'; import styles from '../styles/Dashboard.module.css'; import { useNavigate, Link } from 'react-router-dom'; @@ -28,6 +28,14 @@ function Dashboard() { expire_date: string; } + // Link creation states + const [link, setLink] = useState(''); + const [url, setURL] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + const [isCopied, setIsCopied] = useState(false); + const [error, setError] = useState(null); + + // Log and link states const [links, setLinks] = useState([]); const [logs, setLogs] = useState([]); const [visibleLog, setVisibleLog] = useState(null); @@ -35,6 +43,37 @@ function Dashboard() { const [loadingLogs, setLoadingLogs] = useState(true); // Track loading state for logs const navigate = useNavigate(); + // Handle form submission to create a new link + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + try { + const res = await axios.post('/api/links', { url }); + if (res.status === 200) { + setLink(res.data.link); + } + } catch (error: unknown) { + if (axios.isAxiosError(error)) { + const customErrorMessage = error.response?.data?.error || null; + setError(customErrorMessage || 'An error occurred. Please try again.'); + setIsSubmitting(false); + } else { + setError('Unknown error. Please try again.'); + setIsSubmitting(false); + } + } + }; + + // Copy the link to the clipboard + const copyLink = () => { + navigator.clipboard.writeText(`${window.location.origin}/c/${link}`); + setIsCopied(true); + // Wait 5 seconds, then set isCopied back to false + setTimeout(() => { + setIsCopied(false); + }, 5000); + }; + // Fetch links from API useEffect(() => { axios @@ -130,6 +169,36 @@ function Dashboard() { return ( <> + +
+

Create a new short link by entering the long URL below

+
+ setURL(e.target.value)} + required + /> + {link.length === 0 ? ( + + ) : ( + + )} +
+

+ {error} +

+
+ {/* Show loading spinner if either links or logs are still loading */} {loadingLinks || loadingLogs ? ( diff --git a/app/src/styles/Create.module.css b/app/src/styles/Create.module.css deleted file mode 100644 index d8dbcb7..0000000 --- a/app/src/styles/Create.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.createInput { - display: block; - margin: 10px auto; - width: 470px; - border-radius: 5px; - padding: 15px; - color: #ccc; - background-color: #3b4148; - border: none; - font-size: 17px; -} \ No newline at end of file diff --git a/app/src/styles/Dashboard.module.css b/app/src/styles/Dashboard.module.css index fbc1d6d..e87c414 100644 --- a/app/src/styles/Dashboard.module.css +++ b/app/src/styles/Dashboard.module.css @@ -5,6 +5,61 @@ body { background-color: #2c3338; } +.createContainer { + margin: 25px auto 25px auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 1000px; +} + +.createContainer h1 { + font-size: 25px; + text-align: center; + width: 100%; + box-sizing: border-box; +} + +.createContainer form { + display: flex; + gap: 10px; + width: 100%; +} + +.createContainer form input { + display: block; + margin: 10px auto; + width: 60%; + box-sizing: border-box; + border-radius: 5px; + padding: 15px; + font-size: 17px; + color: #ccc; + background-color: #3b4148; + border: none; +} + +.createContainer form button { + width: 40%; +} + +.errorVisible { + visibility: visible; + color: #ee6161; + font-weight: 600; + word-wrap: break-word; + width: 100%; + text-align: center; + font-size: 17px; + margin: 0 auto; +} + +.errorHidden { + visibility: hidden; + color: #ee6161; +} + .loadingSpinner { display: flex; flex-direction: column; @@ -56,7 +111,6 @@ table td { .mainTable { position: absolute; - top: 150px; left: 50%; transform: translateX(-50%); }