enable password on invite or reset
This commit is contained in:
parent
ee52363bde
commit
b39198c935
4 changed files with 135 additions and 18 deletions
|
|
@ -46,7 +46,7 @@
|
|||
required
|
||||
placeholder="Passwort"
|
||||
class="rounded-t-none!"
|
||||
autocomplete="off"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,17 +14,59 @@
|
|||
<p class="w-fit">Einladungslink nicht gültig - Melde dich bei einem Admin.</p>
|
||||
</div>
|
||||
<form v-else class="flex flex-col gap-2" @submit.prevent="invite">
|
||||
<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>
|
||||
<p class="text-center">Dein Nutzername: {{ username }}</p>
|
||||
|
||||
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
|
||||
<div v-if="tab == 'totp'" class="flex flex-col gap-2">
|
||||
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
|
||||
|
||||
<TextCopy :copyText="otp" />
|
||||
<TextCopy :copyText="otp" />
|
||||
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input id="totp" name="totp" type="text" required placeholder="TOTP" />
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input id="totp" name="totp" type="text" required placeholder="TOTP" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
placeholder="Passwort"
|
||||
class="rounded-b-none!"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<input
|
||||
id="passwordrep"
|
||||
name="passwordrep"
|
||||
type="password"
|
||||
required
|
||||
placeholder="Passwort wiederholen"
|
||||
class="rounded-t-none!"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button type="submit" primary :disabled="inviteStatus == 'loading' || inviteStatus == 'success'">
|
||||
|
|
@ -50,6 +92,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
|
|||
import FormBottomBar from "@/components/FormBottomBar.vue";
|
||||
import TextCopy from "@/components/TextCopy.vue";
|
||||
import AppLogo from "@/components/AppLogo.vue";
|
||||
import { hashString } from "@/helpers/crypto";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -60,6 +103,7 @@ export default defineComponent({
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
tab: "totp",
|
||||
verification: "loading" as "success" | "loading" | "failed",
|
||||
image: undefined as undefined | string,
|
||||
otp: undefined as undefined | string,
|
||||
|
|
@ -89,15 +133,19 @@ export default defineComponent({
|
|||
});
|
||||
},
|
||||
methods: {
|
||||
invite(e: any) {
|
||||
let formData = e.target.elements;
|
||||
async invite(e: any) {
|
||||
let secret = "";
|
||||
if (this.tab == "totp") secret = this.totp(e);
|
||||
else secret = await this.password(e);
|
||||
|
||||
this.inviteStatus = "loading";
|
||||
this.inviteError = "";
|
||||
this.$http
|
||||
.put(`/invite`, {
|
||||
token: this.token,
|
||||
mail: this.mail,
|
||||
totp: formData.totp.value,
|
||||
secret: secret,
|
||||
routine: this.tab,
|
||||
})
|
||||
.then((result) => {
|
||||
this.inviteStatus = "success";
|
||||
|
|
@ -112,6 +160,14 @@ export default defineComponent({
|
|||
this.inviteError = err.response.data;
|
||||
});
|
||||
},
|
||||
totp(e: any) {
|
||||
let formData = e.target.elements;
|
||||
return formData.totp.value;
|
||||
},
|
||||
async password(e: any) {
|
||||
let formData = e.target.elements;
|
||||
return await hashString(formData.password.value);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,15 +15,58 @@
|
|||
<RouterLink to="/reset" class="text-primary">Zum zurücksetzen Start</RouterLink>
|
||||
</div>
|
||||
<form v-else class="flex flex-col gap-2" @submit.prevent="reset">
|
||||
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
|
||||
<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>
|
||||
|
||||
<TextCopy :copyText="otp" />
|
||||
<div v-if="tab == 'totp'" class="flex flex-col gap-2">
|
||||
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
|
||||
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input id="totp" name="totp" type="text" required placeholder="TOTP" />
|
||||
<TextCopy :copyText="otp" />
|
||||
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input id="totp" name="totp" type="text" required placeholder="TOTP" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
placeholder="Passwort"
|
||||
class="rounded-b-none!"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<input
|
||||
id="passwordrep"
|
||||
name="passwordrep"
|
||||
type="password"
|
||||
required
|
||||
placeholder="Passwort wiederholen"
|
||||
class="rounded-t-none!"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button type="submit" primary :disabled="resetStatus == 'loading' || resetStatus == 'success'">
|
||||
|
|
@ -50,6 +93,7 @@ import { RouterLink } from "vue-router";
|
|||
import FormBottomBar from "@/components/FormBottomBar.vue";
|
||||
import TextCopy from "@/components/TextCopy.vue";
|
||||
import AppLogo from "@/components/AppLogo.vue";
|
||||
import { hashString } from "@/helpers/crypto";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -60,6 +104,7 @@ export default defineComponent({
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
tab: "totp",
|
||||
verification: "loading" as "success" | "loading" | "failed",
|
||||
image: undefined as undefined | string,
|
||||
otp: undefined as undefined | string,
|
||||
|
|
@ -87,15 +132,19 @@ export default defineComponent({
|
|||
});
|
||||
},
|
||||
methods: {
|
||||
reset(e: any) {
|
||||
let formData = e.target.elements;
|
||||
async reset(e: any) {
|
||||
let secret = "";
|
||||
if (this.tab == "totp") secret = this.totp(e);
|
||||
else secret = await this.password(e);
|
||||
|
||||
this.resetStatus = "loading";
|
||||
this.resetError = "";
|
||||
this.$http
|
||||
.put(`/reset`, {
|
||||
token: this.token,
|
||||
mail: this.mail,
|
||||
totp: formData.totp.value,
|
||||
secret: secret,
|
||||
routine: this.tab,
|
||||
})
|
||||
.then((result) => {
|
||||
this.resetStatus = "success";
|
||||
|
|
@ -110,6 +159,14 @@ export default defineComponent({
|
|||
this.resetError = err.response.data;
|
||||
});
|
||||
},
|
||||
totp(e: any) {
|
||||
let formData = e.target.elements;
|
||||
return formData.totp.value;
|
||||
},
|
||||
async password(e: any) {
|
||||
let formData = e.target.elements;
|
||||
return await hashString(formData.password.value);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<form class="flex flex-col gap-2" @submit.prevent="reset">
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input id="username" name="username" type="text" required placeholder="Benutzer" />
|
||||
<input id="username" name="username" type="text" required placeholder="Benutzer" :value="username" />
|
||||
</div>
|
||||
</div>
|
||||
<RouterLink to="/" class="w-fit self-end text-primary">zum Login</RouterLink>
|
||||
|
|
@ -45,8 +45,12 @@ export default defineComponent({
|
|||
return {
|
||||
resetStatus: undefined as undefined | "loading" | "success" | "failed",
|
||||
resetMessage: "" as string,
|
||||
username: "" as string,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.username = localStorage.getItem("username") ?? "";
|
||||
},
|
||||
methods: {
|
||||
reset(e: any) {
|
||||
let formData = e.target.elements;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue