Merge pull request 'feature/#66-static-user-login' (#91) from feature/#66-static-user-login into develop
Reviewed-on: #91
This commit is contained in:
commit
f04fabefb0
10 changed files with 716 additions and 84 deletions
106
src/components/account/ChangeToPassword.vue
Normal file
106
src/components/account/ChangeToPassword.vue
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<form class="flex flex-col gap-2" @submit.prevent="change">
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input
|
||||
id="new"
|
||||
name="new"
|
||||
type="password"
|
||||
required
|
||||
placeholder="neues Passwort"
|
||||
autocomplete="new-password"
|
||||
class="rounded-b-none!"
|
||||
:class="notMatching ? 'border-red-600!' : ''"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="new_rep"
|
||||
name="new_rep"
|
||||
type="password"
|
||||
required
|
||||
placeholder="neues Passwort wiederholen"
|
||||
autocomplete="new-password"
|
||||
class="rounded-t-none!"
|
||||
:class="notMatching ? 'border-red-600!' : ''"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="notMatching">Passwörter stimmen nicht überein</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button type="submit" primary :disabled="changeStatus == 'loading' || changeStatus == 'success'">
|
||||
zu Passwort wechseln
|
||||
</button>
|
||||
<Spinner v-if="changeStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="changeStatus == 'success'" />
|
||||
<FailureXMark v-else-if="changeStatus == 'failed'" />
|
||||
</div>
|
||||
<p v-if="changeError" class="text-center">{{ changeError }}</p>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import TextCopy from "@/components/TextCopy.vue";
|
||||
import { hashString } from "../../helpers/crypto";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
currentRoutine: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
emits: ["updateCurrent"],
|
||||
data() {
|
||||
return {
|
||||
verification: "loading" as "success" | "loading" | "failed",
|
||||
changeStatus: undefined as undefined | "loading" | "success" | "failed",
|
||||
changeError: "" as string,
|
||||
notMatching: false as boolean,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
async change(e: any) {
|
||||
let formData = e.target.elements;
|
||||
|
||||
let new_pw = await hashString(formData.new.value);
|
||||
let new_rep = await hashString(formData.new_rep.value);
|
||||
if (new_pw != new_rep) {
|
||||
this.notMatching = true;
|
||||
return;
|
||||
}
|
||||
this.notMatching = false;
|
||||
|
||||
this.changeStatus = "loading";
|
||||
this.changeError = "";
|
||||
this.$http
|
||||
.post(`/user/changeToPW`, {
|
||||
newpassword: await hashString(formData.new.value),
|
||||
})
|
||||
.then((result) => {
|
||||
this.changeStatus = "success";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.changeStatus = "failed";
|
||||
this.changeError = err.response.data;
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.changeStatus = undefined;
|
||||
this.$emit("updateCurrent");
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
92
src/components/account/ChangeToTOTP.vue
Normal file
92
src/components/account/ChangeToTOTP.vue
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 grow">
|
||||
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
|
||||
|
||||
<TextCopy :copyText="otp" />
|
||||
</div>
|
||||
<form class="flex flex-col gap-2" @submit.prevent="verify">
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input id="totp" name="totp" type="text" required placeholder="TOTP" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button type="submit" primary :disabled="verifyStatus == 'loading' || verifyStatus == 'success'">
|
||||
zu TOTP wechseln
|
||||
</button>
|
||||
<Spinner v-if="verifyStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="verifyStatus == 'success'" />
|
||||
<FailureXMark v-else-if="verifyStatus == 'failed'" />
|
||||
</div>
|
||||
<p v-if="verifyError" class="text-center">{{ verifyError }}</p>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import TextCopy from "@/components/TextCopy.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
currentRoutine: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
emits: ["updateCurrent"],
|
||||
data() {
|
||||
return {
|
||||
verification: "loading" as "success" | "loading" | "failed",
|
||||
image: undefined as undefined | string,
|
||||
otp: undefined as undefined | string,
|
||||
verifyStatus: undefined as undefined | "loading" | "success" | "failed",
|
||||
verifyError: "" as string,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$http
|
||||
.get(`/user/changeToTOTP`)
|
||||
.then((result) => {
|
||||
this.verification = "success";
|
||||
this.image = result.data.dataUrl;
|
||||
this.otp = result.data.otp;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.verification = "failed";
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
verify(e: any) {
|
||||
let formData = e.target.elements;
|
||||
this.verifyStatus = "loading";
|
||||
this.verifyError = "";
|
||||
this.$http
|
||||
.post(`/user/changeToTOTP`, {
|
||||
otp: this.otp,
|
||||
totp: formData.totp.value,
|
||||
})
|
||||
.then((result) => {
|
||||
this.verifyStatus = "success";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.verifyStatus = "failed";
|
||||
this.verifyError = err.response.data;
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.verifyStatus = undefined;
|
||||
this.$emit("updateCurrent");
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
109
src/components/account/PasswordChange.vue
Normal file
109
src/components/account/PasswordChange.vue
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<form class="flex flex-col gap-2" @submit.prevent="change">
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input
|
||||
id="current"
|
||||
name="current"
|
||||
type="password"
|
||||
required
|
||||
placeholder="aktuelles Passwort"
|
||||
autocomplete="current-password"
|
||||
class="rounded-b-none!"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="new"
|
||||
name="new"
|
||||
type="password"
|
||||
required
|
||||
placeholder="neues Passwort"
|
||||
autocomplete="new-password"
|
||||
class="rounded-none!"
|
||||
:class="notMatching ? 'border-red-600!' : ''"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="new_rep"
|
||||
name="new_rep"
|
||||
type="password"
|
||||
required
|
||||
placeholder="neues Passwort wiederholen"
|
||||
autocomplete="new-password"
|
||||
class="rounded-t-none!"
|
||||
:class="notMatching ? 'border-red-600!' : ''"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="notMatching">Passwörter stimmen nicht überein</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button type="submit" primary :disabled="changeStatus == 'loading' || changeStatus == 'success'">
|
||||
Passwort ändern
|
||||
</button>
|
||||
<Spinner v-if="changeStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="changeStatus == 'success'" />
|
||||
<FailureXMark v-else-if="changeStatus == 'failed'" />
|
||||
</div>
|
||||
<p v-if="changeError" class="text-center">{{ changeError }}</p>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { hashString } from "../../helpers/crypto";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
verification: "loading" as "success" | "loading" | "failed",
|
||||
changeStatus: undefined as undefined | "loading" | "success" | "failed",
|
||||
changeError: "" as string,
|
||||
notMatching: false as boolean,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
async change(e: any) {
|
||||
let formData = e.target.elements;
|
||||
|
||||
let new_pw = await hashString(formData.new.value);
|
||||
let new_rep = await hashString(formData.new_rep.value);
|
||||
if (new_pw != new_rep) {
|
||||
this.notMatching = true;
|
||||
return;
|
||||
}
|
||||
this.notMatching = false;
|
||||
|
||||
this.changeStatus = "loading";
|
||||
this.changeError = "";
|
||||
this.$http
|
||||
.post(`/user/changepw`, {
|
||||
current: await hashString(formData.current.value),
|
||||
newpassword: await hashString(formData.new.value),
|
||||
})
|
||||
.then((result) => {
|
||||
this.changeStatus = "success";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.changeStatus = "failed";
|
||||
this.changeError = err.response.data;
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.changeStatus = undefined;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
83
src/components/account/TotpCheckAndScan.vue
Normal file
83
src/components/account/TotpCheckAndScan.vue
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 grow">
|
||||
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
|
||||
|
||||
<TextCopy :copyText="otp" />
|
||||
</div>
|
||||
<form class="flex flex-col gap-2" @submit.prevent="verify">
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input id="totp" name="totp" type="text" required placeholder="TOTP prüfen" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button type="submit" primary :disabled="verifyStatus == 'loading' || verifyStatus == 'success'">
|
||||
TOTP prüfen
|
||||
</button>
|
||||
<Spinner v-if="verifyStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="verifyStatus == 'success'" />
|
||||
<FailureXMark v-else-if="verifyStatus == 'failed'" />
|
||||
</div>
|
||||
<p v-if="verifyError" class="text-center">{{ verifyError }}</p>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import TextCopy from "@/components/TextCopy.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
verification: "loading" as "success" | "loading" | "failed",
|
||||
image: undefined as undefined | string,
|
||||
otp: undefined as undefined | string,
|
||||
verifyStatus: undefined as undefined | "loading" | "success" | "failed",
|
||||
verifyError: "" as string,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$http
|
||||
.get(`/user/totp`)
|
||||
.then((result) => {
|
||||
this.verification = "success";
|
||||
this.image = result.data.dataUrl;
|
||||
this.otp = result.data.otp;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.verification = "failed";
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
verify(e: any) {
|
||||
let formData = e.target.elements;
|
||||
this.verifyStatus = "loading";
|
||||
this.verifyError = "";
|
||||
this.$http
|
||||
.post(`/user/verify`, {
|
||||
totp: formData.totp.value,
|
||||
})
|
||||
.then((result) => {
|
||||
this.verifyStatus = "success";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.verifyStatus = "failed";
|
||||
this.verifyError = err.response.data;
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.verifyStatus = undefined;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue