fix: refactor views, improve/simplify the auth workflows

rocwind · rocwind · commit f1e3e2ac2b6f · 2022-03-24T17:49:25.000+08:00
diff --git a/locales/en.json b/locales/en.json
@@ -1,15 +1,17 @@
 {
-  "Please sign in": "Please sign in",
-  "email address": "email address",
-  "username": "username",
-  "password": "password",
-  "Remember me": "Remember me",
-  "Log in": "Log in",
-  "hot update server": "hot update server",
-  "Change Password": "Change Password",
-  "Obtain": "Obtain",
-  "old password": "old password",
-  "new password": "new password",
-  "please login again": "please login again",
-  "change success": "change success"
-}
+	"Please sign in": "Please sign in",
+	"email address": "email address",
+	"username": "username",
+	"password": "password",
+	"Remember me": "Remember me",
+	"Log in": "Log in",
+	"hot update server": "hot update server",
+	"Change Password": "Change Password",
+	"Obtain": "Obtain",
+	"old password": "old password",
+	"new password": "new password",
+	"please login again": "please login again",
+	"change success": "change success",
+	"Logout": "Logout",
+	"Register": "Register"
+}
diff --git a/locales/zh.json b/locales/zh.json
@@ -11,5 +11,6 @@
   "old password": "原密码",
   "new password": "新密码",
   "please login again": "请重新登录",
-  "change success": "修改成功"
+  "change success": "修改成功",
+  "Logout": "登出"
 }
diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
diff --git a/public/stylesheets/tokens.css b/public/stylesheets/tokens.css
diff --git a/src/routes/auth.ts b/src/routes/auth.ts
@@ -15,7 +15,11 @@ authRouter.get('/password', (req: Req, res) => {
 });
 
 authRouter.get('/login', (req: Req<void, void, { email: string }>, res) => {
-    res.render('auth/login', { title: 'CodePushServer', email: req.query.email || '' });
+    res.render('auth/login', {
+        title: 'CodePushServer',
+        email: req.query.email || '',
+        showRegister: config.common.allowRegistration,
+    });
 });
 
 authRouter.get('/link', (req: Req, res) => {
diff --git a/views/auth/confirm.pug b/views/auth/confirm.pug
@@ -1,4 +1,5 @@
-extends ../layout
+extends ../common
+
 block css
   link(rel='stylesheet', href='/stylesheets/signin.css')
 
@@ -30,13 +31,11 @@ block content
             button#okBtn.btn.btn-primary(type="button" data-dismiss="modal") OK
 block js
   script().
-    var submit = false;
-    $('#inputEmail').on('click', function () {
-      location.href = '/auth/register?email=' + $('#inputEmail').val();
-    });
     $('#okBtn').on('click', function () {
       location.href = '/auth/login?email=' + $('#inputEmail').val();
     });
+
+    var submit = false;
     $('#submitBtn').on('click', function () {
       if (submit) {
         return ;
diff --git a/views/auth/login.pug b/views/auth/login.pug
@@ -1,4 +1,5 @@
-extends ../layout
+extends ../common
+
 block css
   link(rel='stylesheet', href='/stylesheets/signin.css')
 
@@ -7,17 +8,29 @@ block content
     form#form.form-signin(method="post")
       h2.form-signin-heading #{__('Please sign in')}
       label.sr-only(for="inputEmail") #{__('email address')}／#{__('username')}
-      input#inputEmail.form-control(type="text" name="account" placeholder=`${__('email address')}／${__('username')}` required autofocus)
+      input#inputEmail.form-control(type="text" name="account" placeholder=`${__('email address')}／${__('username')}` value=email required autofocus)
       label.sr-only(for="inputPassword") #{__('password')}
       input#inputPassword.form-control(type="password" name="password" placeholder=`${__('password')}` required)
-      .checkbox
-        label
-          input(type="checkbox" value="remember-me")
-          span #{__('Remember me')}
       a#submitBtn.btn.btn-lg.btn-primary.btn-block #{__('Log in')}
+      if showRegister
+        a#registerBtn.btn.btn-lg.btn-primary.btn-block(href="/auth/register" type="button") #{__('Register')}
 
 block js
   script().
+    function onLoggedIn() {
+        var query = parseQuery()
+        if (query.hostname) {
+            // come from code-push-cli login
+            location.href = '/tokens/' + location.search;
+        } else {
+            location.href = '/';
+        }
+    }
+
+    if (getAccessToken()) {
+        onLoggedIn();
+    }
+
     var submit = false;
     $('#submitBtn').on('click', function () {
       if (submit) {
@@ -31,9 +44,9 @@ block js
         dataType: 'json',
         success: function (data) {
           if (data.status == "OK") {
-            sessionStorage.setItem('auth', data.results.tokens)
+            localStorage.setItem('auth', data.results.tokens)
             submit = false;
-            location.href = '/tokens/' + location.search;
+            onLoggedIn();
           } else {
             alert(data.message);
             submit = false;
diff --git a/views/auth/password.pug b/views/auth/password.pug
@@ -1,17 +1,8 @@
-extends ../layout
+extends ../common
 
 block content
   .container(style="margin-top:30px;")
     form#form.col-md-5.col-md-offset-3(method="post")
-      .form-group
-        label.sr-only(for="inputEmail") #{__('email address')}／#{__('username')}
-        input#inputEmail.form-control(type="text" name="account" placeholder=`${__('email address')}／${__('username')}` required autofocus)
-      .form-group
-        .col-md-10(style="margin-left:-15px;")
-          label.sr-only(for="inputToken") token
-          input#inputToken.form-control(type="text" name="token" placeholder="token" required)
-        .col-md-2
-          a.form-control.btn.btn-link(style="margin-bottom:15px;" target="_blank" href="/auth/login") #{__('Obtain')} token
       .form-group
         label.sr-only(for="inputPassword") #{__('old password')}
         input#inputPassword.form-control(type="password" name="oldPassword" placeholder=`${__('old password')}` required)
@@ -23,30 +14,33 @@ block content
 
 block js
   script().
+    ensureLogin();
+
     var submit = false;
     $('#submitBtn').on('click', function () {
       if (submit) {
         return ;
       }
-      var token = $('#inputToken').val();
+      submit = true;
+      var accessToken = getAccessToken();
       var oldPassword = $('#inputPassword').val();
       var newPassword = $('#inputNewPassword').val();
-      submit = true;
       $.ajax({
         type: 'patch',
-        data: JSON.stringify({oldPassword:oldPassword,newPassword:newPassword}),
+        data: JSON.stringify({ oldPassword: oldPassword, newPassword: newPassword }),
         contentType: 'application/json;charset=utf-8',
         headers: {
-          Authorization : 'Bearer '+token
+          Authorization : 'Bearer ' + accessToken,
         },
         url: '/users/password',
         dataType: 'json',
         success: function (data) {
           if (data.status == "OK") {
             alert("#{__('change success')}");
-            location.href = '/auth/login';
+            logout();
           } else if (data.status == 401) {
             alert('token invalid');
+            logout();
           } else {
             alert(data.message);
           }
diff --git a/views/auth/register.pug b/views/auth/register.pug
@@ -1,4 +1,5 @@
-extends ../layout
+extends ../common
+
 block css
   link(rel='stylesheet', href='/stylesheets/signin.css')
 
@@ -27,7 +28,6 @@ block js
         success: function (data) {
             if (data.status == "OK") {
               let email = $('#inputEmail').val();
-              sessionStorage.setItem('email', email);
               location.href = '/auth/confirm?email=' + email;
               submit = false;
             } else {
diff --git a/views/common.pug b/views/common.pug
@@ -0,0 +1,38 @@
+doctype html
+html
+  head
+    title= title
+    meta(name="keywords" content="code-push-server,code-push,react-native,cordova")
+    meta(name="description" content="CodePush service is hotupdate services which adapter react-native-code-push and cordova-plugin-code-push")
+    link(rel='stylesheet', href='/js/bootstrap-3.3.7/css/bootstrap.min.css')
+    link(rel='stylesheet', href='/stylesheets/common.css')
+    block css
+  body
+    block content
+
+  script(src='/js/jquery-3.1.1.min.js')
+  script(src='/js/bootstrap-3.3.7/js/bootstrap.min.js')
+  script().
+    function getAccessToken() {
+        return localStorage.getItem('auth');
+    }
+    function ensureLogin() {
+        if (!getAccessToken()) {
+            window.location.href = '/auth/login';
+        }
+    }
+    function logout() {
+        localStorage.removeItem('auth');
+        location.href = '/auth/login';
+    }
+    function parseQuery() {
+      query = location.search.substring(1);
+      var vars = query.split('&');
+      var rs = {};
+      for (var i = 0; i < vars.length; i++) {
+        var pair = vars[i].split('=');
+        rs[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
+      }
+      return rs;
+    }
+  block js
diff --git a/views/error.pug b/views/error.pug
diff --git a/views/index.pug b/views/index.pug
@@ -1,11 +1,16 @@
-extends layout
-block css
-  link(rel='stylesheet', href='/stylesheets/index.css')
+extends common
 
 block content
   .site-notice react native / cordova #{__('hot update server')}
   h1(style="text-align: center;")= title
   p(style="text-align: center;") Welcome to #{title}
   .site-notice
-    a.btn.btn-primary(href="/auth/login" type="button") #{__('Log in')}
+    a.btn.btn-primary(href="/tokens" type="button") #{__('Obtain')} token
     a.btn.btn-primary.col-md-offset-1(href="/auth/password" type="button") #{__('Change Password')}
+    a#logoutBtn.btn.btn-primary.col-md-offset-1(href="#" type="button") #{__('Logout')}
+
+block js
+  script().
+    ensureLogin();
+
+    $('#logoutBtn').on('click', logout);
diff --git a/views/layout.pug b/views/layout.pug
diff --git a/views/tokens.pug b/views/tokens.pug
@@ -1,6 +1,4 @@
-extends layout
-block css
-  link(rel='stylesheet', href='/stylesheets/tokens.css')
+extends common
 
 block content
   h1(style="text-align: center;")= title
@@ -20,41 +18,35 @@ block content
 
 block js
   script().
+    ensureLogin();
     var submit = false;
-    function parseQuery(query) {
-      query = query.substring(1);
-      var vars = query.split('&');
-      var rs = {};
-      for (var i = 0; i < vars.length; i++) {
-        var pair = vars[i].split('=');
-        rs[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
-      }
-      return rs;
-    }
+
     $('#submitBtn').on('click', function () {
       if (submit) {
         return ;
       }
       submit = true;
-      var query = parseQuery(location.search);
+      var query = parseQuery();
       var createdBy = query.hostname;
       var time = (new Date()).getTime();
       if (createdBy == null || createdBy == undefined || createdBy=="") {
         createdBy = 'Login-' + time;
       }
+
+      // TODO: make ttl and friendlyNamee configurable
       var postParams = {
         createdBy: createdBy,
         friendlyName: "Login-" + time,
         ttl: 60*60*24*30*1000,
         description: "Login-" + time,
         isSession: true
       };
-      var access_token = sessionStorage.getItem('auth');
+      var accessToken = getAccessToken();
       $.ajax({
         type: 'post',
         data: postParams,
         headers: {
-          Authorization : 'Bearer '+access_token
+          Authorization : 'Bearer ' + accessToken
         },
         url: '/accessKeys',
         dataType: 'json',

Original file line number	Diff line number	Diff line change
`@@ -11,5 +11,6 @@`
`11`	`11`	`"old password": "原密码",`
`12`	`12`	`"new password": "新密码",`
`13`	`13`	`"please login again": "请重新登录",`
`14`		`- "change success": "修改成功"`
	`14`	`+ "change success": "修改成功",`
	`15`	`+ "Logout": "登出"`
`15`	`16`	`}`