uptime-kuma/src/pages/Setup.vue

138 lines
3.9 KiB
Vue
Raw Normal View History

2021-07-11 01:47:57 -04:00
<template>
<div class="form-container">
<div class="form">
<form @submit.prevent="submit">
<div>
2021-07-27 13:47:13 -04:00
<object width="64" height="64" data="/icon.svg" />
<div style="font-size: 28px; font-weight: bold; margin-top: 5px;">
Uptime Kuma
</div>
2021-07-11 01:47:57 -04:00
</div>
2021-07-27 13:47:13 -04:00
<p class="mt-3">
2021-08-29 17:07:58 -04:00
{{ $t("Create your admin account") }}
2021-07-27 13:47:13 -04:00
</p>
2021-07-11 01:47:57 -04:00
<div class="form-floating">
2021-09-05 09:40:35 -04:00
<select id="language" v-model="$i18n.locale" class="form-select">
<option v-for="(lang, i) in $i18n.availableLocales" :key="`Lang${i}`" :value="lang">
{{ $i18n.messages[lang].languageName }}
</option>
</select>
<label for="language" class="form-label">{{ $t("Language") }}</label>
</div>
<div class="form-floating mt-3">
2021-07-27 13:47:13 -04:00
<input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username" required>
2021-08-29 17:07:58 -04:00
<label for="floatingInput">{{ $t("Username") }}</label>
2021-07-11 01:47:57 -04:00
</div>
<div class="form-floating mt-3">
2021-07-27 13:47:13 -04:00
<input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password" required>
2021-08-29 17:07:58 -04:00
<label for="floatingPassword">{{ $t("Password") }}</label>
2021-07-11 01:47:57 -04:00
</div>
<div class="form-floating mt-3">
2021-07-27 13:47:13 -04:00
<input id="repeat" v-model="repeatPassword" type="password" class="form-control" placeholder="Repeat Password" required>
2021-08-29 17:07:58 -04:00
<label for="repeat">{{ $t("Repeat Password") }}</label>
2021-07-11 01:47:57 -04:00
</div>
2021-07-27 13:47:13 -04:00
<button class="w-100 btn btn-primary mt-3" type="submit" :disabled="processing">
2021-09-05 09:40:35 -04:00
{{ $t("Create") }}
2021-07-27 13:47:13 -04:00
</button>
2021-07-11 01:47:57 -04:00
</form>
</div>
</div>
</template>
<script>
import { useToast } from "vue-toastification";
const toast = useToast();
2021-07-11 01:47:57 -04:00
export default {
data() {
return {
processing: false,
username: "",
password: "",
repeatPassword: "",
};
2021-07-11 01:47:57 -04:00
},
2021-09-05 09:40:35 -04:00
watch: {
"$i18n.locale"() {
localStorage.locale = this.$i18n.locale;
},
},
2021-07-11 01:47:57 -04:00
mounted() {
this.$root.getSocket().emit("needSetup", (needSetup) => {
if (! needSetup) {
this.$router.push("/");
2021-07-11 01:47:57 -04:00
}
});
},
methods: {
submit() {
this.processing = true;
if (this.password !== this.repeatPassword) {
2021-10-18 15:25:53 -04:00
toast.error(this.$t("PasswordsDoNotMatch"));
2021-07-11 01:47:57 -04:00
this.processing = false;
return;
}
this.$root.getSocket().emit("setup", this.username, this.password, (res) => {
this.processing = false;
this.$root.toastRes(res);
2021-07-11 01:47:57 -04:00
if (res.ok) {
2021-09-07 04:25:25 -04:00
this.processing = true;
this.$root.login(this.username, this.password, "", () => {
2021-09-07 04:25:25 -04:00
this.processing = false;
this.$router.push("/");
});
2021-07-11 01:47:57 -04:00
}
});
2021-07-27 13:47:13 -04:00
},
},
};
2021-07-11 01:47:57 -04:00
</script>
<style lang="scss" scoped>
2021-07-11 01:47:57 -04:00
.form-container {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
}
.form-floating {
> .form-select {
padding-left: 1.3rem;
padding-top: 1.525rem;
line-height: 1.35;
~ label {
padding-left: 1.3rem;
}
}
> label {
padding-left: 1.3rem;
}
> .form-control {
padding-left: 1.3rem;
}
}
2021-07-11 01:47:57 -04:00
.form {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
text-align: center;
}
</style>