"Updated various components and utilities: BlogContainer, Comments, C…

…ontroller, blog pages, login and register pages, SendNewBlogMail, and user model."

app/src/Layout/Components/BlogContainer.tsx

@@ -7,7 +7,7 @@ import { Blog } from '@/Redux/Blogslice/Blogslice';
 
 function BlogContainer({ blog }: { blog: Blog }) {
     return (
-        <article className="max-w-5xl pt-16 border border-gray-700 shadow-sm rounded-md my-5 mx-auto py-12 px-2 sm:px-4">
+        <article className="max-w-5xl pt-10 sm:pt-16 border border-gray-700 shadow-sm rounded-md sm:my-5 mx-auto sm:py-12 py-5 px-2 sm:px-4">
             <div className=" rounded-lg space-y-6">
                 <h1 className="text-[1.5rem] sm:text-[2.5rem] border-b-4 border-primary mx-4 sm:mx-8 pb-2  font-extrabold text-pretty text-primary mb-4">
                     {blog.title}
@@ -28,7 +28,7 @@ function BlogContainer({ blog }: { blog: Blog }) {
 
                 <div className="flex justify-between items-center text-gray-400 text-sm p-3">
                     <Users userid={blog.postedby} />
-                    <Controller Blog={blog}  />
+                    <Controller Blog={blog} />
                 </div>
             </div>
         </article>

app/src/Layout/UI/Comments.tsx

@@ -35,7 +35,7 @@ function Comments({ comment }: { comment: Comment }) {
                             <div className="comment-container">
                                 <p dangerouslySetInnerHTML={{ __html: comment.text }} />
                             </div>
-                            {comment.postedby === userdata?._id &&
+                            {(comment.postedby === userdata?._id || userdata?.isAdmin) &&
                                 <div className="mt-4 flex space-x-4 text-gray-400 text-sm">
                                     <button className="hover:text-red-500 transition-colors duration-150" onClick={handleDelete}><MdDeleteForever className='text-2xl' /></button>
                                 </div>

app/src/Layout/UI/Controller.tsx

@@ -34,7 +34,7 @@ function Controller({ Blog }: { Blog: Blog }) {
 
     return (
         <>
-            {(isLogin && userdata?._id === Blog.postedby) &&
+            {((isLogin && userdata?._id === Blog.postedby) || (userdata?.isAdmin)) &&
                 <div className="flex flex-col space-y-3 py-2">
                     <Button icon={<CgEditBlackPoint />} label='Edit' onClick={handleEdit} />
                     <Button icon={<MdDelete />} label='Delete' variant='secondary' onClick={handleDeleteToggle} />

app/src/app/Blog/[_id]/page.tsx

@@ -18,12 +18,10 @@ export default function Page({ params }: { params: { _id: string } }) {
         dispatch(fetchBlogById(params._id));
     }, [dispatch, params._id]);
 
-console.log(status)
     if (status === "failed") {
         notFound()
     }
 
-
     return (
         <>
             {status === "loading" || status === "idle" ? <Loading /> : blog ? <> <BlogContainer blog={blog} />

app/src/app/Blog/page.tsx

@@ -15,7 +15,7 @@ export default function Page() {
         dispatch(fetchAllBlogs());
     }, [dispatch]);
 
-    if (status === "loading") {
+    if (status === "loading" || status === "idle") {
         return <Loading />;
     }
 

app/src/app/login/page.tsx

@@ -34,7 +34,7 @@ function Page() {
       <form onSubmit={handleLogin} className='p-2 container max-w-screen-sm mx-auto'>
         <Error error={error as string} />
         <Input label='email' type='email' onChange={(e) => setEmail(e.target.value)} value={Email} />
-        <Input label='password' name='password' value={Password} onChange={(e) => setPassword(e.target.value)} type='password' />
+        <Input minLength={6} label='password' name='password' value={Password} onChange={(e) => setPassword(e.target.value)} type='password' />
         <Button type='submit' label='login' />
       </form>
     </div>

app/src/app/register/page.tsx

@@ -21,14 +21,14 @@ function Page() {
         }
     }
     return (
-        <div className="max-w-screen-lg border border-primary py-10 rounded-md mx-auto mt-5">
+        <div className="max-w-screen-lg border p-5 border-primary py-10 rounded-md mx-auto mt-5">
             <Heading label='register' />
             <form onSubmit={handleLogin} className='p-2 container max-w-screen-sm mx-auto'>
                 <Error error={error as string} />
                 {status === "loading" && <Loading />}
                 <Input label='Name' required type='Name' onChange={(e) => setName(e.target.value)} value={Name} />
                 <Input label='Email' required type='email' onChange={(e) => setEmail(e.target.value)} value={Email} />
-                <Input label='Password' required name='password' value={Password} onChange={(e) => setPassword(e.target.value)} type='password' />
+                <Input label='Password' minLength={6} required name='password' value={Password} onChange={(e) => setPassword(e.target.value)} type='password' />
                 <Button type='submit' label='login' />
             </form>
         </div>

server/Utilities/SendNewBlogMail.ts

@@ -11,8 +11,8 @@ const sendEmail = (recipientEmail: any, blog: any) => {
   const mailOptions = {
     from: "[email protected]",
     to: recipientEmail,
-    subject: "New Blog Post Published",
-    text: `A new blog titled "${blog.title}" has been published. Check it out!`,
+    subject: blog.title,
+    html: blog.content,
   };
 
   transporter.sendMail(mailOptions, (error, info) => {

server/models/user.ts

@@ -5,6 +5,7 @@ const UserSchema = new Schema({
   password: { type: String },
   token: { type: String, required: false },
   signin: { type: String, enum: ["google", "email"] },
+  isAdmin: { type: Boolean, default: false },
 });
 const User = mongoose.model("user", UserSchema);
 UserSchema.index({ email: 1 }, { unique: true });