From baaccc2420b9a33c0d906ac387e67e55d0872086 Mon Sep 17 00:00:00 2001
From: Matthew Kelly <badgerati42@gmail.com>
Date: Tue, 29 Mar 2022 21:25:31 +0100
Subject: [PATCH] Add support for custom fields on the login page

---
 docs/Tutorials/Pages.md                   |  50 +++
 docs/images/login_custom.PNG              | Bin 0 -> 12199 bytes
 examples/full_custom_auth.ps1             | 392 ++++++++++++++++++++++
 src/Public/Elements.ps1                   |  10 +-
 src/Public/Pages.ps1                      |  26 ++
 src/Templates/Public/scripts/default.js   |   2 +-
 src/Templates/Views/elements/textbox.pode |  34 +-
 src/Templates/Views/login.pode            |  64 ++--
 8 files changed, 536 insertions(+), 42 deletions(-)
 create mode 100644 docs/images/login_custom.PNG
 create mode 100644 examples/full_custom_auth.ps1

diff --git a/docs/Tutorials/Pages.md b/docs/Tutorials/Pages.md
index 13e3c1ca..c2e4dc7c 100644
--- a/docs/Tutorials/Pages.md
+++ b/docs/Tutorials/Pages.md
@@ -39,6 +39,56 @@ Add-PodeAuthIIS -Name Example
 Set-PodeWebAuth -Authentication Example
 ```
 
+### Custom Fields
+
+By default the Login page will display a login form with Username and Password inputs. This can be overridden by supplying custom Layouts and Elements to the `-Content` parameter of [`Set-PodeWebLoginPage`](../../Functions/Pages/Set-PodeWebLoginPage). Any custom content will be placed between the "Please sign in" message and the "Sign In" button.
+
+```powershell
+# setup sessions
+Enable-PodeSessionMiddleware -Duration 120 -Extend
+
+# define a new custom authentication scheme, which needs a client, username, and password
+$custom_scheme = New-PodeAuthScheme -Custom -ScriptBlock {
+    param($opts)
+
+    # get the client/user/password from the request's post data
+    $client = $WebEvent.Data.client
+    $username = $WebEvent.Data.username
+    $password = $WebEvent.Data.password
+
+    # return the data in a array, which will be passed to the validator script
+    return @($client, $username, $password)
+}
+
+# now, add a new custom authentication validator using the scheme you created above
+$custom_scheme | Add-PodeAuth -Name Example -ScriptBlock {
+    param($client, $username, $password)
+
+    # check if the client is valid in some database
+    return @{
+        User = @{
+            ID ='M0R7Y302'
+            Name = 'Morty'
+            Type = 'Human'
+        }
+    }
+
+    # return a user object (return $null if validation failed)
+    return  @{ User = $user }
+}
+
+# set the login page to use the custom auth, and also custom login fields
+Set-PodeWebLoginPage -Authentication Example -Content @(
+    New-PodeWebTextbox -Type Text -Name 'client' -Id 'client' -Placeholder 'Client' -Required -AutoFocus -DynamicLabel
+    New-PodeWebTextbox -Type Text -Name 'username' -Id 'username' -Placeholder 'Username' -Required -DynamicLabel
+    New-PodeWebTextbox -Type Password -Name 'password' -Id 'password' -Placeholder 'Password' -Required -DynamicLabel
+)
+```
+
+Which would look like below:
+
+![login_custom](../../images/login_custom.png)
+
 ## Home
 
 Every site is setup with a default empty home page. If you choose not to add anything to your home page, then Pode.Web will automatically redirect to the first Webpage.
diff --git a/docs/images/login_custom.PNG b/docs/images/login_custom.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..335d4887308637b5e1cb1918f36cdd7b5f3dc098
GIT binary patch
literal 12199
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

literal 0
HcmV?d00001

diff --git a/examples/full_custom_auth.ps1 b/examples/full_custom_auth.ps1
new file mode 100644
index 00000000..f22c8db5
--- /dev/null
+++ b/examples/full_custom_auth.ps1
@@ -0,0 +1,392 @@
+Import-Module Pode -MaximumVersion 2.99.99 -Force
+Import-Module ..\src\Pode.Web.psm1 -Force
+
+Start-PodeServer -StatusPageExceptions Show {
+    # add a simple endpoint
+    Add-PodeEndpoint -Address * -Port 8090 -Protocol Http
+    New-PodeLoggingMethod -Terminal | Enable-PodeErrorLogging
+
+
+    # enable sessions and authentication
+    Enable-PodeSessionMiddleware -Secret 'schwifty' -Duration (10 * 60) -Extend
+
+    # define a new custom authentication scheme, which needs a client, username, and password
+    $custom_scheme = New-PodeAuthScheme -Custom -ScriptBlock {
+        param($opts)
+
+        # get the client/user/password from the request's post data
+        $client = $WebEvent.Data.client
+        $username = $WebEvent.Data.username
+        $password = $WebEvent.Data.password
+
+        # return the data in a array, which will be passed to the validator script
+        return @($client, $username, $password)
+    }
+
+    # now, add a new custom authentication validator using the scheme you created above
+    $custom_scheme | Add-PodeAuth -Name Example -ScriptBlock {
+        param($client, $username, $password)
+
+        # here you'd check a real user storage, this is just for example
+        if ($client -eq 'woop' -and $username -eq 'morty' -and $password -eq 'pickle') {
+            return @{
+                User = @{
+                    ID ='M0R7Y302'
+                    Name = 'Morty'
+                    Type = 'Human'
+                    Groups = @('Developer')
+                    #AvatarUrl = '/pode.web/images/icon.png'
+                }
+            }
+        }
+
+        # return a user object (return $null if validation failed)
+        return  @{ User = $user }
+    }
+
+
+    # set the use of templates
+    Use-PodeWebTemplates -Title 'Test' -Logo '/pode.web/images/icon.png' -Theme Dark
+
+    # set login page 
+    # -BackgroundImage '/images/galaxy.jpg'
+    $lc = @(
+        New-PodeWebTextbox -Type Text -Name 'client' -Id 'client' -Placeholder 'Client' -Required -AutoFocus -DynamicLabel
+        New-PodeWebTextbox -Type Text -Name 'username' -Id 'username' -Placeholder 'Username' -Required -DynamicLabel
+        New-PodeWebTextbox -Type Password -Name 'password' -Id 'password' -Placeholder 'Password' -Required -DynamicLabel
+    )
+    Set-PodeWebLoginPage -Authentication Example -Content $lc -PassThru |
+        Register-PodeWebPageEvent -Type Load, Unload, BeforeUnload -NoAuth -ScriptBlock {
+            Show-PodeWebToast -Message "Login page $($EventType)!"
+        }
+
+    $link1 = New-PodeWebNavLink -Name 'Home' -Url '/' -Icon Home
+    $link2 = New-PodeWebNavLink -Name 'Dynamic' -Icon Cogs -NoAuth -ScriptBlock {
+        Show-PodeWebToast -Message "I'm from a nav link!"
+    }
+    $div1 = New-PodeWebNavDivider
+    $link3 = New-PodeWebNavLink -Name 'Disabled' -Url '/' -Disabled
+    $dd1 = New-PodeWebNavDropdown -Name 'Dropdown' -Icon Expand -Items @(
+        New-PodeWebNavLink -Name 'Twitter' -Url 'https://twitter.com'
+        New-PodeWebNavLink -Name 'Facebook' -Url 'https://facebook.com' -Disabled
+        New-PodeWebNavDivider
+        New-PodeWebNavLink -Name 'YouTube' -Url 'https://youtube.com' -Icon YouTube
+        New-PodeWebNavDropdown -Name 'InnerDrop' -Items @(
+            New-PodeWebNavLink -Name 'Twitch' -Url 'https://twitch.tv'
+            New-PodeWebNavLink -Name 'Pode' -Url 'https://github.com/Badgerati/Pode'
+        )
+    )
+
+    Set-PodeWebNavDefault -Items $link1, $link2, $div1, $link3, $dd1
+
+
+    $timer1 = New-PodeWebTimer -Name 'Timer1' -Interval 10 -NoAuth -ScriptBlock {
+        $rand = Get-Random -Minimum 0 -Maximum 3
+        $colour = (@('Green', 'Yellow', 'Cyan'))[$rand]
+        Update-PodeWebBadge -Id 'bdg_test' -Value ([datetime]::Now.ToString('yyyy-MM-dd HH:mm:ss')) -Colour $colour
+        Update-PodeWebText -Id 'code_test' -Value ([datetime]::Now.ToString('yyyy-MM-dd HH:mm:ss'))
+    }
+
+    # set the home page controls (just a simple paragraph) [note: homepage does not require auth in this example]
+    $section = New-PodeWebCard -Name 'Welcome' -NoTitle -Content @(
+        New-PodeWebParagraph -Value 'This is an example homepage, with some example text'
+        New-PodeWebParagraph -Elements @(
+            New-PodeWebText -Value 'Using some '
+            New-PodeWebText -Value 'example' -Style Italics
+            New-PodeWebText -Value ' paragraphs' -Style Bold
+        )
+        New-PodeWebParagraph -Elements @(
+            New-PodeWebText -Value 'Pronuncation example: '
+            New-PodeWebText -Value '漢' -Pronunciation 'ㄏㄢˋ'
+        )
+        New-PodeWebParagraph -Elements @(
+            New-PodeWebText -Value "Look, here's a "
+            New-PodeWebLink -Source 'https://github.com/badgerati/pode' -Value 'link' -NewTab
+            New-PodeWebText -Value "! "
+            New-PodeWebBadge -Id 'bdg_test' -Value 'Sweet!' -Colour Cyan |
+                Register-PodeWebEvent -Type Click -NoAuth -ScriptBlock {
+                    Show-PodeWebToast -Message 'Badge was clicked!'
+                }
+        )
+        New-PodeWebParagraph -Elements @(
+            New-PodeWebCode -Id 'code_test' -Value "some code :o"
+        )
+        $timer1
+        New-PodeWebImage -Source '/pode.web/images/icon.png' -Height 70 -Alignment Right
+        New-PodeWebQuote -Value 'Pode is awesome!' -Source 'Badgerati'
+        New-PodeWebButton -Name 'Click Me' -DataValue 'PowerShell Rules!' -NoAuth -Icon 'console-line' -Colour Green -ScriptBlock {
+            Show-PodeWebToast -Message "Message of the day: $($WebEvent.Data.Value)"
+            Show-PodeWebNotification -Title 'Hello, there' -Body 'General Kenobi' -Icon '/pode.web/images/icon.png'
+        }
+        New-PodeWebButton -Name 'Click Me Outlined' -DataValue 'PowerShell Rules!' -NoAuth -Icon 'console-line' -Colour Green -Outline -ScriptBlock {
+            Show-PodeWebToast -Message "Message of the day: $($WebEvent.Data.Value)"
+            Show-PodeWebNotification -Title 'Hello, there' -Body 'General Kenobi' -Icon '/pode.web/images/icon.png'
+        }
+        New-PodeWebContainer -Content @(
+            New-PodeWebButton -Name 'Dark Theme' -NoAuth -Icon 'moon-new' -Colour Dark -ScriptBlock { Update-PodeWebTheme -Name Dark }
+            New-PodeWebButton -Name 'Light Theme' -NoAuth -Icon 'weather-sunny' -Colour Light -ScriptBlock { Update-PodeWebTheme -Name Light }
+            New-PodeWebButton -Name 'Reset Theme' -NoAuth -Icon 'refresh' -ScriptBlock { Reset-PodeWebTheme }
+        )
+        New-PodeWebAlert -Type Note -Value 'Hello, world'
+    )
+
+    $section2 = New-PodeWebCard -Name 'Code' -NoTitle -Content @(
+        New-PodeWebCodeBlock -Value "Write-Host 'hello, world!'" -NoHighlight
+        New-PodeWebCodeBlock -Value "
+            function Write-SomeStuff
+            {
+                param(
+                    [Parameter()]
+                    [string]
+                    `$Message
+                )
+
+                Write-Host `$Message
+            }
+
+            Write-SomeStuff -Message 'Hello, there'
+        " -Language PowerShell
+    )
+
+    $section3 = New-PodeWebCard -Name 'Comments' -Icon 'comment' -Content @(
+        New-PodeWebComment -Icon '/pode.web/images/icon.png' -Username 'Badgerati' -Message 'Lorem ipsum'
+        New-PodeWebComment -Icon '/pode.web/images/icon.png' -Username 'Badgerati' -Message 'Lorem ipsum' -TimeStamp ([datetime]::Now)
+    )
+
+    $codeEditor = New-PodeWebCodeEditor -Language PowerShell -Name 'Code Editor' -AsCard
+
+    $chartData = {
+        $count = 1
+        if ($WebEvent.Data.FirstLoad -eq '1') {
+            $count = 4
+        }
+
+        return (1..$count | ForEach-Object {
+            @{
+                Key = $_
+                Values = @(
+                    @{
+                        Key = 'Example1'
+                        Value = (Get-Random -Maximum 10)
+                    },
+                    @{
+                        Key = 'Example2'
+                        Value = (Get-Random -Maximum 10)
+                    }
+                )
+            }
+        })
+    }
+
+    $processData = {
+        Get-Process |
+            Sort-Object -Property CPU -Descending |
+            Select-Object -First 10 |
+            ConvertTo-PodeWebChartData -LabelProperty ProcessName -DatasetProperty CPU, Handles
+    }
+
+    $grid1 = New-PodeWebGrid -Cells @(
+        New-PodeWebCell -Content @(
+            New-PodeWebChart -Name 'Line Example 1' -NoAuth -Type Line -ScriptBlock $chartData -Append -TimeLabels -MaxItems 15 -AutoRefresh -AsCard
+        )
+        New-PodeWebCell -Content @(
+            New-PodeWebChart -Name 'Top Processes' -NoAuth -Type Bar -ScriptBlock $processData -AutoRefresh -RefreshInterval 10 -AsCard
+        )
+        New-PodeWebCell -Content @(
+            New-PodeWebCounterChart -Counter '\Processor(_Total)\% Processor Time' -MinY 0 -MaxY 100 -NoAuth -AsCard
+        )
+    )
+
+    $hero = New-PodeWebHero -Title 'Welcome!' -Message 'This is the home page for the full.ps1 example' -Content @(
+        New-PodeWebText -Value 'Here you will see examples for close to everything Pode.Web can do.' -InParagraph -Alignment Center
+        New-PodeWebParagraph -Alignment Center -Elements @(
+            New-PodeWebButton -Name 'Repository' -Icon Link -Url 'https://github.com/Badgerati/Pode.Web' -NewTab
+        )
+    )
+
+    $carousel = New-PodeWebCarousel -Slides @(
+        New-PodeWebSlide -Title 'First Slide' -Message 'First slide message' -Content @(
+            New-PodeWebContainer -Nobackground -Content @(
+                New-PodeWebText -Value 'Slide 1' -Alignment Center
+            )
+        )
+        New-PodeWebSlide -Title 'Second Slide' -Message 'Second slide message' -Content @(
+            New-PodeWebContainer -Nobackground -Content @(
+                New-PodeWebText -Value 'Slide 2' -Alignment Center
+            )
+        )
+        New-PodeWebSlide -Title 'Third Slide' -Message 'Third slide message' -Content @(
+            New-PodeWebContainer -Nobackground -Content @(
+                New-PodeWebText -Value 'Slide 3' -Alignment Center
+            )
+        )
+    )
+
+    Set-PodeWebHomePage -NoAuth -Layouts $hero, $grid1, $section, $carousel, $section2, $section3, $codeEditor -NoTitle -PassThru |
+        Register-PodeWebPageEvent -Type Load, Unload, BeforeUnload -NoAuth -ScriptBlock {
+            Show-PodeWebToast -Message "Home page $($EventType)!"
+        }
+
+
+    # tabs and charts
+    $tabs1 = New-PodeWebTabs -Cycle -Tabs @(
+        New-PodeWebTab -Name 'Line' -Icon 'chart-line' -Layouts @(
+            New-PodeWebChart -Name 'Line Example 2' -NoAuth -Type Line -ScriptBlock $chartData -Append -TimeLabels -MaxItems 30 -AutoRefresh -Height 250 -AsCard
+        )
+        New-PodeWebTab -Name 'Bar' -Icon 'chart-bar' -Layouts @(
+            New-PodeWebChart -Name 'Bar Example 2' -NoAuth -Type Bar -ScriptBlock $chartData -AsCard
+        )
+        New-PodeWebTab -Name 'Doughnut' -Icon 'chart-donut' -Layouts @(
+            New-PodeWebChart -Name 'Doughnut Example 1' -NoAuth -Type Doughnut -ScriptBlock $chartData -AsCard
+        )
+    )
+
+    Add-PodeWebPage -Name Charts -Icon 'chart-bar' -Layouts $tabs1 -Title 'Cycling Tabs' -NoSidebar -PassThru |
+        Register-PodeWebPageEvent -Type Load, Unload, BeforeUnload -ScriptBlock {
+            Show-PodeWebToast -Message "Page $($EventType)!"
+        }
+
+
+    # add a page to search and filter services (output in a new table element) [note: requires auth]
+    $editModal = New-PodeWebModal -Name 'Edit Service' -Icon 'square-edit-outline' -Id 'modal_edit_svc' -AsForm -Content @(
+        New-PodeWebAlert -Type Info -Value 'This does nothing, it is just an example'
+        New-PodeWebCheckbox -Name Running -Id 'chk_svc_running' -AsSwitch
+    ) -ScriptBlock {
+        $WebEvent.Data | Out-Default
+        Hide-PodeWebModal
+    }
+
+    $helpModal = New-PodeWebModal -Name 'Help' -Icon 'help' -Content @(
+        New-PodeWebText -Value 'HELP!'
+    )
+
+    $table = New-PodeWebTable -Name 'Static' -DataColumn Name -AsCard -Filter -SimpleSort -Click -Paginate -ScriptBlock {
+        $stopBtn = New-PodeWebButton -Name 'Stop' -Icon 'stop-circle-outline' -IconOnly -ScriptBlock {
+            Stop-Service -Name $WebEvent.Data.Value -Force | Out-Null
+            Show-PodeWebToast -Message "$($WebEvent.Data.Value) stopped"
+            Sync-PodeWebTable -Id $ElementData.Parent.ID
+        }
+
+        $startBtn = New-PodeWebButton -Name 'Start' -Icon 'play-circle-outline' -IconOnly -ScriptBlock {
+            Start-Service -Name $WebEvent.Data.Value | Out-Null
+            Show-PodeWebToast -Message "$($WebEvent.Data.Value) started"
+            Sync-PodeWebTable -Id $ElementData.Parent.ID
+        }
+
+        $editBtn = New-PodeWebButton -Name 'Edit' -Icon 'square-edit-outline' -IconOnly -ScriptBlock {
+            $svc = Get-Service -Name $WebEvent.Data.Value
+            $checked = ($svc.Status -ieq 'running')
+
+            Show-PodeWebModal -Id 'modal_edit_svc' -DataValue $WebEvent.Data.Value -Actions @(
+                Update-PodeWebCheckbox -Id 'chk_svc_running' -Checked:$checked
+            )
+        }
+
+        $filter = "*$($WebEvent.Data.Filter)*"
+
+        foreach ($svc in (Get-Service)) {
+            if ($svc.Name -inotlike $filter) {
+                continue
+            }
+
+            $btns = @($editBtn)
+            if ($svc.Status -ieq 'running') {
+                $btns += $stopBtn
+            }
+            else {
+                $btns += $startBtn
+            }
+
+            [ordered]@{
+                Name = $svc.Name
+                Status = "$($svc.Status)"
+                Actions = $btns
+            }
+        }
+    }
+
+    Add-PodeStaticRoute -Path '/download' -Source '.\storage' -DownloadOnly
+
+    $table | Add-PodeWebTableButton -Name 'Excel' -Icon 'chart-bar' -ScriptBlock {
+        $path = Join-Path (Get-PodeServerPath) '.\storage\test.csv'
+        $WebEvent.Data | Export-Csv -Path $path -NoTypeInformation
+        Set-PodeResponseAttachment -Path '/download/test.csv'
+    }
+
+    $homeLink1 = New-PodeWebNavLink -Name 'Home' -Url '/'
+
+    Add-PodeWebPage -Name Services -Icon 'cogs' -Group Tools -Layouts $editModal, $helpModal, $table -Navigation $homeLink1 -ScriptBlock {
+        $name = $WebEvent.Query['value']
+        if ([string]::IsNullOrWhiteSpace($name)) {
+            return
+        }
+
+        $svc = Get-Service -Name $name | Out-String
+
+        New-PodeWebCard -Name "$($name) Details" -Content @(
+            New-PodeWebCodeBlock -Value $svc -NoHighlight
+        )
+    } `
+    -HelpScriptBlock {
+        Show-PodeWebModal -Name 'Help'
+    }
+
+
+    # add a page to search process (output as json in an appended textbox) [note: requires auth]
+    $form = New-PodeWebForm -Name 'Search' -AsCard -ScriptBlock {
+        if ($WebEvent.Data.Name.Length -le 3) {
+            Out-PodeWebValidation -Name 'Name' -Message 'Name must be greater than 3 characters'
+            return
+        }
+
+        Get-Process -Name $WebEvent.Data.Name -ErrorAction Ignore | Select-Object Name, ID, WorkingSet, CPU | Out-PodeWebTextbox -Multiline -Preformat -ReadOnly
+    } -Content @(
+        New-PodeWebTextbox -Name 'Name'
+    )
+
+    Add-PodeWebPage -Name Processes -Icon 'chart-box-outline' -Group Tools -AccessGroups Developer -Layouts $form
+
+
+    # page with table showing csv data
+    $table2 = New-PodeWebTable -Name 'Users' -DataColumn UserId -Filter -SimpleSort -Paginate -CsvFilePath './misc/data.csv' -AsCard
+    Add-PodeWebPage -Name CSV -Icon Database -Group Tools -Layouts $table2
+
+
+    # page with table show dynamic paging, filter, and sorting via a csv
+    $table3 = New-PodeWebTable -Name 'Dynamic Users' -DataColumn UserId -Filter -Sort -Paginate -AsCard -ScriptBlock {
+        # load the file
+        $filePath = Join-Path (Get-PodeServerPath) 'misc/data.csv'
+        $data = Import-Csv -Path $filePath
+
+        # apply filter if present
+        $filter = $WebEvent.Data.Filter
+        if (![string]::IsNullOrWhiteSpace($filter)) {
+            $filter = "*$($filter)*"
+            $data = @($data | Where-Object { ($_.psobject.properties.value -ilike $filter).length -gt 0 })
+        }
+
+        # apply sorting
+        $sortColumn = $WebEvent.Data.SortColumn
+        if (![string]::IsNullOrWhiteSpace($sortColumn)) {
+            $descending = ($WebEvent.Data.SortDirection -ieq 'desc')
+            $data = @($data | Sort-Object -Property { $_.$sortColumn } -Descending:$descending)
+        }
+
+        # apply paging
+        $totalCount = $data.Length
+        $pageIndex = [int]$WebEvent.Data.PageIndex
+        $pageSize = [int]$WebEvent.Data.PageSize
+        $data = $data[(($pageIndex - 1) * $pageSize) .. (($pageIndex * $pageSize) - 1)]
+
+        # update table
+        $data | Update-PodeWebTable -Name 'Dynamic Users' -PageIndex $pageIndex -TotalItemCount $totalCount
+    }
+
+    Add-PodeWebPage -Name 'Dynamic Paging' -Icon Database -Group Tools -Layouts $table3
+
+
+    # open twitter
+    Add-PodeWebPageLink -Name Twitter -Icon Twitter -Group Social -NoAuth -ScriptBlock {
+        Move-PodeWebUrl -Url 'https://twitter.com' -NewTab
+    }
+}
\ No newline at end of file
diff --git a/src/Public/Elements.ps1 b/src/Public/Elements.ps1
index 4a7a91be..2a3ab649 100644
--- a/src/Public/Elements.ps1
+++ b/src/Public/Elements.ps1
@@ -91,7 +91,13 @@ function New-PodeWebTextbox
         $NoForm,
 
         [switch]
-        $Required
+        $Required,
+
+        [switch]
+        $AutoFocus,
+
+        [switch]
+        $DynamicLabel
     )
 
     $Id = Get-PodeWebElementId -Tag Textbox -Id $Id -Name $Name
@@ -134,6 +140,8 @@ function New-PodeWebTextbox
         NoAuthentication = $NoAuthentication.IsPresent
         NoForm = $NoForm.IsPresent
         Required = $Required.IsPresent
+        AutoFocus = $AutoFocus.IsPresent
+        DynamicLabel = $DynamicLabel.IsPresent
     }
 
     # create autocomplete route
diff --git a/src/Public/Pages.ps1 b/src/Public/Pages.ps1
index 9763650d..797250b7 100644
--- a/src/Public/Pages.ps1
+++ b/src/Public/Pages.ps1
@@ -6,6 +6,10 @@ function Set-PodeWebLoginPage
         [string]
         $Authentication,
 
+        [Parameter()]
+        [hashtable[]]
+        $Content,
+
         [Parameter()]
         [Alias('Icon')]
         [string]
@@ -40,10 +44,28 @@ function Set-PodeWebLoginPage
         [string]
         $BackgroundImage,
 
+        [Parameter()]
+        [string]
+        $SignInMessage,
+
         [switch]
         $PassThru
     )
 
+    # check content
+    if (!(Test-PodeWebContent -Content $Content -ComponentType Layout, Element)) {
+        throw 'The Login page can only contain layouts and/or elements'
+    }
+
+    # if no content, add default
+    if (Test-PodeIsEmpty -Value $Content) {
+        $Content = @(
+            New-PodeWebTextbox -Type Text -Name 'username' -Id 'username' -Placeholder 'Username' -Required -AutoFocus -DynamicLabel
+            New-PodeWebTextbox -Type Password -Name 'password' -Id 'password' -Placeholder 'Password' -Required -DynamicLabel
+        )
+    }
+
+    # set auth to be used on other pages
     Set-PodeWebState -Name 'auth' -Value $Authentication
     Set-PodeWebState -Name 'auth-props' -Value @{
         Username = $UsernameProperty
@@ -89,6 +111,8 @@ function Set-PodeWebLoginPage
         ObjectType = 'Page'
         Path = $routePath
         Name = 'Login'
+        Content = $Content
+        SignInMessage = (Protect-PodeWebValue -Value $SignInMessage -Default 'Please sign in' -Encode)
         IsSystem = $true
     }
 
@@ -106,12 +130,14 @@ function Set-PodeWebLoginPage
 
         Write-PodeWebViewResponse -Path 'login' -Data @{
             Page = $global:PageData
+            Content = $global:PageData.Content
             Theme = Get-PodeWebTheme
             Logo = $using:Logo
             LogoUrl = $using:LogoUrl
             Background = @{
                 Image = $using:BackgroundImage
             }
+            SignInMessage = $global:PageData.SignInMessage
             Copyright = $using:Copyright
             Auth = @{
                 Name = $using:Authentication
diff --git a/src/Templates/Public/scripts/default.js b/src/Templates/Public/scripts/default.js
index ee09a20a..03a42557 100644
--- a/src/Templates/Public/scripts/default.js
+++ b/src/Templates/Public/scripts/default.js
@@ -1570,7 +1570,7 @@ function bindFormSubmits() {
     });
 
     // login form
-    $("form.form-signin").off('submit').on('submit', function(e) {
+    $("body#login-page .form-signin").off('submit').on('submit', function(e) {
         // get the form
         var form = $(e.target);
 
diff --git a/src/Templates/Views/elements/textbox.pode b/src/Templates/Views/elements/textbox.pode
index 143d25ce..af0427f5 100644
--- a/src/Templates/Views/elements/textbox.pode
+++ b/src/Templates/Views/elements/textbox.pode
@@ -1,8 +1,19 @@
-<div class="$(if (!$data.NoForm) { 'form-group row' } else { 'no-form' }) pode-form-textbox $($data.CssClasses)">
-    $(if (!$data.NoForm) {
+$(
+    $controlDivClass = 'form-group row'
+    if ($data.DynamicLabel) {
+        $controlDivClass = [string]::Empty
+    }
+    if ($data.NoForm) {
+        $controlDivClass = 'no-form'
+    }
+
+    "<div class='$($controlDivClass) pode-form-textbox $($data.CssClasses)'>"
+)
+
+    $(if (!$data.NoForm -and !$data.DynamicLabel) {
         "<label for='$($data.ID)' class='col-sm-2 col-form-label'>$($data.DisplayName)</label>"
     })
-    <div class="col-sm-10">
+    <div class="$(if (!$data.DynamicLabel) { 'col-sm-10' })">
         $(
             $element = [string]::Empty
 
@@ -21,6 +32,11 @@
                 $required = "required"
             }
 
+            $autofocus = [string]::Empty
+            if ($data.AutoFocus) {
+                $autofocus = "autofocus"
+            }
+
             $value = [string]::Empty
             if (![string]::IsNullOrWhiteSpace($data.Value)) {
                 $value = "value='$($data.Value)'"
@@ -30,8 +46,12 @@
 
             $events = ConvertTo-PodeWebEvents -Events $data.Events
 
+            if ($data.DynamicLabel) {
+                "<div class='form-label-group'>"
+            }
+
             if ($data.Multiline) {
-                $element = "<textarea class='form-control $(if ($data.NoForm) { 'no-form' })' id='$($data.ID)' name='$($data.Name)' pode-object='$($data.ObjectType)' placeholder='$($data.Placeholder)' rows='$($data.Size)' style='$($width) $($data.CssStyles)' $($describedBy) $($readOnly) $($required) $($value) $($events)></textarea>"
+                $element = "<textarea class='form-control $(if ($data.NoForm) { 'no-form' })' id='$($data.ID)' name='$($data.Name)' pode-object='$($data.ObjectType)' placeholder='$($data.Placeholder)' rows='$($data.Size)' style='$($width) $($data.CssStyles)' $($describedBy) $($readOnly) $($required) $($autofocus) $($value) $($events)></textarea>"
             }
             else {
                 if ($data.Prepend.Enabled -or $data.Append.Enabled) {
@@ -52,7 +72,7 @@
                     $_type = 'datetime-local'
                 }
 
-                $element += "<input type='$($_type.ToLowerInvariant())' class='form-control $(if ($data.NoForm) { 'no-form' })' id='$($data.ID)' name='$($data.Name)' pode-object='$($data.ObjectType)' style='$($width) $($data.CssStyles)' placeholder='$($data.Placeholder)' pode-autocomplete='$($data.IsAutoComplete)' $($describedBy) $($readOnly) $($required) $($value) $($events)>"
+                $element += "<input type='$($_type.ToLowerInvariant())' class='form-control $(if ($data.NoForm) { 'no-form' })' id='$($data.ID)' name='$($data.Name)' pode-object='$($data.ObjectType)' style='$($width) $($data.CssStyles)' placeholder='$($data.Placeholder)' pode-autocomplete='$($data.IsAutoComplete)' $($describedBy) $($readOnly) $($required) $($autofocus) $($value) $($events)>"
 
                 if ($data.Append.Enabled) {
                     if (![string]::IsNullOrWhiteSpace($data.Append.Text)) {
@@ -75,6 +95,10 @@
             $element
         )
 
+        $(if ($data.DynamicLabel) {
+            "<label for='$($data.ID)'>$($data.DisplayName)</label></div>"
+        })
+
         $(if (![string]::IsNullOrWhiteSpace($data.HelpText)) {
             "<small id='$($data.ID)_help' class='form-text text-muted'>$($data.HelpText)</small>"
         })
diff --git a/src/Templates/Views/login.pode b/src/Templates/Views/login.pode
index ed1bfbc2..0cc6e64d 100644
--- a/src/Templates/Views/login.pode
+++ b/src/Templates/Views/login.pode
@@ -11,48 +11,42 @@
             </div>
         </div>
 
-        <form class="form-signin" action="$($data.AppPath)/login" method='POST'>
+        <div class="form-signin">
             <div class='text-center mb-4'>
                 <a href='$($data.LogoUrl)'>
                     <img class='mb-4 rounded' src='$($data.Logo)' alt='logo' height='72'>
                 </a>
-                <h1 class='h3 mb-3 font-weight-normal'>Please sign in</h1>
+                <h1 class='h3 mb-3 font-weight-normal'>$($data.SignInMessage)</h1>
             </div>
 
-            $(if (!$data.Auth.IsOAuth2 -or  ($data.Auth.GrantType -ieq 'password')) {
-                "<div class='form-label-group'>
-                    <input type='text' id='username' name='username' class='form-control' placeholder='Username' required autofocus>
-                    <label for='username'>Username</label>
-                </div>
-
-                <div class='form-label-group'>
-                    <input type='password' id='password' name='password' class='form-control' placeholder='Password' required>
-                    <label for='password'>Password</label>
-                </div>"
-
-                if ($data.Flash['auth-error']) {
-                    "<div class='alert alert-danger' role='alert'>
-                        <span class='mdi mdi-alert-circle'></span>
-                        <strong>$($data.Flash['auth-error'])</strong>
-                    </div>"
+            <form action="$($data.AppPath)/login" method='POST'>
+                $(if (!$data.Auth.IsOAuth2 -or ($data.Auth.GrantType -ieq 'password')) {
+                    Use-PodeWebPartialView -Path 'shared/_load' -Data @{ Content = $data.Content }
+
+                    if ($data.Flash['auth-error']) {
+                        "<div class='alert alert-danger' role='alert'>
+                            <span class='mdi mdi-alert-circle'></span>
+                            <strong>$($data.Flash['auth-error'])</strong>
+                        </div>"
+                    }
+
+                    "<button class='btn btn-lg btn-inbuilt-theme btn-block' type='submit'>
+                        <span class='spinner-border spinner-border-sm' role='status' aria-hidden='true' style='display: none'></span>
+                        Sign in
+                    </button>"
                 }
-
-                "<button class='btn btn-lg btn-inbuilt-theme btn-block' type='submit'>
-                    <span class='spinner-border spinner-border-sm' role='status' aria-hidden='true' style='display: none'></span>
-                    Sign in
-                </button>"
-            }
-            else {
-                "<button class='btn btn-lg btn-inbuilt-theme btn-block' type='submit'>
-                    <span class='spinner-border spinner-border-sm' role='status' aria-hidden='true' style='display: none'></span>
-                    Sign in using OAuth2 ($($data.Auth.Name))
-                </button>"
-            })
-
-            $(if (![string]::IsNullOrWhiteSpace($data.Copyright)) {
-                "<p class='mt-5 mb-3 text-muted'>&copy; $($data.Copyright)</p>"
-            })
-        </form>
+                else {
+                    "<button class='btn btn-lg btn-inbuilt-theme btn-block' type='submit'>
+                        <span class='spinner-border spinner-border-sm' role='status' aria-hidden='true' style='display: none'></span>
+                        Sign in using OAuth2 ($($data.Auth.Name))
+                    </button>"
+                })
+
+                $(if (![string]::IsNullOrWhiteSpace($data.Copyright)) {
+                    "<p class='mt-5 mb-3 text-muted'>&copy; $($data.Copyright)</p>"
+                })
+            </form>
+        </div>
 
         $(Use-PodeWebPartialView -Path 'shared/scripts' -Data @{
             AppPath = $data.AppPath