feat: login-form

login-form/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="app" class="app">
+    <router-view/>
+  </div>
+</template>
+<style>
+@import url("https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css");
+* {
+  margin: 0;
+  padding: 0;
+}
+a {
+  text-decoration: none;
+}
+ul, ol {
+  list-style: none;
+}
+input, select, button {
+  font: inherit;
+}
+html, body {
+  height: 100%;
+}
+body {
+  background-color: #007dff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+</style>

login-form/README.md

@@ -0,0 +1,29 @@
+# login-form
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

login-form/components/Login.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="login" :class="{ login__signin: isSignIn, login__signup: isSignUp }">
+    <login-tabs @click.native="switchState" />
+    <login-form />
+  </div>
+</template>
+<script>
+import LoginTabs from './LoginTabs'
+import LoginForm from './LoginForm'
+export default {
+  components: {
+    LoginTabs,
+    LoginForm
+  },
+  data () {
+    return {
+      state: 1
+    }
+  },
+  computed: {
+    isSignIn () {
+      return this.state === 1
+    },
+    isSignUp () {
+      return this.state === 2
+    }
+  },
+  methods: {
+    switchState () {
+      this.state = this.state === 1 ? 2 : 1
+    }
+  }
+}
+</script>
+<style>
+.login {
+  width: 100%;
+  color: white;
+  font-size: 14px;
+}
+</style>

login-form/components/LoginCheckbox.vue

@@ -0,0 +1,57 @@
+<template>
+  <span class="login_checkbox">
+    <input :id="id" type="checkbox" />
+    <label :for="id">{{label}}</label>
+  </span>
+</template>
+<script>
+let GID = 1
+export default {
+  props: {
+    label: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      id: `login-checkbox-${GID++}`
+    }
+  }
+}
+</script>
+<style>
+.login_checkbox input {
+  display: none;
+}
+.login_checkbox label::before,
+.login_checkbox label::after {
+  content: '';
+  display: inline-block;
+  margin-right: 5px;
+  margin-top: 3px;
+  width: 14px;
+  height: 14px;
+  vertical-align: top;
+}
+.login_checkbox label::before {
+  border-radius: 3px;
+  background-color: white;
+  box-shadow: 0 1px 1px #0066d0;
+}
+.login_checkbox label::after {
+  content: '\f00c';
+  position: relative;
+  display: none;
+  z-index: 10;
+  margin-right: -14px;
+  width: 12px;
+  height: 12px;
+  padding: 1px;
+  font: normal normal normal 12px/1 FontAwesome;
+  color: #007dff;
+  float: left;
+}
+.login_checkbox input:checked+label::after {
+  display: inline-block;
+}
+</style>

login-form/components/LoginForm.vue

@@ -0,0 +1,87 @@
+<template>
+  <form class="login_form">
+    <div class="login_form_r1">
+      <div class="login_text">
+        <login-textfield label="First name" icon="user" />
+        <login-textfield label="Last name" />
+      </div>
+    </div>
+    <div class="login_form_r2">
+      <login-textfield label="Email address" icon="envelope-o" />
+    </div>
+    <div class="login_form_r3">
+      <login-textfield label="Enter passwords" icon="lock" />
+    </div>
+    <div class="login_form_r4">
+      <login-textfield label="Re-enter passwords" icon="lock" />
+    </div>
+    <div class="login_form_r5">
+      <login-checkbox label="Keep me sign in" />
+      <label>Forget passwords</label>
+    </div>
+    <div>
+      <login-submit />
+    </div>
+  </form>
+</template>
+<script>
+import LoginTextfield from './LoginTextfield'
+import LoginCheckbox from './LoginCheckbox'
+import LoginSubmit from './LoginSubmit'
+export default {
+  components: {
+    LoginTextfield,
+    LoginCheckbox,
+    LoginSubmit
+  }
+}
+</script>
+<style>
+.login_form {
+  padding: 20px;
+}
+.login_form>div {
+  padding-bottom: 10px;
+  display: flex;
+  min-height: 40px;
+  justify-content: space-between;
+  transition: all .6s ease;
+}
+.login_text {
+  display: flex;
+  flex: 1;
+}
+.login_text .login_textfield {
+  border-radius: 0;
+}
+.login_text .login_textfield:first-child {
+  border-radius: 2px 0 0 2px;
+}
+.login_text .login_textfield:last-child {
+  border-radius: 0 2px 2px 0;
+}
+.login__signup .login_form_r5 {
+  opacity: 0;
+  transition-duration: .4s;
+}
+.login__signup .login_button label:nth-child(2) {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+.login__signin .login_form_r1,
+.login__signin .login_form_r4 {
+  opacity: 0;
+  transform: translateY(30%) scale(0.8);
+}
+.login__signin .login_form_r2,
+.login__signin .login_form_r3 {
+  transform: translateY(-100%);
+}
+.login__signin .login_form_r5 {
+  transform: translateY(-200%);
+}
+.login__signin .login_button label:nth-child(3) {
+  transform: translateY(100%);
+  opacity: 0;
+}
+</style>

login-form/components/LoginSubmit.vue

@@ -0,0 +1,34 @@
+<template>
+  <span class="login_button">
+    <input type="button" />
+    <label>Sign In</label>
+    <label>Sign Up</label>
+  </span>
+</template>
+<style>
+.login_button {
+  position: relative;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+.login_button input {
+  display: block;
+  flex: 1;
+  width: 0;
+  height: 40px;
+  border: none;
+  border-radius: 2px;
+  outline: none;
+  background: #0066d0
+}
+.login_button label {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  transition: all .6s ease;
+}
+</style>

login-form/components/LoginTabs.vue

@@ -0,0 +1,73 @@
+<template>
+  <ul class="login_tabs">
+    <li><span>Sign up</span></li>
+    <li class="login_tabs_s">or</li>
+    <li><span>Sign in</span></li>
+  </ul>
+</template>
+<style>
+.login_tabs {
+  display: flex;
+  padding: 0 34px;
+}
+.login_tabs li {
+  display: flex;
+  padding: 10px;
+  flex: 1;
+  justify-content: space-around;
+  align-items: center;
+  transition: all .6s ease;
+}
+.login_tabs span {
+  display: block;
+  padding: 4px 10px;
+  border: 1px solid white;
+  border-radius: 3px;
+  text-align: center;
+  transition: all .6s ease;
+}
+.login_tabs .login_tabs_s {
+  justify-content: center;
+  transition-duration: .55s;
+  transition-delay: .05s;
+}
+.login_tabs_s {
+  font-size: 12px;
+}
+.login_tabs_s::before,
+.login_tabs_s::after {
+  content: '-';
+}
+.login__signup .login_tabs li:first-child {
+  transition-duration: .5s;
+  transition-delay: .1s;
+  transform: translateX(100%) scale(1.5);
+}
+.login__signup .login_tabs li:first-child span {
+  border-color: transparent;
+}
+.login__signup .login_tabs li:last-child {
+  transform: scale(0.6);
+  opacity: 0.4;
+}
+.login__signup .login_tabs_s {
+  transform: translateX(58%);
+  opacity: 0.8;
+}
+.login__signin .login_tabs li:last-child {
+  transition-duration: .5s;
+  transition-delay: .1s;
+  transform: translateX(-100%) scale(1.5);
+}
+.login__signin .login_tabs li:last-child span {
+    border-color: transparent;
+}
+.login__signin .login_tabs li:first-child {
+    transform: scale(0.6);
+    opacity: 0.4;
+}
+.login__signin .login_tabs_s {
+    transform: translateX(-58%);
+    opacity: 0.8;
+}
+</style>