Updates OwinStartup and split the methods into an extension methods file complete with documentation on how to implement the providers. Tested the microsoft provider. Now to clean things up: remove the 3rd party package installs to be ready for shipping, ensure that the user parts are extensible enough for people to plugin their own interfaces.

src/Umbraco.Web.UI.Client/src/less/login.less

@@ -2,46 +2,72 @@
 // -------------------------
 
 .login-overlay {
-  width: 100%;
-  height: 100%;
-  background: @blackLight url(../img/application/logo.png) no-repeat 25px 30px fixed !important;
-  background-size: 30px 30px !important;
-  color: @white;
-  position: absolute;
-  z-index: 2000;
-  top: 0px;
-  left: 0px;
-  margin: 0 !Important;
-  padding: 0;
-  border-radius: 0
+    width: 100%;
+    height: 100%;
+    background: @blackLight url(../img/application/logo.png) no-repeat 25px 30px fixed !important;
+    background-size: 30px 30px !important;
+    color: @white;
+    position: absolute;
+    z-index: 2000;
+    top: 0px;
+    left: 0px;
+    margin: 0 !Important;
+    padding: 0;
+    border-radius: 0;
 }
 
-.login-overlay .umb-modalcolumn{
-  background: none;
-  border: none;
+.login-overlay .umb-modalcolumn {
+    background: none;
+    border: none;
 }
 
 .login-overlay .form {
-  display: block;
-  padding-top: 100px;
-  padding-left: 165px;
-  width: 370px;
-  text-align: right
+    display: block;
+    padding-top: 100px;
+    padding-left: 165px;
+    width: 370px;
+    text-align: right;
 }
 
 .login-overlay h1 {
-  display: block;
-  text-align: right;
-  color: @white;
-  font-size: 18px;
-  font-weight: normal
+    display: block;
+    text-align: right;
+    color: @white;
+    font-size: 18px;
+    font-weight: normal;
 }
 
-.login-overlay .alert.alert-error{
+.login-overlay .alert.alert-error {
     display: inline-block;
-    width: 270px;
     padding-right: 6px;
     padding-left: 6px;
     margin-top: 10px;
     text-align: center;
-}
+}
+
+#hrOr {
+    height: 30px;
+    text-align: center;
+    position: relative;
+    padding-top: 20px;
+}
+
+#hrOr hr {
+    margin: 0px;
+    border: none;
+    background-color: @gray;
+    height: 1px;
+}
+
+#hrOr div {
+    background-color: black;
+    position: relative;
+    top: -16px;
+    border: 1px solid @gray;
+    padding: 4px;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    margin: auto;
+    color: @grayLight;
+}

src/Umbraco.Web.UI.Client/src/less/panel.less

@@ -282,9 +282,9 @@
 .umb-panel a.text-success:hover,
 .umb-panel a.text-success:focus { color: darken(@formSuccessText, 10%); }
 
-.umb-user-panel .external-logins form {
+.external-logins form {
     margin:0;
 }
-.umb-user-panel .external-logins button {
+.external-logins button {
     margin:5px;
 }

src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html

@@ -7,6 +7,33 @@
                 <span ng-show="dialogData.isTimedOut"><localize key="login_timeout">Log in below</localize>.</span>
                 <localize key="login_instruction">Log in below</localize>
             </p>
+            
+            <div class="external-logins" ng-if="externalLoginProviders.length > 0">
+                
+                <div class="alert alert-error" ng-repeat="error in externalLoginInfo.errors">
+                    <span>{{error}}</span>
+                </div>
+
+                <form method="POST" name="externalLoginForm" action="{{externalLoginFormAction}}">
+
+                    <div ng-repeat="login in externalLoginProviders">
+
+                        <button type="submit" class="btn btn-block btn-social"
+                                ng-class="login.properties.SocialStyle"
+                                id="{{login.authType}}" name="provider" value="{{login.authType}}"
+                                title="Log in using your {{login.caption}} account">
+                            <i class="fa" ng-class="login.properties.SocialIcon"></i>
+                            Sign in with {{login.caption}}
+                        </button>
+
+                    </div>
+                </form>
+
+                <div id="hrOr">
+                    <hr/><div>Or</div>
+                </div>
+
+            </div>
 
             <form method="POST" name="loginForm" ng-submit="loginSubmit(login, password)">
                 <div class="control-group" ng-class="{error: loginForm.username.$invalid}">
@@ -24,27 +51,6 @@
                 </div>
             </form>
             
-            <hr />
-            
-            <p>External login providers</p>
-            
-            <div class="alert alert-error" ng-repeat="error in externalLoginInfo.errors">
-                <span>{{error}}</span>
-            </div>
-
-            <form method="POST" name="externalLoginForm" action="{{externalLoginFormAction}}">
-
-                <div ng-repeat="login in externalLoginProviders">
-
-                    <button type="submit" class="btn btn-block btn-large btn-social"
-                            ng-class="login.properties.SocialStyle"
-                            id="{{login.authType}}" name="provider" value="{{login.authType}}"
-                            title="Log in using your {{login.caption}} account">
-                        <i class="fa" ng-class="login.properties.SocialIcon"></i>
-                        Sign in with {{login.caption}}
-                    </button>
-                  
-                </div>
-            </form>
+        </div>
     </div>
 </div>