oddbit · DennisAlund · May 27, 2024 · May 25, 2024 · May 25, 2024 · May 25, 2024
diff --git a/hosting/.env.development b/hosting/.env.development
@@ -0,0 +1,10 @@
+# It will be better if we set this env value to server config when we deploy this project
+# To avoid get email notification `Suspicious Activity Alert` from google
+# "Publicly accessible Google API key for Google Cloud Platform project Tanam Development Project (id: tanam-testing)"
+NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyDGYwmKdPdUXkO6abAaLf6BHL8vqqvzdvQ
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=tanam-testing.firebaseapp.com
+NEXT_PUBLIC_FIREBASE_DATABASE_URL=https://tanam-testing.firebaseio.com
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=tanam-testing
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=tanam-testing.appspot.com
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=33159958289
+NEXT_PUBLIC_FIREBASE_APP_ID=1:33159958289:web:1056a48a098332d8fd46b0
diff --git a/hosting/.env.production b/hosting/.env.production
@@ -0,0 +1,7 @@
+NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyDGYwmKdPdUXkO6abAaLf6BHL8vqqvzdvQ
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=tanam-testing.firebaseapp.com
+NEXT_PUBLIC_FIREBASE_DATABASE_URL=https://tanam-testing.firebaseio.com
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=tanam-testing
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=tanam-testing.appspot.com
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=33159958289
+NEXT_PUBLIC_FIREBASE_APP_ID=1:33159958289:web:1056a48a098332d8fd46b0
diff --git a/hosting/.eslintrc.js b/hosting/.eslintrc.js
@@ -50,5 +50,5 @@ module.exports = {
     quotes: "off", // Use config quotes from prettier, so we turn off this rules to avoiding conflict between eslint and prettier
   },
 
-  ignorePatterns: ["**/src/js/*"],
+  ignorePatterns: ["**/src/assets/js/*"],
 };
diff --git a/hosting/next.config.mjs b/hosting/next.config.mjs
@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    domains: ["lh3.googleusercontent.com"],
+  },
+};
 
 export default nextConfig;
diff --git a/hosting/package-lock.json b/hosting/package-lock.json
diff --git a/hosting/package.json b/hosting/package.json
@@ -15,6 +15,7 @@
     "apexcharts": "^3.45.2",
     "dotenv": "^16.4.5",
     "firebase": "^10.12.0",
+    "firebaseui": "^6.1.0",
     "flatpickr": "^4.6.13",
     "jsvectormap": "^1.5.3",
     "next": "^14.2.3",
@@ -39,6 +40,7 @@
     "postcss": "^8",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.11",
+    "sass": "^1.77.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

diff --git a/hosting/src/actions/authAction.ts b/hosting/src/actions/authAction.ts
@@ -0,0 +1,20 @@
+"use server";
+
+import {cookies} from "next/headers";
+import {redirect} from "next/navigation";
+import {SIGN_IN_ROUTE, SESSION_COOKIE_NAME} from "@/constants";
+
+export async function createSession(token: string) {
+  cookies().set(SESSION_COOKIE_NAME, token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+    maxAge: 60 * 60 * 24, // One day
+    path: "/",
+  });
+}
+
+export async function removeSession() {
+  cookies().delete(SESSION_COOKIE_NAME);
+
+  redirect(SIGN_IN_ROUTE);
+}
diff --git a/hosting/src/app/[site]/page.tsx b/hosting/src/app/[site]/page.tsx
@@ -9,10 +9,8 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <>
-      <DefaultLayout>
-        <ECommerce />
-      </DefaultLayout>
-    </>
+    <DefaultLayout>
+      <ECommerce />
+    </DefaultLayout>
   );
 }
diff --git a/hosting/src/app/auth/signin/page.tsx b/hosting/src/app/auth/signin/page.tsx
@@ -0,0 +1,32 @@
+import "@/assets/scss/layout-authentication.scss";
+import {Metadata} from "next";
+import Image from "next/image";
+import BlankLayout from "@/components/Layouts/BlankLayout";
+import FirebaseUi from "@/components/FirebaseUi";
+import ClientOnly from "@/components/ClientOnly";
+
+export const metadata: Metadata = {
+  title: "Tanam | Signin",
+  description: "Signin in Tanam",
+};
+
+export default function SigninPage() {
+  return (
+    <BlankLayout>
+      <section className="l-authentication">
+        <div className="fixed left-1/2 top-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2 transform text-center">
+          <div className="flex justify-center">
+            <Image src="/favicon.ico" width={80} height={80} alt="tanam icon" />
+            <h1 className="text-gray-500 mt-10 text-lg font-bold authentication__title">Signin</h1>
+          </div>
+
+          <div className="authentication__wrapper-content">
+            <ClientOnly>
+              <FirebaseUi isSignUp={false} />
+            </ClientOnly>
+          </div>
+        </div>
+      </section>
+    </BlankLayout>
+  );
+}
diff --git a/hosting/src/app/auth/signout/page.tsx b/hosting/src/app/auth/signout/page.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import "@/assets/scss/layout-authentication.scss";
+import {Metadata} from "next";
+import Image from "next/image";
+import BlankLayout from "@/components/Layouts/BlankLayout";
+// import AuthUser from "@/components/AuthUser";
+import SignoutUser from "@/components/SignoutUser";
+
+export const metadata: Metadata = {
+  title: "Tanam | Signout",
+  description: "Signout in Tanam",
+};
+
+export default function SignoutPage() {
+  return (
+    <>
+      <BlankLayout>
+        <section className="l-authentication">
+          <div className="fixed left-1/2 top-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2 transform text-center">
+            <div className="flex justify-center">
+              <Image src="/favicon.ico" width={80} height={80} alt="tanam icon" />
+            </div>
+
+            <SignoutUser />
+
+            {/* Showing this section when you want to check auth user data */}
+            {/* <div className="authentication__wrapper-content">
+              Logout
+              <AuthUser />
+            </div> */}
+          </div>
+        </section>
+      </BlankLayout>
+    </>
+  );
+}