first commit
This commit is contained in:
Akhil Gupta
261
ui/src/router/views/initialize.vue
Normal file
261
ui/src/router/views/initialize.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<script>
|
||||
import Layout from '@layouts/main.vue'
|
||||
import axios from 'axios'
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
import store from '@state/store'
|
||||
|
||||
export default {
|
||||
components: { Layout },
|
||||
page: {
|
||||
title: 'First Setup',
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
migrationMode: '',
|
||||
url: '',
|
||||
testSuccess: false,
|
||||
connectionError: '',
|
||||
isWorking: false,
|
||||
registerModel: {
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
distanceUnit: 1,
|
||||
currency: 'INR',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('auth', ['isInitialized']),
|
||||
...mapState('vehicles', ['currencyMasters', 'distanceUnitMasters']),
|
||||
},
|
||||
mounted() {
|
||||
store.dispatch('vehicles/fetchMasters').then((data) => {})
|
||||
},
|
||||
methods: {
|
||||
resetMigrationMode() {
|
||||
this.migrationMode = ''
|
||||
this.url = ''
|
||||
this.registerModel = {
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
distanceUnit: 1,
|
||||
currency: 'INR',
|
||||
}
|
||||
},
|
||||
showSuccessModal() {
|
||||
var message = ''
|
||||
if (this.migrationMode === 'clarkson') {
|
||||
message =
|
||||
'We have successfully migrated the data from Clarkson. You will be redirected to the login screen shortly where you can login using your existing email and password : hammond'
|
||||
}
|
||||
if (this.migrationMode === 'fresh') {
|
||||
message =
|
||||
'You have been registered successfully. You will be redirected to the login screen shortly where you can login and start using the system.'
|
||||
}
|
||||
this.$buefy.toast.open({
|
||||
duration: 10000,
|
||||
message: message,
|
||||
position: 'is-bottom',
|
||||
type: 'is-success',
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$router
|
||||
.push({ name: 'login' })
|
||||
.then((succ) => {})
|
||||
.catch((err) => console.log('error:', err))
|
||||
}, 10000)
|
||||
},
|
||||
register() {
|
||||
this.isWorking = true
|
||||
axios
|
||||
.post('/api/auth/initialize', this.registerModel)
|
||||
.then((response) => {
|
||||
const success = response.data.success
|
||||
if (success) {
|
||||
store.dispatch('auth/systemInitialized').then((data) => {
|
||||
this.showSuccessModal()
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch((ex) => {
|
||||
this.testSuccess = false
|
||||
this.$buefy.toast.open({
|
||||
duration: 5000,
|
||||
message: ex.message,
|
||||
position: 'is-bottom',
|
||||
type: 'is-danger',
|
||||
})
|
||||
})
|
||||
.finally(() => (this.isWorking = false))
|
||||
},
|
||||
testConnection() {
|
||||
if (!this.url) {
|
||||
return
|
||||
}
|
||||
this.isWorking = true
|
||||
axios
|
||||
.post('/api/clarkson/check', { url: this.url })
|
||||
.then((response) => {
|
||||
this.testSuccess = response.data.canMigrate
|
||||
if (!this.testSuccess) {
|
||||
this.connectionError = response.data.message
|
||||
} else {
|
||||
this.connectionError = ''
|
||||
}
|
||||
})
|
||||
.catch((ex) => {
|
||||
this.testSuccess = false
|
||||
this.$buefy.toast.open({
|
||||
duration: 5000,
|
||||
message: ex.message,
|
||||
position: 'is-bottom',
|
||||
type: 'is-danger',
|
||||
})
|
||||
})
|
||||
.finally(() => (this.isWorking = false))
|
||||
},
|
||||
migrate() {
|
||||
if (!this.url) {
|
||||
return
|
||||
}
|
||||
this.isWorking = true
|
||||
axios
|
||||
.post('/api/clarkson/migrate', { url: this.url })
|
||||
.then((data) => {
|
||||
store.dispatch('auth/systemInitialized').then((data) => {
|
||||
this.showSuccessModal()
|
||||
})
|
||||
})
|
||||
.catch((ex) => {
|
||||
this.testSuccess = false
|
||||
this.$buefy.toast.open({
|
||||
duration: 5000,
|
||||
message: ex.message,
|
||||
position: 'is-bottom',
|
||||
type: 'is-danger',
|
||||
})
|
||||
})
|
||||
.finally(() => (this.isWorking = false))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<div v-if="!migrationMode" class="box">
|
||||
<h1 class="title">Migrate from Clarkson</h1>
|
||||
<p>
|
||||
If you have an existing Clarkson deployment and you want to migrate your data from that,
|
||||
press the following button.
|
||||
</p>
|
||||
<br />
|
||||
<b-field>
|
||||
<b-button type="is-primary" @click="migrationMode = 'clarkson'"
|
||||
>Migrate from Clarkson</b-button
|
||||
></b-field
|
||||
>
|
||||
</div>
|
||||
<div v-if="!migrationMode" class="box">
|
||||
<h1 class="title">Fresh Install</h1>
|
||||
<p>
|
||||
If you want a fresh install of Hammond, press the following button.
|
||||
</p>
|
||||
<br />
|
||||
<b-field>
|
||||
<b-button type="is-primary" @click="migrationMode = 'fresh'">Fresh Install</b-button>
|
||||
</b-field>
|
||||
</div>
|
||||
<div v-if="migrationMode === 'clarkson'" class="box content">
|
||||
<h1 class="title">Migrate from Clarkson</h1>
|
||||
<p
|
||||
>You need to make sure that this deployment of Hammond can access the MySQL database used by
|
||||
Clarkson.</p
|
||||
>
|
||||
<p
|
||||
>If that is not directly possible, you can make a copy of that database somewhere accessible
|
||||
from this instance.</p
|
||||
>
|
||||
<p
|
||||
>Once that is done, enter the connection string to the MySQL instance in the following
|
||||
format.</p
|
||||
>
|
||||
<p
|
||||
>All the users imported from Clarkson will have their username as their email in Clarkson
|
||||
database and pasword set to <span class="" style="font-weight:bold">hammond</span></p
|
||||
>
|
||||
<code>
|
||||
user:pass@tcp(127.0.0.1:3306)/dbname?charset=utf8mb4&parseTime=True&loc=Local
|
||||
</code>
|
||||
<br />
|
||||
<br />
|
||||
<b-notification v-if="connectionError" type="is-danger" role="alert" :closable="false">
|
||||
{{ connectionError }}
|
||||
</b-notification>
|
||||
|
||||
<b-field addons label="Mysql Connection String">
|
||||
<b-input v-model="url" required></b-input>
|
||||
</b-field>
|
||||
|
||||
<div class="buttons">
|
||||
<b-button
|
||||
v-if="!testSuccess"
|
||||
type="is-primary"
|
||||
:disabled="isWorking"
|
||||
@click="testConnection"
|
||||
>Test Connection</b-button
|
||||
><b-button v-if="testSuccess" type="is-success" :disabled="isWorking" @click="migrate"
|
||||
>Migrate</b-button
|
||||
>
|
||||
<b-button type="is-danger is-light" @click="resetMigrationMode">Cancel</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="migrationMode === 'fresh'" class="box content">
|
||||
<h1 class="title">Setup Admin Users</h1>
|
||||
<form @submit.prevent="register">
|
||||
<b-field label="Your Name">
|
||||
<b-input v-model="registerModel.name" required></b-input>
|
||||
</b-field>
|
||||
<b-field label="Your Email">
|
||||
<b-input v-model="registerModel.email" type="email" required></b-input>
|
||||
</b-field>
|
||||
<b-field label="Your Password">
|
||||
<b-input
|
||||
v-model="registerModel.password"
|
||||
type="password"
|
||||
required
|
||||
minlength="6"
|
||||
password-reveal
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="Currency">
|
||||
<b-select v-model="registerModel.currency" placeholder="Currency" required expanded>
|
||||
<option v-for="option in currencyMasters" :key="option.code" :value="option.code">
|
||||
{{ `${option.namePlural} (${option.code})` }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
<b-field label="Distance Unit">
|
||||
<b-select
|
||||
v-model.number="registerModel.distanceUnit"
|
||||
placeholder="Distance Unit"
|
||||
required
|
||||
expanded
|
||||
>
|
||||
<option v-for="(option, key) in distanceUnitMasters" :key="key" :value="key">
|
||||
{{ `${option.long} (${option.short})` }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
<br />
|
||||
<div class="buttons">
|
||||
<b-button type="is-primary" native-type="submit" tag="input"></b-button>
|
||||
|
||||
<b-button type="is-danger is-light" @click="resetMigrationMode">Cancel</b-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user