parker/linklogger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix formatting - mainly spacing

Browse Source
This commit is contained in:
Parker M. 2024-11-11 20:29:56 -06:00
parent c0b5500f00
commit 918a04076f
Signed by: parker
GPG Key ID: 505ED36FC12B5D5E
8 changed files with 323 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/.prettierrc Normal file
View File

@ -0,0 +1,6 @@
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}

1
app/public/vite.svg
View File

@ -1 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

26
app/src/App.tsx
View File

@ -1,18 +1,18 @@
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Login from './components/Login' import Login from './components/Login';
import Signup from './components/Signup' import Signup from './components/Signup';
import Dashboard from './components/Dashboard' import Dashboard from './components/Dashboard';
function App() { function App() {
return ( return (
<Router> <Router>
<Routes> <Routes>
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} /> <Route path="/signup" element={<Signup />} />
<Route path="/dashboard" element={<Dashboard />} /> <Route path="/dashboard" element={<Dashboard />} />
</Routes> </Routes>
</Router> </Router>
) );
} }
export default App export default App;

233
app/src/components/Dashboard.tsx
View File

@ -6,124 +6,139 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrash } from '@fortawesome/free-solid-svg-icons'; import { faTrash } from '@fortawesome/free-solid-svg-icons';
function Dashboard() { function Dashboard() {
document.title = 'LinkLogger | Dashboard' document.title = 'LinkLogger | Dashboard';
interface Log { interface Log {
id: number; id: number;
link: string; link: string;
timestamp: string; timestamp: string;
ip: string; ip: string;
location: string; location: string;
browser: string; browser: string;
os: string; os: string;
userAgent: string; userAgent: string;
isp: string; isp: string;
} }
interface Link { interface Link {
link: string; link: string;
owner: number; owner: number;
redirect_link: string; redirect_link: string;
expire_date: string; expire_date: string;
} }
const [links, setLinks] = useState<Link[]>([]); const [links, setLinks] = useState<Link[]>([]);
const [logs, setLogs] = useState<Log[]>([]); const [logs, setLogs] = useState<Log[]>([]);
const [visibleLog, setVisibleLog] = useState<string | null>(null); const [visibleLog, setVisibleLog] = useState<string | null>(null);
const navigate = useNavigate(); const navigate = useNavigate();
// Fetch links from API // Fetch links from API
useEffect(() => { useEffect(() => {
Axios.get('/api/links').then((res) => { Axios.get('/api/links')
if (res.status === 200) { .then((res) => {
setLinks(res.data); if (res.status === 200) {
} else { setLinks(res.data);
navigate('/login'); } else {
} navigate('/login');
}).catch(() => { }
navigate('/login'); })
}); .catch(() => {
}, []); navigate('/login');
});
}, []);
// Fetch logs from API // Fetch logs from API
useEffect(() => { useEffect(() => {
Axios.get('/api/logs').then((res) => { Axios.get('/api/logs')
if (res.status === 200) { .then((res) => {
setLogs(res.data); if (res.status === 200) {
} else { setLogs(res.data);
navigate('/login'); } else {
} navigate('/login');
}).catch(() => { }
navigate('/login'); })
}); .catch(() => {
}, []); navigate('/login');
});
}, []);
const toggleLogRow = (link: string) => {
setVisibleLog(visibleLog === link ? null : link);
};
const toggleLogRow = (link: string) => { return (
setVisibleLog(visibleLog === link ? null : link); <table id={styles.mainTable}>
}; <thead>
<tr style={{ border: '2px solid #ccc' }}>
<th>Link</th>
<th>Visits</th>
<th>Redirect</th>
<th>Expire Date</th>
</tr>
</thead>
<tbody>
{/* For every link and its logs */}
{links.map((link) => (
<React.Fragment key={link.link}>
<tr className={styles.linkTableRow}>
<td>
<button
onClick={() => toggleLogRow(link.link)}
className={styles.linkButton}
>
{link.link}
</button>
</td>
<td>
{logs.filter((log) => log.link === link.link).length || 0}
</td>
<td>{link.redirect_link}</td>
<td>{link.expire_date}</td>
</tr>
return ( {/* Conditionally render logs for this link */}
<table id={styles.mainTable}> {visibleLog === link.link && (
<thead> <tr className={styles.logTableRow}>
<tr style={{ border: '2px solid #ccc' }}> <td colSpan={6}>
<th>Link</th> <table>
<th>Visits</th> <thead>
<th>Redirect</th> <tr>
<th>Expire Date</th> <th>ID</th>
</tr> <th>Timestamp</th>
</thead> <th>IP</th>
<tbody> <th>Location</th>
{/* For every link and its logs */} <th colSpan={2}>ISP</th>
{links.map((link) => ( </tr>
<React.Fragment key={link.link}> </thead>
<tr className={styles.linkTableRow}> <tbody>
{/* Render logs only if visibleLog matches the link */}
{logs
.filter((log) => log.link === link.link)
.map((log, index, filteredLogs) => (
<tr key={log.id}>
<td>{filteredLogs.length - index}</td>
<td>{log.timestamp}</td>
<td>{log.ip}</td>
<td>{log.location}</td>
<td>{log.isp}</td>
<td> <td>
<button onClick={() => toggleLogRow(link.link)} className={styles.linkButton}>{link.link}</button> <FontAwesomeIcon
icon={faTrash}
className={styles.trashBin}
/>
</td> </td>
<td>{logs.filter((log) => log.link === link.link).length || 0}</td> </tr>
<td>{link.redirect_link}</td> ))}
<td>{link.expire_date}</td> </tbody>
</tr> </table>
</td>
{/* Conditionally render logs for this link */} </tr>
{visibleLog === link.link && ( )}
<tr className={styles.logTableRow}> </React.Fragment>
<td colSpan={6}> ))}
<table> </tbody>
<thead> </table>
<tr> );
<th>ID</th>
<th>Timestamp</th>
<th>IP</th>
<th>Location</th>
<th colSpan={2}>ISP</th>
</tr>
</thead>
<tbody>
{/* Render logs only if visibleLog matches the link */}
{logs
.filter((log) => log.link === link.link)
.map((log, index, filteredLogs) => (
<tr key={log.id}>
<td>{filteredLogs.length - index}</td>
<td>{log.timestamp}</td>
<td>{log.ip}</td>
<td>{log.location}</td>
<td>{log.isp}</td>
<td><FontAwesomeIcon icon={faTrash} className={styles.trashBin}/></td>
</tr>
))}
</tbody>
</table>
</td>
</tr>
)}
</React.Fragment>
))}
</tbody>
</table>
)
} }
export default Dashboard; export default Dashboard;

151
app/src/components/Login.tsx
View File

@ -5,82 +5,87 @@ import { useNavigate } from 'react-router-dom';
import axios from 'axios'; import axios from 'axios';
function Login() { function Login() {
document.title = 'LinkLogger | Login' document.title = 'LinkLogger | Login';
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const navigate = useNavigate(); const navigate = useNavigate();
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true); setIsSubmitting(true);
try { try {
const res = await axios.post( const res = await axios.post(
'/api/auth/token', '/api/auth/token',
new URLSearchParams({ new URLSearchParams({
username: username, username: username,
password: password, password: password,
}), }),
{ {
headers: { headers: {
'Content-Type': 'application/x-www-form-urlencoded', 'Content-Type': 'application/x-www-form-urlencoded',
}, },
}
);
if (res.status === 200) {
navigate('/dashboard');
}
} catch (error: unknown) {
if (axios.isAxiosError(error)) {
const customErrorMessage = error.response?.data?.detail || null;
setPassword('');
setError(customErrorMessage || 'An error occurred. Please try again.');
} else {
setPassword('');
setError('Unknown error. Please try again.');
}
} finally {
setIsSubmitting(false);
} }
}; );
return ( if (res.status === 200) {
<div id={styles.container}> navigate('/dashboard');
<p id={styles.loginText}>Log In</p> }
<p id={styles.error} className={error ? 'visible' : 'hidden'}> } catch (error: unknown) {
{error} if (axios.isAxiosError(error)) {
</p> const customErrorMessage = error.response?.data?.detail || null;
<div> setPassword('');
<header> setError(customErrorMessage || 'An error occurred. Please try again.');
<hr></hr> } else {
<form onSubmit={handleSubmit}> setPassword('');
<input setError('Unknown error. Please try again.');
type="text" }
placeholder="username" } finally {
value={username} setIsSubmitting(false);
onChange={(e) => setUsername(e.target.value)} }
required };
/>
<input return (
type="password" <div id={styles.container}>
placeholder="password" <p id={styles.loginText}>Log In</p>
value={password} <p id={styles.error} className={error ? 'visible' : 'hidden'}>
onChange={(e) => setPassword(e.target.value)} {error}
required </p>
/> <div>
<button type="submit" disabled={isSubmitting}> <header>
{isSubmitting ? 'Submitting...' : 'Submit'} <hr></hr>
</button> <form onSubmit={handleSubmit}>
</form> <input
<hr></hr> type="text"
<p id={styles.bottomText}>Don't have an account? <Link to="/signup" className={styles.link}>Create one now</Link></p> placeholder="username"
</header> value={username}
</div> onChange={(e) => setUsername(e.target.value)}
</div> required
); />
<input
type="password"
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</form>
<hr></hr>
<p id={styles.bottomText}>
Don't have an account?{' '}
<Link to="/signup" className={styles.link}>
Create one now
</Link>
</p>
</header>
</div>
</div>
);
} }
export default Login; export default Login;

189
app/src/components/Signup.tsx
View File

@ -5,104 +5,109 @@ import { useNavigate } from 'react-router-dom';
import axios from 'axios'; import axios from 'axios';
function Signup() { function Signup() {
document.title = 'LinkLogger | Signup' document.title = 'LinkLogger | Signup';
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [passwordConfirm, setPasswordConfirm] = useState(''); const [passwordConfirm, setPasswordConfirm] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const navigate = useNavigate(); const navigate = useNavigate();
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true); setIsSubmitting(true);
if (password !== passwordConfirm) { if (password !== passwordConfirm) {
setPassword(''); setPassword('');
setPasswordConfirm(''); setPasswordConfirm('');
return setError('Passwords do not match.'); return setError('Passwords do not match.');
}
try {
const res = await axios.post(
'/api/users/register',
new URLSearchParams({
username: username,
password: password,
}),
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
} }
);
try { if (res.status === 200) {
const res = await axios.post( navigate('/login');
'/api/users/register', }
new URLSearchParams({ } catch (error: unknown) {
username: username, if (axios.isAxiosError(error)) {
password: password, const customErrorMessage = error.response?.data?.detail || null;
}), setUsername('');
{ setPassword('');
headers: { setPasswordConfirm('');
'Content-Type': 'application/x-www-form-urlencoded', setError(customErrorMessage || 'An error occurred. Please try again.');
}, } else {
} setUsername('');
); setPassword('');
setPasswordConfirm('');
setError('Unknown error. Please try again.');
}
} finally {
setIsSubmitting(false);
}
};
if (res.status === 200) { return (
navigate('/login'); <div id={styles.container}>
} <p id={styles.signupText}>Sign up</p>
} catch (error: unknown) { <p id={styles.error} className={error ? 'visible' : 'hidden'}>
if (axios.isAxiosError(error)) { {error}
const customErrorMessage = error.response?.data?.detail || null; </p>
setUsername(''); <div>
setPassword(''); <header>
setPasswordConfirm(''); <hr></hr>
setError(customErrorMessage || 'An error occurred. Please try again.'); <form onSubmit={handleSubmit}>
} else { <input
setUsername(''); type="text"
setPassword(''); placeholder="username"
setPasswordConfirm(''); value={username}
setError('Unknown error. Please try again.'); onChange={(e) => setUsername(e.target.value)}
} required
} finally { />
setIsSubmitting(false); <input
} type="password"
}; placeholder="password"
value={password}
return ( minLength={8}
<div id={styles.container}> onChange={(e) => setPassword(e.target.value)}
<p id={styles.signupText}>Sign up</p> required
<p id={styles.error} className={error ? 'visible' : 'hidden'}> />
{error} <input
</p> type="password"
<div> placeholder="confirm password"
<header> value={passwordConfirm}
<hr></hr> minLength={8}
<form onSubmit={handleSubmit}> onChange={(e) => setPasswordConfirm(e.target.value)}
<input required
type="text" />
placeholder="username" <button type="submit" disabled={isSubmitting}>
value={username} {isSubmitting ? 'Submitting...' : 'Submit'}
onChange={(e) => setUsername(e.target.value)} </button>
required </form>
/> <hr></hr>
<input <p id={styles.bottomText}>
type="password" Already have an account?{' '}
placeholder="password" <Link to="/login" className={styles.link}>
value={password} Log in here.
minLength={8} </Link>
onChange={(e) => setPassword(e.target.value)} </p>
required </header>
/> </div>
<input </div>
type="password" );
placeholder="confirm password"
value={passwordConfirm}
minLength={8}
onChange={(e) => setPasswordConfirm(e.target.value)}
required
/>
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</form>
<hr></hr>
<p id={styles.bottomText}>Already have an account? <Link to="/login" className={styles.link}>Log in here.</Link></p>
</header>
</div>
</div>
);
} }
export default Signup; export default Signup;

27
app/src/helpers/api.js
View File

@ -1,27 +0,0 @@
/**
* Accept an API endpoint, method, and body to send to the API.
* - If successful, return the response
* - If not, return false
* @param {*} endpoint API endpoint
* @param {*} method String (GET, POST, PUT, DELETE)
* @param {*} body Data to send to the API
* @returns response.json or false
*/
async function accessAPI(endpoint, method, body) {
let response = await fetch(`http://127.0.0.1:5252/api${endpoint}`, {
method: method,
credentials: 'include',
body: body,
});
if (response.ok) {
let data = await response.json();
data = await data;
return data;
}
return false;
}
export { accessAPI };

10
app/src/main.tsx
View File

@ -1,9 +1,9 @@
import { StrictMode } from 'react' import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client';
import App from './App.tsx' import App from './App.tsx';
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>
<App /> <App />
</StrictMode>, </StrictMode>
) );