Password Page

css/form.css

@@ -1,20 +1,23 @@
+/* Center the form on the page */
 form {
   width: 90%;
   margin: auto;
   max-width: 550px;
+  text-align: center;
 }
+
+/* Style the input, button, and label */
 input,
 form button,
 label {
   display: block;
+  margin: auto;
+  text-align: center;
 }
-form button,
+
 input,
 textarea {
   outline: none;
-}
-input,
-textarea {
   border: 1px solid rgb(199, 199, 199);
   border-radius: 10px;
   padding: 10px;
@@ -23,17 +26,59 @@ textarea {
   height: 30px;
   color: rgb(53, 53, 53);
 }
+
 textarea {
   height: 50px;
 }
+
 label {
   margin-top: 10px;
+  font-weight: bold;
+  color: #000;
 }
+
 form button {
   --accent: rgb(0, 162, 255);
   margin-top: 20px;
 }
 
 .form-container {
   width: 90%;
+  margin: auto;
+}
+
+/* Style for error messages */
+.error-message {
+  color: red;
+  margin-top: 10px;
+  font-size: 90%;
+  font-family: 'Rockwell', sans-serif;
+}
+
+/* Styles for password form */
+.password-container {
+  margin-top: 20px;
+}
+
+.password-label {
+  margin-bottom: 5px;
+  display: block;
+  font-weight: bold;
+  font-size: 90%;
+  font-family: 'Rockwell', sans-serif;
+}
+
+.password-input {
+  padding: 15px;
+  background-color: #FCFCFC;
+  border: 2px solid #000000;
+  border-bottom: 3.5px solid #000000;
+  border-right: 3.5px solid #000000;
+  border-radius: 10px;
+  width: 100%;
+  max-width: 300px;
+  font-size: 80%;
+  font-family: 'Rockwell', sans-serif;
+  text-align: left;
+  margin: auto;
 }

css/style.css

@@ -267,6 +267,9 @@ li {
 
 /* Change Article Styling */
 .edit-article { 
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
   display: flex; 
   justify-content: center;
   align-items: center;
@@ -285,4 +288,4 @@ li {
   font-weight: bold;
   font-size: 100%;
   font-family: 'Rockwell', sans-serif;
-}
+}

hash.js

@@ -0,0 +1,14 @@
+const bcrypt = require('bcrypt');
+const btoa = require('btoa'); // npm install btoa if you don't have it
+const password = 'password123'; // sample password
+
+bcrypt.hash(password, 10, (err, hash) => {
+    if (err) throw err;
+    console.log('Hashed Password:', hash);
+    const base64Encoded = btoa(hash);
+    console.log('Base64 Encoded Hashed Password:', base64Encoded);
+});
+
+const crypto = require('crypto');
+const secret = crypto.randomBytes(64).toString('hex');
+console.log('COOKIE:', secret);

lib/checkAuth.ts

@@ -0,0 +1,20 @@
+// lib/checkAuth.ts
+import { NextApiRequest } from 'next';
+import { parse } from 'cookie';
+import cookieSignature from 'cookie-signature';
+import { CipherKey } from 'crypto'; // Import the CipherKey type
+const COOKIE_SECRET = process.env.COOKIE_SECRET;
+
+if (!COOKIE_SECRET) {
+    throw new Error('Environment variable COOKIE_SECRET is not defined');
+}
+
+export function checkAuth(req: NextApiRequest): boolean {
+    const cookies = parse(req.headers.cookie || '');
+    const signedValue = cookies.auth;
+    if (!signedValue) {
+        return false;
+    }
+    const value = cookieSignature.unsign(signedValue, COOKIE_SECRET as CipherKey); // Cast COOKIE_SECRET as CipherKey
+    return value === 'logged-in';
+}