enable switch to pw totp in account settings
This commit is contained in:
parent
63d97d0b83
commit
ee52363bde
6 changed files with 429 additions and 56 deletions
93
src/components/account/ChangeToPassword.vue
Normal file
93
src/components/account/ChangeToPassword.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<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!"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="new_rep"
|
||||
name="new_rep"
|
||||
type="password"
|
||||
required
|
||||
placeholder="neues Passwort wiederholen"
|
||||
autocomplete="new-password"
|
||||
class="rounded-t-none!"
|
||||
/>
|
||||
</div>
|
||||
</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,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
async change(e: any) {
|
||||
let formData = e.target.elements;
|
||||
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>
|
||||
96
src/components/account/PasswordChange.vue
Normal file
96
src/components/account/PasswordChange.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<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!"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="new_rep"
|
||||
name="new_rep"
|
||||
type="password"
|
||||
required
|
||||
placeholder="neues Passwort wiederholen"
|
||||
autocomplete="new-password"
|
||||
class="rounded-t-none!"
|
||||
/>
|
||||
</div>
|
||||
</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,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
async change(e: any) {
|
||||
let formData = e.target.elements;
|
||||
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>
|
||||
|
|
@ -102,6 +102,22 @@ export default defineComponent({
|
|||
resetAllPiniaStores();
|
||||
this.username = localStorage.getItem("username") ?? "";
|
||||
this.routine = localStorage.getItem("routine") ?? "";
|
||||
|
||||
if (this.username != "") {
|
||||
this.$http
|
||||
.post(`/auth/kickof`, {
|
||||
username: this.username,
|
||||
})
|
||||
.then((result) => {
|
||||
this.usernameStatus = "success";
|
||||
this.routine = result.data.routine;
|
||||
localStorage.setItem("routine", result.data.routine);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.usernameStatus = "failed";
|
||||
this.loginError = err.response?.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetRoutine() {
|
||||
|
|
|
|||
|
|
@ -6,29 +6,41 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
|
||||
<div class="flex flex-col gap-2">
|
||||
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
|
||||
|
||||
<TextCopy :copyText="otp" />
|
||||
<Spinner v-if="loading" class="mx-auto" />
|
||||
<div v-else class="flex flex-col w-full h-full gap-2 px-7 overflow-hidden">
|
||||
<div class="w-full flex flex-row gap-2 justify-center">
|
||||
<p
|
||||
class="w-1/2 p-0.5 pl-0 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
|
||||
:class="
|
||||
tab == 'totp' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200'
|
||||
"
|
||||
@click="tab = 'totp'"
|
||||
>
|
||||
TOTP
|
||||
</p>
|
||||
<p
|
||||
class="w-1/2 p-0.5 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
|
||||
:class="
|
||||
tab == 'password' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : 'hover:bg-red-200'
|
||||
"
|
||||
@click="tab = 'password'"
|
||||
>
|
||||
Passwort
|
||||
</p>
|
||||
</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>
|
||||
<ChangeToTOTP
|
||||
v-if="currentRoutine == 'password' && tab == 'totp'"
|
||||
:currentRoutine="currentRoutine"
|
||||
@updateCurrent="currentRoutine = 'totp'"
|
||||
/>
|
||||
<ChangeToPassword
|
||||
v-else-if="currentRoutine == 'totp' && tab == 'password'"
|
||||
:currentRoutine="currentRoutine"
|
||||
@updateCurrent="currentRoutine = 'password'"
|
||||
/>
|
||||
<TotpCheckAndScan v-else-if="tab == 'totp'" />
|
||||
<PasswordChange v-else-if="tab == 'password'" />
|
||||
<p v-else>etwas ist schief gelaufen</p>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
|
|
@ -42,53 +54,34 @@ 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 TotpCheckAndScan from "../../components/account/TotpCheckAndScan.vue";
|
||||
import PasswordChange from "../../components/account/PasswordChange.vue";
|
||||
import ChangeToPassword from "../../components/account/ChangeToPassword.vue";
|
||||
import ChangeToTOTP from "../../components/account/ChangeToTOTP.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,
|
||||
loading: false,
|
||||
tab: "",
|
||||
currentRoutine: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loading = true;
|
||||
this.$http
|
||||
.get(`/user/totp`)
|
||||
.get(`/user/routine`)
|
||||
.then((result) => {
|
||||
this.verification = "success";
|
||||
this.image = result.data.dataUrl;
|
||||
this.otp = result.data.otp;
|
||||
this.tab = result.data.routine;
|
||||
this.currentRoutine = result.data.routine;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.verification = "failed";
|
||||
.catch((err) => {})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
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);
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue