IntroBars/Style7IntroBar.py

import streamlit as  st
import streamlit.components.v1 as components
from streamlit_navigation_bar import st_navbar
from streamlit_option_menu import option_menu
import time

from app import *
from FirebaseDatabase.FirebaseDB import *
import re

##########################################authentication
import yaml
from yaml.loader import SafeLoader


##########################################
def store_email_in_browser(email):
    js = f"""
    <script>
        localStorage.setItem("user_email", "{email}");
    </script>
    """
    st.markdown(js, unsafe_allow_html=True)

introBar7Style = """
<style>
/*Remove popover borders*/
div.st-emotion-cache-m9wt8r div[data-testid="stPopover"] button.st-emotion-cache-1sy6v2f, 
div.st-emotion-cache-m9wt8r div[data-testid="stPopover"] button.st-emotion-cache-xkcexs
{
    padding: 0rem 0rem;
    background-color: transparent;
    border: 0px solid rgba(250, 250, 250, 0.2);
}

/*Nav Bar Adjustments*/
.st-emotion-cache-1ascbf6,.st-emotion-cache-1fke7y1 {
    border: 0px solid rgba(250, 250, 250, 0.2);
    border-radius:0;
    /*height: auto;*/
    z-index: 999999;
    position:fixed;
    width: 100%;
    /*max-height: 50px;*/
    overflow-y: scroll;
}
.st-emotion-cache-1ascbf6{
    background-color: black; 
}
.st-emotion-cache-1fke7y1{
    background-color: white;
}

/*Display the Streamlit Main Menu*/
.st-emotion-cache-12fmjuu, .st-emotion-cache-h4xjwg {
    position: unset;
}

.st-emotion-cache-15ecox0 {
    top: 1.2rem;
    right: 0.7rem;
}

.st-emotion-cache-czk5ss {
    z-index: 9999999;
}

/*LOGO and Sidebar*/
.st-emotion-cache-19u4bdk {
    z-index: 99999999;
    top:0.65rem;
    left:1.5rem;
}

/*First Page LOGO*/
.st-emotion-cache-5drf04 {
    height: 2.5rem;
}

.st-emotion-cache-17sc1v6 {
    height: 2.5rem;
}

/*Button Wrap*/
    button, [type="button"], [type="reset"], [type="submit"] {
            white-space: nowrap;
        }

.st-emotion-cache-m9wt8r {
    min-width: 60px;
}


@media (max-width: 640px) {
    .st-emotion-cache-1j8f7fw {
        max-width: 350px;
        min-width: 0px;
    }
}

@media (max-width: 640px) {
    .st-emotion-cache-m9wt8r {
        max-width: 100px;
        min-width: 0px;
    }
}

@media (max-width: 950px) {
    .st-emotion-cache-15ecox0 {
        right: 0rem; /* Reduce right spacing */
    }
}

@media (max-width: 700px) {
    .st-emotion-cache-15ecox0 {
        top: -5rem; /* Reduce right spacing */
    }
}
</style>
"""

@st.dialog("Login")
def loginForm():
    # with open('config.yaml') as file:
    #     config = yaml.load(file, Loader=SafeLoader)

    # stauth.Hasher.hash_passwords(config['credentials'])

    # st.session_state.authenticator = stauth.Authenticate(
    # config['credentials'],
    # config['cookie']['name'],
    # config['cookie']['key'],
    # config['cookie']['expiry_days'],
    # auto_hash = False
    # )
    # st.session_state.login = st.session_state.authenticator.login(key="initialLogin")
    with st.form(key="LoginForm", clear_on_submit=False):
        email = st.text_input(label = "Email")
        password = st.text_input(label= "Password", type = "password")
        margin, buttoncol = st.columns([0.92,0.08]) 
        loginSubmit = st.form_submit_button(label = "SignIn", use_container_width=True)

    if loginSubmit:
        with st.spinner("Verifying credentials..."):
            if email == "" or password == "":
                st.error('Please enter your username or password')
            else:
                db = firebaseDB()
                st.session_state.database = db
                if db.get_user(email, password):
                    st.session_state.logged_in = True
                    store_email_in_browser(email)

            # if st.session_state['authentication_status']:
            #     st.session_state.logged_in = True
                #st.switch_page(dashboard)
                    st.switch_page(AIManagement)
                else:
                    st.error('Username/password is incorrect')
            #st.session_state.logged_in = True

def emailvalidator(email):
    pattern = r'^[\w\.-]+@grcai\.com$'
    if not re.match(pattern, email):
        st.error('Email must be a grcai.com email!')

def passwordvalidator(password):
    if len(password) < 8:
        st.error('Password must be at least 8 characters long!')
    elif not re.search("[a-z]", password):
        st.error('Password must contain at least one lowercase letter!')
    elif not re.search("[A-Z]", password):
        st.error('Password must contain at least one uppercase letter!')
    elif not re.search("[0-9]", password):
        st.error('Password must contain at least one number!')
    elif not re.search(r"[!@#$%^&*()_+\-=[\]{};':,.<>/?]", password):
        st.error('Password must contain at least one special character!')


@st.dialog("Sign Up")
def signupForm():
    with st.form(key="SignupForm"):
        username = st.text_input(label = "Username", max_chars = 30)
        email = st.text_input(label = "Email", placeholder="user@grcai.com")
        if email:
            emailvalidator(email)
        company = st.text_input(label = "Company Name")
        st.divider()
        password = st.text_input(label= "Password", type = "password", placeholder = "Atleast 8 characters", help = "Must include letters, numbers or special characters or both")
        if password:
            passwordvalidator(password)
        repeat_password = st.text_input(label="Repeat Password", type = "password")

        margin, buttoncol = st.columns([0.92,0.08]) 
        signupSubmit = st.form_submit_button(label = "SignUp", use_container_width=True)

    if signupSubmit:
        if email == "" or password == "" or repeat_password == "" or username == "":
            st.error('All fields are required!')
        elif password != repeat_password:
            st.error('Passwords do not match!')
        else:
            db = firebaseDB()
            db.new_user(username, email, password, company)
            st.toast("User Registered Successfully!")
            st.rerun()

def introBar7():
    introBar = st.container(height=40,border = True)
    
    with introBar:
        blankdiv, loginbutton, signupbutton, marginright = st.columns([0.75,0.1,0.1,0.05],vertical_alignment="center")

        """
        with popover1:
            st.markdown(''' 
                        <a target="_self" href="#html-heading6" style="color: inherit; text-decoration: none; display: flex; align-items:center; justify-content:center; font-weight: 400; margin:0; padding:0;">LinkButton1</a>
                        ''', unsafe_allow_html=True)


        with popover2:
            st.markdown(''' 
                        <a target="_self" href="#html-heading6" style="color: inherit; text-decoration: none; display: flex; align-items:center; justify-content:center; font-weight: 400; margin:0; padding:0;">LinkButton2</a>
                        ''', unsafe_allow_html=True)

    
        
        with popover3:
            st.markdown(''' 
                        <a target="_self" href="#html-heading6" style="color: inherit; text-decoration: none; display: flex; align-items:center; justify-content:center; font-weight: 400; margin:0; padding:0;">LinkButton3</a>
                        ''', unsafe_allow_html=True)



        with popover4:
            st.markdown(''' 
                        <a target="_self" href="#html-heading6" style="color: inherit; text-decoration: none; display: flex; align-items:center; justify-content:center; font-weight: 400; margin:0; padding:0;">LinkButton4</a>
                        ''', unsafe_allow_html=True)


        """
        with loginbutton:
            loginClick = st.button(label=":material/login: Login", use_container_width=True)
            if loginClick:
                loginForm()

        
        with signupbutton:
            signupClick = st.button(label="SignUp",type="primary",use_container_width=True)
            if signupClick:
                signupForm()

    
    st.markdown(introBar7Style ,unsafe_allow_html=True)