<commit_before><template>
<nav>
  <div class="nav-wrapper cyan">
    <a v-link="{ name: 'home' }"><span class="icon-cube logo"></span></a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a v-link="{ name: 'workshop' }">工作台</a></li>
      <li v-if="hasLogin"><a>{{ user.name }}</a></li>
      <li v-else><a @click="openLoginModal">登陆</a></li>
    </ul>
  </div>
  <!-- Modal Structure -->
  <div id="login" class="modal topbar__login">
    <div class="modal-content">
      <h4>登陆</h4>
      <form>
        <div class="input-field">
          <input placeholder="请输入邮箱" id="login-email" type="email"
            class="validate topbar__login__input" v-model="email">
          <label for="login-email">邮箱</label>
        </div>
        <div class="input-field">
          <input placeholder="请输入密码" id="login-password" type="password"
            class="validate topbar__login__input" v-model="password">
          <label for="login-password">密码</label>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button class="modal-action modal-close waves-effect waves-green btn-flat" @click="requestLogin">登陆</button>
    </div>
  </div>
</nav>
</template>

<script>
import request from 'superagent'
import $ from 'jquery'
import Materialize from 'Materialize'

import {
  login,
  logout
} from '../../vuex/actions'

export default {
  name: 'Topbar',

  vuex: {
    getters: {
      hasLogin: state => Object.keys(state.user).length > 0,
      user: state => state.user
    },
    actions: {
      login,
      logout
    }
  },

  data() {
    return {
      email: '',
      password: ''
    }
  },

  methods: {
    openLoginModal() {
      $('#login').openModal()
    },
    requestLogin() {
      request.post('/login')
      .send({ email: this.email, password: <PASSWORD> })
      .end((err, res) => {
        if (err || !res || !res.ok) {
          Materialize.toast(`登陆失败: ${err || '未知错误'}`, 4000)
          return
        } else {
          this.login(res.body)
        }
      })
    },
    requestLogout() {
      this.logout()
    }
  }
}
</script>

<style lang="stylus">
@require '../../../palette'

.logo
  font-size x-large
  vertical-align middle

.nav-wrapper
  padding 0 2%

.topbar__login
  color color-grey-darken-4
  input[type=email]&__input , input[type=password]&__input
    width 90%
</style><commit_msg>增加登出功能<commit_after><template>
<nav>
  <div class="nav-wrapper cyan">
    <a v-link="{ name: 'home' }"><span class="icon-cube logo"></span></a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li>
        <a v-link="{ name: 'workshop' }">工作台</a>
      </li>
      <li v-if="hasLogin">
        <a class="dropdown-button" data-activates="logout">{{ user.name }}</a>
      </li>
      <li v-else>
        <a @click="openLoginModal">登陆</a>
      </li>
    </ul>
  </div>
  <!-- Logout panel -->
  <ul id='logout' class='dropdown-content'>
    <li><a @click="requestLogout">登出</a></li>
  </ul>
  <!-- Login modal -->
  <div id="login" class="modal topbar__login">
    <div class="modal-content">
      <h4>登陆</h4>
      <form>
        <div class="input-field">
          <input placeholder="请输入邮箱" id="login-email" type="email"
            class="validate topbar__login__input" v-model="email">
          <label for="login-email">邮箱</label>
        </div>
        <div class="input-field">
          <input placeholder="请输入密码" id="login-password" type="password"
            class="validate topbar__login__input" v-model="password">
          <label for="login-password">密码</label>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button class="modal-action modal-close waves-effect waves-green btn-flat" @click="requestLogin">登陆</button>
    </div>
  </div>
</nav>
</template>

<script>
import request from 'superagent'
import $ from 'jquery'
import Materialize from 'Materialize'

import {
  login,
  logout
} from '../../vuex/actions'

export default {
  name: 'Topbar',

  vuex: {
    getters: {
      hasLogin: state => Object.keys(state.user).length > 0,
      user: state => state.user
    },
    actions: {
      login,
      logout
    }
  },

  data() {
    return {
      email: '',
      password: ''
    }
  },

  methods: {
    openLoginModal() {
      $('#login').openModal()
    },
    requestLogin() {
      request.post('/login')
      .send({ email: this.email, password: <PASSWORD>.password })
      .end((err, res) => {
        if (err || !res || !res.ok) {
          Materialize.toast(`登陆失败: ${err || '未知错误'}`, 4000)
          return
        } else {
          this.login(res.body)
        }
      })
    },
    requestLogout() {
      this.logout()
    }
  }
}
</script>

<style lang="stylus">
@require '../../../palette'

.logo
  font-size x-large
  vertical-align middle

.nav-wrapper
  padding 0 2%

.topbar
  &__login
    color color-grey-darken-4
    input[type=email]&__input , input[type=password]&__input
      width 90%
  &__logout
    background-color red
</style>
{'fraction_non_alphanumeric': 0.18803589232303092, 'fraction_numerical': 0.004785643070787637, 'mean_word_length': 2.3777777777777778, 'pattern_counts': {'":': 0, '<': 114, '<?xml version=': 0, '>': 122, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2757042', 'n_tokens_mistral': 1781, 'n_tokens_neox': 1798, 'n_words': 345}