forked from arjuncvinod/Blogging-Website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathedit-post.ejs
159 lines (147 loc) · 7.8 KB
/
edit-post.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Post - myBlog</title>
<link rel="stylesheet" href="/css/styles.css">
<script src="https://kit.fontawesome.com/eabac940d1.js" crossorigin="anonymous"></script>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-teal-600 shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex-shrink-0 flex items-center">
<a href="/home" class="text-white text-2xl font-bold">myBlog</a>
</div>
<div class="flex items-center space-x-4">
<a href="/home" class="text-white hover:bg-teal-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<% if(user==="admin"){ %>
<a href="/admin" class="text-white hover:bg-teal-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
<% } else { %>
<a href="/profile/<%=user %>" class="text-white hover:bg-teal-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">My Profile</a>
<% } %>
<a href="/logout" class="text-white hover:bg-teal-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Logout</a>
</div>
</div>
</div>
</nav>
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="bg-white rounded-2xl shadow-lg overflow-hidden">
<!-- Header -->
<div class="px-8 py-6 border-b border-gray-200">
<h1 class="text-2xl font-bold text-gray-900">Edit Post</h1>
<p class="mt-1 text-sm text-gray-600">Update your post content and media</p>
</div>
<!-- Form -->
<form action="/update/<%=post._id%>" method="post" enctype="multipart/form-data" class="p-8 space-y-6">
<!-- Title -->
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">Post Title</label>
<input type="text"
name="postTitle"
value="<%=post.title%>"
class="block w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
placeholder="Enter post title">
</div>
<!-- Content -->
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">Post Content</label>
<textarea name="postBody"
rows="12"
class="block w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 resize-none"
placeholder="Write your post content here..."><%=post.content%></textarea>
</div>
<!-- Image Upload -->
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">Featured Image</label>
<div class="flex items-center space-x-4">
<div class="w-32 h-32 rounded-lg overflow-hidden bg-gray-100">
<img id="preview-image"
src="/thumbnails/<%= post.thumbnail %>"
alt="Post thumbnail"
class="w-full h-full object-cover"
onerror="this.src='/images/default-image.png'">
</div>
<div class="flex-1">
<input type="file"
id="image-upload"
name="thumbnail"
accept="image/*"
onchange="previewImage(this)"
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100"/>
<p class="mt-2 text-xs text-gray-500">Recommended size: 1200x800 pixels</p>
</div>
</div>
</div>
<!-- Categories -->
<div class="form-group">
<label class="block text-sm font-medium text-gray-700">Categories</label>
<div class="category-checkboxes mt-2">
<% if (typeof categories !== 'undefined' && categories && categories.length > 0) { %>
<% categories.forEach(function(category) { %>
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="categories[]"
value="<%= category._id %>"
<% if (post.categories && post.categories.some(cat =>
cat._id && category._id &&
cat._id.toString() === category._id.toString()
)) { %>checked<% } %>>
<label class="form-check-label">
<%= category.name %>
</label>
</div>
<% }); %>
<% } else { %>
<p class="text-gray-500 text-sm">No categories available</p>
<% } %>
</div>
</div>
<style>
.category-checkboxes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
margin: 10px 0;
}
.form-check {
display: flex;
align-items: center;
gap: 5px;
}
.form-check-input {
margin: 0;
}
</style>
<!-- Action Buttons -->
<div class="flex justify-end space-x-4 pt-6 border-t border-gray-200">
<button type="reset"
class="px-6 py-2 text-sm font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition-colors">
Discard Changes
</button>
<button type="submit"
class="px-6 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">
Update Post
</button>
</div>
</form>
</div>
</main>
<script>
function previewImage(input) {
const preview = document.getElementById('preview-image');
const file = input.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
}
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>