mern-template-tool 1.0.0 → 1.0.1

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

@@ -73,92 +73,70 @@ const EditResource = () => {
   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>
+      <h2>Edit Resource</h2>
+      <p>Modify resource details</p>
+
+      {error && <p><strong>Error: {error}</strong></p>}
+
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="title">Title *: </label>
+          <input
+            id="title"
+            type="text"
+            required
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </div>
+        <br />
+        <div>
+          <label htmlFor="category">Category: </label>
+          <select
+            id="category"
+            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>
+        <br />
+        <div>
+          <label htmlFor="description">Description: </label>
+          <br />
+          <textarea
+            id="description"
+            rows={4}
+            cols={50}
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+        </div>
+        <br />
+        <div>
+          <label htmlFor="file">Replace Attached File (Optional): </label>
+          {existingFileName && <p>Current: <em>{existingFileName}</em></p>}
+          <input
+            id="file"
+            type="file"
+            onChange={handleFileChange}
+            accept=".pdf,.png,.jpg,.jpeg,.doc,.docx"
+          />
+        </div>
+        <br />
+        <button type="submit" disabled={saving}>
+          {saving ? 'Saving...' : 'Save Changes'}
+        </button>
+        {' '}
+        <button type="button" onClick={() => navigate(`/resources/${id}`)}>
+          Cancel
+        </button>
+      </form>
     </div>
   );
 };

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

@@ -39,61 +39,47 @@ const Login = () => {
   };
 
   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>
+    <div>
+      <h2>User Login</h2>
+      <p>Sign in to access your MERN account</p>
 
-        {error && <div className="alert alert-error">{error}</div>}
+      {error && <p><strong>Error: {error}</strong></p>}
 
-        <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>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="email">Email Address: </label>
+          <input
+            id="email"
+            type="email"
+            name="email"
+            required
+            value={formData.email}
+            onChange={handleChange}
+            placeholder="user@example.com"
+          />
+        </div>
+        <br />
+        <div>
+          <label htmlFor="password">Password: </label>
+          <input
+            id="password"
+            type="password"
+            name="password"
+            required
+            value={formData.password}
+            onChange={handleChange}
+            placeholder="password"
+          />
+        </div>
+        <br />
+        <button type="submit" disabled={loading}>
+          {loading ? 'Signing in...' : 'Sign In'}
+        </button>
+      </form>
 
-          <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>
+      <p>
+        Don't have an account? <Link to="/register">Register here</Link>
+      </p>
     </div>
   );
 };

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

@@ -3,17 +3,10 @@ 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>
+      <h2>404 - Page Not Found</h2>
+      <p>The requested page does not exist.</p>
+      <Link to="/">&larr; Return to Home</Link>
     </div>
   );
 };

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

@@ -5,46 +5,16 @@ 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>
+      <h2>User Profile</h2>
+      <p>Current authenticated user details (from GET /api/auth/me):</p>
+      <ul>
+        <li><strong>Full Name:</strong> {user?.name}</li>
+        <li><strong>Email:</strong> {user?.email}</li>
+        <li><strong>Role:</strong> {user?.role}</li>
+        <li><strong>User ID:</strong> {user?.id || user?._id}</li>
+        <li><strong>Created:</strong> {user?.createdAt ? new Date(user.createdAt).toLocaleString() : 'N/A'}</li>
+      </ul>
     </div>
   );
 };

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

@@ -43,90 +43,74 @@ const Register = () => {
   };
 
   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>
+    <div>
+      <h2>User Registration</h2>
+      <p>Register as a student or admin</p>
 
-        {error && <div className="alert alert-error">{error}</div>}
+      {error && <p><strong>Error: {error}</strong></p>}
 
-        <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}
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="name">Full Name: </label>
+          <input
+            id="name"
+            type="text"
+            name="name"
+            required
+            value={formData.name}
+            onChange={handleChange}
+            placeholder="Your name"
+          />
+        </div>
+        <br />
+        <div>
+          <label htmlFor="email">Email Address: </label>
+          <input
+            id="email"
+            type="email"
+            name="email"
+            required
+            value={formData.email}
+            onChange={handleChange}
+            placeholder="user@example.com"
+          />
+        </div>
+        <br />
+        <div>
+          <label htmlFor="password">Password (min 6 characters): </label>
+          <input
+            id="password"
+            type="password"
+            name="password"
+            required
+            minLength={6}
+            value={formData.password}
+            onChange={handleChange}
+            placeholder="password"
+          />
+        </div>
+        <br />
+        <div>
+          <label htmlFor="role">Role: </label>
+          <select
+            id="role"
+            name="role"
+            value={formData.role}
+            onChange={handleChange}
           >
-            {loading ? 'Creating account...' : 'Register'}
-          </button>
-        </form>
+            <option value="student">student</option>
+            <option value="admin">admin</option>
+          </select>
+        </div>
+        <br />
+        <button type="submit" disabled={loading}>
+          {loading ? 'Registering...' : '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>
+      <p>
+        Already have an account? <Link to="/login">Login here</Link>
+      </p>
     </div>
   );
 };

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

@@ -49,14 +49,10 @@ const ResourceDetails = () => {
   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>
+        <h2>Error</h2>
+        <p>{error}</p>
+        <Link to="/resources">&larr; Back to Resources</Link>
       </div>
     );
   }
@@ -70,85 +66,52 @@ const ResourceDetails = () => {
   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>
+      <p>
+        <Link to="/resources">&larr; Back to all resources</Link>
+      </p>
 
-      <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>
+      <h2>{resource.title}</h2>
+      <p><strong>Category:</strong> {resource.category}</p>
+      <p><strong>Description:</strong></p>
+      <p>{resource.description || 'No description provided.'}</p>
 
-        <p style={{ fontSize: '1.05rem', whiteSpace: 'pre-line', color: 'var(--text-primary)', margin: '1.5rem 0' }}>
-          {resource.description || 'No description provided.'}
-        </p>
+      {resource.fileUrl && (
+        <fieldset>
+          <legend>Attached File</legend>
+          <p>File Name: <strong>{resource.fileName || 'Attached file'}</strong></p>
+          {resource.fileSize && (
+            <p>File Size: {(resource.fileSize / 1024).toFixed(1)} KB</p>
+          )}
+          <p>
+            <a
+              href={`http://localhost:5000/api/resources/${resource._id}/download`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              [ Download File ]
+            </a>
+          </p>
+        </fieldset>
+      )}
 
-        {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>
-        )}
+      <br />
+      <p>
+        <strong>Created by:</strong> {resource.createdBy?.name || 'Unknown'} ({resource.createdBy?.email})
+        {' | '}
+        <strong>Date:</strong> {new Date(resource.createdAt).toLocaleString()}
+      </p>
 
-        <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>
+      {canModify && (
+        <div>
+          <hr />
+          <Link to={`/resources/${resource._id}/edit`}>[ Edit Resource ]</Link>
+          {' '}
+          <button type="button" onClick={handleDelete} disabled={deleteLoading}>
+            {deleteLoading ? 'Deleting...' : 'Delete Resource'}
+          </button>
         </div>
-      </div>
+      )}
     </div>
   );
 };