<commit_before><template>
  <div v-if="token" class="logout">
    <Poptip trigger="hover" placement="bottom">
      <Tag type="dot" color="green">{{credentials.username}}</Tag>
      <div slot="content">
        <Button @click="logout" icon="logout">Logout</Button>
      </div>
    </Poptip>
  </div>
  <div v-else class="login">
    <Poptip placement="bottom-end">
      <Button class="login-button" icon="person">Login</Button>
      <div slot="content">
        <Form :model="credentials">
          <Form-item prop="username">
            <Input type="text" v-model="credentials.username" placeholder="Username">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </Form-item>
          <Form-item prop="password">
            <Input type="password" v-model="credentials.password" placeholder="Password">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
          </Form-item>
          <Form-item>
            <Button class="go-button" type="primary" @click="login">Go</Button>
          </Form-item>
        </Form>
      </div>
    </Poptip>
  </div>
</template>

<script>
  import {
    VUEX_ACTION_LOGIN,
    VUEX_ACTION_LOGOUT
  } from '../../js/constants/VuexConstants'

  export default {
    data () {
      return {
        credentials: {
          username: '',
          password: ''
        },
        token: ''
      }
    },
    methods: {
      login () {
        this.$store.dispatch(VUEX_ACTION_LOGIN, this.credentials)
      },
      logout () {
        this.$store.dispatch(VUEX_ACTION_LOGOUT)
        this.credentials = {
          username: '',
          password: ''
        }
      }
    },
    created () {
      this.token = this.$store.state.auth.token
      this.credentials.username = this.$store.state.user.username
      this.$store.watch(state => state.auth.token, newToken => {
        this.token = newToken
      })
    }
  }
</script>

<style scoped>
  .login {
    display: inline-block;
    float: right;
  }

  .logout {
    display: inline-block;
    float: right;
  }

  .go-button {
    float: right;
  }
</style><commit_msg>change login panel to modal<commit_after><template>
  <div class="login">
    <div v-if="token">
      <Tag type="dot" color="green">{{credentials.username}}</Tag>
      <Button @click="logout" icon="logout" size="small">Logout</Button>
    </div>
    <div v-else>
      <Button class="login-button" icon="person" size="small" @click="loginModal=true">Login</Button>
    </div>
    <Modal class="login-modal" v-model="loginModal" title="Login to Docker Hub" @on-ok="login">
      <Form :model="credentials" inline>
        <Form-item prop="username">
          <Input type="text" v-model="credentials.username" placeholder="Username">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </Form-item>
        <Form-item prop="password">
          <Input type="password" v-model="credentials.password" placeholder="Password">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
          </Input>
        </Form-item>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import {
    VUEX_ACTION_LOGIN,
    VUEX_ACTION_LOGOUT
  } from '../../js/constants/VuexConstants'

  export default {
    data () {
      return {
        loginModal: false,
        credentials: {
          username: '',
          password: ''
        },
        token: ''
      }
    },
    methods: {
      login () {
        this.$store.dispatch(VUEX_ACTION_LOGIN, this.credentials)
        this.loginModal = false
      },
      logout () {
        this.$store.dispatch(VUEX_ACTION_LOGOUT)
        this.credentials = {
          username: '',
          password: ''
        }
      }
    },
    created () {
      this.token = this.$store.state.auth.token
      this.credentials.username = this.$store.state.user.username
      this.$store.watch(state => state.auth.token, newToken => {
        this.token = newToken
      })
    }
  }
</script>

<style scoped>
  .login {
    display: inline-block;
    float: right;
  }

</style>
{'fraction_non_alphanumeric': 0.16295399515738498, 'fraction_numerical': 0.0, 'mean_word_length': 2.1486280487804876, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 83, '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': '4038562', 'n_tokens_mistral': 1294, 'n_tokens_neox': 1292, 'n_words': 220}