victorAnumudu
101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
/* eslint-disable jsx-a11y/anchor-is-valid */
|
|
import {useEffect, useState} from 'react'
|
|
import {Outlet, Link} from 'react-router-dom'
|
|
import {toAbsoluteUrl} from '../../../_res/helpers'
|
|
|
|
const AuthLayout = () => {
|
|
|
|
// INITIAL STATE FOR BACKGROUND IMAGE
|
|
let [bgImage, setBgImage] = useState({
|
|
filter: 'grayscale(0%)'
|
|
})
|
|
|
|
// FUNCTION TO CHANGE BACKGROUND IMAGE
|
|
let changeBg = () => {
|
|
// let randomNum = Math.round(Math.random() * 3)
|
|
let randomNum = Number(localStorage.getItem('bg-num'))
|
|
if(randomNum){
|
|
if(randomNum <= 1){
|
|
setBgImage({
|
|
filter: 'grayscale(0%)'
|
|
})
|
|
localStorage.setItem('bg-num', '2')
|
|
}else if(randomNum <= 2){
|
|
setBgImage({
|
|
// filter: 'hue-rotate(90deg)'
|
|
filter: 'grayscale(100%)'
|
|
})
|
|
localStorage.setItem('bg-num', '3')
|
|
}else{
|
|
setBgImage({
|
|
filter: 'sepia(50%)'
|
|
})
|
|
localStorage.setItem('bg-num', '1')
|
|
}
|
|
}else{
|
|
localStorage.setItem('bg-num', '2')
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
changeBg() // FUNCTION TO CHANGE BACKGROUND IMAGE
|
|
const root = document.getElementById('root')
|
|
if (root) {
|
|
root.style.height = '100%'
|
|
}
|
|
return () => {
|
|
if (root) {
|
|
root.style.height = 'auto'
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className='position-relative d-flex flex-column flex-lg-row flex-column-fluid overflow-hidden' style={{minHeight: '100vh'}}>
|
|
<img src={toAbsoluteUrl('/media/misc/float-sample.jpg')} alt="" className='position-absolute top-0 left-0 w-auto h-100' style={{filter: bgImage.filter}}/>
|
|
{/* begin::Body */}
|
|
<div className='position-relative d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
|
|
{/* begin::Form */}
|
|
<div className='d-flex flex-center flex-column flex-lg-row-fluid'>
|
|
{/* begin::Wrapper */}
|
|
<div className='w-lg-500px p-10 bg-white rounded'>
|
|
<Outlet />
|
|
</div>
|
|
{/* end::Wrapper */}
|
|
</div>
|
|
{/* end::Form */}
|
|
|
|
{/* begin::Footer */}
|
|
<div className='d-flex flex-center flex-wrap px-5'>
|
|
{/* begin::Links */}
|
|
<div className='d-flex fw-semibold text-primary fs-base'>
|
|
|
|
<a href='http://float-www.dev.chiefsoft.net' className='px-5 text-white fw-bolder' target='_blank'>
|
|
Home
|
|
</a>
|
|
|
|
<a href={process.env.REACT_APP_TERMS_LINK} className='px-5 text-white fw-bolder' target='_blank'>
|
|
Terms
|
|
</a>
|
|
|
|
<a href={process.env.REACT_APP_CONTACT_LINK} className='px-5 text-white fw-bolder' target='_blank'>
|
|
Contact Us
|
|
</a>
|
|
|
|
<a href={process.env.REACT_APP_ABOUT_LINK} className='px-5 text-white fw-bolder' target='_blank'>
|
|
About Us
|
|
</a>
|
|
</div>
|
|
{/* end::Links */}
|
|
</div>
|
|
{/* end::Footer */}
|
|
</div>
|
|
{/* end::Body */}
|
|
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export {AuthLayout}
|