Skip to content

Instantly share code, notes, and snippets.

@gistlyn
Created February 19, 2019 07:29
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save gistlyn/ccf2f176ddc0bb3cfd17def8a3de5595 to your computer and use it in GitHub Desktop.
Client Ajax Forms using TypeScript
<script src="/lib/@servicestack/client/index.js"></script>
<script src="/dtos.js"></script>
<h3>Sign In using credentials</h3>
<form action="/auth/credentials" method="post">
<div class="form-row">
<div class="form-group" data-validation-summary="userName,password"></div>
</div>
<div class="form-row">
<div class="form-group">
<input class="form-control form-control-lg" name="userName" type="text" placeholder="UserName">
</div>
</div>
<div class="form-row">
<div class="form-group">
<input class="form-control form-control-lg" name="password" type="password" placeholder="Password">
</div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-lg btn-primary">Login</button>
</div>
</div>
<div class="form-row">
<div class="form-group">
<input type="checkbox" id="rememberMe" name="rememberMe" value="true">
<label for="rememberMe">Remember Me</label>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<a class="lnk" href="/client-ts/register">Register New User</a>
</div>
</div>
</form>
<div>
<b>Quick Login:</b>
<div class="quicklist">
<span data-click="switchUser:admin@email.com">admin@email.com</span>
<span data-click="switchUser:new@user.com">new@user.com</span>
</div>
</div>
{{#capture appendTo scripts}}
<script>var CONTINUE = '{{qs.continue ?? "/client-ts/"}}';</script>
<script src="login.js"></script>
{{/capture}}
import { bindHandlers, bootstrapForm } from "@servicestack/client";
import { AuthenticateResponse } from "../../dtos";
declare var CONTINUE:string;
bootstrapForm(document.querySelector('form'), {
success: (r: AuthenticateResponse) => {
location.href = CONTINUE;
}
});
bindHandlers({
switchUser: (u: string) => {
(document.querySelector("[name=userName]") as HTMLInputElement).value = u;
(document.querySelector("[name=password]") as HTMLInputElement).value = 'p@55wOrd';
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment