54 |
79 |
80 |
--------------------------------------------------------------------------------
/src/features/auth/styles.css:
--------------------------------------------------------------------------------
1 | .login-wrap{
2 | width:100%;
3 | margin:auto;
4 | max-width:525px;
5 | min-height:670px;
6 | position:relative;
7 | background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
8 | box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
9 | }
10 | .login-html{
11 | width:100%;
12 | height:100%;
13 | position:absolute;
14 | padding:90px 70px 50px 70px;
15 | background:rgba(40,57,101,.9);
16 | }
17 | .login-html .sign-in-htm,
18 | .login-html .sign-up-htm{
19 | top:0;
20 | left:0;
21 | right:0;
22 | bottom:0;
23 | position:absolute;
24 | transform:rotateY(180deg);
25 | backface-visibility:hidden;
26 | transition:all .4s linear;
27 | }
28 | .login-html .sign-in,
29 | .login-html .sign-up,
30 | .login-form .group .check{
31 | display:none;
32 | }
33 | .login-html .tab,
34 | .login-form .group .label,
35 | .login-form .group .button{
36 | text-transform:uppercase;
37 | }
38 | .login-html .tab{
39 | font-size:22px;
40 | margin-right:15px;
41 | padding-bottom:5px;
42 | margin:0 15px 10px 0;
43 | display:inline-block;
44 | border-bottom:2px solid transparent;
45 | }
46 | .login-html .sign-in:checked + .tab,
47 | .login-html .sign-up:checked + .tab{
48 | color:#fff;
49 | border-color:#1161ee;
50 | }
51 | .login-form{
52 | min-height:345px;
53 | position:relative;
54 | perspective:1000px;
55 | transform-style:preserve-3d;
56 | }
57 | .login-form .group{
58 | margin-bottom:15px;
59 | }
60 |
61 | .login-form .group input[type="text"].invalid,
62 | .login-form .group input[type="password"].invalid {
63 | border: red 1px solid;
64 | }
65 |
66 | .login-form .group label.invalid {
67 | color: red;
68 | }
69 |
70 | .login-form .group .label,
71 | .login-form .group .input,
72 | .login-form .group .button{
73 | width:100%;
74 | color:#fff;
75 | display:block;
76 | }
77 | .login-form .group .input,
78 | .login-form .group .button{
79 | border:none;
80 | padding:15px 20px;
81 | border-radius:25px;
82 | background:rgba(255,255,255,.1);
83 | }
84 | .login-form .group input[data-type="password"]{
85 | text-security:circle;
86 | -webkit-text-security:circle;
87 | }
88 | .login-form .group .label{
89 | color:#aaa;
90 | font-size:12px;
91 | }
92 | .login-form .group .button{
93 | background:#1161ee;
94 | }
95 | .login-form .group label .icon{
96 | width:15px;
97 | height:15px;
98 | border-radius:2px;
99 | position:relative;
100 | display:inline-block;
101 | background:rgba(255,255,255,.1);
102 | }
103 | .login-form .group label .icon:before,
104 | .login-form .group label .icon:after{
105 | content:'';
106 | width:10px;
107 | height:2px;
108 | background:#fff;
109 | position:absolute;
110 | transition:all .2s ease-in-out 0s;
111 | }
112 | .login-form .group label .icon:before{
113 | left:3px;
114 | width:5px;
115 | bottom:6px;
116 | transform:scale(0) rotate(0);
117 | }
118 | .login-form .group label .icon:after{
119 | top:6px;
120 | right:0;
121 | transform:scale(0) rotate(0);
122 | }
123 | .login-form .group .check:checked + label{
124 | color:#fff;
125 | }
126 | .login-form .group .check:checked + label .icon{
127 | background:#1161ee;
128 | }
129 | .login-form .group .check:checked + label .icon:before{
130 | transform:scale(1) rotate(45deg);
131 | }
132 | .login-form .group .check:checked + label .icon:after{
133 | transform:scale(1) rotate(-45deg);
134 | }
135 | .login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
136 | transform:rotate(0);
137 | }
138 | .login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
139 | transform:rotate(0);
140 | }
141 |
142 | .hr{
143 | height:2px;
144 | margin:60px 0 50px 0;
145 | background:rgba(255,255,255,.2);
146 | }
147 | .foot-lnk{
148 | text-align:center;
149 | }
150 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import EventBus from './plugins/event-bus'
4 | import Vuelidate from 'vuelidate'
5 |
6 | Vue.use(EventBus)
7 | Vue.use(Vuelidate)
8 |
9 | new Vue({
10 | el: '#app',
11 | render: h => h(App)
12 | })
13 |
--------------------------------------------------------------------------------
/src/plugins/event-bus.js:
--------------------------------------------------------------------------------
1 |
2 | import Vue from 'Vue'
3 |
4 | const bus = new Vue()
5 |
6 | export default function install(Vue) {
7 | Object.defineProperties(Vue.prototype, {
8 | $bus: {
9 | get() {
10 | return bus
11 | }
12 | }
13 | })
14 | }
15 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 |
4 | module.exports = {
5 | entry: './src/main.js',
6 | output: {
7 | path: path.resolve(__dirname, './dist'),
8 | publicPath: '/dist/',
9 | filename: 'build.js'
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.css$/,
15 | use: [
16 | 'vue-style-loader',
17 | 'css-loader'
18 | ],
19 | }, {
20 | test: /\.vue$/,
21 | loader: 'vue-loader',
22 | options: {
23 | loaders: {
24 | }
25 | // other vue-loader options go here
26 | }
27 | },
28 | {
29 | test: /\.js$/,
30 | loader: 'babel-loader',
31 | exclude: /node_modules/
32 | },
33 | {
34 | test: /\.(png|jpg|gif|svg)$/,
35 | loader: 'file-loader',
36 | options: {
37 | name: '[name].[ext]?[hash]'
38 | }
39 | }
40 | ]
41 | },
42 | resolve: {
43 | alias: {
44 | 'vue$': 'vue/dist/vue.esm.js'
45 | },
46 | extensions: ['*', '.js', '.vue', '.json']
47 | },
48 | devServer: {
49 | historyApiFallback: true,
50 | noInfo: true,
51 | overlay: true
52 | },
53 | performance: {
54 | hints: false
55 | },
56 | devtool: '#eval-source-map'
57 | }
58 |
59 | if (process.env.NODE_ENV === 'production') {
60 | module.exports.devtool = '#source-map'
61 | // http://vue-loader.vuejs.org/en/workflow/production.html
62 | module.exports.plugins = (module.exports.plugins || []).concat([
63 | new webpack.DefinePlugin({
64 | 'process.env': {
65 | NODE_ENV: '"production"'
66 | }
67 | }),
68 | new webpack.optimize.UglifyJsPlugin({
69 | sourceMap: true,
70 | compress: {
71 | warnings: false
72 | }
73 | }),
74 | new webpack.LoaderOptionsPlugin({
75 | minimize: true
76 | })
77 | ])
78 | }
79 |
--------------------------------------------------------------------------------