Implement user login and registration; update database connection management to be per use not a singleton by adjusting service lifetimes in DI.

WebServer/Components/Pages/Home.razor

@@ -3,46 +3,70 @@
 
 <PageTitle>Home</PageTitle>
 
-<div class="card-holder">
-    <a class="card">
-        HOME
-    </a>
-    <a class="card">
-        S&P Chart
-    </a>
-    <a class="card">
-        Connect
-    </a>
-    <a class="card">
-        About
-    </a>
-</div>
-
 <div class="main-area">
-    <button @onclick="pullandtrain">@button1Text</button>
-    <button @onclick="predict">@button2Text</button>
 
-    @foreach (stockPredictionPair cur in predictions){
-        <div>
-            <h1>Symbol: @cur.Symbol</h1><br />
-        @if (cur.Movement == -1){
-            <p>Sell</p>
-        } else if (cur.Movement == 1){
-            <p>Buy</p>
-        } else{
-            <p>Hold</p>
-        }
+    <!-- Login Frame -->
+    @if (Session == null){
+        <div class="gridFrame">
+            <div><h2>LOGIN</h2></div>
+            <div class="loginRow">
+                <div><span>username</span></div>
+                <input @bind-value="userName" type="text" />
+            </div>
+            <div class="loginRow">
+                <div><span>password</span></div>
+                <input @bind-value="passWord" type="password" />
+            </div>
+            <div class="loginRow">
+                <button @onclick="LoginSession">Login</button>
+                <button @onclick="registerSession">Register</button>
+            </div>
+            <div>
+                <span style="color: red;">@loginError</span>
+            </div>
+        </div>
+
+    <!-- User Frame -->
+    }else{
+        <div class="gridFrame">
+            <span>UserName: @Session.UserName</span><br />
         </div>
     }
+    
+    <!-- AI Frame -->
+    <div class="gridFrame">
+        <div>
+            <button @onclick="pullandtrain">@button1Text</button>
+            <button @onclick="predict">@button2Text</button>
+        </div>
+        <div>
+            @foreach (stockPredictionPair cur in predictions){
+                <div>
+                    <h1>Symbol: @cur.Symbol</h1><br />
+                @if (cur.Movement == -1){
+                    <p>Sell</p>
+                } else if (cur.Movement == 1){
+                    <p>Buy</p>
+                } else{
+                    <p>Hold</p>
+                }
+                </div>
+            }
+        </div>
+    </div>
 
 </div>
 
 
 @code {
 
-    string button1Text = "Train AI";
-    string button2Text = "Predict AI";
+    // User Stuff
+    loginSession? Session = null;
 
+    // Login Stuff
+    string userName = "";
+    string passWord = "";
+    string loginError = "";
 
     List<stockPredictionPair> predictions = new List<stockPredictionPair>(){
       new stockPredictionPair(){ Symbol = "AAPL" },
@@ -51,6 +75,36 @@
       new stockPredictionPair(){ Symbol = "FUN" }
     };
 
+    async Task LoginSession(){
+        string dbPrefix = $"[{userName.ToLower()}]:";                   // Set the DB prefix for the get and set
+        string passwordhash = dbDriver.Get( dbPrefix + "password" );    // Pull the password hash
+        if (BCrypt.Verify( passWord, passwordhash )){                   // If the password is valid
+            Session = new loginSession(){
+                UserName = userName.ToLower()
+            };
+        }else{
+            loginError = "wrong password";
+        }
+    }
+
+    async Task registerSession(){
+        string dbPrefix = $"[{userName.ToLower()}]:";
+        string passwordhash = dbDriver.Get( dbPrefix + "password" );
+        if (string.IsNullOrEmpty(passwordhash)){
+            dbDriver.Set( dbPrefix + "password", BCrypt.HashPassword( passWord, BCrypt.GenerateSalt() ) );
+            Session = new loginSession(){
+                UserName = userName.ToLower()
+            };
+        }else{
+            loginError = "account is taken";
+        }
+    }
+
+    // AI Stuff
+
+    string button1Text = "Train AI";
+    string button2Text = "Predict AI";
+
     async Task pullandtrain(){
         button1Text = "Do not refresh the page. The data is refreshing.";
         await Task.Delay(1);
@@ -76,9 +130,15 @@
         await Task.Delay(1);
     }
 
-    class stockPredictionPair{
-        public string Symbol = "";
-        public int Movement = 0;
+    // Data Types
+
+    class stockPredictionPair {
+        public string Symbol { get; set; }  = "";
+        public int Movement { get; set; } = 0;
+    }
+
+    class loginSession {
+        public string UserName { get; set; } = "";
     }
 
 }

WebServer/Components/Pages/Home.razor.css

@@ -1,25 +1,62 @@
-.card-holder {
-    display: flex;
-    float: left;
-    flex-direction: column;
-    background-color: red;
-    width: 300px;
-    height: calc(100vh - 3.5rem);
-}
-
-.card {
-    background-color: blue;
-    margin: 5px;
-    height: 45px;
-    color: white;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
 .main-area {
-    float: left;
-    background-color: aqua;
-    height: calc(100vh - 3.5rem);
-    width: calc(100vw - 300px);
+    display: grid;
+    gap: 20px;
+    padding: 20px;
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    grid-template-columns: max-content;
+    overflow: scroll;
+}
+
+.gridFrame {
+    background: #eee;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: 0.5s ease-in-out;
+    height: fit-content;
+    display: grid;
+    grid-row-gap: 10px;
+    border: 1px solid black;
+}
+
+.gridFrame h2 {
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+.gridFrame:hover {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.loginRow {
+    width: 300px;
+    height: 40px;
+    padding-bottom: 10px;
+}
+
+.loginRow input {
+    width: calc(100% - 6px);
+    border: 1px solid black;
+    padding: 1px 2px;
+}
+
+    .loginRow input:focus {
+        border-color: brown;
+    }
+
+.loginRow button {
+    width: calc(50% - 15px);
+    background-color: darkblue;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    color: white;
+    height: 30px;
+}
+
+.loginRow button:last-of-type{
+    float: right;
 }