update login form

xjsender · Mar 22, 2015 · 3054bdb · 3054bdb
1 parent 1ae0713
commit 3054bdb
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 35 deletions.
diff --git a/config.js b/config.js
diff --git a/controller/site.js b/controller/site.js
@@ -1,14 +1,21 @@
 var jsforce = require("jsforce")
-    , session = require("express-session")
-    , config = require("../config");
-
-var oauth2 = new jsforce.OAuth2(config);
+    , session = require("express-session");
 
 exports.index = function(req, res, next) {
     res.render('index');
 }
 
+exports.about = function(req, res, next) {
+    res.render('about');
+}
+
 exports.login = function(req, res, next) {
+    var oauth2 = new jsforce.OAuth2({
+        loginUrl: req.body.login_url,
+        clientId: req.body.client_id,
+        redirectUri: req.body.redirect_uri
+    })
+
     res.redirect(oauth2.getAuthorizationUrl({scope: 'api'}));
 }
 

diff --git a/routers/web_router.js b/routers/web_router.js
@@ -4,7 +4,8 @@ var express = require("express")
     , router = express.Router()
 
 router.get('/', site.index);
-router.get('/login', site.login);
+router.post('/login', site.login);
+router.get('/about', site.about);
 router.get('/oauth/callback', site.callback);
 router.get('/account/o', account.list);
 router.get('/account/:id', account.view);

diff --git a/views/account/list.html b/views/account/list.html
@@ -38,11 +38,6 @@ <h2>Account</h2>
     }
 </style>
 
-<script src="/js/sweet-alert.min.js"></script>
-<script src="/js/jquery.min.js"></script>
-<script src="/js/bootstrap.min.js"></script>
-<script src="/js/jstree.min.js"></script>
-
 <script type="text/javascript">
     $(document).ready(function() {
         var data = <%- JSON.stringify(data) %>;

diff --git a/views/template/header.html b/views/template/header.html
@@ -13,6 +13,11 @@
     <!-- Bootstrap -->
     <link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link href="/css/signin.css" rel="stylesheet" media="screen">
+
+    <script src="/js/sweet-alert.min.js"></script>
+    <script src="/js/jquery.min.js"></script>
+    <script src="/js/bootstrap.min.js"></script>
+    <script src="/js/jstree.min.js"></script>
 </head>
 
 <body>
@@ -56,25 +61,48 @@
                 </ul>
 
                 <ul class="nav navbar-nav navbar-right">
-                    <li><a href="/login">Login</a>
-                    </li>
-                    <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
-                            role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
-                        <ul class="dropdown-menu" role="menu">
-                            <li><a href="#">Action</a>
-                            </li>
-                            <li><a href="#">Another action</a>
-                            </li>
-                            <li><a href="#">Something else here</a>
-                            </li>
-                            <li class="divider"></li>
-                            <li><a href="#">Separated link</a>
-                            </li>
-                        </ul>
+                    <li><a href="#" onclick="$('#oauth-dialog').modal('show');">Login</a></li>
+                    <li class="profile dropdown" style="display:none;">
+                        <a href="#" onclick="if(confirm('Logout ?')) location.href='/logout';">
+                            <span class="profile-icon"></span>
+                            <span class="profile-name"></span>
+                        </a>
                     </li>
                 </ul>
             </div>
-            <!--/.nav-collapse -->
+            <div id="oauth-dialog" class="modal fade">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                            <h4 class="modal-title">Connect to Salesforce</h4>
+                        </div>
+                        <div class="modal-body">
+                            <form class="form-horizontal" method="post" action="/login">
+                                <div class="control-group">
+                                    <select id="login_url" class="form-control" name="login_url">
+                                        <option value="https://login.salesforce.com">Production (login.salesforce.com)</option>
+                                        <option value="https://test.salesforce.com">Sandbox (test.salesforce.com)</option>
+                                    </select>
+
+                                    <input type="text" id="client_id" name="client_id" 
+                                        class="form-control" placeholder="Client ID" required="true" autofocus="true">
+
+                                    <input type="text" id="redirect_uri" name="redirect_uri" 
+                                        class="form-control" placeholder="Redirect URI" required="true">
+                                </div>
+
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                                    <button type="submit" class="btn btn-primary connect">Connect</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                    <!-- /.modal-content -->
+                </div>
+                <!-- /.modal-dialog -->
+            </div>
+            <!-- /.modal -->
         </div>
     </nav>