create_personal_user.py

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)