WIP: Enabled themes and login with adminlte

resources/assets/js/components/auth/EmailResetPasswordForm.vue

@@ -0,0 +1,58 @@
+<template>
+ <form method="post" @submit.prevent="submit" @keydown="clearErrors($event.target.name)">
+  <div class="alert alert-success" v-show="form.succeeded" v-text="result"></div>
+  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('email') }">
+   <input type="email" class="form-control" :placeholder="trans('adminlte_lang_message.email')" name="email" v-model="form.email" autofocus/>
+   <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
+   <transition name="fade">
+    <span class="help-block" v-if="form.errors.has('email')" v-text="form.errors.get('email')"></span>
+   </transition>
+  </div>
+
+  <div class="row">
+   <div class="col-xs-2">
+   </div><!-- /.col -->
+   <div class="col-xs-8">
+    <button type="submit" class="btn btn-primary btn-block btn-flat" :disabled="form.errors.any()"><i v-if="form.submitting" class="fa fa-refresh fa-spin"></i> {{ trans('adminlte_lang_message.sendpassword') }}</button>
+   </div><!-- /.col -->
+   <div class="col-xs-2">
+   </div><!-- /.col -->
+  </div>
+ </form>
+</template>
+
+<style src="./fade.css"></style>
+
+<script>
+
+import Form from 'acacha-forms'
+
+export default {
+  data: function () {
+    return {
+      form: new Form({ email: ''}),
+      result: ''
+    }
+  },
+  methods: {
+    submit () {
+      this.form.post('/password/email')
+       .then(response => {
+         this.result = response.data.status;
+       })
+       .catch(error => {
+         console.log(this.trans('adminlte_lang_message.sendpassword') + ':' + error)
+       })
+    },
+    clearErrors (name) {
+      this.form.errors.clear(name)
+      this.form.succeeded = false
+      this.result = ''
+    }
+  },
+  mounted () {
+    this.form.clearOnSubmit = true
+  }
+}
+
+</script>

resources/assets/js/components/auth/InitializeIcheck.js

@@ -0,0 +1,20 @@
+export default {
+  mounted () {
+    this.initialitzeICheck()
+  },
+  methods: {
+    initialitzeICheck () {
+      var component = this
+      $('input').iCheck({
+        checkboxClass: 'icheckbox_square-blue',
+        radioClass: 'iradio_square-blue',
+        increaseArea: '20%'
+      }).on('ifChecked', function (event) {
+        component.form.set('terms', true)
+        component.form.errors.clear('terms')
+      }).on('ifUnchecked', function (event) {
+        component.form.set('terms', '')
+      })
+    }
+  }
+}

resources/assets/js/components/auth/LoginForm.vue

@@ -0,0 +1,125 @@
+<template>
+ <form method="post" @submit.prevent="submit" @keydown="clearErrors($event.target.name)">
+  <div class="alert alert-success text-center" v-show="form.succeeded" id="result"> {{ trans('message.loggedin') }} <i class="fa fa-refresh fa-spin"></i> {{ trans('message.entering') }}</div>
+  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('email') }" v-if="type === 'email'">
+   <input type="email" class="form-control" :placeholder="placeholder" :name="name" value="" v-model="form.email" @change="adddomain" autofocus/>
+   <span class="glyphicon form-control-feedback" :class="[icon]"></span>
+   <transition name="fade">
+    <span class="help-block" v-if="form.errors.has('email')" v-text="form.errors.get('email')" id="validation_error_email"></span>
+   </transition>
+  </div>
+
+  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('username') }" v-else>
+   <input type="text" class="form-control" :placeholder="placeholder" :name="name" v-model="form.username" @change="adddomain" autofocus/>
+   <span class="glyphicon form-control-feedback" :class="[icon]"></span>
+   <transition name="fade">
+    <span class="help-block" v-if="form.errors.has('username')" v-text="form.errors.get('username')" id="validation_error_username"></span>
+   </transition>
+  </div>
+
+
+  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('password') }">
+   <input type="password" class="form-control" :placeholder="trans('message.password')" name="password" v-model="form.password"/>
+   <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+   <transition name="fade">
+    <span class="help-block" v-if="form.errors.has('password')" v-text="form.errors.get('password')" id="validation_error_password"></span>
+   </transition>
+  </div>
+  <div class="row">
+   <div class="col-xs-8">
+    <div class="checkbox icheck">
+     <label>
+      <input style="display:none;" type="checkbox" name="remember" v-model="form.remember"> {{ trans('message.remember') }}
+     </label>
+    </div>
+   </div>
+   <div class="col-xs-4">
+    <button type="submit" class="btn btn-primary btn-block btn-flat" v-text="trans('message.buttonsign')" :disabled="form.errors.any()"><i v-if="form.submitting" class="fa fa-refresh fa-spin"></i></button>
+   </div>
+  </div>
+ </form>
+</template>
+
+<style src="./fade.css"></style>
+
+<script>
+
+import Form from 'acacha-forms'
+import initialitzeIcheck from './InitializeIcheck'
+import redirect from './redirect'
+
+export default {
+  mixins: [initialitzeIcheck, redirect],
+  data: function () {
+    let form = new Form({ username: '', password: '', remember: '' })
+    if (this.name === 'email') {
+      form = new Form({ email: '', password: '', remember: '' })
+    }
+    return {
+      form: form,
+    }
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    domain: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    placeholder: function () {
+      if (this.name === 'email') return this.trans('message.email')
+      return this.trans('message.username')
+    },
+    type: function () {
+      if (this.name === 'email') return 'email'
+      return 'text'
+    },
+    icon: function () {
+      if (this.name === 'email') return 'glyphicon-envelope'
+      return 'glyphicon-user'
+    }
+  },
+  watch: {
+    'form.remember': function (value) {
+      if (value) {
+        $('input').iCheck('check')
+      } else {
+        $('input').iCheck('uncheck')
+      }
+    }
+  },
+  methods: {
+    submit () {
+      this.form.post('/login')
+       .then(response => {
+         var component = this;
+         setTimeout(function(){
+           component.redirect(response)
+         }, 2500);
+       })
+       .catch(error => {
+         console.log(this.trans('message.loginerror') + ':' + error)
+       })
+    },
+    adddomain: function () {
+      if (this.type === 'email') return
+      if (this.domain === '') return
+      if (this.form.username.endsWith(this.domain)) return
+      if (this.form.username.includes('@')) return
+      this.form.username = this.form.username + '@' + this.domain
+    },
+    clearErrors (name) {
+      if (name === 'password') {
+        this.form.errors.clear('password')
+        name = this.name
+      }
+      this.form.errors.clear(name)
+    }
+  }
+}
+
+</script>

resources/assets/js/components/auth/RegisterForm.vue

@@ -0,0 +1,104 @@
+<template>
+ <form method="post" @submit.prevent="submit" @keydown="clearErrors($event.target.name)">
+  <div class="alert alert-success text-center" v-show="form.succeeded" id="result"> {{ trans('adminlte_lang_message.registered') }} <i class="fa fa-refresh fa-spin"></i> {{ trans('adminlte_lang_message.entering') }}</div>
+  <div class="form-group has-feedback " :class="{ 'has-error': form.errors.has('name') }">
+   <input type="text" class="form-control" :placeholder="trans('adminlte_lang_message.fullname')" name="name" value="" v-model="form.name" autofocus/>
+   <span class="glyphicon glyphicon-user form-control-feedback"></span>
+   <transition name="fade">
+    <span class="help-block" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
+   </transition>
+  </div>
+  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('email') }">
+   <input type="email" class="form-control" :placeholder="trans('adminlte_lang_message.email')" name="email" value="" v-model="form.email"/>
+   <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
+   <transition name="fade">
+    <span class="help-block" v-if="form.errors.has('email')" v-text="form.errors.get('email')"></span>
+   </transition>
+  </div>
+  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('password') }">
+   <input type="password" class="form-control" :placeholder="trans('adminlte_lang_message.password')" name="password" v-model="form.password"/>
+   <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+   <transition name="fade">
+     <span class="help-block" v-if="form.errors.has('password')" v-text="form.errors.get('password')"></span>
+   </transition>
+  </div>
+  <div class="form-group has-feedback">
+   <input type="password" class="form-control" :placeholder="trans('adminlte_lang_message.retypepassword')" name="password_confirmation" v-model="form.password_confirmation"/>
+  </div>
+  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('token') }">
+   <input type="text" class="form-control" placeholder="Authorisation Token" name="token" value="" v-model="form.token"/>
+   <span class="glyphicon glyphicon-barcode form-control-feedback"></span>
+   <transition name="fade">
+    <span class="help-block" v-if="form.errors.has('token')" v-text="form.errors.get('token')"></span>
+   </transition>
+  </div>
+  <div class="row">
+   <div class="col-xs-7">
+    <label>
+     <div class="checkbox_register icheck">
+      <label data-toggle="modal" data-target="#termsModal">
+       <input type="checkbox" name="terms" v-model="form.terms" class="has-error">
+       <a href="#" :class="{ 'text-danger': form.errors.has('terms') }" v-text="trans('adminlte_lang_message.conditions')"></a>
+      </label>
+     </div>
+    </label>
+   </div>
+   <div class="col-xs-4 col-xs-push-1">
+    <button type="submit" class="btn btn-primary btn-block btn-flat" :disabled="form.errors.any()" v-text="trans('adminlte_lang_message.register')"><i v-if="form.submitting" class="fa fa-refresh fa-spin"></i> </button>
+   </div>
+  </div>
+  <div v-if="form.errors.has('terms')" class="form-group has-feedback" :class="{ 'has-error': form.errors.has('terms') }">
+   <span class="help-block" v-if="form.errors.has('terms')" v-text="form.errors.get('terms')"></span>
+  </div>
+ </form>
+
+</template>
+
+<style src="./fade.css"></style>
+
+<script>
+
+import Form from 'acacha-forms'
+import initialitzeIcheck from './InitializeIcheck'
+import redirect from './redirect'
+
+export default {
+  mixins: [initialitzeIcheck, redirect],
+  data: function () {
+    return {
+      form: new Form({ name: '', email: '', token: '', password: '', password_confirmation: '', terms: '' })
+    }
+  },
+  watch: {
+    'form.terms': function (value) {
+      if (value) {
+        $('input').iCheck('check')
+      } else {
+        $('input').iCheck('uncheck')
+      }
+    }
+  },
+  methods: {
+    submit () {
+      this.form.post('/register')
+       .then(response => {
+         var component = this;
+         setTimeout(function(){
+           component.redirect(response)
+         }, 2500);
+       })
+       .catch(error => {
+         console.log(this.trans('adminlte_lang_message.registererror') + ':' + error)
+       })
+    },
+    clearErrors (name) {
+      if (name === 'password_confirmation') {
+        name = 'password'
+        this.form.errors.clear('password_confirmation')
+      }
+      this.form.errors.clear(name)
+    }
+  }
+}
+
+</script>

resources/assets/js/components/auth/ResetPasswordForm.vue

@@ -0,0 +1,88 @@
+<template>
+ <form method="post" @submit.prevent="submit" @keydown="clearErrors($event.target.name)">
+  <div class="alert alert-success" v-show="form.succeeded" id="result">{{ result }}</div>
+  <input type="hidden" name="token" v-model="form.token">
+  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('email') }">
+   <input type="email" class="form-control" :placeholder="trans('adminlte_lang_message.email')" name="email" v-model="form.email" autofocus/>
+   <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
+   <transition name="fade">
+    <span class="help-block" v-if="form.errors.has('email')" v-text="form.errors.get('email')"></span>
+   </transition>
+  </div>
+
+  <div class="form-group has-feedback" :class="{ 'has-error': form.errors.has('password') }">
+   <input type="password" class="form-control" :placeholder="trans('adminlte_lang_message.password')" name="password" v-model="form.password"/>
+   <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+   <transition name="fade">
+    <span class="help-block" v-if="form.errors.has('password')" v-text="form.errors.get('password')"></span>
+   </transition>
+  </div>
+
+  <div class="form-group has-feedback">
+   <input type="password" class="form-control" :placeholder="trans('adminlte_lang_message.retypepassword')" name="password_confirmation" v-model="form.password_confirmation"/>
+   <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+  </div>
+
+  <div class="row">
+   <div class="col-xs-2">
+   </div><!-- /.col -->
+   <div class="col-xs-8">
+    <button type="submit" class="btn btn-primary btn-block btn-flat" :disabled="form.errors.any()"><i v-if="form.submitting" class="fa fa-refresh fa-spin"></i> {{ trans('adminlte_lang_message.passwordreset') }}</button>
+   </div><!-- /.col -->
+   <div class="col-xs-2">
+   </div><!-- /.col -->
+  </div>
+ </form>
+</template>
+
+<style src="./fade.css"></style>
+
+<script>
+
+import Form from 'acacha-forms'
+import redirect from './redirect'
+
+export default {
+  mixins: [redirect],
+  props: {
+    token: {
+      type: String,
+      required: true
+    },
+  },
+  data: function () {
+    return {
+      form: new Form({email: '', password: '', password_confirmation: '', token: this.token }),
+      result: ''
+    }
+  },
+  methods: {
+    submit () {
+      this.form.post('/password/reset')
+       .then(response => {
+         this.result = response.data.status;
+         var component = this;
+         setTimeout(function(){
+           component.redirect(response)
+         }, 3000);
+       })
+       .catch(error => {
+         console.log(this.trans('adminlte_lang_message.passwordreset') + ':' + error)
+       })
+    },
+    clearErrors (name) {
+      if (name === 'password_confirmation') {
+        name = 'password'
+        this.form.errors.clear('password_confirmation')
+      }
+      this.form.errors.clear(name)
+      this.form.succeeded = false
+      this.result = ''
+    },
+    mounted () {
+      this.form.clearOnSubmit = true
+    }
+  }
+}
+
+</script>

resources/assets/js/components/auth/fade.css

@@ -0,0 +1,7 @@
+.fade-enter-active, .fade-leave-active {
+    transition: opacity 1s ease;
+}
+
+.fade-enter, .fade-leave-to {
+    opacity: 0;
+}

resources/assets/js/components/auth/redirect.js

@@ -0,0 +1,7 @@
+export default {
+  methods: {
+    redirect (response) {
+      window.location.reload()
+    }
+  }
+}