fix login form

yhornisse / bremer

Browse code fix login form master
1 parent 1716b37 commit 8ea45a28d77d38b9d153e0c399a23404d69a1a85 yhornisse authored on 12 Aug

Patch

Showing 6 changed files

Ignore Space Show notes View src/main/kotlin/config/BremerConfig.kt
/* * Copyright (c) 2023. yo-saito. All Rights Reserved. / package net.piedpiper.bremer.config import net.piedpiper.bremer.service.LoginService import org.apache.logging.log4j.LogManager import org.apache.logging.log4j.Logger import org.springframework.beans.factory.annotation.Qualifier import org.springframework.context.annotation.Bean import org.springframework.context.annotation.Configuration import org.springframework.security.config.annotation.web.builders.HttpSecurity import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder import org.springframework.security.crypto.password.PasswordEncoder import org.springframework.security.web.SecurityFilterChain import org.springframework.web.filter.ForwardedHeaderFilter import kotlin.reflect.KProperty @Configuration class AppConfig { @Bean("bremer.PasswordEncoder") fun passwordEncoder(): PasswordEncoder = BCryptPasswordEncoder() @Bean fun forwardedHeaderFilter(): ForwardedHeaderFilter = ForwardedHeaderFilter() } @Configuration @EnableWebSecurity class WebSecurityConfig( @Qualifier("bremer.service.LoginService") private val loginService: LoginService ) { @Bean fun securityFilterChain(http: HttpSecurity): SecurityFilterChain { http.authorizeHttpRequests { authorize -> authorize .requestMatchers( "/bremer/login", "/bremer/login.html", "/bremer/icon/" ).permitAll() .anyRequest().authenticated() }.formLogin { login -> login.loginPage("/bremer/login.html").permitAll() .loginProcessingUrl("/bremer/login").permitAll() .usernameParameter("id") .passwordParameter("password") .defaultSuccessUrl("/bremer/hello.html") .failureUrl("/bremer/login.html?failed") }.logout { logout -> logout .logoutUrl("/bremer/logout") .deleteCookies("JSESSIONID") .invalidateHttpSession(true) .logoutSuccessUrl("/bremer/login.html?logout") } .csrf { it.disable() } .userDetailsService(loginService) return http.build() } } class Log { companion object { private val log = LogManager.getLogger(Log::class.java) } operator fun getValue(thisRef: Any, property: KProperty<>): Logger = log } / * Copyright (c) 2023. yo-saito. All Rights Reserved. / package net.piedpiper.bremer.config import net.piedpiper.bremer.service.LoginService import org.apache.logging.log4j.LogManager import org.apache.logging.log4j.Logger import org.springframework.beans.factory.annotation.Qualifier import org.springframework.context.annotation.Bean import org.springframework.context.annotation.Configuration import org.springframework.security.config.annotation.web.builders.HttpSecurity import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder import org.springframework.security.crypto.password.PasswordEncoder import org.springframework.security.web.SecurityFilterChain import org.springframework.web.filter.ForwardedHeaderFilter import kotlin.reflect.KProperty @Configuration class AppConfig { @Bean("bremer.PasswordEncoder") fun passwordEncoder(): PasswordEncoder = BCryptPasswordEncoder() @Bean fun forwardedHeaderFilter(): ForwardedHeaderFilter = ForwardedHeaderFilter() } @Configuration @EnableWebSecurity class WebSecurityConfig( @Qualifier("bremer.service.LoginService") private val loginService: LoginService ) { @Bean fun securityFilterChain(http: HttpSecurity): SecurityFilterChain { http.authorizeHttpRequests { authorize -> authorize .requestMatchers( "/bremer/login", "/bremer/login.html" ).permitAll() .anyRequest().authenticated() }.formLogin { login -> login.loginPage("/bremer/login.html").permitAll() .loginProcessingUrl("/bremer/login").permitAll() .usernameParameter("id") .passwordParameter("password") .defaultSuccessUrl("/bremer/hello.html") .failureUrl("/bremer/login.html?failed") }.logout { logout -> logout .logoutUrl("/bremer/logout") .deleteCookies("JSESSIONID") .invalidateHttpSession(true) .logoutSuccessUrl("/bremer/login.html?logout") } .csrf { it.disable() } .userDetailsService(loginService) return http.build() } } class Log { companion object { private val log = LogManager.getLogger(Log::class.java) } operator fun getValue(thisRef: Any, property: KProperty<>): Logger = log }

Ignore Space Show notes View

src/main/kotlin/config/BremerConfig.kt

/*
 * Copyright (c) 2023. yo-saito. All Rights Reserved.
 */

package net.piedpiper.bremer.config

import net.piedpiper.bremer.service.LoginService
import org.apache.logging.log4j.LogManager
import org.apache.logging.log4j.Logger
import org.springframework.beans.factory.annotation.Qualifier
import org.springframework.context.annotation.Bean
import org.springframework.context.annotation.Configuration
import org.springframework.security.config.annotation.web.builders.HttpSecurity
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder
import org.springframework.security.crypto.password.PasswordEncoder
import org.springframework.security.web.SecurityFilterChain
import org.springframework.web.filter.ForwardedHeaderFilter
import kotlin.reflect.KProperty

@Configuration
class AppConfig {
    @Bean("bremer.PasswordEncoder")
    fun passwordEncoder(): PasswordEncoder = BCryptPasswordEncoder()

@Bean
    fun forwardedHeaderFilter(): ForwardedHeaderFilter = ForwardedHeaderFilter()
}

@Configuration
@EnableWebSecurity
class WebSecurityConfig(
    @Qualifier("bremer.service.LoginService")
    private val loginService: LoginService
) {
    @Bean
    fun securityFilterChain(http: HttpSecurity): SecurityFilterChain {
        http.authorizeHttpRequests { authorize ->
            authorize
                .requestMatchers(
                    "/bremer/login",
                    "/bremer/login.html",
                    "/bremer/icon/*"
                ).permitAll()
                .anyRequest().authenticated()
        }.formLogin { login ->
            login.loginPage("/bremer/login.html").permitAll()
                .loginProcessingUrl("/bremer/login").permitAll()
                .usernameParameter("id")
                .passwordParameter("password")
                .defaultSuccessUrl("/bremer/hello.html")
                .failureUrl("/bremer/login.html?failed")
        }.logout { logout ->
            logout
                .logoutUrl("/bremer/logout")
                .deleteCookies("JSESSIONID")
                .invalidateHttpSession(true)
                .logoutSuccessUrl("/bremer/login.html?logout")
        }
            .csrf { it.disable() }
            .userDetailsService(loginService)
        return http.build()
    }
}

class Log {
    companion object {
        private val log = LogManager.getLogger(Log::class.java)
    }

operator fun getValue(thisRef: Any, property: KProperty<*>): Logger = log
}

/*
 * Copyright (c) 2023. yo-saito. All Rights Reserved.
 */

package net.piedpiper.bremer.config

@Configuration
class AppConfig {
    @Bean("bremer.PasswordEncoder")
    fun passwordEncoder(): PasswordEncoder = BCryptPasswordEncoder()

@Bean
    fun forwardedHeaderFilter(): ForwardedHeaderFilter = ForwardedHeaderFilter()
}

@Configuration
@EnableWebSecurity
class WebSecurityConfig(
    @Qualifier("bremer.service.LoginService")
    private val loginService: LoginService
) {
    @Bean
    fun securityFilterChain(http: HttpSecurity): SecurityFilterChain {
        http.authorizeHttpRequests { authorize ->
            authorize
                .requestMatchers(
                    "/bremer/login",
                    "/bremer/login.html"
                ).permitAll()
                .anyRequest().authenticated()
        }.formLogin { login ->
            login.loginPage("/bremer/login.html").permitAll()
                .loginProcessingUrl("/bremer/login").permitAll()
                .usernameParameter("id")
                .passwordParameter("password")
                .defaultSuccessUrl("/bremer/hello.html")
                .failureUrl("/bremer/login.html?failed")
        }.logout { logout ->
            logout
                .logoutUrl("/bremer/logout")
                .deleteCookies("JSESSIONID")
                .invalidateHttpSession(true)
                .logoutSuccessUrl("/bremer/login.html?logout")
        }
            .csrf { it.disable() }
            .userDetailsService(loginService)
        return http.build()
    }
}

class Log {
    companion object {
        private val log = LogManager.getLogger(Log::class.java)
    }

operator fun getValue(thisRef: Any, property: KProperty<*>): Logger = log
}

Ignore Space Show notes View src/main/resources/static/bremer/icon/bremer.png 0 → 100644

Ignore Space Show notes View src/main/resources/static/bremer/icon/lock.png 0 → 100644

Ignore Space Show notes View src/main/resources/static/bremer/icon/login.png 0 → 100644

Ignore Space Show notes View src/main/resources/static/bremer/icon/user.png 0 → 100644

Ignore Space Show notes View src/main/resources/static/bremer/login.html
<!-- ~ Copyright (c) 2023. yo-saito. All Rights Reserved. --> <!doctype html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .absolute { position: absolute; } .relative { position: relative; } div img, div input { display: inline-block; } h1 { background-color: #333333; color: white; margin: 0; padding: 0.5rem; } h1 img { height: 2.5rem; } .icon-slot { z-index: 2; margin-top: 0.5rem; margin-left: 0.5rem; } .icon-slot { height: 1rem; } .input-text { padding-left: 2.3rem; height: 2rem; border: none; outline: none; border-bottom: 2px solid #333333; background-color: white; width: 90%; } .button-area { width: 100%; text-align: center; margin: 1rem auto 0 auto; } .button-area button { width: 90%; height: 3rem; font-size: 1.5rem; color: white; } .button-area img { margin-top: 0.5rem; height: 1.5rem; } </style> <script> window.onload = function () { const searchParams = new URLSearchParams(window.location.search) if (searchParams.has('failed')) { document.getElementById("warn").innerText = "ログインに失敗しました" } } </script> </head> <body style="margin: 0; padding: 0;"> <h1> <img src="/bremer/icon/bremer.png"> Bremer App </h1> <form method="POST" action="/bremer/login" style="padding: 1rem;"> <div id="warn" style="color: red;"> </div> <div style="margin:1rem auto 0 auto;"> <div class="relative"> <img class="icon-slot absolute" src="/bremer/icon/user.png"> <input type="text" name="id" placeholder="User ID" class="input-text"/> </div> </div> <div style="margin:1rem auto 0 auto;"> <div class="relative"> <img class="icon-slot absolute" src="/bremer/icon/lock.png"> <input type="password" name="password" placeholder="Password" class="input-text"/> </div> </div> <div class="button-area"> <button type="submit" style="width: 80%; background-color: #333333;"> <img src="/bremer/icon/login.png"> ログイン </button> </div> </form> </body> </html> <!-- ~ Copyright (c) 2023. yo-saito. All Rights Reserved. --> <!doctype html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> window.onload = function () { const searchParams = new URLSearchParams(window.location.search) if (searchParams.has('failed')) { document.getElementById("warn").innerText = "ログインに失敗しました" } } </script> </head> <body style="margin: 0; padding: 0;"> <h1 style="background-color: #9999FF; margin: 0; padding: 0.5rem;">Bremer</h1> <form method="POST" action="/bremer/login"> <div id="warn" style="color: red;"> </div> <div> <div>ID</div> <div><input type="text" name="id" value="" style="width: 80%"/></div> <div style="margin-top: 0.5rem; width: 80%;">パスワード</div> <div><input type="password" name="password" value="" style="width: 80%"/></div> </div> <div style="margin-top:1rem;"> <button type="submit" style="width: 80%">ログイン</button> </div> </form> </body> </html>

Ignore Space Show notes View

src/main/resources/static/bremer/login.html

.relative {
      position: relative;
    }

div img, div input {
      display: inline-block;
    }

h1 {
      background-color: #333333;
      color: white;
      margin: 0;
      padding: 0.5rem;
    }

h1 img {
      height: 2.5rem;
    }

.icon-slot {
      z-index: 2;
      margin-top: 0.5rem;
      margin-left: 0.5rem;
    }

.icon-slot {
      height: 1rem;
    }

.input-text {
      padding-left: 2.3rem;
      height: 2rem;
      border: none;
      outline: none;
      border-bottom: 2px solid #333333;
      background-color: white;
      width: 90%;
    }

.button-area {
      width: 100%;
      text-align: center;
      margin: 1rem auto 0 auto;
    }

.button-area button {
      width: 90%;
      height: 3rem;
      font-size: 1.5rem;
      color: white;
    }

.button-area img {
      margin-top: 0.5rem;
      height: 1.5rem;
    }
  </style>
  <script>
    window.onload = function () {
      const searchParams = new URLSearchParams(window.location.search)
      if (searchParams.has('failed')) {
        document.getElementById("warn").innerText = "ログインに失敗しました"
      }
    }
  </script>
</head>
<body style="margin: 0; padding: 0;">
<h1>
  <img src="/bremer/icon/bremer.png">
  Bremer App
</h1>
<form method="POST" action="/bremer/login" style="padding: 1rem;">
  <div id="warn" style="color: red;">
  </div>
  <div style="margin:1rem auto 0 auto;">
    <div class="relative">
      <img class="icon-slot absolute" src="/bremer/icon/user.png">
      <input type="text" name="id" placeholder="User ID" class="input-text"/>
    </div>
  </div>
  <div style="margin:1rem auto 0 auto;">
    <div class="relative">
      <img class="icon-slot absolute" src="/bremer/icon/lock.png">
      <input type="password" name="password" placeholder="Password" class="input-text"/>
    </div>
  </div>
  <div class="button-area">
    <button type="submit" style="width: 80%; background-color: #333333;">
      <img src="/bremer/icon/login.png">
      ログイン
    </button>
  </div>
</form>
</body>
</html>

<!doctype html>
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
    window.onload = function () {
      const searchParams = new URLSearchParams(window.location.search)
      if (searchParams.has('failed')) {
        document.getElementById("warn").innerText = "ログインに失敗しました"
      }
    }
  </script>
</head>
<body style="margin: 0; padding: 0;">
<h1 style="background-color: #9999FF; margin: 0; padding: 0.5rem;">Bremer</h1>
<form method="POST" action="/bremer/login">
  <div id="warn" style="color: red;">
  </div>
  <div>
    <div>ID</div>
    <div><input type="text" name="id" value="" style="width: 80%"/></div>
    <div style="margin-top: 0.5rem; width: 80%;">パスワード</div>
    <div><input type="password" name="password" value="" style="width: 80%"/></div>
  </div>
  <div style="margin-top:1rem;">
    <button type="submit" style="width: 80%">ログイン</button>
  </div>
</form>
</body>
</html>

Show line notes below