Merge pull request #12 from RizkyRajitha/dev

Dev

README.md

@@ -4,7 +4,7 @@
 
 # Linkin · [![DeepScan grade](https://deepscan.io/api/teams/14086/projects/17178/branches/386441/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=14086&pid=17178&bid=386441) [![codecov](https://codecov.io/gh/RizkyRajitha/linkin/branch/master/graph/badge.svg?token=DPE3YVUYUW)](https://codecov.io/gh/RizkyRajitha/linkin) ![license](https://img.shields.io/github/license/rizkyrajitha/linkin??style=plastic)
 
-## Linkin is a customizable self hosted link in the bio platform.
+## Linkin is a customizable self-hosted link tree platform.
 
 <!-- <br>
 <br>
@@ -13,7 +13,7 @@
 ### You have absolute control
 
 ### Add your custom fonts
-### No branding , it's yours
+### No branding, it's yours
 
 ### You control your data .  -->
 
@@ -22,38 +22,36 @@
 
 ## Deploy with Vercel
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2FRizkyRajitha%2Flinkin&env=DBURL&envDescription=PostgreSQL%20database%20URL&demo-title=Linkin%20&demo-description=Linkin%20is%20a%20customizable%20self%20hosted%20link%20in%20the%20bio%20platform%20.%20And%20it's%20ready%20for%20you)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2FRizkyRajitha%2Flinkin&env=DBURL,KEY&demo-title=Linkin&demo-description=Linkin%20is%20a%20customizable%20self%20hosted%20link%20tree%20platform%20%2C%20And%20we%20are%20ready%20to%20roll)
+
+<!-- [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2FRizkyRajitha%2Flinkin&env=DBURL&envDescription=PostgreSQL%20database%20URL&demo-title=Linkin%20&demo-description=Linkin%20is%20a%20customizable%20self%20hosted%20link%20in%20the%20bio%20platform%20.%20And%20it's%20ready%20for%20you) -->
 
 ## Deploy with Heroku
 
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/RizkyRajitha/linkin&env[DBURL]=postgresdburl&env[KEY]=123)
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/RizkyRajitha/linkin)
+
+<!-- [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/RizkyRajitha/linkin&env[DBURL]=postgresdburl&env[KEY]=123) -->
 
-![Screenshot_2021-05-22 LinkIn's Link In The Bio Page](https://user-images.githubusercontent.com/38534289/119221911-4ca94f80-bb0f-11eb-94ff-31f1c3a51d06.png)
+![Screenshot_2021-05-22 LinkIn's Link tree Page](https://user-images.githubusercontent.com/38534289/119221911-4ca94f80-bb0f-11eb-94ff-31f1c3a51d06.png)
 
 ![Screenshot_2021-05-22 Linkin Dashboard](https://user-images.githubusercontent.com/38534289/119221942-7d898480-bb0f-11eb-9175-5e139fa57f0a.png)
 
 ![Screenshot_2021-05-22 Linkin Dashboard](https://user-images.githubusercontent.com/38534289/119221939-7c585780-bb0f-11eb-944f-514beb5573b7.png)
 
 ### Getting started
 
-- host in vercel
-  - set vercel environment variables
+- Hosting
+  - set environment variables
+  - **Mandatory**
     - `DBURL` - **Postgres** database url
     - `KEY` - random secret key
-- after successfully deploying visit `youdomain/admin` to view admin login
-- use default login credentials
-  - username = `admin`
-  - password = `linkin123`
-- after a successfull login you will be able to see above admin dashboard.
-
-### Build with
-
-- [NextJs](https://nextjs.org/)
-- [Postgres](https://www.postgresql.org/)
-
-### Host in
-
-- [Vercel](https://vercel.com/) .
+  - **Optional**
+    - `changePasswordEnabled` - for showcase so that anonymous users cant change the password . default set to `true` .
+  - after successfully deploying visit `youdomain/admin` to view admin login
+  - use default login credentials
+    - username = `admin`
+    - password = `linkin123`
+  - after a successfull login you will be able to see above admin dashboard.
 
 ### Developing locally
 
@@ -71,7 +69,7 @@ exports.DBURLLOCAL = "postgres://linkin:123@localhost:5432/linkin";
 exports.SECRETKEY = "123";
 ```
 
-#### Clone and install dependancies
+#### Clone and install dependencies
 
 ```
 git clone https://github.com/RizkyRajitha/linkin.git
@@ -81,7 +79,7 @@ npm i
 
 #### Database migration
 
-**you must have postgres database setup locally**
+**you must have Postgres database setup locally**
 
 ```
 node scripts/migrate.js
@@ -93,15 +91,41 @@ node scripts/migrate.js
 npm run dev
 ```
 
+### Build with
+
+- [Next.Js](https://nextjs.org/) .
+    <!-- - ![Nextjs logo](https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Nextjs-logo.svg/800px-Nextjs-logo.svg.png) -->
+- [Postgres](https://www.postgresql.org/) .
+
+### Currently supported hosting in
+
+- [Vercel](https://vercel.com/) .
+- [Heroku](https://heroku.com/) .
+
+<!-- ### Build with
+
+- [NextJs](https://nextjs.org/)
+  - <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Nextjs-logo.svg/800px-Nextjs-logo.svg.png" width="150" title="nextjs logo">
+
+- [Postgres](https://www.postgresql.org/)
+  - <img src="https://upload.wikimedia.org/wikipedia/commons/2/29/Postgresql_elephant.svg" width="150" title="postgres db logo">
+
+### Host in
+
+- [Vercel](https://vercel.com/) .
+  - <img src="https://assets.vercel.com/image/upload/q_auto/front/zeit/og.png" width="150" title="vercel logo">
+- [Heroku](https://heroku.com/) .
+  - <img src="https://brand.heroku.com/static/media/heroku-logotype-horizontal.81c49462.svg" width="150" title="heroku logo"> -->
+
 <!-- todo
 
 v 0.2.0
 
-add react toast
+add react toast ✅
 
-add sweet altert
+add sweet alert ✅
 
-add delete links function
+add delete links function ✅
 
 add link data update to link card ✅
 
@@ -110,39 +134,37 @@ add react context ✅
 gfx minorn updates  ✅
 
 
+v 0.2.1
+
+
+add heroku deploy ✅
 
+add change password ✅
 
+form submit better ✅
 
+backgroud gradients
 
+backgroud images
 
 
+photo boarder changeble .
+
 
 add update form to update page data
 add index with avatar url and other data
-add update form to update links
-logout button navbar -
+
 
 add forms
 genaral
 links
 colors
 
-fix update function with object keys
-
-seperate alert componnet
-
-photo boarder changeble .
-
-
-
 
 
-add update link route
 
-add delete link route
 
 
-usefetch hook
 
 better save stratergy
 https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap

app.json

@@ -1,7 +1,7 @@
 {
   "name": "Linkin",
   "repository": "https://github.com/RizkyRajitha/linkin",
-  "description": "Linkin is a customizable self hosted link in the bio platform",
+  "description": "Linkin is a customizable self hosted link tree platform",
   "logo": "https://res.cloudinary.com/dijjqfsto/image/upload/v1621666671/linkin_logo_1_jcuvr3.png",
   "keywords": [
     "next",
@@ -12,5 +12,15 @@
     "react",
     "node",
     "postgres"
-  ]
+  ],
+  "env": {
+    "KEY": {
+      "description": "Random secret key.This gets generated automatically",
+      "value": ""
+    },
+    "DBURL": {
+      "description": "Postgres database url",
+      "value": ""
+    }
+  }
 }

components/formwrapper.js

@@ -17,6 +17,8 @@ const PUBLICURL =
 const endpoint =
   process.env.NODE_ENV === "production" ? `` : "http://localhost:3000";
 
+const changePasswordEnabled = process.env.changePasswordEnabled || true;
+
 function Formwrapper({ pageData, updatedPageData }) {
   const router = useRouter();
 
@@ -114,6 +116,7 @@ function Formwrapper({ pageData, updatedPageData }) {
             className={`btn btn-outline-primary logout-btn ${
               styles.logoutbtn
             } ${activeForm === "passwordchangeform" ? "active" : ""} `}
+            disabled={!changePasswordEnabled}
             onClick={() => {
               setactiveForm("passwordchangeform");
             }}

components/linkcard.js

@@ -1,10 +1,11 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import debounce from "lodash.debounce";
 
 export default function LinkCard({ item, updateLink, deleteLink, loading }) {
   const refSubmitButtom = useRef(null);
+  const [cardInfo, setCardInfo] = useState(item);
 
   const {
     register,
@@ -19,12 +20,30 @@ export default function LinkCard({ item, updateLink, deleteLink, loading }) {
     // console.log(item);
 
     // cancel the debounce function when submited by enter
-    debouncedSaveLinkData.cancel();
+    // debouncedSaveLinkData.cancel();
+
+    // console.warn("!!!!!!!!!!!!!!!!!!!!!!!!!");
+    // console.log(item);
+    // console.log(cardInfo);
+    // console.log(cardInfo.id);
 
     // reset when the linkdata is change to the form update with new values
-    if (item) {
+    if (cardInfo.id === undefined && item.id) {
+      // console.log("reset with item");
+      reset(item);
+      setCardInfo(item);
+    }
+    // reset when the link is deleted to the card will show differert value
+    if (cardInfo.id !== item.id) {
+      // console.log("reset after delete");
       reset(item);
+      setCardInfo(item);
     }
+
+    // reset when the linkdata is change to the form update with new values
+    // if (item) {
+    //   reset(item);
+    // }
   }, [item]);
 
   watch((data, { type }) => {
@@ -36,20 +55,28 @@ export default function LinkCard({ item, updateLink, deleteLink, loading }) {
     debouncedSaveLinkData();
   });
 
+  // debounced function to save the data after 1.5 seconds
   const debouncedSaveLinkData = useCallback(
     debounce(() => {
       refSubmitButtom?.current?.click();
     }, 1500),
     []
   );
 
+  const submitAction = (data) => {
+    // when the form is submited by enter , the debounced action is canceled to avoid uplicate debounce
+    debouncedSaveLinkData.cancel();
+    // console.log(data);
+    updateLink(data);
+  };
+
   return (
     <>
       <div className="card mt-3">
         <div className="card-body py-2 px-4">
           {/* {console.log(errors)} */}
           {/* {JSON.stringify(item)} */}
-          <form onSubmit={handleSubmit(updateLink)}>
+          <form onSubmit={handleSubmit(submitAction)}>
             <div className="form-check form-switch d-grid gap-2 d-md-flex justify-content-md-end">
               <input
                 className="form-check-input"

components/linkinthebiopage.js

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { isEmptry } from "../lib/side";
+// import Image from "next/image";
 
 export default function Home({
   handlerText,
@@ -47,7 +48,7 @@ export default function Home({
     <div className="outterwrap">
       <div className="wrap">
         <div className="profile">
-          <img src={avatarUrl} className="photo" />
+          {/* <img src={avatarUrl} className="photo" /> */}
           <a className="handlerLink" href={`${handlerLink}`} target="_blank">
             <span className="handlerText">{handlerText}</span>
           </a>

components/passwordchangeform.js

@@ -13,6 +13,7 @@ const PasswordChangeForm = () => {
     register,
     handleSubmit,
     watch,
+    reset,
     formState: { errors },
   } = useForm();
   const router = useRouter();
@@ -49,6 +50,7 @@ const PasswordChangeForm = () => {
           draggable: true,
           progress: undefined,
         });
+        reset();
         setloading(false);
         return;
       }
@@ -65,6 +67,7 @@ const PasswordChangeForm = () => {
       await logout();
     } catch (error) {
       console.log(error);
+      reset();
       toast.error(`Error : ${error.message}`, {
         position: "bottom-left",
         autoClose: 5000,

package.json

@@ -3,7 +3,7 @@
   "version": "0.2.0",
   "private": true,
   "license": "MIT",
-  "description": "Linkin is a customizable self hosted link in the bio platform",
+  "description": "Linkin is a customizable self hosted link tree platform",
   "logo": "https://res.cloudinary.com/dijjqfsto/image/upload/v1621666671/linkin_logo_1_jcuvr3.png",
   "repository": {
     "type": "git",

pages/api/changepassword.js

@@ -3,13 +3,20 @@ import bcrypt from "bcrypt";
 import { jwtAuth, use } from "../../middleware/middleware";
 import { changePassword, getUser } from "../../lib/dbfunc";
 
+const changePasswordEnabled = process.env.changePasswordEnabled || true;
 const saltRounds = 10;
 
 async function handler(req, res) {
   if (req.method !== "POST") {
     res.status(400).send("method not allowed");
     return;
   }
+
+  if (!changePasswordEnabled) {
+    res.status(401).send("Change Password not allowed");
+    return;
+  }
+
   try {
     // Run the middleware
     await use(req, res, jwtAuth);