initial
This commit is contained in:
@@ -0,0 +1,298 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
type TemplateResult,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
// third party catalogs
|
||||
import '@uptimelink/webwidget';
|
||||
|
||||
import '@design.estate/dees-catalog';
|
||||
import { DeesForm, DeesFormSubmit, DeesInputText } from '@design.estate/dees-catalog';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'wg-loginprompt': WgLogin;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('wg-loginprompt')
|
||||
export class WgLogin extends DeesElement {
|
||||
public static demo = () => html`<wg-loginprompt></wg-loginprompt>`;
|
||||
public static receptionUrl = 'https://reception.lossless.one/typedrequest';
|
||||
|
||||
@property()
|
||||
public activePane: 'login' | 'register' = 'login';
|
||||
|
||||
@property()
|
||||
public productOfInterest: string;
|
||||
|
||||
@property()
|
||||
jwt: string;
|
||||
|
||||
@property({
|
||||
reflect: true,
|
||||
})
|
||||
appData: plugins.idpInterfaces.data.IApp;
|
||||
|
||||
public jwtObserable = new domtools.plugins.smartrx.rxjs.Subject<string>();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
color: ${cssManager.bdTheme('#333333', '#ffffff')};
|
||||
}
|
||||
|
||||
.box {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.box.active {
|
||||
opacity: 1 !important;
|
||||
height: 360px;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.loginbox {
|
||||
}
|
||||
|
||||
.registerbox {
|
||||
}
|
||||
|
||||
.boxcontent {
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
line-height: 1.5em;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.registerButton {
|
||||
display: block;
|
||||
transition: all 0.2s ease;
|
||||
will-change: transform;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.registerButton:hover {
|
||||
color: #fff;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="loginbox box ${this.activePane === 'login' ? 'active' : ''}">
|
||||
<div class="boxcontent">
|
||||
<dees-form
|
||||
id="loginForm"
|
||||
@formData="${(eventArg) => {
|
||||
this.login({
|
||||
emailAddress: eventArg.detail.data.emailAddress,
|
||||
passwordArg: eventArg.detail.data.password,
|
||||
});
|
||||
}}"
|
||||
>
|
||||
<dees-input-text
|
||||
id="loginEmailInput"
|
||||
.required=${true}
|
||||
key="emailAddress"
|
||||
label="Email-Address or Username"
|
||||
></dees-input-text>
|
||||
<dees-input-text
|
||||
.id=${'loginPasswordInput'}
|
||||
.key=${'password'}
|
||||
.label=${'Password'}
|
||||
.isPasswordBool=${true}
|
||||
></dees-input-text>
|
||||
<dees-form-submit id="loginSubmitButton"></dees-form-submit>
|
||||
<div class="info">
|
||||
You'll go here: ${this.appData ? html`${this.appData.appUrl}` : html``}
|
||||
<p><span class="registerButton" @click=${() => {this.activePane = 'register'}}>You can also register for a new account.</span></p>
|
||||
</div>
|
||||
</dees-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="registerbox box ${this.activePane === 'register' ? 'active' : ''}">
|
||||
<div class="boxcontent">
|
||||
<dees-form
|
||||
id="registrationForm"
|
||||
@formData="${(eventArg) => {
|
||||
this.register({
|
||||
emailAddress: eventArg.detail.data.emailAddress,
|
||||
});
|
||||
}}"
|
||||
>
|
||||
<dees-input-text
|
||||
.required=${true}
|
||||
key="emailAddress"
|
||||
label="Email-Address"
|
||||
></dees-input-text>
|
||||
<dees-input-checkbox .label="${'Agree to the Terms and Conditions'}"></dees-input-checkbox>
|
||||
<dees-form-submit>Send Verification Email</dees-form-submit>
|
||||
<div class="info">
|
||||
Already have an account?
|
||||
<p><span class="registerButton" @click=${() => {this.activePane = 'login'}}>Login instead.</span></p>
|
||||
</div>
|
||||
</dees-form>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
|
||||
const loginPasswordInput: DeesInputText = loginForm.querySelector('#loginPasswordInput');
|
||||
const loginSubmitButton: DeesFormSubmit = loginForm.querySelector('#loginSubmitButton');
|
||||
const setButtonText = async () => {
|
||||
if (loginPasswordInput.value) {
|
||||
console.log('updating text of loginprompt.')
|
||||
loginSubmitButton.text = 'Login';
|
||||
} else {
|
||||
loginSubmitButton.text = 'Send magic link (or enter password)';
|
||||
}
|
||||
};
|
||||
loginForm.changeSubject.subscribe(() => {
|
||||
console.log(`checking button text ${loginPasswordInput.value}`);
|
||||
setButtonText();
|
||||
});
|
||||
setButtonText();
|
||||
}
|
||||
|
||||
private login = async (valueArg: { emailAddress: string; passwordArg: string }) => {
|
||||
// lets define the needed requests
|
||||
const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
|
||||
const loginRequestWithUsernameAndPassword =
|
||||
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
|
||||
WgLogin.receptionUrl,
|
||||
'loginWithEmailOrUsernameAndPassword'
|
||||
);
|
||||
const loginRequestWithEmail =
|
||||
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmail>(
|
||||
WgLogin.receptionUrl,
|
||||
'loginWithEmail'
|
||||
);
|
||||
|
||||
// lets do the actual logging in
|
||||
if (valueArg.emailAddress && valueArg.passwordArg) {
|
||||
loginForm.setStatus('pending', 'logging in...');
|
||||
const response = await loginRequestWithUsernameAndPassword
|
||||
.fire({
|
||||
username: valueArg.emailAddress, // TODO: rename to emailAddress
|
||||
password: valueArg.passwordArg,
|
||||
})
|
||||
.catch(() => {
|
||||
loginForm.setStatus('error', 'could not log you in. Try Again!');
|
||||
return;
|
||||
});
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
if (response.refreshToken) {
|
||||
loginForm.setStatus('pending', 'obtained refreshToken...');
|
||||
const jwt = await this.handleRefreshToken(response.refreshToken, 0);
|
||||
if (jwt) {
|
||||
loginForm.setStatus('success', 'obtained jwt.');
|
||||
} else {
|
||||
loginForm.setStatus('error', 'something went wrong');
|
||||
}
|
||||
} else {
|
||||
}
|
||||
} else if (valueArg.emailAddress && !valueArg.passwordArg) {
|
||||
loginForm.setStatus('pending', 'sending magic link...');
|
||||
const response = await loginRequestWithEmail.fire({
|
||||
email: valueArg.emailAddress,
|
||||
});
|
||||
if (response.status === 'ok') {
|
||||
loginForm.setStatus('success', 'Please check your email!');
|
||||
}
|
||||
console.log(response);
|
||||
}
|
||||
};
|
||||
|
||||
private register = async (valueArg: { emailAddress: string }) => {
|
||||
const registrationForm: DeesForm = this.shadowRoot.querySelector('#registrationForm');
|
||||
registrationForm.setStatus('pending', 'registering...');
|
||||
const firstSignupRequest =
|
||||
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_FirstRegistration>(
|
||||
WgLogin.receptionUrl,
|
||||
'firstRegistrationRequest'
|
||||
);
|
||||
const response = await firstSignupRequest
|
||||
.fire({
|
||||
email: valueArg.emailAddress,
|
||||
productSlugOfInterest: this.productOfInterest,
|
||||
})
|
||||
.catch((err) => {
|
||||
registrationForm.setStatus('error', err.message);
|
||||
return null;
|
||||
});
|
||||
if (response.status === 'ok') {
|
||||
registrationForm.setStatus('success', 'Please check your email!');
|
||||
}
|
||||
console.log(response);
|
||||
};
|
||||
|
||||
public async dispatchJwt(jwtArg?: string) {
|
||||
if (jwtArg !== undefined) {
|
||||
console.log(`dispatching jwt from loginprompt.`);
|
||||
this.jwt = jwtArg;
|
||||
await domtools.plugins.smartdelay.delayFor(200);
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('leleLoginGotJwt', {
|
||||
detail: {
|
||||
jwt: this.jwt,
|
||||
},
|
||||
})
|
||||
);
|
||||
this.jwtObserable.next(this.jwt);
|
||||
}
|
||||
}
|
||||
|
||||
public async handleRefreshToken(refreshTokenArg: string, delayDispatchMillisArg = 0) {
|
||||
// a refreshToken binds dierctly to a session.
|
||||
// the refresh token is used on a continuous basis to get fresh and short-lived jwts
|
||||
const refreshJwt = new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
|
||||
WgLogin.receptionUrl,
|
||||
'refreshJwt'
|
||||
);
|
||||
const responseJwt = await refreshJwt.fire({
|
||||
refreshToken: refreshTokenArg,
|
||||
});
|
||||
|
||||
if (responseJwt.jwt) {
|
||||
this.domtools.convenience.smartdelay.delayFor(delayDispatchMillisArg).then(() => {
|
||||
this.dispatchJwt(responseJwt.jwt);
|
||||
});
|
||||
return responseJwt.jwt;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user