lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

feature/43-password-reset #61

Merged
philipp merged 5 commits from feature/43-password-reset into dev 2021-02-07 16:11:18 +00:00
Conversation 1 Commits 5 Files Changed 3 +145
3 changed files with 145 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.svelte
View File

@ -52,6 +52,7 @@
import RunnerDetail from "./components/RunnerDetail.svelte";
import Imprint from "./components/Imprint.svelte";
import Privacy from "./components/Privacy.svelte";
import ResetPassword from "./components/ResetPassword.svelte";
store.init();
registerSW();
</script>
@ -61,6 +62,10 @@
<Route path="/forgot_password">
<ForgotPassword />
</Route>
{:else if $router.path.includes('/reset')}
<Route path="/reset/:resetkey" let:params>
<ResetPassword {params} />
</Route>
{:else if $router.path === '/about'}
<Route path="/about">
<About />

129
src/components/ResetPassword.svelte Normal file
View File

@ -0,0 +1,129 @@
<script>
import { AuthService } from "@odit/lfk-client-js";
import { _ } from "svelte-i18n";
import Toastify from "toastify-js";
import "toastify-js/src/toastify.css";
let state = "reset_in_progress";
let password = "";
export let params;
function set_new_password() {
if(password.trim() !== ""){
Toastify({
text: $_('password-reset-in-progress'),
duration: 3500,
}).showToast();
AuthService.authControllerResetPassword(atob(params.resetkey),{ password })
.then((resp) => {
Toastify({
text: $_('password-reset-successful'),
duration: 3500,
}).showToast();
state="reset_success";
})
.catch((err) => {
state="reset_error";
});
} else {
Toastify({
text: $_('please-provide-a-password'),
duration: 3500,
}).showToast();
}
}
</script>
{#if state==="reset_success"}
<div class="min-h-screen flex items-center justify-center bg-gray-100">
<div class="max-w-md w-full py-12 px-6">
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
<p class="mt-6 text-lg text-center font-bold text-gray-900">
{$_('application_name')}
</p>
<p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
{$_('successful-password-reset')}
</p>
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
{$_('you-can-now-use-your-new-password-to-log-in-to-your-account')}
</p>
<div class="mt-6">
<div class="mt-6">
<a
href="/login/"
class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
{$_('go-to-login')}
</a>
</div>
</div>
</div>
</div>
{:else if state==="reset_error"}
<div class="min-h-screen flex items-center justify-center bg-gray-100">
<div class="max-w-md w-full py-12 px-6">
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
<p class="mt-6 text-lg text-center font-bold text-gray-900">
{$_('application_name')}
</p>
<p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
{$_('password-reset-failed')}
</p>
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
{$_('please-request-a-new-reset-mail')}
</p>
<div class="mt-6">
<div class="mt-6">
<a
href="/forgot_password/"
class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
{$_('request-a-new-reset-mail')}
</a>
</div>
</div>
</div>
</div>
{:else if state==="reset_in_progress"}
<div class="min-h-screen flex items-center justify-center bg-gray-100">
<div class="max-w-md w-full py-12 px-6">
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
<p class="mt-6 text-lg text-center font-bold text-gray-900">
{$_('application_name')}
</p>
<p class="mt-2 mb-4 text-md text-center text-gray-900">
{$_('reset-password')}
</p>
<div>
<div class="rounded-md shadow-sm">
<div>
<input
aria-label={$_('new-password')}
name="password"
type="password"
required=""
class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
placeholder={$_('new-password')}
bind:value={password} />
</div>
</div>
<div class="mt-5">
<button
on:click={set_new_password}
type="submit"
class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
<span class="absolute left-0 inset-y pl-3">
<svg
class="h-5 w-5 text-gray-500"
fill="currentColor"
viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
clip-rule="evenodd" />
</svg>
</span>
{$_('reset-my-password')}
</button>
</div>
</div>
</div>
</div>
{/if}

11
src/locales/en.json
View File

@ -89,6 +89,7 @@
"forgot_password?": "Forgot your password?",
"general-stats": "General Stats",
"general_promise_error": "😢 Error",
"go-to-login": "Go To Login",
"goback": "Go Home",
"group": "Group",
"groups": "Groups",
@ -115,6 +116,7 @@
"middle-name": "Middle name",
"minimum-lap-time-in-s": "minimum lap time in s",
"name": "Name",
"new-password": "New password",
"no-license-text-could-be-found": "No license text could be found 😢",
"no-tracks-added-yet": "there are no tracks added yet.",
"organization": "Organization",
@ -123,18 +125,25 @@
"oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
"password": "Password",
"password-is-required": "Password is required",
"password-reset-failed": "Password reset failed!",
"password-reset-in-progress": "Password Reset in Progress...",
"password-reset-successful": "Password Reset successful!",
"permissions": "Permissions",
"phone": "Phone",
"please-provide-a-password": "Please provide a password...",
"please-provide-the-required-csv-xlsx-file": "Please provide the required csv/ xlsx file",
"please-provide-the-required-information-to-add-a-new-runner": "Please provide the required information to add a new runner.",
"please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
"please-request-a-new-reset-mail": "Please request a new reset mail...",
"privacy": "Privacy 🔒",
"privacy-loading": "Privacy loading...",
"profile-picture": "Profile Picture",
"read-license": "Read License",
"register": "Register",
"repo_link": "Link",
"request-a-new-reset-mail": "Request a new reset mail",
"reset-my-password": "Reset my password",
"reset-password": "Reset your password",
"runner-import": "Runner Import",
"runner-updated": "Runner updated!",
"runnerimport_verify_runners_org": "Please confirm these runners for import into the organization \"{org_name}\"",
@ -144,6 +153,7 @@
"settings": "Settings",
"signout": "Sign out",
"stats-are-being-loaded": "stats are being loaded...",
"successful-password-reset": "Successful password reset!",
"team": "Team",
"team-name": "Team name",
"teams": "Teams",
@ -165,5 +175,6 @@
"users": "Users",
"valid-email-is-required": "valid email is required",
"welcome_wavinghand": "Welcome 👋",
"you-can-now-use-your-new-password-to-log-in-to-your-account": "You can now use your new password to log in to your account! 🎉",
"your_profile": "Your Profile"
}