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 *

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


##########################################


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;
}

.st-emotion-cache-5drf04 {
    height: 2.5rem;
}

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

@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")

    if st.session_state['authentication_status']:
        st.session_state.logged_in = True
        st.switch_page(dashboard)
    elif st.session_state['authentication_status'] is False:
        st.error('Username/password is incorrect')
    elif st.session_state['authentication_status'] is None:
        st.warning('Please enter your username and password')
    

@st.dialog("Sign Up")
def signupForm():
    with st.form(key="SignupForm"):
        st.text_input(label = "Username", max_chars = 30)
        st.text_input(label = "Email")
        st.text_input(label = "Full Name")
        st.divider()
        st.text_input(label= "Password", type = "password", placeholder = "Atleast 8 characters", help = "Must include numbers or special characters or both")
        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)



def introBar7():
    introBar = st.container(height=40,border = True)
    with introBar:
        logoComp, popover1, popover2, popover3, popover4, blankdiv, loginbutton, signupbutton, marginright = st.columns([0.2,0.1,0.1,0.1,0.1,0.15,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="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)