Upload New File

register_new.py

+import dash
+from dash import html, dcc, Input, Output, State
+from dash.exceptions import PreventUpdate
+import pymongo
+import dash_bootstrap_components as dbc
+from app import app
+# Connect to MongoDB # creating a MongoDB client object named client. This line establishes a connection to the MongoDB database
+client = pymongo.MongoClient("mongodb+srv://admin:admin@cluster0.afxihmt.mongodb.net/")
+db = client["user_database"] #creates a reference to a specific MongoDB database called "user_database". 
+users_collection = db["users"] #accessing a specific collection within the "user_database" database.
+
+# Define the layout of the registration page
+# reg = html.Div([
+#     html.H1("Registration Page"),
+#     html.Div([
+#         html.Label("Username"),
+#         dcc.Input(id="username-input", type="text"),
+#         html.Label("Password"),
+#         dcc.Input(id="password-input", type="password"),
+#         html.Button("Register", id="register-button"),
+#         html.Div(id="registration-status")
+#     ])
+# ])
+
+reg = html.Div([
+    html.Div([
+        html.H1("Registration"),#title for the registration form
+        html.Div([
+        dcc.Input(id='logger_store',value="reg", type='hidden'),
+            html.Div([
+                html.Label("Email address"), #Label for email address
+                dcc.Input(id="username-input",type="email",className="form-control",placeholder="Enter email"),
+            ],className="login-inner-box-input"),
+            html.Div([html.Label("Password"), #Label for PW
+            dcc.Input(id="password-input", type="password",className="form-control",placeholder="Password")],className="login-inner-box-input"),
+            
+            html.Center([dbc.Button("Register",className="btn btn-light", id="register-button")]) , #button to register
+            html.Div(id="register-status")
+        ])
+    ],className="card login-inner-box"), #apply CSS classes to format the elements
+    html.Img(src=app.get_asset_url('register.gif'),id="login-vector") #to give an image on to the register componenet
+    
+],className="login-outer-box")
+
+log = html.Div([ #main container for the web page or section of the web page.
+    html.Div([   #creates a hidden input field with the id attribute 'logger_store' and an initial value of "login.
+        dcc.Input(id='logger_store',value="login", type='hidden'),
+        html.H1("Login"), #title "Login"
+        html.Div([
+            html.Div([
+                html.Label("Email address"), #Label #to input email
+                dcc.Input(id="username-input",type="email",className="form-control",placeholder="Enter email"),
+            ],className="login-inner-box-input"),
+            html.Div([html.Label("Password"), #Label #to input password
+            dcc.Input(id="password-input", type="password",className="form-control",placeholder="Password")],className="login-inner-box-input"),
+            
+            html.Center([dbc.Button("Login",className="btn btn-light", id="register-button")]) , #login button
+            html.Div(id="register-status")
+        ])
+    ],className="card login-inner-box"), #used to apply CSS classes to format the elements. 
+    html.Img(src=app.get_asset_url('login.gif'),id="login-vector") #to give an image on to the login componenet
+    
+],className="login-outer-box")
+