Skip to content
Snippets Groups Projects
Select Git revision
  • 3e33084d8f2541ab1489f04bc9a41c8c64613d4c
  • main default protected
  • React-Branch
3 results

login.js

Blame
  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    login.js 3.29 KiB
    import React, { useEffect, useState} from 'react';
    import Navbar from '../components/navbar';
    import CookieDisclosure from '../components/cookieDisclosure';
    import SubNavbar from '../components/subNavbar'
    import { useTranslation } from 'react-i18next';
    import ntnuLogo from '../img/ntnuLogoUtenSlagOrd.svg';
    
    // Function for logging out the user
    function logoutRequest(){
        // Get and remove the local  authentication key
        const userAuth = localStorage.getItem('userAuth');
        localStorage.removeItem('userAuth')
        console.log("logging out")
        fetch(process.env.REACT_APP_BACKEND_URL+'/login?userAuth=' + userAuth, {
                    method: 'DELETE',
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json'
                    }
                // Redirect to the logout page at Feide
                }).then((response) => response.json())
                .then((json) => {
                    console.log(json, json.hash)
                    window.location.href= "https://auth.dataporten.no/openid/endsession"
                })
                .catch(function(error){
                    console.log(error)
                    window.location.href= "https://auth.dataporten.no/openid/endsession"
                })
    }
    
    function Login(){
        const { t } = useTranslation();
        const [isLoggedIn, setIsLoggedIn] = useState(false);
    
        // Change the display of the component if the user is logged in
        useEffect(() => {
            if (localStorage.getItem('userAuth') != null) {
                setIsLoggedIn(true)
            }
        }, [])
    
        return (
    
            <div className="grid place-items-center">
                
                <Navbar />
                <SubNavbar page="loginPage"/>
    
                <div className='flex justify-center mt-6 sm:mt-8'>
                    <img src={ntnuLogo} className="h-20 sm:h-35 md:h-40 w-auto" alt="NTNU Logo"/>
                    <h1 className="text-4xl sm:text-6xl md:text-8xl font-bold sm:ml-4 ml-2 pt-2 sm:pt-4 w-auto"> Threat Total </h1>
                </div>
    
                {!isLoggedIn ? <>
    
                <div className='container pt-6 pb-6 sm:pt-12 sm:pb-8 pl-2 pr-2 sm:pl-16 sm:pr-16 xl:pl-36 xl:pr-36'>
                <h1 className='text-center'> {t("loginTitle")} </h1>
                <br></br>
    
                <p>
                    {t("loginDescription")}
                    <a href="/about#login" className="underline">{t("cookieDisclosureLink")}</a>.
                    <br></br>{t("loginDescription2")}
                    <br></br>
                </p>          
                </div>
    
                <div className= "container w-full mb-3 sm:pl-36 sm:pr-36 flex justify-center overflow-hidden">
                <a href={process.env.REACT_APP_FEIDELOGINURL}>
                <button className='bg-blue-400 border-2 rounded-lg p-2'>{t("loginButton")}</button>
                </a>
                
                </div>
    
                </> : <>
                <div className='container pt-6 pb-6 sm:pt-12 sm:pb-8 pl-2 pr-2 sm:pl-16 sm:pr-16 xl:pl-36 xl:pr-36'>
                <br></br>
    
                <p className='text-center'>
                    {t("loggedInDescription")}
                    <br></br>
                </p>         
                </div>
                <button onClick={logoutRequest} className='bg-blue-400 border-2 rounded-lg p-2'>{t("logoutButton")}</button> 
                </>}
    
                <CookieDisclosure />
            </div>
        )
    }
    
    export default Login;