casdoor 1.3.2 → 1.5.0

package/src/popup.css

@@ -1,106 +1,162 @@
-.background {
+[hidden] {
+    display: none !important;
+}
+
+body {
+    margin: 0;
+    font: 13px/1.5 -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+    color: #1f2328;
+}
+
+.popup {
     width: 300px;
-    height: 210px;
+    padding: 14px 16px 16px;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
 }
 
-.title {
-    text-align: center;
+.header h1 {
+    margin: 0;
+    font-size: 16px;
 }
 
-.item {
+.user {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-top: 10px;
+    gap: 10px;
+    margin-bottom: 12px;
+}
+
+.user img {
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.user-name {
+    font-weight: 600;
+}
+
+.field {
+    display: block;
     margin-bottom: 10px;
 }
 
-.switch {
-    position: relative;
-    display : inline-block;
-    width   : 50px;
-    height  : 24px;
+.field span {
+    display: block;
+    margin-bottom: 4px;
+    color: #59636e;
 }
 
-.switch input {
-    opacity: 0;
-    width  : 0;
-    height : 0;
+.field input {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 6px 8px;
+    border: 1px solid #d0d7de;
+    border-radius: 6px;
+    font: inherit;
 }
 
-.slider {
-    position          : absolute;
-    cursor            : pointer;
-    top               : 0;
-    left              : 0;
-    right             : 0;
-    bottom            : 0;
-    background-color  : #ccc;
-    -webkit-transition: .4s;
-    transition        : .4s;
-    border-radius     : 34px;
+.field input:disabled {
+    background: #f6f8fa;
+    color: #59636e;
 }
 
-.slider:before {
-    position          : absolute;
-    content           : "";
-    height            : 20px;
-    width             : 20px;
-    left              : 2px;
-    top               : 2px;
-    background-color  : white;
-    -webkit-transition: .4s;
-    transition        : .4s;
-    border-radius     : 50%;
-}
-
-input:checked+.slider {
-    background-color: rgb(0, 166, 255);
-}
-
-input:checked+.slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform    : translateX(26px);
-    transform        : translateX(26px);
-}
-
-.control {
-    color: rgba(0, 0, 0, .85);
-    font-size: 14px;
-    list-style: none;
-    max-width: 100%;
-    text-align: center;
+.row {
     display: flex;
-    position: relative;
+    justify-content: space-between;
     align-items: center;
-    justify-content: center;
+    margin: 4px 0 12px;
 }
 
-.control button {
-    border-radius: 2px;
-    border: 0;
-    padding: 6px 8px 6px 8px;
-    margin-bottom: 5px;
+.sites {
+    margin-bottom: 10px;
+    padding: 8px 10px;
+    border-radius: 6px;
+    background: #f6f8fa;
 }
 
-.control .primary {
-    color: #fff;
-    border-color: #2d78d5;
-    background: #2d78d5;
-    text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
-    box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
+.sites ul {
+    margin: 4px 0 0;
+    padding-left: 18px;
 }
 
-.control .primary:hover {
+.muted {
+    color: #59636e;
+}
+
+.small {
+    margin-top: 10px;
+    font-size: 11px;
+    word-break: break-all;
+}
+
+#message {
+    margin-bottom: 10px;
+}
+
+#message:empty {
+    display: none;
+}
+
+button.primary {
+    width: 100%;
+    padding: 7px 0;
+    border: 0;
+    border-radius: 6px;
+    background: #5c6ac4;
     color: #fff;
-    border-color: #5499e3;
-    background: #5499e3;
+    font: inherit;
+    cursor: pointer;
 }
 
-#user {
-    text-align: center;
+button.primary:disabled {
+    opacity: .6;
+    cursor: default;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 22px;
 }
 
-.input {
-    width: 180px;
-}
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    inset: 0;
+    background-color: #ccc;
+    transition: .2s;
+    border-radius: 22px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 2px;
+    top: 2px;
+    background-color: white;
+    transition: .2s;
+    border-radius: 50%;
+}
+
+input:checked + .slider {
+    background-color: #5c6ac4;
+}
+
+input:checked + .slider:before {
+    transform: translateX(18px);
+}

package/src/popup.html

@@ -1,34 +1,47 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta charset="utf-8">
     <link rel="stylesheet" href="popup.css">
 </head>
 <body>
-<div class="background">
-    <h1 class="title" id="title">Casdoor</h1>
-    <div id="user"></div>
-    <div class="item">
-        endpoint:
-        <input class="input" id="endpoint" name="endpoint" placeholder="your casdoor server url"/>
+<div class="popup">
+    <div class="header">
+        <img src="/images/icon48.png" alt="" width="24" height="24">
+        <h1>Casdoor</h1>
     </div>
-    <div class="item">
-        applicationName:
-        <input class="input" id="applicationName" name="applicationName" placeholder="your application name"/>
+
+    <div id="user" class="user" hidden>
+        <img id="avatar" alt="" width="36" height="36">
+        <div>
+            <div id="userName" class="user-name"></div>
+            <div id="userOrg" class="muted"></div>
+        </div>
     </div>
-    <div class="item">
-        Enable auto login:
+
+    <label class="field">
+        <span data-i18n="endpoint"></span>
+        <input id="endpoint" placeholder="https://door.casdoor.com">
+    </label>
+    <label class="field">
+        <span data-i18n="application"></span>
+        <input id="applicationName" placeholder="app-built-in">
+    </label>
+
+    <div class="row">
+        <span data-i18n="autoFill"></span>
         <label class="switch">
-            <input type="checkbox" id="enableAutoLogin">
+            <input type="checkbox" id="autoFill">
             <span class="slider"></span>
         </label>
     </div>
-    <div class="control">
-        <button class="primary" id="loginOrLogout">Login</button>
-    </div>
+
+    <div id="sites" class="sites" hidden></div>
+    <div id="message" class="muted"></div>
+
+    <button class="primary" id="loginOrLogout"></button>
+    <div class="muted small"><span data-i18n="redirectUri"></span> <code id="redirectUri"></code></div>
 </div>
-<script src="config.js"></script>
-<script src="sdk.js"></script>
-<script src="oauth.js"></script>
 <script src="popup.js"></script>
 </body>
 </html>

package/src/popup.js

@@ -12,80 +12,116 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-/* eslint-disable no-undef */
+const isZh = (navigator.language || "").toLowerCase().startsWith("zh");
+const strings = isZh
+  ? {
+    endpoint: "Casdoor 地址",
+    application: "应用名称",
+    autoFill: "自动填写登录表单",
+    redirectUri: "要加到应用回调地址里的地址：",
+    login: "登录 Casdoor",
+    logout: "退出",
+    sites: "可以代填的系统：",
+    accounts: "{n} 个账号",
+    canSave: "手动登录一次后保存",
+    noSites: "还没有可以代填的系统",
+    legacy: "这个 Casdoor 没有表单代填，按托管账号的登录地址代填",
+    errorEndpoint: "请填写以 http:// 或 https:// 开头的 Casdoor 地址和应用名称",
+    errorApplication: "找不到这个应用",
+    errorLogin: "登录失败：",
+  }
+  : {
+    endpoint: "Casdoor URL",
+    application: "Application name",
+    autoFill: "Fill sign-in forms automatically",
+    redirectUri: "Add this to the redirect URLs of the application:",
+    login: "Sign in to Casdoor",
+    logout: "Sign out",
+    sites: "Systems filled for you:",
+    accounts: "{n} account(s)",
+    canSave: "saved after you sign in by hand",
+    noSites: "No system is filled for you yet",
+    legacy: "This Casdoor has no form autofill, the sign-in URLs of the managed accounts are used",
+    errorEndpoint: "Please enter the Casdoor URL starting with http:// or https://, and the application name",
+    errorApplication: "The application is not found",
+    errorLogin: "Sign-in failed: ",
+  };
 
-document.addEventListener("DOMContentLoaded", function() {
-  const enableAutoLoginDom = document.getElementById("enableAutoLogin");
+const $ = (id) => document.getElementById(id);
 
-  chrome.storage.sync.get("disableAutoLogin", ({disableAutoLogin}) => {
-    enableAutoLoginDom.checked = !disableAutoLogin;
-  });
+function send(message) {
+  return new Promise((resolve) => chrome.runtime.sendMessage(message, resolve));
+}
 
-  enableAutoLoginDom.addEventListener("click", function() {
-    chrome.storage.sync.set({disableAutoLogin: !enableAutoLoginDom.checked});
-  });
-});
+function renderSites(status) {
+  const box = $("sites");
+  box.textContent = "";
+  if (!status.user || !status.sites) {
+    box.hidden = true;
+    return;
+  }
+  box.hidden = false;
+  if (status.sites.length === 0) {
+    box.textContent = strings.noSites;
+    return;
+  }
+  const title = document.createElement("div");
+  title.textContent = strings.sites;
+  const list = document.createElement("ul");
+  for (const site of status.sites) {
+    const item = document.createElement("li");
+    const detail = site.accounts > 0 ? strings.accounts.replace("{n}", site.accounts) : strings.canSave;
+    item.textContent = isZh ? `${site.name}（${detail}）` : `${site.name} (${detail})`;
+    list.append(item);
+  }
+  box.append(title, list);
+}
 
-document.addEventListener("DOMContentLoaded", function() {
-  const loginOrLogoutDom = document.getElementById("loginOrLogout");
+async function render() {
+  const status = await send({type: "getStatus"});
+  $("endpoint").value = status.endpoint;
+  $("applicationName").value = status.applicationName;
+  $("autoFill").checked = status.autoFill;
+  $("redirectUri").textContent = status.redirectUri;
 
-  loginOrLogoutDom.innerText = accessToken ? "Logout" : "Login";
+  const signedIn = !!status.user;
+  $("endpoint").disabled = signedIn;
+  $("applicationName").disabled = signedIn;
+  $("loginOrLogout").textContent = signedIn ? strings.logout : strings.login;
+  $("user").hidden = !signedIn;
+  if (signedIn) {
+    $("avatar").src = status.user.avatar || "/images/icon48.png";
+    $("userName").textContent = status.user.displayName || status.user.name;
+    $("userOrg").textContent = `${status.user.owner}/${status.user.name}`;
+  }
+  $("message").textContent = signedIn && status.mode === "legacy" ? (status.message || strings.legacy) : "";
+  renderSites(status);
+  return status;
+}
 
-  Promise.all([getStorageData("accessToken"), getStorageData("userProfile")])
-    .then(([accessToken, userProfile]) => {
-      if (accessToken.accessToken && userProfile.userProfile) {
-        displayUserProfile(userProfile.userProfile)
-        setInputDisabledState(true, "endpoint", "applicationName");
-      } else {
-        clearUserProfile();
-      }
-    })
-    .catch((error) => {
-      console.error("init SDK failed:", error);
-      reject(error);
-    });
-
-  loginOrLogoutDom.addEventListener("click", function() {
-    chrome.storage.sync.get("accessToken", ({accessToken}) => {
-      if (accessToken) {
-        logout();
-      } else {
-        setInput()
-        .then(login())
-        .catch(error => {
-          console.error('Error login:', error);
-      });
-      }
-    });
+document.addEventListener("DOMContentLoaded", async() => {
+  document.querySelectorAll("[data-i18n]").forEach((element) => {
+    element.textContent = strings[element.dataset.i18n];
   });
-});
+  let status = await render();
 
-document.addEventListener("DOMContentLoaded", function() {
-  const applicationNameDom = document.getElementById("applicationName");
-  chrome.storage.sync.get("applicationName", ({applicationName}) => {
-    if (applicationName) {
-      applicationNameDom.value = applicationName;
-    }
-  });
+  $("autoFill").addEventListener("change", () => send({type: "setAutoFill", enabled: $("autoFill").checked}));
 
-  const endpointDom = document.getElementById("endpoint");
-  chrome.storage.sync.get("endpoint", ({endpoint}) => {
-    if (endpoint) {
-      endpointDom.value = endpoint;
+  $("loginOrLogout").addEventListener("click", async() => {
+    if (status.user) {
+      await send({type: "logout"});
+      status = await render();
+      return;
+    }
+    $("loginOrLogout").disabled = true;
+    $("message").textContent = "";
+    const res = await send({type: "login", endpoint: $("endpoint").value, applicationName: $("applicationName").value});
+    $("loginOrLogout").disabled = false;
+    if (res && res.error) {
+      const errors = {endpoint: strings.errorEndpoint, application: strings.errorApplication};
+      $("message").textContent = errors[res.error] || strings.errorLogin + res.error;
+      return;
     }
+    status = await render();
   });
 });
-
-function setInput() {
-  return new Promise((resolve, reject) => {
-    const endpointDom = document.getElementById("endpoint");
-    const applicationNameDom = document.getElementById("applicationName");
-    chrome.storage.sync.set({ endpoint: endpointDom.value, applicationName: applicationNameDom.value }, function() {
-      if (chrome.runtime.lastError) {
-        reject(chrome.runtime.lastError.message);
-      } else {
-        resolve();
-      }
-    });
-  });
-}

package/src/config.js

@@ -1,47 +0,0 @@
-// Copyright 2022 The Casdoor Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-const UsernameXpaths = [
-  "//input[contains(@id,'username')]",
-  "//input[contains(@name,'username')]",
-  "//input[contains(@name,'account')]",
-  "//input[contains(@name,'login')]",
-  "//input[contains(@placeholder,'username')]",
-  "//input[contains(@placeholder,'用户名')]",
-  "//input[contains(@placeholder,'账号')]",
-  "//input[contains(@id,'phone')]",
-  "//input[contains(@name,'phone')]",
-  "//input[contains(@placeholder,'phone')]",
-  "//input[contains(@placeholder,'手机')]",
-  "//input[contains(@id,'email')]",
-  "//input[contains(@name,'email')]",
-  "//input[contains(@placeholder,'email')]",
-  "//input[contains(@placeholder,'邮箱')]",
-];
-
-const PasswordXpaths = [
-  "//input[@type='password']",
-  "//input[contains(@id,'password')]",
-  "//input[contains(@name,'password')]",
-  "//input[contains(@placeholder,'password')]",
-  "//input[contains(@placeholder,'密码')]",
-];
-
-const SubmitXpaths = [
-  "//button[@type='submit']",
-  "//input[contains(@name,'commit')]",
-  "//button[contains(string(),'Login')]",
-  "//button[contains(string(),'Sign in')]",
-  "//button[contains(string(),'登录')]",
-];