logan/twimg-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix modules

Browse Source
This commit is contained in:
Logan Cusano
2025-07-13 19:53:36 -04:00
parent 7d3f08cae9
commit e7498a9f8b
5 changed files with 101 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/auth/login/page.tsx
View File

@@ -1,12 +1,20 @@
'use client';
import { useState, FormEvent } from 'react';
import { useAuth } from '@/lib/auth';
import { API_URL } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
const LoginPage = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const auth = useAuth();
// In a real app, you'd use Next.js's useRouter
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleSubmit = async (e) => {
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
setError('');
try {
@@ -27,17 +35,15 @@ const LoginPage = () => {
const { id_token, uid } = await response.json();
// A real app would fetch user details here, but we'll mock it
const userDetails = { uid, email, role: 'user' }; // Assume 'user' for now
const userDetails = { uid, email, role: 'user' };
auth.login(id_token, userDetails);
setIsLoggedIn(true); // Simulate redirect
} catch (err) {
setIsLoggedIn(true);
} catch (err: any) {
setError(err.message);
}
};
if (isLoggedIn || auth.isAuthenticated) {
// In a real app, this would be a redirect to '/'
return <p>Redirecting...</p>;
}
@@ -64,4 +70,6 @@ const LoginPage = () => {
</Card>
</div>
);
};
};
export default LoginPage;

17
app/main/admin/page.tsx
View File

@@ -1,3 +1,11 @@
'use client';
import { useState } from 'react';
import { useAuth } from '@/lib/auth';
import { apiRequest } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
const AdminPage = () => {
const [message, setMessage] = useState('');
const [error, setError] = useState('');
@@ -9,12 +17,11 @@ const AdminPage = () => {
try {
const data = await apiRequest('/videos/scan', { method: 'POST', token: auth.token });
setMessage(data.message);
} catch (err) {
} catch (err: any) {
setError(err.message);
}
};
// In a real app, you'd fetch users and votes here
const users = [{email: 'admin@example.com', role: 'admin'}, {email: 'user@example.com', role: 'user'}];
const votes = [{video_id: 'xyz', decision: 'approve', reason: 'Good clip'}];
@@ -38,7 +45,6 @@ const AdminPage = () => {
<Card>
<CardHeader><CardTitle>Users</CardTitle></CardHeader>
<CardContent>
{/* User list would be rendered here */}
<p>User list functionality would go here.</p>
</CardContent>
</Card>
@@ -46,10 +52,11 @@ const AdminPage = () => {
<Card>
<CardHeader><CardTitle>Votes</CardTitle></CardHeader>
<CardContent>
{/* Vote list would be rendered here */}
<p>Vote list functionality would go here.</p>
</CardContent>
</Card>
</div>
);
};
};
export default AdminPage;

16
app/main/layout.tsx
View File

@@ -1,8 +1,14 @@
const MainLayout = ({ children }) => {
'use client';
import React from 'react';
import { useAuth } from '@/lib/auth';
import LoginPage from '@/app/auth/login/page';
import { Button } from '@/components/ui/button';
const MainLayout = ({ children }: { children: React.ReactNode }) => {
const auth = useAuth();
if (!auth.isAuthenticated) {
// This would be a redirect in a real Next.js app
return <LoginPage />;
}
@@ -13,7 +19,7 @@ const MainLayout = ({ children }) => {
<h1 className="text-xl font-bold">Video Voter</h1>
<div>
{auth.user?.role === 'admin' && (
<a href="#admin" className="text-gray-600 hover:text-gray-900 mr-4">Admin</a>
<a href="/main/admin" className="text-gray-600 hover:text-gray-900 mr-4">Admin</a>
)}
<Button onClick={auth.logout}>Logout</Button>
</div>
@@ -24,4 +30,6 @@ const MainLayout = ({ children }) => {
</main>
</div>
);
};
};
export default MainLayout;

25
app/main/page.tsx
View File

@@ -1,5 +1,14 @@
'use client';
import { useState } from 'react';
import { useAuth } from '@/lib/auth';
import { apiRequest, API_URL } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea';
const VotingPage = () => {
const [video, setVideo] = useState(null);
const [video, setVideo] = useState<any>(null);
const [reason, setReason] = useState('');
const [message, setMessage] = useState('');
const [error, setError] = useState('');
@@ -12,17 +21,17 @@ const VotingPage = () => {
try {
const data = await apiRequest('/videos/vote-next', { token: auth.token });
setVideo(data);
} catch (err) {
} catch (err: any) {
setError(err.message);
}
};
const submitVote = async (decision) => {
const submitVote = async (decision: string) => {
if (!video) return;
setError('');
setMessage('');
try {
const body = { decision, reason, recommended_game: '' }; // Add recommended_game if needed
const body = { decision, reason, recommended_game: '' };
await apiRequest(`/videos/${video.id}/vote`, {
method: 'POST',
body,
@@ -31,7 +40,7 @@ const VotingPage = () => {
setMessage(`Vote '${decision}' submitted successfully!`);
setVideo(null);
setReason('');
} catch (err) {
} catch (err: any) {
setError(err.message);
}
};
@@ -60,8 +69,6 @@ const VotingPage = () => {
className="w-full rounded-lg bg-black"
controls
src={`${API_URL}/videos/${video.id}/stream?token=${auth.token}`}
// The token in query param is a simple way for this demo.
// In a real app, you might handle auth differently for media.
>
Your browser does not support the video tag.
</video>
@@ -84,4 +91,6 @@ const VotingPage = () => {
</Card>
</div>
);
};
};
export default VotingPage;

88
lib/auth.tsx
View File

@@ -1,45 +1,45 @@
import React, { createContext, useContext, useState, useEffect } from 'react';
const AuthContext = createContext(null);
export const AuthProvider = ({ children }) => {
const [token, setToken] = useState(null);
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const storedToken = localStorage.getItem('authToken');
const storedUser = localStorage.getItem('authUser');
if (storedToken && storedUser) {
setToken(storedToken);
setUser(JSON.parse(storedUser));
}
setLoading(false);
}, []);
const login = (newToken, newUser) => {
setToken(newToken);
setUser(newUser);
localStorage.setItem('authToken', newToken);
localStorage.setItem('authUser', JSON.stringify(newUser));
};
const logout = () => {
setToken(null);
setUser(null);
localStorage.removeItem('authToken');
localStorage.removeItem('authUser');
};
const value = { token, user, login, logout, isAuthenticated: !!token };
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
);
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
const AuthContext = createContext<any>(null);
export const AuthProvider = ({ children }: { children: ReactNode }) => {
const [token, setToken] = useState<string | null>(null);
const [user, setUser] = useState<any | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const storedToken = localStorage.getItem('authToken');
const storedUser = localStorage.getItem('authUser');
if (storedToken && storedUser) {
setToken(storedToken);
setUser(JSON.parse(storedUser));
}
setLoading(false);
}, []);
const login = (newToken: string, newUser: any) => {
setToken(newToken);
setUser(newUser);
localStorage.setItem('authToken', newToken);
localStorage.setItem('authUser', JSON.stringify(newUser));
};
export const useAuth = () => {
return useContext(AuthContext);
};
const logout = () => {
setToken(null);
setUser(null);
localStorage.removeItem('authToken');
localStorage.removeItem('authUser');
};
const value = { token, user, login, logout, isAuthenticated: !!token };
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
);
};
export const useAuth = () => {
return useContext(AuthContext);
};