vue+flask 시작. 남이 만든 bootstrap 페이지 가져다가 쓰기.

기본적인 부트스트랩 연동은 http://qkqhxla1.tistory.com/964 에서 다뤘었다. 그런데... 나처럼 초보들은 저런게 있어도 이쁘게 화면배치를 잘 못한다. http://qkqhxla1.tistory.com/965 에서 아주 기본적인 부트스트랩을 사용해서 로그인 페이지를 만들었었는데, 너무... 그렇다. 디자인을 아무리 못한다고 해도, 기능구현에 초점을 맞췄다고 해도 저건 아니다 싶을정도로 안이쁘다.

..... 그래서 기능구현이 더 급함에도 불구하고 로그인 페이지 디자인 개선에 나섰다. 저렇게 메뉴 따로 폼 따로 있는거말고 로그인 페이지 따로 이렇게 큰 컴포넌트? 단위로 있는 부트스트랩 예시 페이지가 당연히 있을것같아서 동기들한테 정보를 구했고, https://bootsnipp.com/ 페이지를 얻을수 있었다.

여기서 login관련으로 검색을 하다 https://bootsnipp.com/snippets/featured/google-style-login-extended-with-html5-localstorage 를 찾을수 있었다. 적당히 예쁘다.

이제 내 뷰 페이지에 집어넣어야 하는데 html만 넣으면 안된다. 그래서 또 how to apply css in vue 등으로 구글링을 해보니 동영상이 나왔다. https://www.youtube.com/watch?v=u9CsdaFBw6o

위의 유투브를 보고 따라넣었다.

static안에 css, js폴더를 만들고 bootsnipp_login.css와 bootsnipp_login.js를 넣었다. 이것들은 위 로그인페이지 예시에 있는 css와 js파일을 그대로 복사한거다.

그리고.. Login.vue.

<template>
  <div>
  <link href="/static/css/bootsnipp_login.css" rel="stylesheet">
  <script src="/static/js/bootsnipp_login.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <!------ Include the above in your HEAD tag ---------->
  <!--
    you can substitue the span of reauth email for a input with the email and
    include the remember me checkbox
    -->
    <div class="container">
        <div class="card card-container">
             <!--<img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" />-->
            <img id="profile-img" class="profile-img-card" src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" />
            <p id="profile-name" class="profile-name-card"></p>
            <form class="form-signin">
                <span id="reauth-email" class="reauth-email"></span>
                <input type="text" id="inputEmail" v-model="credentials.username" class="form-control" placeholder="Coupang ldap id" required autofocus>
                <input type="password" id="inputPassword" v-model="credentials.password" class="form-control" placeholder="Coupang ldap password" required>
                <div id="remember" class="checkbox">
                    <label>
                        <input type="checkbox" value="remember-me"> Remember me
                    </label>
                </div>
                <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" v-on:click="login">Sign in</button>
            </form><!-- /form -->
            <a href="#" class="forgot-password">
                Forgot the password?
            </a>
        </div><!-- /card-container -->
    </div><!-- /container -->
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      credentials: {
        username: '',
        password: ''
      },
      error_msg: ''
    }
  },
  methods: {
    login: function () {
      let LdapInfo = {
        ldap_id: this.credentials.username,
        ldap_pw: this.credentials.password
      }
      this.$axios.post(`/api/login`, LdapInfo).then((response) => {
        alert(response.data['user_name'] + '로 로그인했습니다!')
        this.$store.dispatch('login', {
          user_name: response.data['user_name'],
          token: response.data['access_token'],
          refresh_token: response.data['refresh_token']
        })
      }).catch((error) => {
        alert('error : ' + error.response.data['msg'])
      })
    }
  }
}
</script>

<style scoped>

</style>

<link href="/static/css/bootsnipp_login.css" rel="stylesheet">

<script src="/static/js/bootsnipp_login.js"></script>

두줄로 파일을 임포트했고, 아래 <div class="container">부분은 로그인 폼 부분이다.

로그인 폼 내부에서 뷰에서 가져다가 쓸 v-model이나 v-on:click등 추가하고 이름을 몇개 바꾸었다.

그렇게 예쁘지는 않은데 이전보다는 더 나아졌다.