Merge pull request #38 from solun-pm/dev

Added alias active switch

components/aliases/aliasCard.tsx

@@ -1,30 +1,33 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMailBulk, faTrash, faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
+import { faMailBulk, faTrash, faCopy, faCheck, faToggleOn, faToggleOff } from "@fortawesome/free-solid-svg-icons";
 import toast from "react-hot-toast";
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useState, useEffect } from 'react';
 
-const AliasCard = ({ userInfo, aliasName, domain, refreshAliases }: any) => {
+const AliasCard = ({ userInfo, aliasName, domain, isActive, refreshAliases }: any) => {
 
   const [copySuccess, setCopySuccess] = useState(false);
 
-  const handleDeleteAlias = async (aliasName: string, domain: string) => {
+  const handleSwitchAliasState = async (aliasName: string, domain: string) => {
     const fqa = aliasName + domain;
-    const res = await fetch(process.env.NEXT_PUBLIC_API_DOMAIN + "/user/delete_alias", {
+    const res = await fetch(process.env.NEXT_PUBLIC_API_DOMAIN + "/user/switch_alias_state", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
         user_id: userInfo.user_id,
         fqa: fqa,
+        alias_state: !isActive,
       }),
     });
+
     if (!res.ok) {
       toast.error('Something went wrong');
       return;
     }
-    toast.success('Alias deleted successfully');
+
+    toast.success(`Alias ${isActive ? 'disabled' : 'enabled'} successfully`);
     refreshAliases();
   }
 
@@ -61,10 +64,10 @@ const AliasCard = ({ userInfo, aliasName, domain, refreshAliases }: any) => {
           </button>
         </CopyToClipboard>
         <button
-          onClick={() => handleDeleteAlias(aliasName, domain)}
-          className="h-10 text-white bg-red-500 py-2 px-4 rounded font-bold hover:bg-red-600 transition-all text-center"
+          onClick={() => handleSwitchAliasState(aliasName, domain)}
+          className={`h-10 text-white py-2 px-4 rounded font-bold hover:bg-${isActive ? 'red' : 'blue'}-600 transition-all text-center ${isActive ? 'bg-red-500' : 'bg-blue-500'}`}
         >
-          <FontAwesomeIcon icon={faTrash} className="h-5 inline-block mr-1" /> Delete
+          <FontAwesomeIcon icon={isActive ? faToggleOn : faToggleOff} className="h-5 inline-block mr-1" /> {isActive ? 'Disable' : 'Enable'}
         </button>
       </div>
     </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "solun-auth",
-  "version": "0.2.23",
+  "version": "0.2.27",
   "private": true,
   "scripts": {
     "dev": "next dev",

pages/subpages/aliases.tsx

@@ -59,7 +59,7 @@ const AliasesPage = () => {
             <>
             <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
                 {aliasesToShow.map((alias: any, index: any) => (
-                <AliasCard key={index} userInfo={userInfo} aliasName={alias.alias_name} domain={alias.domain} refreshAliases={getAliases} />
+                <AliasCard key={index} userInfo={userInfo} aliasName={alias.alias_name} domain={alias.domain} isActive={alias.active} refreshAliases={getAliases} />
                 ))}
             </div>
             <div className="flex justify-center mt-4">