Switch from bootstrap v4 (4.6.0) to boostrap v5 (5.2.3)

steinarb · Jan 11, 2024 · 3655793 · 3655793
1 parent 6e7774e
commit 3655793
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 43 deletions.
diff --git a/authservice/authservice.web.security/src/main/resources/web/index.html b/authservice/authservice.web.security/src/main/resources/web/index.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <!-- Bootstrap CSS -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
         <title>Authentication service home</title>
 
         <!-- open-iconic icons for bootstrap -->
@@ -31,15 +31,14 @@
             <h1>Authentication service</h1>
             <div class="col-sm-2"></div>
         </nav>
-        <a class="btn btn-block btn-primary right-align-cell" href="password/">Change your own password&nbsp;<span class="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span></a>
-        <a class="btn btn-block btn-primary right-align-cell" href="user/">Change your own email and real name&nbsp;<span class="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span></a>
-        <a class="btn btn-block btn-primary right-align-cell" href="useradmin/">User administration UI&nbsp;<span class="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span></a>
-        <a class="btn btn-block btn-primary" href="logout">Logout</a>
+        <a class="btn btn-block btn-primary right-align-cell m-2" href="password/">Change your own password&nbsp;<span class="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span></a>
+        <a class="btn btn-block btn-primary right-align-cell m-2" href="user/">Change your own email and real name&nbsp;<span class="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span></a>
+        <a class="btn btn-block btn-primary right-align-cell m-2" href="useradmin/">User administration UI&nbsp;<span class="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span></a>
+        <div class="d-grid">
+            <a class="btn btn-block btn-primary m-2" href="logout">Logout</a>
+        </div>
 
         <!-- Optional JavaScript -->
-        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
     </body>
 </html>
diff --git a/authservice/authservice.web.security/src/main/resources/web/login.html b/authservice/authservice.web.security/src/main/resources/web/login.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <!-- Bootstrap CSS -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
         <title>Authentication service login</title>
     </head>
     <body>
@@ -19,13 +19,13 @@ <h1>Authentication service login</h1>
             <div class="container">
                 <form action="login" method="post">
                     <input id="originalUri" name="originalUri" type="hidden">
-                    <div class="form-group row">
+                    <div class="form-group row mb-2">
                         <label htmlFor="username" class="col-form-label col-3 mr-2">Username:</label>
                         <div class="col-8">
                             <input id="username" class="form-control" type="text" name="username">
                         </div>
                     </div>
-                    <div class="form-group row">
+                    <div class="form-group row mb-2">
                         <label htmlFor="password" class="col-form-label col-3 mr-2">Password:</label>
                         <div class="col-8">
                             <input id="password" class="form-control" type="password" name="password">
@@ -42,9 +42,6 @@ <h1>Authentication service login</h1>
         </div>
 
         <!-- Optional JavaScript -->
-        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
     </body>
 </html>
diff --git a/authservice/authservice.web.security/src/main/resources/web/password.html b/authservice/authservice.web.security/src/main/resources/web/password.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <!-- Bootstrap CSS -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
         <title>Change password for current user</title>
 
         <!-- open-iconic icons for bootstrap -->
@@ -39,13 +39,13 @@ <h1>Change password for current user</h1>
             </header>
             <div class="container">
                 <form method="post">
-                    <div class="form-group row">
+                    <div class="form-group row mb-2">
                         <label htmlFor="password1" class="col-form-label col-3 mr-2">Password:</label>
                         <div class="col-8">
                             <input id="password1" class="form-control" type="password" name="password1">
                         </div>
                     </div>
-                    <div class="form-group row">
+                    <div class="form-group row mb-2">
                         <label htmlFor="password2" class="col-form-label col-3 mr-2">Repeat password:</label>
                         <div class="col-8">
                             <input id="password2" class="form-control" type="password" name="password2">
@@ -62,9 +62,6 @@ <h1>Change password for current user</h1>
         </div>
 
         <!-- Optional JavaScript -->
-        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
     </body>
 </html>
diff --git a/authservice/authservice.web.security/src/main/resources/web/unauthorized.html b/authservice/authservice.web.security/src/main/resources/web/unauthorized.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <!-- Bootstrap CSS -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
         <title>Change password for current user</title>
 
         <!-- open-iconic icons for bootstrap -->
@@ -43,9 +43,6 @@ <h1>Unauthorized</h1>
         </div>
 
         <!-- Optional JavaScript -->
-        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
     </body>
 </html>
diff --git a/authservice/authservice.web.security/src/main/resources/web/user.html b/authservice/authservice.web.security/src/main/resources/web/user.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <!-- Bootstrap CSS -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
         <title>Change information for current user</title>
 
         <!-- open-iconic icons for bootstrap -->
@@ -39,19 +39,19 @@ <h1>Change information for current user</h1>
             </header>
             <div class="container">
                 <form method="post">
-                    <div class="form-group row">
+                    <div class="form-group row mb-2">
                         <label htmlFor="email" class="col-form-label col-3 mr-2">Email:</label>
                         <div class="col-8">
                             <input id="email" class="form-control" type="text" name="email">
                         </div>
                     </div>
-                    <div class="form-group row">
+                    <div class="form-group row mb-2">
                         <label htmlFor="firstname" class="col-form-label col-3 mr-2">First name:</label>
                         <div class="col-8">
                             <input id="firstname" class="form-control" type="text" name="firstname">
                         </div>
                     </div>
-                    <div class="form-group row">
+                    <div class="form-group row mb-2">
                         <label htmlFor="lastname" class="col-form-label col-3 mr-2">Last name:</label>
                         <div class="col-8">
                             <input id="lastname" class="form-control" type="text" name="lastname">
@@ -68,9 +68,6 @@ <h1>Change information for current user</h1>
         </div>
 
         <!-- Optional JavaScript -->
-        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
     </body>
 </html>
diff --git a/...vice/authservice.web.users.frontend/src/main/frontend/src/components/bootstrap/FormRow.js b/...vice/authservice.web.users.frontend/src/main/frontend/src/components/bootstrap/FormRow.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function FormRow(props) {
     return (
-        <div className="form-group row">
+        <div className="form-group row mb-2">
             {props.children}
         </div>
     );

diff --git a/...hservice.web.users.frontend/src/main/frontend/src/components/bootstrap/StyledLinkRight.js b/...hservice.web.users.frontend/src/main/frontend/src/components/bootstrap/StyledLinkRight.js
@@ -4,7 +4,7 @@ import ChevronRight from './ChevronRight';
 
 export default function StyledLinkRight(props) {
     return (
-        <Link className="btn btn-block btn-primary mb-0 right-align-cell" to={props.to} >
+        <Link className="btn btn-block btn-primary mb-2 right-align-cell" to={props.to} >
             {props.children} &nbsp;<ChevronRight/>
         </Link>
     );

diff --git a/authservice/authservice.web.users.frontend/src/main/resources/index.html b/authservice/authservice.web.users.frontend/src/main/resources/index.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <!-- Bootstrap CSS -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 
         <!-- open-iconic icons for bootstrap -->
         <link href="/authservice/useradmin/open-iconic/font/css/open-iconic-bootstrap.min.css" rel="stylesheet">
@@ -18,9 +18,6 @@
         <noscript>This webpage requires javascript in the browser!</noscript>
 
         <!-- Optional JavaScript -->
-        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
     </body>
 </html>