add Login

package-lock.json

@@ -3689,12 +3689,14 @@
                 "balanced-match": {
                     "version": "1.0.0",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "brace-expansion": {
                     "version": "1.1.11",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "balanced-match": "^1.0.0",
                         "concat-map": "0.0.1"
@@ -3709,17 +3711,20 @@
                 "code-point-at": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "concat-map": {
                     "version": "0.0.1",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "console-control-strings": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "core-util-is": {
                     "version": "1.0.2",
@@ -3836,7 +3841,8 @@
                 "inherits": {
                     "version": "2.0.3",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "ini": {
                     "version": "1.3.5",
@@ -3848,6 +3854,7 @@
                     "version": "1.0.0",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "number-is-nan": "^1.0.0"
                     }
@@ -3862,6 +3869,7 @@
                     "version": "3.0.4",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "brace-expansion": "^1.1.7"
                     }
@@ -3869,12 +3877,14 @@
                 "minimist": {
                     "version": "0.0.8",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "minipass": {
                     "version": "2.3.5",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "safe-buffer": "^5.1.2",
                         "yallist": "^3.0.0"
@@ -3893,6 +3903,7 @@
                     "version": "0.5.1",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "minimist": "0.0.8"
                     }
@@ -3973,7 +3984,8 @@
                 "number-is-nan": {
                     "version": "1.0.1",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "object-assign": {
                     "version": "4.1.1",
@@ -3985,6 +3997,7 @@
                     "version": "1.4.0",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "wrappy": "1"
                     }
@@ -4106,6 +4119,7 @@
                     "version": "1.0.2",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "code-point-at": "^1.0.0",
                         "is-fullwidth-code-point": "^1.0.0",

public/css/app.css

-@import url(https://fonts.googleapis.com/css?family=Nunito);@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons);/*!
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons);/*!
 * Vuetify v1.5.7
 * Forged by John Leider
 * Released under the MIT License.

resources/js/layouts/AppLayout.vue

@@ -4,7 +4,7 @@
     <v-content class="mt-5">
       <v-container fluid>
         <v-layout>
-          <v-flex xs10 offset-xs1>
+          <v-flex xs12 sm10 offset-sm1>
             <v-card flat height="600px">
               <router-view></router-view>
             </v-card>

resources/js/views/Login.vue

 <template>
-  <div>Login</div>
+  <div>
+    <v-container grid-list-md text-xs-center>
+      <p class="display-2 my-4">ลงชื่อเข้าใช้</p>
+      <v-flex sm4 offset-sm4>
+        <v-text-field
+          label="อีเมล"
+          prepend-inner-icon="email"
+          color="primary"
+          class="fix-size red--text"
+        ></v-text-field>
+        <v-text-field
+          label="รหัสผ่าน"
+          type="password"
+          color="primary"
+          prepend-inner-icon="lock"
+        ></v-text-field>
+        <p class="text-xs-right"><a href="#" class="body-2 font-weight-medium">ลืมรหัสผ่าน?</a></p>
+        <v-btn color="blue" block dark large>เข้าสู่ระบบ</v-btn>
+        <v-layout row wrap align-center justify-center fill-height>
+          <v-flex sm5>
+            <v-divider></v-divider>
+          </v-flex>
+          <v-flex sm2>
+            หรือ
+          </v-flex>
+          <v-flex sm5>
+            <v-divider></v-divider>
+          </v-flex>
+        </v-layout>
+        <v-layout row wrap>
+          <v-flex sm6>
+            <v-btn color="primary" block><v-icon>fab fa-facebook</v-icon>&nbsp;เข้าสู่ระบบ Facebook</v-btn>
+          </v-flex>
+          <v-flex sm6>
+            <v-btn color="deep-orange" class="white--text" block><v-icon>fab fa-google</v-icon>&nbsp;เข้าสู่ระบบ Google</v-btn>
+          </v-flex>
+        </v-layout>
+        <p class="text-xs-center body-2 font-weight-medium">ยังไม่มีบัญชีผู้ใช้? <a href="#">สมัครสมาชิก</a></p>
+      </v-flex>
+    </v-container>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+  .fix-size {
+    height: 50px;
+  }
+</style>
+

resources/sass/app.scss

 
 // Fonts
-@import url('https://fonts.googleapis.com/css?family=Nunito');
 @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons');
 
 // Vuetify

resources/views/app.blade.php

@@ -10,6 +10,7 @@
 
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
+        <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
         <link rel="stylesheet" href="{{ asset('css/app.css') }}">
 
         <!-- Styles -->