Last active
October 16, 2022 21:41
-
-
Save milanzmitrovic/e01cee3eaa5aa3a2d6a594e79792dc7a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import dash | |
import dash_mantine_components as dmc | |
from dash import Dash, Input, Output, State, dcc, html, callback | |
import plotly.express as px | |
import pandas as pd | |
import plotly.io as pio | |
from datetime import date, datetime | |
import re | |
pio.renderers.default = 'browser' | |
app = Dash(__name__) | |
def _create_left_column(): | |
return dmc.Col( | |
children=[ | |
dmc.Container( | |
children=[ | |
dmc.TextInput( | |
label="Name", | |
style={"width": 250}, | |
# These two lines are for making html input not editable! | |
# it will be used for R state of CRUD workflow. | |
# https://www.geeksforgeeks.org/how-to-make-text-input-non-editable-using-css/ | |
# style={"width": 250, 'pointer-events': 'none'}, | |
# value='123456', | |
id='create_personal_user-name' | |
), | |
dmc.Space(h=20), | |
dmc.TextInput( | |
label="Surname", | |
style={"width": 250}, | |
id='create_personal_user-surname' | |
), | |
dmc.Space(h=20), | |
dmc.TextInput( | |
label="Username", | |
style={"width": 250}, | |
id='create_personal_user-username' | |
), | |
html.Div(id='create_personal_user-validate-username', style={'color': 'red'}), | |
dmc.Space(h=20), | |
dmc.TextInput( | |
label="Email", | |
style={"width": 250}, | |
id='create_personal_user-email' | |
), | |
html.Div(id='create_personal_user-validate-email', style={'color': 'red'}), | |
dmc.Space(h=20), | |
dmc.PasswordInput( | |
label="Password", | |
style={"width": 250}, | |
id='create_personal_user-password' | |
), | |
dmc.Space(h=20), | |
dmc.PasswordInput( | |
label="Confirm password", | |
style={"width": 250}, | |
id='create_personal_user-confirm-password' | |
), | |
html.Div(id='create_personal_user-validate-password', style={'color': 'red'}), | |
], size=200, px=0 | |
) | |
], | |
xs=12, | |
sm=6, | |
md=6, | |
lg=6, | |
xl=6 | |
) | |
def _create_right_column(): | |
return dmc.Col( | |
children=[ | |
dmc.Container( | |
size=200, | |
px=0, | |
children=[ | |
# dmc.Space(h=20), | |
dmc.TextInput( | |
label="Mobile phone", | |
style={"width": 250}, | |
id='create_personal_user-mobile-phone' | |
), | |
dmc.Space(h=20), | |
dmc.DatePicker( | |
id="create_personal_user-date-picker", | |
label="Date of birth", | |
minDate=date(1900, 1, 1), | |
maxDate=date(2030, 1, 1), | |
style={"width": 250}, | |
), | |
dmc.Space(h=20), | |
dmc.TextInput( | |
id='create_personal_user-birthplace', | |
label="Birthplace", | |
style={"width": 250}, | |
description='City where you were born' | |
), | |
dmc.Space(h=20), | |
dmc.RadioGroup( | |
id="create_personal_user-gender", | |
data=[ | |
{"value": "1", "label": "Male"}, | |
{"value": "0", "label": "Female"} | |
], | |
label="Gender", | |
size="sm", | |
), | |
dmc.Space(h=20), | |
dmc.TextInput( | |
id='create_personal_user-residence', | |
label="Place of residence", | |
style={"width": 250}, | |
description='City where you currently live' | |
), | |
dmc.Space(h=40), | |
dmc.Button( | |
'Create user', | |
id='create_personal_user-submit-btn', | |
style={"width": 250} | |
), | |
# dmc.Space(h=20), | |
] | |
) | |
], | |
xs=12, | |
sm=6, | |
md=6, | |
lg=6, | |
xl=6 | |
) | |
def create_personal_user_layout(): | |
@callback( | |
Output(component_id='create_personal_user-validate-email', component_property='children'), | |
State(component_id='create_personal_user-email', component_property='value'), | |
Input(component_id='create_personal_user-submit-btn', component_property='n_clicks'), | |
prevent_initial_call=True | |
) | |
def validate_email( | |
email, | |
n_clicks | |
): | |
# https://www.geeksforgeeks.org/check-if-email-address-valid-or-not-in-python/ | |
# Make a regular expression | |
# for validating an Email | |
regex = r'\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b' | |
if re.fullmatch(regex, str(email)): | |
return '' | |
else: | |
return 'Not valid email!' | |
@callback( | |
Output(component_id='create_personal_user-validate-username', component_property='children'), | |
State(component_id='create_personal_user-username', component_property='value'), | |
Input(component_id='create_personal_user-submit-btn', component_property='n_clicks'), | |
prevent_initial_call=True | |
) | |
def validate_username(raw_username, n_clicks): | |
if len(str(raw_username)) < 6: | |
print(str(raw_username)) | |
return '* Username should be at leash 6 characters!' | |
return '' | |
@callback( | |
Output(component_id='create_personal_user-validate-password', component_property='children'), | |
State(component_id='create_personal_user-password', component_property='value'), | |
State(component_id='create_personal_user-confirm-password', component_property='value'), | |
Input(component_id='create_personal_user-submit-btn', component_property='n_clicks'), | |
prevent_initial_call=True | |
) | |
def validate_password( | |
password, | |
confirm_password, | |
n_clicks, | |
): | |
if (password is None) and (confirm_password is None): | |
return '* Please enter password!' | |
if password != confirm_password: | |
return '* Password and Confirm password fields are not identical!' | |
if (len(password) < 6) or (len(confirm_password) < 6): | |
return '* Password should be at least 6 characters long' | |
return '' | |
@callback( | |
Output(component_id='create_personal_user-fake-output-element', component_property='children'), | |
State(component_id='create_personal_user-name', component_property='value'), | |
State(component_id='create_personal_user-surname', component_property='value'), | |
State(component_id='create_personal_user-username', component_property='value'), | |
State(component_id='create_personal_user-password', component_property='value'), | |
State(component_id='create_personal_user-confirm-password', component_property='value'), | |
State(component_id='create_personal_user-email', component_property='value'), | |
State(component_id='create_personal_user-mobile-phone', component_property='value'), | |
State(component_id='create_personal_user-date-picker', component_property='value'), | |
State(component_id='create_personal_user-birthplace', component_property='value'), | |
State(component_id='create_personal_user-gender', component_property='value'), | |
State(component_id='create_personal_user-residence', component_property='value'), | |
Input(component_id='create_personal_user-submit-btn', component_property='n_clicks'), | |
prevent_initial_call=True | |
) | |
def submit_values( | |
name, | |
surname, | |
username, | |
password, | |
confirm_password, | |
email, | |
mobile_phone, | |
date_picker, | |
birthplace, | |
gender, | |
residence, | |
n_clicks | |
): | |
f_string = f""" | |
name={name}; surname={surname}; username={username}; | |
password={password}; confirm_password={confirm_password}; email={email}; | |
mobile_phone={mobile_phone}; date_picker={date_picker}; | |
birthplace={birthplace}; gender={gender}; | |
residence={residence}; n_clicks={n_clicks};""" | |
print(f_string) | |
return '' | |
return dmc.Container([ | |
html.H1('Create personal user account', style={'textAlign': 'center'}), | |
dmc.Grid( | |
# justify='center', | |
align='center', | |
# gutter=100, | |
columns=12, | |
children=[ | |
_create_left_column(), | |
_create_right_column() | |
] | |
), | |
# This element is only necessary to create callback for creating user. | |
# Why is it fake? Each callback should have one output. | |
# This will be 'fake' output, just to meet formal criteria. | |
html.Div(id='create_personal_user-fake-output-element') | |
]) | |
app.layout = html.Div([ | |
create_personal_user_layout() | |
]) | |
if __name__ == '__main__': | |
app.run_server(debug=True) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment