Add components for Act management and integrate Electron setup
This commit is contained in:
natreex
196
components/TwoFactorSetup.tsx
Normal file
196
components/TwoFactorSetup.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
'use client';
|
||||
|
||||
import {ChangeEvent, Dispatch, SetStateAction, useContext, useState} from 'react';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faApple, faGooglePlay} from '@fortawesome/free-brands-svg-icons';
|
||||
import {faCheck, faKey, faMobileAlt, faQrcode} from '@fortawesome/free-solid-svg-icons';
|
||||
import System from "@/lib/models/System";
|
||||
import {AlertContext, AlertContextProps} from "@/context/AlertContext";
|
||||
import {FormResponse} from "@/shared/interface";
|
||||
import {SessionContext} from "@/context/SessionContext";
|
||||
import TextInput from "@/components/form/TextInput";
|
||||
|
||||
export default function TwoFactorSetup({setShowSetup}: { setShowSetup: Dispatch<SetStateAction<boolean>> }) {
|
||||
const {session} = useContext(SessionContext);
|
||||
const alert: AlertContextProps = useContext(AlertContext);
|
||||
|
||||
const [step, setStep] = useState<number>(1);
|
||||
const [token, setToken] = useState<string>('')
|
||||
const [qrCode, setQrCode] = useState<string | null>(null);
|
||||
const [loadingQRCode, setLoadingQRCode] = useState(false);
|
||||
|
||||
async function getQRCode() {
|
||||
try {
|
||||
const response: { qrCode: string } = await System.authPostToServer('twofactor/setup', {
|
||||
email: session?.user?.email,
|
||||
}, session?.accessToken ?? '');
|
||||
setQrCode(response.qrCode);
|
||||
} catch (e: any) {
|
||||
alert.errorMessage(e.message);
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleNextStep() {
|
||||
if (step === 3) {
|
||||
await validateToken();
|
||||
} else if (step === 1) {
|
||||
if (qrCode === null) {
|
||||
getQRCode();
|
||||
}
|
||||
setStep((prev: number) => Math.min(prev + 1, 3));
|
||||
} else {
|
||||
setStep((prev: number) => Math.min(prev + 1, 3));
|
||||
}
|
||||
}
|
||||
|
||||
async function validateToken() {
|
||||
try {
|
||||
const response: FormResponse = await System.authPostToServer('twofactor/activate', {
|
||||
email: session?.user?.email, token: token
|
||||
}, session?.accessToken ?? '');
|
||||
if (response.valid) {
|
||||
alert.successMessage(response.message ?? '');
|
||||
setShowSetup(false);
|
||||
}
|
||||
} catch (e: any) {
|
||||
alert.errorMessage(e.message);
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
function handlePrevStep() {
|
||||
setStep((prev) => Math.max(prev - 1, 1));
|
||||
}
|
||||
|
||||
function getProgressClass(currentStep: number) {
|
||||
return `flex-grow h-2.5 rounded-full transition-all duration-300 ${
|
||||
step >= currentStep ? 'bg-primary shadow-sm' : 'bg-secondary/50'
|
||||
}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="rounded-2xl shadow-2xl bg-tertiary/90 backdrop-blur-sm m-auto p-8 w-full border border-secondary/50">
|
||||
<h2 className="text-2xl font-['ADLaM_Display'] text-text-primary text-center mb-6">
|
||||
Setup Two-Factor Authentication
|
||||
</h2>
|
||||
|
||||
{/* Step Indicator */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center">
|
||||
<div className={getProgressClass(1)}></div>
|
||||
<div className="w-4"></div>
|
||||
<div className={getProgressClass(2)}></div>
|
||||
<div className="w-4"></div>
|
||||
<div className={getProgressClass(3)}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step Content */}
|
||||
<div className="mb-6">
|
||||
{step === 1 && (
|
||||
<div className="text-muted">
|
||||
<p className="mb-4 text-text-primary">
|
||||
Follow these steps to enable two-factor authentication for your account:
|
||||
</p>
|
||||
<ol className="list-decimal list-inside space-y-3">
|
||||
<li className="flex items-start">
|
||||
<FontAwesomeIcon icon={faMobileAlt} className="text-primary mr-3 mt-1"/>
|
||||
Download a two-factor authentication app like Google Authenticator or Authy.
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<FontAwesomeIcon icon={faCheck} className="text-primary mr-3 mt-1"/>
|
||||
Open the app and select the option to scan a QR code.
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<FontAwesomeIcon icon={faQrcode} className="text-primary mr-3 mt-1"/>
|
||||
Proceed to the next step to scan the QR code provided.
|
||||
</li>
|
||||
</ol>
|
||||
<div className="mt-6 space-y-4">
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center px-4 py-3 bg-primary text-text-primary rounded-xl hover:bg-primary-dark transition-all duration-200 hover:scale-105 shadow-md hover:shadow-lg font-medium"
|
||||
>
|
||||
<FontAwesomeIcon icon={faGooglePlay} className="mr-2"/>
|
||||
Download on Google Play
|
||||
</a>
|
||||
<a
|
||||
href="https://apps.apple.com/app/google-authenticator/id388497605"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center px-4 py-3 bg-primary text-text-primary rounded-xl hover:bg-primary-dark transition-all duration-200 hover:scale-105 shadow-md hover:shadow-lg font-medium"
|
||||
>
|
||||
<FontAwesomeIcon icon={faApple} className="mr-2"/>
|
||||
Download on App Store
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{step === 2 && (
|
||||
<div className="text-muted text-center">
|
||||
<p className="mb-4 text-text-primary">
|
||||
Scan the QR code below with your authentication app to link your account.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<div className="bg-secondary/20 p-6 rounded-xl shadow-lg border border-secondary/50">
|
||||
{loadingQRCode ? (
|
||||
<div className="text-muted">Loading QR Code...</div>
|
||||
) : qrCode ? (
|
||||
<img src={qrCode} alt="QR Code" className="w-48 h-48 mx-auto"/>
|
||||
) : (
|
||||
<div className="text-muted">Failed to load QR Code.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-sm text-muted">
|
||||
Having trouble? Make sure your app supports QR code scanning.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{step === 3 && (
|
||||
<div className="text-text-secondary">
|
||||
<p className="mb-4">
|
||||
Enter the 6-digit code generated by your authentication app to verify the setup.
|
||||
</p>
|
||||
<div className="relative">
|
||||
<TextInput
|
||||
value={token}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) => setToken(e.target.value)}
|
||||
placeholder="Enter 6-digit code"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
icon={faKey}
|
||||
className="absolute right-3 top-3 text-muted pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
onClick={handlePrevStep}
|
||||
disabled={step === 1}
|
||||
className={`px-6 py-2.5 rounded-xl transition-all duration-200 font-medium ${
|
||||
step === 1 ? 'bg-secondary/30 text-muted cursor-not-allowed' : 'bg-secondary/50 hover:bg-secondary text-text-primary hover:scale-105 shadow-sm border border-secondary/50'
|
||||
}`}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={handleNextStep}
|
||||
className={`px-6 py-2.5 rounded-xl transition-all duration-200 font-medium ${
|
||||
step === 3 ? 'bg-success hover:bg-success/90 text-text-primary shadow-md hover:shadow-lg hover:scale-105' : 'bg-primary hover:bg-primary-dark text-text-primary shadow-md hover:shadow-lg hover:scale-105'
|
||||
}`}
|
||||
>
|
||||
{step === 3 ? 'Finish' : 'Next'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user