mern-template-tool 1.0.0

package/templates/client/src/pages/EditResource.jsx

@@ -0,0 +1,166 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { api } from '../services/api';
+import Loading from '../components/Loading';
+
+const EditResource = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [category, setCategory] = useState('General');
+  const [file, setFile] = useState(null);
+  const [existingFileName, setExistingFileName] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchResource = async () => {
+      try {
+        const response = await api.getResourceById(id);
+        if (response.success) {
+          const res = response.data;
+          setTitle(res.title);
+          setDescription(res.description || '');
+          setCategory(res.category || 'General');
+          if (res.fileName) {
+            setExistingFileName(res.fileName);
+          }
+        }
+      } catch (err) {
+        setError(err.message || 'Failed to fetch resource for editing.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchResource();
+  }, [id]);
+
+  const handleFileChange = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSaving(true);
+    setError(null);
+
+    try {
+      const formData = new FormData();
+      formData.append('title', title);
+      formData.append('description', description);
+      formData.append('category', category);
+      if (file) {
+        formData.append('file', file);
+      }
+
+      const response = await api.updateResource(id, formData);
+      if (response.success) {
+        navigate(`/resources/${id}`);
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to update resource');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <Loading message="Loading resource..." />;
+
+  return (
+    <div className="container" style={{ maxWidth: '650px' }}>
+      <div className="card">
+        <h2>Edit Resource</h2>
+        <p style={{ marginBottom: '1.5rem', fontSize: '0.9rem' }}>
+          Update fields or replace existing file attachment
+        </p>
+
+        {error && <div className="alert alert-error">{error}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="title">Title *</label>
+            <input
+              id="title"
+              type="text"
+              required
+              className="form-control"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="category">Category</label>
+            <select
+              id="category"
+              className="form-control"
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+            >
+              <option value="General">General</option>
+              <option value="Documentation">Documentation</option>
+              <option value="Assignment">Assignment</option>
+              <option value="Project">Project</option>
+              <option value="Exam">Exam</option>
+            </select>
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="description">Description</label>
+            <textarea
+              id="description"
+              rows={4}
+              className="form-control"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="file">
+              Replace File (Optional - Leave blank to keep current)
+            </label>
+            {existingFileName && (
+              <p style={{ fontSize: '0.85rem', color: '#38bdf8', marginBottom: '0.5rem' }}>
+                Current File: {existingFileName}
+              </p>
+            )}
+            <input
+              id="file"
+              type="file"
+              className="form-control"
+              onChange={handleFileChange}
+              accept=".pdf,.png,.jpg,.jpeg,.doc,.docx"
+            />
+          </div>
+
+          <div style={{ display: 'flex', gap: '1rem', marginTop: '1.5rem' }}>
+            <button
+              type="submit"
+              className="btn btn-primary"
+              disabled={saving}
+              style={{ flex: 1 }}
+            >
+              {saving ? 'Saving changes...' : 'Save Changes'}
+            </button>
+            <button
+              type="button"
+              onClick={() => navigate(`/resources/${id}`)}
+              className="btn btn-secondary"
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default EditResource;

package/templates/client/src/pages/Login.jsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const Login = () => {
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+  });
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const from = location.state?.from?.pathname || '/dashboard';
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      await login(formData.email, formData.password);
+      navigate(from, { replace: true });
+    } catch (err) {
+      setError(err.message || 'Login failed. Please check your credentials.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="container" style={{ maxWidth: '450px', marginTop: '2rem' }}>
+      <div className="card">
+        <h2 style={{ textAlign: 'center', marginBottom: '0.5rem' }}>Welcome Back</h2>
+        <p style={{ textAlign: 'center', marginBottom: '1.5rem', fontSize: '0.9rem' }}>
+          Sign in to access your MERN dashboard
+        </p>
+
+        {error && <div className="alert alert-error">{error}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="email">Email Address</label>
+            <input
+              id="email"
+              type="email"
+              name="email"
+              required
+              className="form-control"
+              value={formData.email}
+              onChange={handleChange}
+              placeholder="user@example.com"
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              type="password"
+              name="password"
+              required
+              className="form-control"
+              value={formData.password}
+              onChange={handleChange}
+              placeholder="••••••••"
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="btn btn-primary"
+            style={{ width: '100%', marginTop: '0.5rem' }}
+            disabled={loading}
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+
+        <p style={{ textAlign: 'center', marginTop: '1.5rem', fontSize: '0.9rem' }}>
+          Don't have an account?{' '}
+          <Link to="/register" style={{ color: 'var(--primary)' }}>
+            Register here
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

package/templates/client/src/pages/NotFound.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const NotFound = () => {
+  return (
+    <div className="container" style={{ textAlign: 'center', marginTop: '4rem' }}>
+      <div className="card" style={{ maxWidth: '500px', margin: '0 auto', padding: '3rem 2rem' }}>
+        <h1 style={{ fontSize: '3rem', color: 'var(--primary)', marginBottom: '0.5rem' }}>404</h1>
+        <h2>Page Not Found</h2>
+        <p style={{ margin: '1rem 0 2rem 0' }}>
+          The page you are looking for does not exist or has been moved.
+        </p>
+        <Link to="/" className="btn btn-primary">
+          Return to Home
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

package/templates/client/src/pages/Profile.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useAuth } from '../context/AuthContext';
+
+const Profile = () => {
+  const { user } = useAuth();
+
+  return (
+    <div className="container" style={{ maxWidth: '600px', marginTop: '2rem' }}>
+      <div className="card">
+        <h2>User Profile</h2>
+        <p style={{ marginBottom: '1.5rem', fontSize: '0.9rem' }}>
+          Verified details from JWT Authentication (GET /api/auth/me)
+        </p>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <div>
+            <label style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>Full Name</label>
+            <p style={{ fontSize: '1.1rem', fontWeight: '600', color: 'var(--text-primary)' }}>{user?.name}</p>
+          </div>
+
+          <div>
+            <label style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>Email Address</label>
+            <p style={{ fontSize: '1.1rem', fontWeight: '600', color: 'var(--text-primary)' }}>{user?.email}</p>
+          </div>
+
+          <div>
+            <label style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>Assigned Role</label>
+            <p style={{ marginTop: '0.25rem' }}>
+              <span className="badge badge-primary">{user?.role}</span>
+            </p>
+          </div>
+
+          <div>
+            <label style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>User ID (MongoDB ObjectId)</label>
+            <p style={{ fontFamily: 'monospace', fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
+              {user?.id || user?._id}
+            </p>
+          </div>
+
+          <div>
+            <label style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>Account Created At</label>
+            <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
+              {user?.createdAt ? new Date(user.createdAt).toLocaleString() : 'Active Session'}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;

package/templates/client/src/pages/Register.jsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const Register = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    password: '',
+    role: 'student',
+  });
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const { register } = useAuth();
+  const navigate = useNavigate();
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      await register(
+        formData.name,
+        formData.email,
+        formData.password,
+        formData.role
+      );
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.message || 'Registration failed. Please check form details.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="container" style={{ maxWidth: '480px', marginTop: '2rem' }}>
+      <div className="card">
+        <h2 style={{ textAlign: 'center', marginBottom: '0.5rem' }}>Create Account</h2>
+        <p style={{ textAlign: 'center', marginBottom: '1.5rem', fontSize: '0.9rem' }}>
+          Register for student or admin privileges
+        </p>
+
+        {error && <div className="alert alert-error">{error}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="name">Full Name</label>
+            <input
+              id="name"
+              type="text"
+              name="name"
+              required
+              className="form-control"
+              value={formData.name}
+              onChange={handleChange}
+              placeholder="John Doe"
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="email">Email Address</label>
+            <input
+              id="email"
+              type="email"
+              name="email"
+              required
+              className="form-control"
+              value={formData.email}
+              onChange={handleChange}
+              placeholder="john@example.com"
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password">Password (min 6 characters)</label>
+            <input
+              id="password"
+              type="password"
+              name="password"
+              required
+              minLength={6}
+              className="form-control"
+              value={formData.password}
+              onChange={handleChange}
+              placeholder="••••••••"
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="role">Role</label>
+            <select
+              id="role"
+              name="role"
+              className="form-control"
+              value={formData.role}
+              onChange={handleChange}
+            >
+              <option value="student">Student (Standard User)</option>
+              <option value="admin">Admin (Elevated Permissions)</option>
+            </select>
+          </div>
+
+          <button
+            type="submit"
+            className="btn btn-primary"
+            style={{ width: '100%', marginTop: '0.5rem' }}
+            disabled={loading}
+          >
+            {loading ? 'Creating account...' : 'Register'}
+          </button>
+        </form>
+
+        <p style={{ textAlign: 'center', marginTop: '1.5rem', fontSize: '0.9rem' }}>
+          Already have an account?{' '}
+          <Link to="/login" style={{ color: 'var(--primary)' }}>
+            Login here
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Register;

package/templates/client/src/pages/ResourceDetails.jsx

@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { api } from '../services/api';
+import { useAuth } from '../context/AuthContext';
+import Loading from '../components/Loading';
+
+const ResourceDetails = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { user, isAuthenticated } = useAuth();
+
+  const [resource, setResource] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchDetails = async () => {
+      try {
+        const response = await api.getResourceById(id);
+        if (response.success) {
+          setResource(response.data);
+        }
+      } catch (err) {
+        setError(err.message || 'Failed to load resource details.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchDetails();
+  }, [id]);
+
+  const handleDelete = async () => {
+    if (!window.confirm('Are you sure you want to delete this resource?')) {
+      return;
+    }
+
+    setDeleteLoading(true);
+    try {
+      await api.deleteResource(id);
+      navigate('/resources');
+    } catch (err) {
+      alert(err.message || 'Failed to delete resource');
+      setDeleteLoading(false);
+    }
+  };
+
+  if (loading) return <Loading message="Loading resource details..." />;
+  if (error) {
+    return (
+      <div className="container" style={{ textAlign: 'center', marginTop: '3rem' }}>
+        <div className="card">
+          <h2>Error</h2>
+          <p>{error}</p>
+          <Link to="/resources" className="btn btn-secondary" style={{ marginTop: '1rem' }}>
+            Back to Resources
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const isOwner =
+    isAuthenticated &&
+    user &&
+    resource?.createdBy &&
+    (resource.createdBy._id === user.id || resource.createdBy === user.id);
+  const isAdmin = user?.role === 'admin';
+  const canModify = isOwner || isAdmin;
+
+  return (
+    <div className="container" style={{ maxWidth: '800px' }}>
+      <Link to="/resources" style={{ color: 'var(--text-secondary)', textDecoration: 'none', marginBottom: '1rem', display: 'inline-block' }}>
+        &larr; Back to all resources
+      </Link>
+
+      <div className="card">
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '1rem' }}>
+          <div>
+            <span className="badge badge-primary">{resource.category}</span>
+            <h1 style={{ marginTop: '0.5rem', fontSize: '1.8rem' }}>{resource.title}</h1>
+          </div>
+          {canModify && (
+            <div style={{ display: 'flex', gap: '0.5rem' }}>
+              <Link to={`/resources/${resource._id}/edit`} className="btn btn-secondary btn-sm">
+                Edit
+              </Link>
+              <button
+                onClick={handleDelete}
+                className="btn btn-danger btn-sm"
+                disabled={deleteLoading}
+              >
+                {deleteLoading ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          )}
+        </div>
+
+        <p style={{ fontSize: '1.05rem', whiteSpace: 'pre-line', color: 'var(--text-primary)', margin: '1.5rem 0' }}>
+          {resource.description || 'No description provided.'}
+        </p>
+
+        {resource.fileUrl && (
+          <div
+            style={{
+              background: 'rgba(255, 255, 255, 0.05)',
+              padding: '1.25rem',
+              borderRadius: '6px',
+              border: '1px solid var(--card-border)',
+              marginBottom: '1.5rem',
+            }}
+          >
+            <h4 style={{ marginBottom: '0.5rem' }}>Attached File:</h4>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <div>
+                <p style={{ color: '#fff', fontWeight: '500' }}>📄 {resource.fileName || 'Attached document'}</p>
+                {resource.fileSize && (
+                  <p style={{ fontSize: '0.8rem' }}>Size: {(resource.fileSize / 1024).toFixed(1)} KB</p>
+                )}
+              </div>
+              <a
+                href={`http://localhost:5000/api/resources/${resource._id}/download`}
+                target="_blank"
+                rel="noreferrer"
+                className="btn btn-primary btn-sm"
+              >
+                Download File
+              </a>
+            </div>
+          </div>
+        )}
+
+        <div
+          style={{
+            borderTop: '1px solid var(--card-border)',
+            paddingTop: '1rem',
+            display: 'flex',
+            justifyContent: 'space-between',
+            fontSize: '0.85rem',
+            color: 'var(--text-secondary)',
+          }}
+        >
+          <div>
+            <span>Created by: <strong>{resource.createdBy?.name || 'Unknown'}</strong> ({resource.createdBy?.email})</span>
+          </div>
+          <div>
+            <span>Date: {new Date(resource.createdAt).toLocaleString()}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResourceDetails;