Upgrade to bootstrap 4 (#119)

mohiva · Jan 7, 2020 · 9dedd0c · 9dedd0c
1 parent 97d6876
commit 9dedd0c
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 61 deletions.
diff --git a/app/views/changePassword.scala.html b/app/views/changePassword.scala.html
@@ -3,20 +3,20 @@
 @import play.api.mvc.RequestHeader
 @import org.webjars.play.WebJarsUtil
 @import controllers.AssetsFinder
-@import b3.inline.fieldConstructor
+@import b4.inline.fieldConstructor
 
 @this()(implicit webJarsUtil: WebJarsUtil, assets: AssetsFinder)
 @(changePasswordForm: Form[(String, String)], user: models.User)(implicit request: RequestHeader, messages: Messages)
 
-@implicitFieldConstructor = @{ b3.vertical.fieldConstructor() }
+@implicitFieldConstructor = @{ b4.vertical.fieldConstructor() }
 
 @main(messages("change.password.title"), Some(user)) {
     <fieldset class="col-md-6 col-md-offset-3">
         <legend>@messages("change.password")</legend>
         @helper.form(action = controllers.routes.ChangePasswordController.submit, 'autocomplete -> "off") {
             <p class="info">@messages("strong.password.info")</p>
             @helper.CSRF.formField
-            @b3.password(changePasswordForm("current-password"), '_hiddenLabel -> messages("current.password"), 'placeholder -> messages("current.password"), 'class -> "form-control input-lg")
+            @b4.password(changePasswordForm("current-password"), '_hiddenLabel -> messages("current.password"), 'placeholder -> messages("current.password"), 'class -> "form-control input-lg")
             @passwordStrength(changePasswordForm("new-password"), '_hiddenLabel -> messages("new.password"), 'placeholder -> messages("new.password"), 'class -> "form-control input-lg")
             <div class="form-group">
                 <div>

diff --git a/app/views/forgotPassword.scala.html b/app/views/forgotPassword.scala.html
@@ -7,15 +7,15 @@
 @this()(implicit webJarsUtil: WebJarsUtil, assets: AssetsFinder)
 @(forgotPasswordForm: Form[String])(implicit request: RequestHeader, messages: Messages)
 
-@implicitFieldConstructor = @{ b3.vertical.fieldConstructor() }
+@implicitFieldConstructor = @{ b4.vertical.fieldConstructor() }
 
 @main(messages("forgot.password.title")) {
     <fieldset class="col-md-6 col-md-offset-3">
         <legend>@messages("forgot.password")</legend>
         @helper.form(action = controllers.routes.ForgotPasswordController.submit(), 'autocomplete -> "off") {
             <p class="info">@messages("forgot.password.info")</p>
             @helper.CSRF.formField
-            @b3.text(forgotPasswordForm("email"), '_hiddenLabel -> messages("email"), 'placeholder -> messages("email"), 'class -> "form-control input-lg")
+            @b4.text(forgotPasswordForm("email"), '_hiddenLabel -> messages("email"), 'placeholder -> messages("email"), 'class -> "form-control input-lg")
             <div class="form-group">
                 <div>
                     <button id="submit" type="submit" value="submit" class="btn btn-lg btn-primary btn-block">@messages("send")</button>

diff --git a/app/views/home.scala.html b/app/views/home.scala.html
@@ -11,7 +11,7 @@
 @(user: models.User, totpInfoOpt: Option[GoogleTotpInfo], totpDataOpt: Option[(Form[Data], GoogleTotpCredentials)] = None)(implicit request: RequestHeader, messages: Messages)
 
 @implicitFieldConstructor = @{
-    b3.vertical.fieldConstructor()
+    b4.vertical.fieldConstructor()
 }
 
 @main(messages("home.title"), Some(user)) {
@@ -66,12 +66,12 @@ <h2>@messages("totp.recovery.tokens.title")</h2>
                     </ul>
                     @helper.form(action = controllers.routes.TotpController.enableTotpSubmit()) {
                         @helper.CSRF.formField
-                        @b3.text(totpForm("verificationCode"), '_hiddenLabel -> messages("totp.verification.code    "), 'placeholder -> messages("totp.verification.code"), 'autocomplete -> "off", 'class -> "form-control input-lg")
-                        @b3.hidden(totpForm("sharedKey"))
+                        @b4.text(totpForm("verificationCode"), '_hiddenLabel -> messages("totp.verification.code    "), 'placeholder -> messages("totp.verification.code"), 'autocomplete -> "off", 'class -> "form-control input-lg")
+                        @b4.hidden(totpForm("sharedKey"))
                         @helper.repeat(totpForm("scratchCodes"), min = 1) { scratchCodeField =>
-                            @b3.hidden(scratchCodeField("hasher"))
-                            @b3.hidden(scratchCodeField("password"))
-                            @b3.hidden(scratchCodeField("salt"))
+                            @b4.hidden(scratchCodeField("hasher"))
+                            @b4.hidden(scratchCodeField("password"))
+                            @b4.hidden(scratchCodeField("salt"))
                         }
                         <div class="form-group">
                             <div>

diff --git a/app/views/main.scala.html b/app/views/main.scala.html
@@ -18,7 +18,6 @@
         <link @{CSPNonce.attr} href="//fonts.googleapis.com/css?family=Roboto|Montserrat:400,700|Open+Sans:400,300,600" rel="stylesheet">
         <link @{CSPNonce.attr} href="//cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet">
         @webJarsUtil.locate("bootstrap.min.css").css(CSPNonce.attrMap)
-        @webJarsUtil.locate("bootstrap-theme.min.css").css(CSPNonce.attrMap)
         <link @{CSPNonce.attr} rel="stylesheet" href="@assets.path("styles/main.css")">
             <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
             <!--[if lt IE 9]>
@@ -27,36 +26,36 @@
             <![endif]-->
     </head>
     <body>
-        <header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
-            <div class="container">
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                        <span class="sr-only">@messages("toggle.navigation")</span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                    </button>
-                    <a class="navbar-brand" href="@controllers.routes.ApplicationController.index">Silhouette Seed Template</a>
+        <header>
+            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <a class="navbar-brand" href="@controllers.routes.ApplicationController.index">Silhouette Seed Template</a>
+
+                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+                    <div class="navbar-nav">
+                        <a class="nav-item nav-link" href="@controllers.routes.ApplicationController.index">@messages("home")</a>
+                        <a class="nav-item nav-link" href="https://github.com/mohiva/play-silhouette-seed">GitHub</a>
+                    </div>
                 </div>
-                <nav class="collapse navbar-collapse">
-                    <ul class="nav navbar-nav">
-                        <li><a href="@controllers.routes.ApplicationController.index">@messages("home")</a></li>
-                        <li><a href="https://github.com/mohiva/play-silhouette-seed">GitHub</a></li>
-                    </ul>
-                    <ul class="nav navbar-nav navbar-right">
+
+                <div class="collapse navbar-collapse" id="navbarNavAltMarkup2">
+                    <div class="navbar-nav">
                         @user.map { u =>
-                            <li><a href="@controllers.routes.ApplicationController.index">@u.name</a></li>
-                            @if(u.loginInfo.providerID == com.mohiva.play.silhouette.impl.providers.CredentialsProvider.ID) {
-                                <li><a href="@controllers.routes.ChangePasswordController.view">@messages("change.password")</a></li>
-                            }
-                            <li><a href="@controllers.routes.ApplicationController.signOut">@messages("sign.out")</a></li>
+                        <a class="nav-link" href="@controllers.routes.ApplicationController.index">@u.name</a>
+                        @if(u.loginInfo.providerID == com.mohiva.play.silhouette.impl.providers.CredentialsProvider.ID) {
+                        <a class="nav-item nav-link" href="@controllers.routes.ChangePasswordController.view">@messages("change.password")</a>
+                        }
+                        <a class="nav-item nav-link" href="@controllers.routes.ApplicationController.signOut">@messages("sign.out")</a>
                         }.getOrElse {
-                            <li><a href="@controllers.routes.SignInController.view">@messages("sign.in")</a></li>
-                            <li><a href="@controllers.routes.SignUpController.view">@messages("sign.up")</a></li>
+                        <a class="nav-item nav-link" href="@controllers.routes.SignInController.view">@messages("sign.in")</a>
+                        <a class="nav-item nav-link" href="@controllers.routes.SignUpController.view">@messages("sign.up")</a>
                         }
-                    </ul>
-                </nav>
-            </div>
+                    </div>
+                </div>
+
+            </nav>
         </header>
         <main class="container">
             <div class="starter-template row">

diff --git a/app/views/passwordStrength.scala.html b/app/views/passwordStrength.scala.html
@@ -3,10 +3,10 @@
 
 @(field: Field, options: (Symbol, Any)*)(implicit messagesProvider: MessagesProvider)
 
-@implicitFieldConstructor = @{ b3.vertical.fieldConstructor() }
+@implicitFieldConstructor = @{ b4.vertical.fieldConstructor() }
 
 <section>
-  @b3.password(field, (Symbol("data-pwd"), "true") +: options:_*)
+  @b4.password(field, (Symbol("data-pwd"), "true") +: options:_*)
 
   <meter max="4" id="password-strength-meter"></meter>
   <p id="password-strength-text"></p>

diff --git a/app/views/signIn.scala.html b/app/views/signIn.scala.html
@@ -9,16 +9,16 @@
 @this()(implicit webJarsUtil: WebJarsUtil, assets: AssetsFinder)
 @(signInForm: Form[Data], socialProviders: SocialProviderRegistry)(implicit request: RequestHeader, messages: Messages)
 
-@implicitFieldConstructor = @{ b3.vertical.fieldConstructor() }
+@implicitFieldConstructor = @{ b4.vertical.fieldConstructor() }
 
 @main(messages("sign.in.title")) {
     <fieldset class="col-md-6 col-md-offset-3">
         <legend>@messages("sign.in.credentials")</legend>
         @helper.form(action = controllers.routes.SignInController.submit()) {
             @helper.CSRF.formField
-            @b3.email(signInForm("email"), '_hiddenLabel -> messages("email"), 'placeholder -> messages("email"), 'class -> "form-control input-lg")
-            @b3.password(signInForm("password"), '_hiddenLabel -> messages("password"), 'placeholder -> messages("password"), 'class -> "form-control input-lg")
-            @b3.checkbox(signInForm("rememberMe"), '_text -> messages("remember.me"), 'checked -> true)
+            @b4.email(signInForm("email"), '_hiddenLabel -> messages("email"), 'placeholder -> messages("email"), 'class -> "form-control input-lg")
+            @b4.password(signInForm("password"), '_hiddenLabel -> messages("password"), 'placeholder -> messages("password"), 'class -> "form-control input-lg")
+            @b4.checkbox(signInForm("rememberMe"), '_text -> messages("remember.me"), 'checked -> true)
             <div class="form-group">
                 <div>
                     <button id="submit" type="submit" value="submit" class="btn btn-lg btn-primary btn-block">@messages("sign.in")</button>

diff --git a/app/views/signUp.scala.html b/app/views/signUp.scala.html
@@ -8,16 +8,16 @@
 @this()(implicit webJarsUtil: WebJarsUtil, assets: AssetsFinder)
 @(signUpForm: Form[Data])(implicit request: RequestHeader, messages: Messages)
 
-@implicitFieldConstructor = @{ b3.vertical.fieldConstructor() }
+@implicitFieldConstructor = @{ b4.vertical.fieldConstructor() }
 
 @main(messages("sign.up.title")) {
     <fieldset class="col-md-6 col-md-offset-3">
         <legend>@messages("sign.up.account")</legend>
         @helper.form(action = controllers.routes.SignUpController.submit()) {
             @helper.CSRF.formField
-            @b3.text(signUpForm("firstName"), '_hiddenLabel -> messages("first.name"), 'placeholder -> messages("first.name"), 'class -> "form-control input-lg")
-            @b3.text(signUpForm("lastName"), '_hiddenLabel -> messages("last.name"), 'placeholder -> messages("last.name"), 'class -> "form-control input-lg")
-            @b3.text(signUpForm("email"), '_hiddenLabel -> messages("email"), 'placeholder -> messages("email"), 'class -> "form-control input-lg")
+            @b4.text(signUpForm("firstName"), '_hiddenLabel -> messages("first.name"), 'placeholder -> messages("first.name"), 'class -> "form-control input-lg")
+            @b4.text(signUpForm("lastName"), '_hiddenLabel -> messages("last.name"), 'placeholder -> messages("last.name"), 'class -> "form-control input-lg")
+            @b4.text(signUpForm("email"), '_hiddenLabel -> messages("email"), 'placeholder -> messages("email"), 'class -> "form-control input-lg")
             @passwordStrength(signUpForm("password"), '_hiddenLabel -> messages("password"), 'placeholder -> messages("password"), 'class -> "form-control input-lg")
             <div class="form-group">
                 <div>

diff --git a/app/views/totp.scala.html b/app/views/totp.scala.html
@@ -10,17 +10,17 @@
 @this()(implicit webJarsUtil: WebJarsUtil, assets: AssetsFinder)
 @(totpForm: Form[Data])(implicit request: RequestHeader, messages: Messages)
 
-@implicitFieldConstructor = @{ b3.vertical.fieldConstructor() }
+@implicitFieldConstructor = @{ b4.vertical.fieldConstructor() }
 
 @main(messages("sign.in.title")) {
     <fieldset class="col-md-6 col-md-offset-3">
         <legend>@messages("sign.in.totp")</legend>
         @helper.form(action = controllers.routes.TotpController.submit()) {
             @helper.CSRF.formField
-            @b3.text(totpForm("verificationCode"), '_hiddenLabel -> messages("totp.verification.code"), 'placeholder -> messages("totp.verification.code"), 'autocomplete -> "off", 'class -> "form-control input-lg")
-            @b3.hidden(totpForm("userID"))
-            @b3.hidden(totpForm("sharedKey"))
-            @b3.hidden(totpForm("rememberMe"))
+            @b4.text(totpForm("verificationCode"), '_hiddenLabel -> messages("totp.verification.code"), 'placeholder -> messages("totp.verification.code"), 'autocomplete -> "off", 'class -> "form-control input-lg")
+            @b4.hidden(totpForm("userID"))
+            @b4.hidden(totpForm("sharedKey"))
+            @b4.hidden(totpForm("rememberMe"))
             <div class="form-group">
                 <div>
                     <button id="submit" type="submit" value="submit" class="btn btn-lg btn-primary btn-block">@messages("totp.verify")</button>

diff --git a/app/views/totpRecovery.scala.html b/app/views/totpRecovery.scala.html
@@ -9,18 +9,18 @@
 @(totpRecoveryForm: Form[Data])(implicit request: RequestHeader, messages: Messages)
 
     @implicitFieldConstructor = @{
-        b3.vertical.fieldConstructor()
+        b4.vertical.fieldConstructor()
     }
 
     @main(messages("sign.in.title")) {
         <fieldset class="col-md-6 col-md-offset-3">
             <legend>@messages("sign.in.totp.recovery")</legend>
             @helper.form(action = controllers.routes.TotpRecoveryController.submit()) {
                 @helper.CSRF.formField
-                @b3.text(totpRecoveryForm("recoveryCode"), '_hiddenLabel -> messages("totp.recovery.code"), 'placeholder -> messages("totp.recovery.code"), 'autocomplete -> "off", 'class -> "form-control input-lg")
-                @b3.hidden(totpRecoveryForm("userID"))
-                @b3.hidden(totpRecoveryForm("sharedKey"))
-                @b3.hidden(totpRecoveryForm("rememberMe"))
+                @b4.text(totpRecoveryForm("recoveryCode"), '_hiddenLabel -> messages("totp.recovery.code"), 'placeholder -> messages("totp.recovery.code"), 'autocomplete -> "off", 'class -> "form-control input-lg")
+                @b4.hidden(totpRecoveryForm("userID"))
+                @b4.hidden(totpRecoveryForm("sharedKey"))
+                @b4.hidden(totpRecoveryForm("rememberMe"))
                 <div class="form-group">
                     <div>
                         <button id="submit" type="submit" value="submit" class="btn btn-lg btn-primary btn-block">@messages("totp.verify")</button>

diff --git a/build.sbt b/build.sbt
@@ -19,14 +19,14 @@ libraryDependencies ++= Seq(
   "com.mohiva" %% "play-silhouette-crypto-jca" % "6.1.0",
   "com.mohiva" %% "play-silhouette-totp" % "6.1.0",
   "org.webjars" %% "webjars-play" % "2.7.0",
-  "org.webjars" % "bootstrap" % "3.3.7-1" exclude("org.webjars", "jquery"),
+  "org.webjars" % "bootstrap" % "4.4.1" exclude("org.webjars", "jquery"),
   "org.webjars" % "jquery" % "3.2.1",
   "net.codingwell" %% "scala-guice" % "4.1.0",
   "com.iheart" %% "ficus" % "1.4.3",
   "com.typesafe.play" %% "play-mailer" % "7.0.0",
   "com.typesafe.play" %% "play-mailer-guice" % "7.0.0",
   "com.enragedginger" %% "akka-quartz-scheduler" % "1.6.1-akka-2.5.x",
-  "com.adrianhurt" %% "play-bootstrap" % "1.5-P27-B3-SNAPSHOT",
+  "com.adrianhurt" %% "play-bootstrap" % "1.5.1-P27-B4",
   "com.mohiva" %% "play-silhouette-testkit" % "6.1.0" % "test",
   specs2 % Test,
   ehcache,

diff --git a/public/styles/main.css b/public/styles/main.css
@@ -1,5 +1,4 @@
 body {
-    padding-top: 50px;
     font-size: 16px;
     background: #f5f7f9;
 }