PolarisPowerShell

Building a simple form using PowerShell Polaris module

A friend of mine asked a help to build a simple form to collect user information and process it in back. Yes, its orchestration integration system. There are multiple ways to achieve it. But, I picked Polaris to experiment and demo the betterment of PowerShell as a Web Framework.

Gist is here!

It’s really very simple steps like build a HTML file and render it using New-PolarisGetRoute cmdlet and Collect the information using New-PolarisPostRoute cmdlet 🙂

Out HTML Form

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        body {
            font-family: "Candara";
            font-weight: 100;
            font-size: 12px;
            line-height: 30px;
            color: #777;
            background: #4CAF50;
        }

        .container {
            max-width: 400px;
            width: 100%;
            margin: 0 auto;
            position: relative;
        }

        #contact input[type="text"],
        #contact input[type="email"],
        #contact input[type="tel"],
        #contact input[type="url"],
        #contact textarea,
        #contact button[type="submit"] {
            font: 400 12px/16px "Candara";
        }

        #contact {
            background: #F9F9F9;
            padding: 25px;
            margin: 150px 0;
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
        }

        #contact h3 {
            display: block;
            font-size: 30px;
            font-weight: 300;
            margin-bottom: 10px;
        }

        #contact h4 {
            margin: 5px 0 15px;
            display: block;
            font-size: 13px;
            font-weight: 400;
        }

        fieldset {
            border: medium none !important;
            margin: 0 0 10px;
            min-width: 100%;
            padding: 0;
            width: 100%;
        }

        #contact input[type="text"],
        #contact input[type="email"],
        #contact input[type="tel"],
        #contact input[type="url"],
        #contact textarea {
            width: 100%;
            border: 1px solid #ccc;
            background: #FFF;
            margin: 0 0 5px;
            padding: 10px;
        }

        #contact input[type="text"]:hover,
        #contact input[type="email"]:hover,
        #contact input[type="tel"]:hover,
        #contact input[type="url"]:hover,
        #contact textarea:hover {
            -webkit-transition: border-color 0.3s ease-in-out;
            -moz-transition: border-color 0.3s ease-in-out;
            transition: border-color 0.3s ease-in-out;
            border: 1px solid #aaa;
        }

        #contact textarea {
            height: 100px;
            max-width: 100%;
            resize: none;
        }

        #contact button[type="submit"] {
            cursor: pointer;
            width: 100%;
            border: none;
            background: #4CAF50;
            color: #FFF;
            margin: 0 0 5px;
            padding: 10px;
            font-size: 15px;
        }

        #contact button[type="submit"]:hover {
            background: #43A047;
            -webkit-transition: background 0.3s ease-in-out;
            -moz-transition: background 0.3s ease-in-out;
            transition: background-color 0.3s ease-in-out;
        }

        #contact button[type="submit"]:active {
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
        }

        .copyright {
            text-align: center;
        }

        #contact input:focus,
        #contact textarea:focus {
            outline: 0;
            border: 1px solid #aaa;
        }

        ::-webkit-input-placeholder {
            color: #888;
        }

        :-moz-placeholder {
            color: #888;
        }

        ::-moz-placeholder {
            color: #888;
        }

        :-ms-input-placeholder {
            color: #888;
        }
    </style>
</head>

<body>
    <div class="container">
        <form id="contact" action="/CreateADUser" method="post" oninput="fullname.value = fn.value + ', ' + ln.value; email.value = ln.value + '.' + fn.value + '@domain.com'">
            <h3 style="text-align: center">Polaris - PowerShell</h3>
            <h4>Create a New AD User</h4>
            <fieldset>
                <label for="fn">First Name</label>
                <input placeholder="First name" type="text" tabindex="1" required autofocus name="fn">
            </fieldset>
            <fieldset>
                    <label for="fn" style="color: black">Last Name</label>
                <input placeholder="Last name" type="text" tabindex="1" required autofocus name="ln">
            </fieldset>
            <fieldset>
                <input name="fullname" type="text" tabindex="1" required autofocus>
            </fieldset>
            <fieldset>
                <input type="email" tabindex="2" required name="email">
            </fieldset>
            <fieldset>
                <input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
            </fieldset>
            <fieldset>
                <input placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
            </fieldset>
            <!--<fieldset>
                <textarea placeholder="Type your message here...." tabindex="5" required></textarea>
            </fieldset>!-->
            <fieldset>
                <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
            </fieldset>
        </form>
    </div>
</body>

</html>

Response and Request – A PowerShell Web Server!

Import-Module -Name Polaris -Verbose
Add-Type -AssemblyName System.Web
$Url = "http://localhost:8080/"
New-PolarisGetRoute -Path "/index" -Scriptblock {
    $Response.SetContentType('text/html')
    $Html = Get-Content 'C:\projects\iPortal\html\NewADUser.html' -Raw
    $Response.Send($Html)
}

New-PolarisPostRoute -Path "/CreateADUser" -Scriptblock {
    $Response.SetContentType('application/json')
    $Body = [System.Web.HttpUtility]::UrlDecode($Request.BodyString)
    $Data = @{}
    $Body.split('&') | %{
    $part = $_.split('=')
    $Data.add($part[0], $part[1])
  }
  $Response.Send(($Data | ConvertTo-Json))
}
Start-Polaris -Port 8080

Here is the output

More to come in upcoming blog – Until then Enjoy PowerShell!

4 thoughts on “Building a simple form using PowerShell Polaris module

  1. Hi Chen,
    This is great! Thanks for sharing.
    Do you have any good info on the basic usage of Polaris. I am not hugely familiar with the get,post,put process and am trying to understand it so I can start using Polaris.
    Thanks

  2. Hi! I could have sworn I’ve been to this blog before but after browsing through some of the posts I realized it’s new to me.
    Anyways, I’m definitely happy I came across it and I’ll
    be book-marking it and checking back regularly! bookmarked!!, I like your site!
    I’ve been surfing online more than 3 hours today, yet I never found any interesting article like yours.
    It’s pretty worth enough for me. In my view, if all website owners and bloggers made good content as you did, the net will be a lot
    more useful than ever before. http://foxnews.org

Leave a Reply

Your email address will not be published. Required fields are marked *