Refresh user interface (#395)

Co-authored-by: Tim Jacomb <[email protected]>
jenkins-infra · Aug 5, 2024 · 8c32a83 · 8c32a83
1 parent 57ea7d6
commit 8c32a83
Show file tree

Hide file tree

Showing 15 changed files with 414 additions and 283 deletions.
diff --git a/src/it/java/org/jenkinsci/account/ui/admin/AdminPage.java b/src/it/java/org/jenkinsci/account/ui/admin/AdminPage.java
@@ -13,7 +13,7 @@ public class AdminPage {
     @FindBy(name = "word")
     private WebElement searchInput;
 
-    @FindBy(xpath = "//input[@value=\"Search\"]")
+    @FindBy(xpath = "//button[contains(text(), 'Search')]")
     private WebElement searchButton;
     private final WebDriver driver;
 
@@ -24,7 +24,7 @@ public AdminPage(WebDriver driver) {
 
     public void verifyOnPage() {
         assertThat(driver.getTitle())
-                .contains("Manage Users");
+                .contains("Admin");
     }
 
     public void search(String query) {

diff --git a/src/it/java/org/jenkinsci/account/ui/myaccount/MyAccountPage.java b/src/it/java/org/jenkinsci/account/ui/myaccount/MyAccountPage.java
@@ -8,10 +8,10 @@
 
 // page_url = http://localhost:8080/
 public class MyAccountPage {
-    @FindBy(xpath = "//a[@href=\"./admin\"]")
+    @FindBy(xpath = "//a[@href=\"/admin\"]")
     private WebElement administerLink;
 
-    @FindBy(xpath = "//a[@href=\"./myself\"]")
+    @FindBy(xpath = "//a[@href=\"/myself\"]")
     private WebElement profileLink;
 
     public MyAccountPage(WebDriver driver) {

diff --git a/src/main/java/org/jenkinsci/account/Application.java b/src/main/java/org/jenkinsci/account/Application.java
@@ -1395,4 +1395,13 @@ public AdminUI getAdmin() {
 
     // Somewhat cryptic name for cookie, so prying eyes don't know its use.
     public static final String ALREADY_SIGNED_UP = "JENKINSACCOUNT";
+
+    /**
+     * Returns true if the provided url is the active url
+     */
+    public boolean isActive(String url) {
+        StaplerRequest req = Stapler.getCurrentRequest();
+        String currentUrl = StringUtils.strip(req.getRequestURI(), "/");
+        return currentUrl.equals(url);
+    }
 }
diff --git a/src/main/resources/org/jenkinsci/account/AdminUI/index.jelly b/src/main/resources/org/jenkinsci/account/AdminUI/index.jelly
@@ -1,40 +1,40 @@
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
-  <t:layout title="Manage Users">
-    <div class="row">
-      <div class="col-md-6">
-        <h1>Manage Users</h1>
-        <p class="description">
+  <t:layout title="Admin">
+      <h1>Admin</h1>
+        <h2>Manage users</h2>
+        <p class="ac-description">
           Type the username or email address to find the user.
         </p>
         <form method="post" action="search">
-          <div class="form-group">
+          <div class="ac-form-group">
             <label for="word">Username or email address</label>
             <input type="text" name="word" class="form-control text"/>
           </div>
 
-          <input type="submit" class="btn btn-primary" value="Search"/>
+          <button type="submit" class="app-button app-button--primary">
+            Search
+          </button>
         </form>
 
-        <h2>Set Circuit Breaker</h2>
-        <p class="description">
+        <h2>Set circuit breaker</h2>
+        <p class="ac-description">
           Temporarily disable sign-up to fight spam until a certain time.
           All times are in UTC.
         </p>
         <j:if test="${it.circuitBreaker.isOn()}">
-          <p class="description">
+          <p class="ac-description">
             Circuit breaker is currently on until ${it.circuitBreaker.date}.
             To disable it, set it to the time in the past, such as 2000/01/01 00:00.
           </p>
         </j:if>
         <form method="post" action="circuitBreaker/set">
-          <div class="form-group">
+          <div class="ac-form-group">
             <label for="time">Circuit breaker is on until when? (YYYY/MM/DD HH:MM)</label>
             <input type="text" name="time" class="form-control text"/>
           </div>
-
-          <input type="submit" class="btn btn-secondary" value="Save"/>
+          <button type="submit" class="app-button">
+            Save
+          </button>
         </form>
-      </div>
-    </div>
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/AdminUI/search.jelly b/src/main/resources/org/jenkinsci/account/AdminUI/search.jelly
@@ -1,15 +1,23 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
-  <t:layout title="Search results">
+  <t:layout title="Search results" hideNavigation="true">
+    <div class="app-!-display-flex">
+      <a class="app-back-link" href="/admin">
+        Back to Admin
+      </a>
+    </div>
     <h1>Search results</h1>
-    <table class="table">
+    <div class="ac-description">
+      To delete, type "YES" to the text field left of "Delete" then click the Delete button.
+    </div>
+    <table class="ac-table">
       <thead>
         <tr>
-          <td>User ID</td>
-          <td>Email address</td>
-          <td>Reset password</td>
-          <td>Update email</td>
-          <td>Delete user</td>
+          <th>User ID</th>
+          <th>Email address</th>
+          <th>Reset password</th>
+          <th>Update email</th>
+          <th>Delete user</th>
         </tr>
       </thead>
       <j:forEach var="u" items="${all}">
@@ -19,29 +27,26 @@
           <td>
             <form method="post" action="passwordReset" style="margin:0">
               <input type="hidden" name="id" value="${u.id}" />
-              <input type="submit" value="Reset password" class="btn btn-secondary" />
+              <input type="submit" value="Reset password" class="app-button" />
             </form>
           </td>
-          <td style="padding-left:1em">
+          <td>
             <form method="post" action="emailReset" style="margin:0">
               <input type="hidden" name="id" value="${u.id}" />
-              <input type="text" name="email" value="${u.mail}" class="form-control mb-1" />
-              <input type="submit" value="Update" class="btn btn-secondary" />
+              <input type="text" name="email" value="${u.mail}" class="form-control" />
+              <input type="submit" value="Update" class="app-button" style="margin-left: 0.5rem" />
             </form>
           </td>
 
-          <td style="padding-left:1em">
+          <td>
             <form method="post" action="delete" style="margin:0">
               <input type="hidden" name="id" value="${u.id}" />
-              <input type="text" name="confirm" style="width:3em" class="form-control mb-1" />
-              <input type="submit" value="Delete" class="btn btn-danger" />
+              <input type="text" name="confirm" style="width:4em" class="form-control" />
+              <input type="submit" value="Delete" class="app-button" style="margin-left: 0.5rem" />
             </form>
           </td>
         </tr>
       </j:forEach>
     </table>
-    <p>
-      To delete, type "YES" to the text field left of "Delete" then click the Delete button.
-    </p>
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/AdminUI/signup.jelly b/src/main/resources/org/jenkinsci/account/AdminUI/signup.jelly
@@ -1,40 +1,32 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
   <t:layout title="Administration">
-  <div class="row">
-  <div class="col-sm-4">
-
     <p>
       Confirm creating the following user
     </p>
-    <form method="post" action="doSignup" class="d-grid gap-2">
-      <div class="form-group">
+    <form method="post" action="doSignup">
+      <div class="ac-form-group">
         <label>User ID</label>
         <input type="text" name="userid" value="${request.getParameter('userId')}" class="form-control text" placeholder="Userid" />
       </div>
 
-      <div class="form-group">
+      <div class="ac-form-group">
         <label>First Name</label>
         <input type="text" name="firstName" value="${request.getParameter('firstName')}" class="form-control text" placeholder="First Name" />
       </div>
 
-      <div class="form-group">
+      <div class="ac-form-group">
         <label>Last Name</label>
         <input type="text" name="lastName" value="${request.getParameter('lastName')}" class="form-control text" placeholder="Last Name"/>
       </div>
 
-      <div class="form-group">
+      <div class="ac-form-group">
         <label>Email</label>
         <input type="email" name="email" value="${request.getParameter('email')}" class="form-control text" placeholder="Last Name"/>
       </div>
 
-      <button type="submit" class="btn btn-default">Sign Up</button>
+      <button type="submit" class="app-button">Sign Up</button>
 
     </form>
-  </div>
-  <div class="col-sm-8">
-  </div>
-  </div>
-
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/Application/index.jelly b/src/main/resources/org/jenkinsci/account/Application/index.jelly
@@ -1,31 +1,21 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
   <t:layout title="Account">
-    <h1>Account</h1>
-    <p>
-    You can create/manage your user account that you use for accessing
-    <a href="https://issues.jenkins.io/" target="_blank">Jira</a>,
-    <a href="https://repo.jenkins-ci.org/" target="_blank">Artifactory</a>,
-    VPN and other services within the <a href="https://www.jenkins.io/projects/infrastructure" target="_top">Jenkins Infrastructure</a>.
-    </p>
+    <j:if test="${it.isLoggedIn()}">
+      <h1>Hey ${it.myself.firstName}</h1>
 
-    <div id="account-menu">
-      <j:if test="${not it.isLoggedIn()}">
-        <script type="text/javascript">
-            window.location.href = "login"
-        </script>
-      </j:if>
-      <j:if test="${it.isLoggedIn()}">
-        <ul>
-          <j:if test="${it.isAdmin() or app.isAdmin()}">
-            <li><a href="./admin">Administer</a> - Manage other accounts</li>
-          </j:if>
-          <li><a href="./myself">Profile</a> - View and edit profile, change password, etc.</li>
-
-          <li><a href="./logout">Logout</a></li>
-        </ul>
-      </j:if>
-    </div>
+      <p class="app-description">
+        You can create/manage your user account that you use for accessing
+        <a href="https://issues.jenkins.io/" target="_blank">Jira</a>,
+        <a href="https://repo.jenkins-ci.org/" target="_blank">Artifactory</a>,
+        VPN and other services within the <a href="https://www.jenkins.io/projects/infrastructure" target="_top">Jenkins Infrastructure</a>.
+      </p>
+    </j:if>
 
+    <j:if test="${not it.isLoggedIn()}">
+      <script type="text/javascript">
+          window.location.href = "login"
+      </script>
+    </j:if>
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/Application/login.jelly b/src/main/resources/org/jenkinsci/account/Application/login.jelly
@@ -1,32 +1,28 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
-  <t:layout title="Login">
-<div class="row">
-  <div class="col-md-6 mx-auto">
-    <div class="logo">
-      <img height="40px" src="/logo.svg" alt="Jenkins logo" />
-    </div>
-
-    <h1 class="text-center">Login</h1>
+  <t:layout title="Sign in" class="ac-small-width">
+    <h1>Sign in</h1>
 
-    <form method="post" action="doLogin" class="d-grid gap-2">
-      <div class="form-group">
+    <form method="post" action="doLogin">
+      <div class="ac-form-group">
         <label for="userid">Username</label>
-        <input autofocus="autofocus" type="text" name="userid" class="form-control text" id="userid" placeholder="Enter your username"/>
+        <input autofocus="autofocus" type="text" name="userid" class="form-control text" id="userid" />
       </div>
 
-      <div class="form-group">
+      <div class="ac-form-group">
         <label for="login_password">Password</label>
-        <input type="password" id="login_password" name="password" placeholder="Enter your password" class="form-control text"/>
+        <input type="password" id="login_password" name="password" class="form-control text"/>
       </div>
 
       <input type="hidden" name="from" value="${request.getParameter('from')}"/>
 
-      <button type="submit" class="btn btn-primary btn-lg">Login</button>
+      <button type="submit" class="app-button app-button--primary ac-button--large">Sign in</button>
     </form>
 
-    <small><a href="signup">Sign up?</a> - <a href="passwordReset">Forgot password</a></small>
-  </div>
-</div>
+    <div class="ac-login__controls">
+      <a href="signup">Register</a>
+      <span class="ac-description">-</span>
+      <a href="passwordReset">Forgot password</a>
+    </div>
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/Application/passwordReset.jelly b/src/main/resources/org/jenkinsci/account/Application/passwordReset.jelly
@@ -1,25 +1,19 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
-  <t:layout title="Reset password">
-  <div class="row">
-  <div class="col-md-6 mx-auto">
-
+  <t:layout title="Reset password" class="ac-small-width">
     <h1>Reset password</h1>
 
-    <form method="post" action="doPasswordReset" class="d-grid gap-2">
-      <div class="form-group">
-        <label>Username or Email</label>
+    <form method="post" action="doPasswordReset">
+      <div class="ac-form-group">
+        <label>Username or email</label>
         <input type="text" name="id" class="form-control text"/>
       </div>
 
-      <button type="submit" class="btn btn-primary btn-lg">Reset</button>
+      <button type="submit" class="app-button app-button--primary ac-button--large">Reset</button>
 
-      <p class="mt-1 description">
+      <p class="ac-description">
         If you can't figure this out, <a href="https://github.com/jenkins-infra/helpdesk/issues/new?template=2-account-issue.yml&amp;labels=triage,accounts&amp;url=account.jenkins.io%2FpasswordReset">contact us</a> to get your account recovered.
       </p>
     </form>
-  </div>
-  </div>
-
   </t:layout>
 </j:jelly>