AdminPageBefore

next.config.js

@@ -1,4 +1,15 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      { protocol: "https", hostname: "images.pexels.com" },
+      { protocol: "https", hostname: "cdn4.iconfinder.com" },
+      { protocol: "https", hostname: "avatars.githubusercontent.com" },
+      { protocol: "https", hostname: "lh3.googleusercontent.com" },
+      { protocol: "https", hostname: "github.githubassets.com" },
+      { protocol: "https", hostname: "platform-lookaside.fbsbx.com" },
+    ],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -9,9 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "aws4": "^1.12.0",
+    "bcryptjs": "^2.4.3",
+    "mongoose": "^8.0.3",
+    "next": "14.0.4",
+    "next-auth": "^5.0.0-beta.3",
+    "punycode": "^2.3.1",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.4"
+    "webpack": "^5.89.0"
   },
   "devDependencies": {
     "eslint": "^8",

src/app/(auth)/forgot-password/page.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const ForgotPasswordPage = () => {
+  return <div>ForgotPasswordPage</div>;
+};
+
+export default ForgotPasswordPage;

src/app/(auth)/login/login.module.css

@@ -0,0 +1,31 @@
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.wrapper {
+    width: 500px;
+    background-color: var(--bgSoft);
+    padding: 50px;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    gap: 15px;
+    border-radius: 5px;
+}
+
+.github {
+    width: 100%;
+    padding: 20px;
+    cursor: pointer;
+    background-color: #fff;
+    color: #000;
+    font-weight: bold;
+    border: none;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}

src/app/(auth)/login/page.jsx

@@ -0,0 +1,56 @@
+import {
+  handleFacebookLogin,
+  handleGithubLogin,
+  handleGoogleLogin,
+} from "@/lib/action";
+import styles from "./login.module.css";
+import LoginForm from "@/components/loginForm/loginForm";
+import Image from "next/image";
+
+const LoginPage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <form action={handleGithubLogin}>
+          <button className={styles.github}>
+            <Image
+              src="/github.svg"
+              alt=""
+              width={20}
+              height={20}
+              className="object-contain"
+            />
+            Login with Github
+          </button>
+        </form>
+        <form action={handleGoogleLogin}>
+          <button className={styles.github}>
+            <Image
+              src="/google.svg"
+              alt=""
+              width={20}
+              height={20}
+              className="object-contain"
+            />
+            Login with Google
+          </button>
+        </form>
+        <form action={handleFacebookLogin}>
+          <button className={styles.github}>
+            <Image
+              src="/facebook.svg"
+              alt=""
+              width={20}
+              height={20}
+              className="object-contain"
+            />
+            Login with Facebook
+          </button>
+        </form>
+        <LoginForm />
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

src/app/(auth)/register/page.jsx

@@ -0,0 +1,15 @@
+import styles from "./register.module.css";
+import React from "react";
+import RegisterForm from "@/components/registerForm/registerForm";
+
+const RegisterPage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <RegisterForm />
+      </div>
+    </div>
+  );
+};
+
+export default RegisterPage;

src/app/(auth)/register/register.module.css

@@ -0,0 +1,16 @@
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.wrapper {
+    width: 500px;
+    background-color: var(--bgSoft);
+    padding: 50px;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    gap: 30px;
+    border-radius: 5px;
+}

src/app/about/about.module.css

@@ -0,0 +1,61 @@
+.container {
+    display: flex;
+    gap: 100px;
+}
+
+.textContainer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+}
+
+.subtitle {
+    color: var(--btn)
+}
+
+.title {
+    font-size: 54px;
+}
+
+.desc {
+    font-size: 20px;
+    font-weight: 300;
+}
+
+.boxes {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.box {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.box h1 {
+    color: var(--btn);
+}
+
+.imgContainer {
+    flex: 1;
+    position: relative;
+}
+
+.img {
+    object-fit: contain;
+}
+
+@media (max-width: 768px) {
+    .container {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .boxes {
+        flex-direction: column;
+        gap: 50px;
+    }
+}

src/app/about/page.jsx

@@ -0,0 +1,46 @@
+import Image from "next/image";
+import styles from "./about.module.css";
+import React from "react";
+
+export const metadata = {
+  title: "About Page",
+  description: "About description",
+};
+
+const AboutPage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.textContainer}>
+        <h2 className={styles.subtitle}>About Agency</h2>
+        <h1 className={styles.title}>
+          We create digital ideas that are bigger, bolder, braver and better.
+        </h1>
+        <p className={styles.desc}>
+          We create digital ideas that are bigger, bolder, braver and better. We
+          believe in good ideas flexibility and precission We’re world’s Our
+          Special Team best consulting & finance solution provider. Wide range
+          of web and software development services.
+        </p>
+        <div className={styles.boxes}>
+          <div className={styles.box}>
+            <h1>10 K+</h1>
+            <p>Year of experience</p>
+          </div>
+          <div className={styles.box}>
+            <h1>10 K+</h1>
+            <p>Year of experience</p>
+          </div>
+          <div className={styles.box}>
+            <h1>10 K+</h1>
+            <p>Year of experience</p>
+          </div>
+        </div>
+      </div>
+      <div className={styles.imgContainer}>
+        <Image src="/about.png" alt="About Image" fill className={styles.img} />
+      </div>
+    </div>
+  );
+};
+
+export default AboutPage;

src/app/admin/admin.module.css

@@ -0,0 +1,36 @@
+.container {
+    margin-top: 50px;
+    display: flex;
+    flex-direction: column;
+    gap: 100px;
+}
+
+.row {
+    display: flex;
+    gap: 100px;
+}
+
+.row h1 {
+    font-size: 24px;
+    font-weight: 300;
+}
+
+.col {
+    flex: 1;
+}
+
+.col img {
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.line {
+    margin: 100px;
+    color: var(--bgSoft)
+}
+
+@media (max-width: 768px) {
+    .row {
+        flex-direction: column;
+    }
+}

src/app/admin/page.jsx

@@ -0,0 +1,38 @@
+import { Suspense } from "react";
+import styles from "./admin.module.css";
+import { auth } from "@/lib/auth";
+import AdminPosts from "@/components/adminPosts/page";
+import AdminPostForm from "@/components/adminPostForm/page";
+import AdminUsers from "@/components/adminUsers/page";
+import AdminUserForm from "@/components/adminUserForm/page";
+
+const AdminPage = async () => {
+  const session = await auth();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.row}>
+        <div className={styles.col}>
+          <Suspense fallback={<div>Loading...</div>}>
+            <AdminPosts />
+          </Suspense>
+        </div>
+        <div className={styles.col}>
+          <AdminPostForm userId={session.user.id} />
+        </div>
+      </div>
+      <div className={styles.row}>
+        <div className={styles.col}>
+          <Suspense fallback={<div>Loading...</div>}>
+            <AdminUsers />
+          </Suspense>
+        </div>
+        <div className={styles.col}>
+          <AdminUserForm />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdminPage;