How to Create Login Screen with Dash?

Dash Python
1

I need to make a login screen before I can navigate between pages in the application.

  • The user must enter a name and password.
  • The password must be hash.

Below I will pass the model of the application.

dash_app.py

import dash
import dash_bootstrap_components as dbc

estilos = [“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”, “https://fonts.googleapis.com/icon?family=Material+Icons”, dbc.themes.COSMO]

dbc_css = “https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@V1.0.4/dbc.min.css”

dash_app = dash.Dash(name, external_stylesheets=estilos + [dbc_css])

dash_app.config[‘suppress_callback_exceptions’] = True

dash_app.scripts.config.serve_locally = True

server = dash_app.server

***********************************************************

myindex.py

from dash import html, dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
from dash_app import *
from components import navbar, tela1, tela2

content = html.Div(id=“page-content”)

dash_app.layout = dbc.Container(children=[
dbc.Row([
dcc.Location(id=‘url’),
navbar.layout
]),
dbc.Row([
dbc.Col([
content
], md=12, style={‘background-color’: ‘#000000’, ‘height’: ‘100%’})
])
], fluid=True, style={“padding”: “0px”}, className=“dbc”)

@dash_app.callback(Output(‘page-content’, ‘children’), [Input(‘url’, ‘pathname’)])
def render_page(pathname):

if pathname == '/' or pathname == '/tela1':
    return tela1.layout
        
if pathname == '/tela2':
    return tela2.layout

if name == ‘main’:
dash_app.run_server(port=8050, debug=True)

******************************************************************

  • components
    navbar.py

from dash import html
import dash_bootstrap_components as dbc

layout = dbc.NavbarToggler([

          dbc.NavLink("tela1", href="/tela1", active="exact"),
          dbc.NavLink("tela2", href="/tela2", active="exact"),

], style={‘list-style’:‘none’, ‘display’: ‘flex’, ‘justify-content’: ‘space-around’, ‘align-items’: ‘center’,
‘height’: ‘8vh’, ‘background-color’:‘#051D40’})

***********************************************************

  • components
    tela1.py

import dash_bootstrap_components as dbc
from dash import html

layout = dbc.Col([
dbc.Row([
html.Legend(‘Tela1’, style={‘color’:‘white’}),
]),
], style={‘padding’:‘10px’})

***************************************************

  • components
    tela2.py

import dash_bootstrap_components as dbc
from dash import dcc, html

layout = dbc.Col([
dbc.Row([
html.Legend(‘Tela2’, style={‘color’:‘white’}),
]),
], style={‘padding’:‘10px’})

2

Hi, did you use the forum search? We had this question come up a few times in the past.