Copilot/setup sentry nextjs (#58)
* Revise portfolio: warm brown theme, elegant typography, optimized analytics tracking (#55) * Initial plan * Update color theme to warm brown and off-white, add elegant fonts, fix analytics tracking Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Fix 404 page integration with warm theme, update admin console colors, fix font loading Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Address code review feedback: fix navigation, add utils, improve tracking Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Fix accessibility and memory leak issues from code review Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * chore: Code cleanup, add Sentry.io monitoring, and documentation (#56) * Initial plan * Remove unused code and clean up console statements Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Remove unused components and fix type issues Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Wrap console.warn in development check Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Integrate Sentry.io monitoring and add text editing documentation Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Initial plan * feat: Add Sentry configuration files and example pages - Add sentry.server.config.ts and sentry.edge.config.ts - Update instrumentation.ts with onRequestError export - Update instrumentation-client.ts with onRouterTransitionStart export - Update global-error.tsx to capture exceptions with Sentry - Create Sentry example page at app/sentry-example-page/page.tsx - Create Sentry example API route at app/api/sentry-example-api/route.ts Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * feat: Update middleware to allow Sentry example page and fix deprecated API - Update middleware to exclude /sentry-example-page from locale routing - Remove deprecated startTransaction API from Sentry example page - Use consistent DSN configuration with fallback values Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * refactor: Improve Sentry configuration with environment-based sampling - Add comments explaining DSN fallback values - Use environment-based tracesSampleRate (10% in production, 100% in dev) - Address code review feedback for production-safe configuration Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> --------- Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
denshooter
@@ -259,10 +259,10 @@ const AdminPage = () => {
|
||||
// Loading state
|
||||
if (authState.isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#fdfcf8]">
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#faf8f3]">
|
||||
<div className="text-center">
|
||||
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-stone-600" />
|
||||
<p className="text-stone-500">Loading...</p>
|
||||
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-[#795548]" />
|
||||
<p className="text-[#5d4037]">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -271,13 +271,13 @@ const AdminPage = () => {
|
||||
// Lockout state
|
||||
if (authState.isLocked) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#fdfcf8]">
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#faf8f3]">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<Lock className="w-8 h-8 text-red-500" />
|
||||
<div className="w-16 h-16 bg-[#fecaca] rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<Lock className="w-8 h-8 text-[#d84315]" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-stone-900 mb-2">Account Locked</h2>
|
||||
<p className="text-stone-500">Too many failed attempts. Please try again in 15 minutes.</p>
|
||||
<h2 className="text-2xl font-bold text-[#3e2723] mb-2">Account Locked</h2>
|
||||
<p className="text-[#5d4037]">Too many failed attempts. Please try again in 15 minutes.</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
try {
|
||||
@@ -287,7 +287,7 @@ const AdminPage = () => {
|
||||
}
|
||||
window.location.reload();
|
||||
}}
|
||||
className="mt-4 px-6 py-2 bg-stone-900 text-stone-50 rounded-xl hover:bg-stone-800 transition-colors"
|
||||
className="mt-4 px-6 py-2 bg-[#5d4037] text-[#faf8f3] rounded-xl hover:bg-[#3e2723] transition-colors"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
@@ -299,20 +299,20 @@ const AdminPage = () => {
|
||||
// Login form
|
||||
if (authState.showLogin || !authState.isAuthenticated) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[#fdfcf8] z-0">
|
||||
<div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[#faf8f3] z-0">
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="w-full max-w-md p-6"
|
||||
>
|
||||
<div className="bg-white/80 backdrop-blur-xl rounded-3xl p-8 border border-stone-200 shadow-2xl relative z-10">
|
||||
<div className="bg-[#fffcf5] backdrop-blur-xl rounded-3xl p-8 border border-[#d7ccc8] shadow-2xl relative z-10">
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 bg-[#f3f1e7] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm border border-stone-100">
|
||||
<Lock className="w-6 h-6 text-stone-600" />
|
||||
<div className="w-16 h-16 bg-[#efebe9] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm border border-[#d7ccc8]">
|
||||
<Lock className="w-6 h-6 text-[#5d4037]" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-stone-900 mb-2 tracking-tight">Admin Access</h1>
|
||||
<p className="text-stone-500">Enter your password to continue</p>
|
||||
<h1 className="text-2xl font-bold text-[#3e2723] mb-2 tracking-tight">Admin Access</h1>
|
||||
<p className="text-[#5d4037]">Enter your password to continue</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-5">
|
||||
@@ -323,13 +323,13 @@ const AdminPage = () => {
|
||||
value={authState.password}
|
||||
onChange={(e) => setAuthState(prev => ({ ...prev, password: e.target.value }))}
|
||||
placeholder="Enter password"
|
||||
className="w-full px-4 py-3.5 bg-white border border-stone-200 rounded-xl text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all shadow-sm"
|
||||
className="w-full px-4 py-3.5 bg-white border border-[#d7ccc8] rounded-xl text-[#3e2723] placeholder:text-[#a1887f] focus:outline-none focus:ring-2 focus:ring-[#bcaaa4] focus:border-[#5d4037] transition-all shadow-sm"
|
||||
disabled={authState.isLoading}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-stone-400 hover:text-stone-600 p-1"
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[#a1887f] hover:text-[#5d4037] p-1"
|
||||
>
|
||||
{authState.showPassword ? '👁️' : '👁️🗨️'}
|
||||
</button>
|
||||
@@ -338,9 +338,9 @@ const AdminPage = () => {
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mt-2 text-red-500 text-sm font-medium flex items-center"
|
||||
className="mt-2 text-[#d84315] text-sm font-medium flex items-center"
|
||||
>
|
||||
<span className="w-1.5 h-1.5 bg-red-500 rounded-full mr-2" />
|
||||
<span className="w-1.5 h-1.5 bg-[#d84315] rounded-full mr-2" />
|
||||
{authState.error}
|
||||
</motion.p>
|
||||
)}
|
||||
@@ -349,15 +349,15 @@ const AdminPage = () => {
|
||||
<button
|
||||
type="submit"
|
||||
disabled={authState.isLoading || !authState.password}
|
||||
className="w-full bg-stone-900 text-stone-50 py-3.5 px-6 rounded-xl font-semibold text-lg hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg flex items-center justify-center"
|
||||
className="w-full bg-[#5d4037] text-[#faf8f3] py-3.5 px-6 rounded-xl font-semibold text-lg hover:bg-[#3e2723] focus:outline-none focus:ring-2 focus:ring-[#bcaaa4] focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg flex items-center justify-center"
|
||||
>
|
||||
{authState.isLoading ? (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span className="text-stone-50">Authenticating...</span>
|
||||
<span className="text-[#faf8f3]">Authenticating...</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-stone-50">Sign In</span>
|
||||
<span className="text-[#faf8f3]">Sign In</span>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user