@ctx-core/auth0-ui 10.0.122 → 11.0.3

package/.swcrc

@@ -0,0 +1,10 @@
+{
+	"jsc": {
+		"target": "es2019",
+		"parser": {
+			"syntax": "typescript",
+			"tsx": true,
+			"dynamicImport": true
+		}
+	}
+}

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @ctx-core/auth0-ui
 
+## 11.0.3
+
+### Patch Changes
+
+- - index.browser.js
+
+## 11.0.2
+
+### Patch Changes
+
+- fix: auth0_ui_ctx_I: remove props due to extracting @ctx-core/auth0-service
+
+## 11.0.1
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - @ctx-core/http@9.0.0
+  - @ctx-core/auth0@26.0.0
+  - @ctx-core/jwt@10.0.28
+  - @ctx-core/auth0-management@6.0.102
+
+## 11.0.0
+
+### Major Changes
+
+- extracted @ctx-core/auth0-service from @ctx-core/auth0-ui
+
+### Patch Changes
+
+- Updated dependencies
+  - @ctx-core/http@8.0.0
+
+## 10.0.123
+
+### Patch Changes
+
+- compile using swc
+- Updated dependencies
+  - @ctx-core/auth0@25.0.103
+  - @ctx-core/auth0-management@6.0.101
+  - @ctx-core/dialog@15.0.78
+  - @ctx-core/dom@11.0.30
+  - @ctx-core/error@11.0.18
+  - @ctx-core/fetch@11.0.80
+  - @ctx-core/jwt@10.0.27
+  - @ctx-core/object@21.0.22
+  - @ctx-core/store@27.0.36
+
 ## 10.0.122
 
 ### Patch Changes

package/dist/auth0_ui_Ctx.js

@@ -1,2 +1,3 @@
-export {};
+export { };
+
 //# sourceMappingURL=auth0_ui_Ctx.js.map

package/dist/auth0_ui_Ctx.js.map

@@ -1 +1 @@
-{"version":3,"file":"auth0_ui_Ctx.js","sourceRoot":"","sources":["../src/auth0_ui_Ctx.ts"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/auth0_ui_Ctx.ts"],"sourcesContent":["import type { auth0_body__T, auth0_Ctx, password_realm_body__T } from '@ctx-core/auth0'\nimport type { auth0_ui_ctx_I } from './auth0_ui_ctx_I.generated.js'\nimport type {\n\tlogin_data_password_realm_body_I, signup_data_password_realm_body_I\n} from './ui/Auth0_c.js'\nexport interface auth0_ui_Ctx extends auth0_ui_ctx_I, auth0_Ctx {\n\tlogin_auth0_body_:auth0_body__T<login_data_password_realm_body_I>\n\tlogin_password_realm_body_:password_realm_body__T<login_data_password_realm_body_I>\n\tsignup_auth0_body_:auth0_body__T<signup_data_password_realm_body_I>\n\tsignup_password_realm_body_fn:password_realm_body__T<signup_data_password_realm_body_I>\n}\n"],"names":[],"mappings":"AAAA,MAAM"}

package/dist/auth0_ui_ctx_I.generated.js

@@ -1,2 +1,5 @@
-export {};
+/*
+ * This file was generated by `npm run generate_ctx_I_file` in @ctx-core/dev-tools
+*/ export { };
+
 //# sourceMappingURL=auth0_ui_ctx_I.generated.js.map

package/dist/auth0_ui_ctx_I.generated.js.map

@@ -1 +1 @@
-{"version":3,"file":"auth0_ui_ctx_I.generated.js","sourceRoot":"","sources":["../src/auth0_ui_ctx_I.generated.ts"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/auth0_ui_ctx_I.generated.ts"],"sourcesContent":["/*\n * This file was generated by `npm run generate_ctx_I_file` in @ctx-core/dev-tools\n*/\n\nexport interface auth0_ui_ctx_I {\n\n}"],"names":[],"mappings":"AAAA,EAEE,AAFF;;AAEE,AAFF,EAEE,CAEF,MAAM"}

package/dist/auth0_ui_ctx_key.js

@@ -1,2 +1,3 @@
 export const auth0_ui_ctx_key = Symbol('auth0_ui_ctx');
+
 //# sourceMappingURL=auth0_ui_ctx_key.js.map

package/dist/auth0_ui_ctx_key.js.map

@@ -1 +1 @@
-{"version":3,"file":"auth0_ui_ctx_key.js","sourceRoot":"","sources":["../src/auth0_ui_ctx_key.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA"}
+{"version":3,"sources":["../src/auth0_ui_ctx_key.ts"],"sourcesContent":["export const auth0_ui_ctx_key = Symbol('auth0_ui_ctx')\n"],"names":["auth0_ui_ctx_key","Symbol"],"mappings":"AAAA,MAAM,CAAC,KAAK,CAACA,gBAAgB,GAAGC,MAAM,CAAC,CAAc"}

package/dist/auth_script_html_.js

@@ -30,5 +30,6 @@ export function auth_script_html_() {
 </script>
 	`.trim();
 }
-export { auth_script_html_ as _auth_script_html, auth_script_html_ as _html__script__auth, };
+export { auth_script_html_ as _auth_script_html, auth_script_html_ as _html__script__auth,  };
+
 //# sourceMappingURL=auth_script_html_.js.map

package/dist/auth_script_html_.js.map

@@ -1 +1 @@
-{"version":3,"file":"auth_script_html_.js","sourceRoot":"","sources":["../src/auth_script_html_.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,iBAAiB;IAChC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BN,CAAC,IAAI,EAAE,CAAA;AACT,CAAC;AACD,OAAO,EACN,iBAAiB,IAAI,iBAAiB,EACtC,iBAAiB,IAAI,mBAAmB,GACxC,CAAA"}
+{"version":3,"sources":["../src/auth_script_html_.ts"],"sourcesContent":["export function auth_script_html_():string {\n\treturn `\n<script>\n\t(function() {\n\t\tvar location = window.location\n\t\tvar search = location.search\n\t\tvar search_values = _values(search.substr(1))\n\t\tvar hash = location.hash\n\t\tvar auth0_token = _values(hash.substr(1))\n\t\tvar auth0_token_json = JSON.stringify(auth0_token)\n\t\tvar redirect_url =\n\t\t\t\t\tsearch_values\n\t\t\t\t\t&& search_values.redirect_url\n\t\tlocalStorage.setItem('auth0_token_json', auth0_token_json)\n\t\tif (redirect_url) {\n\t\t\tlocation.href = redirect_url\n\t\t}\n\t\tfunction _values(string) {\n\t\t\tvar segments = string.split('&')\n\t\t\tvar values = {}\n\t\t\tfor (var i=0; i < segments.length; i++) {\n\t\t\t\tvar pair = segments[i].split('=')\n\t\t\t\tvar key = decodeURIComponent(pair[0])\n\t\t\t\tvar value = decodeURIComponent(pair[1])\n\t\t\t\tvalues[key] = value\n\t\t\t}\n\t\t\treturn values\n\t\t}\n\t})()\n</script>\n\t`.trim()\n}\nexport {\n\tauth_script_html_ as _auth_script_html,\n\tauth_script_html_ as _html__script__auth,\n}\n"],"names":["auth_script_html_","trim","_auth_script_html","_html__script__auth"],"mappings":"AAAA,MAAM,UAAUA,iBAAiB,GAAU,CAAC;IAC3C,MAAM,EAAE,uwBA6BR,EAAEC,IAAI;AACP,CAAC;AACD,MAAM,GACLD,iBAAiB,IAAIE,iBAAiB,EACtCF,iBAAiB,IAAIG,mBAAmB"}

package/dist/getContext_auth0_ui_ctx.js

@@ -3,4 +3,5 @@ import { auth0_ui_ctx_key } from './auth0_ui_ctx_key.js';
 export function getContext_auth0_ui_ctx() {
     return getContext(auth0_ui_ctx_key);
 }
+
 //# sourceMappingURL=getContext_auth0_ui_ctx.js.map

package/dist/getContext_auth0_ui_ctx.js.map

@@ -1 +1 @@
-{"version":3,"file":"getContext_auth0_ui_ctx.js","sourceRoot":"","sources":["../src/getContext_auth0_ui_ctx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,MAAM,UAAU,uBAAuB;IACrC,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAA;AACrC,CAAC"}
+{"version":3,"sources":["../src/getContext_auth0_ui_ctx.ts"],"sourcesContent":["import { getContext } from 'svelte'\nimport { auth0_ui_ctx_key } from './auth0_ui_ctx_key.js'\nexport function getContext_auth0_ui_ctx() {\n  return getContext(auth0_ui_ctx_key)\n}\n"],"names":["getContext","auth0_ui_ctx_key","getContext_auth0_ui_ctx"],"mappings":"AAAA,MAAM,GAAGA,UAAU,QAAQ,CAAQ;AACnC,MAAM,GAAGC,gBAAgB,QAAQ,CAAuB;AACxD,MAAM,UAAUC,uBAAuB,GAAG,CAAC;IACzC,MAAM,CAACF,UAAU,CAACC,gBAAgB;AACpC,CAAC"}

package/dist/index.js

@@ -4,4 +4,5 @@ export * from './auth_script_html_.js';
 export * from './getContext_auth0_ui_ctx.js';
 export * from './node/index.js';
 export * from './ui/index.js';
+
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './auth0_ui_Ctx.js'\nexport * from './auth0_ui_ctx_key.js'\nexport * from './auth_script_html_.js'\nexport * from './getContext_auth0_ui_ctx.js'\nexport * from './node/index.js'\nexport * from './ui/index.js'\n"],"names":[],"mappings":"cAAc,CAAmB;cACnB,CAAuB;cACvB,CAAwB;cACxB,CAA8B;cAC9B,CAAiB;cACjB,CAAe"}

package/dist/ui/Auth0.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+import { setContext } from 'svelte'
+import {
+	auth0_forgot_password_opened$_b, auth0_opened_class$_b, auth0_login_opened$_b, auth0_signup_opened$_b,
+	auth0_forgot_password_check_email_opened$_b, auth0_change_password_opened$_b
+} from '@ctx-core/auth0'
+import type { auth0_ui_Ctx } from '../auth0_ui_Ctx.js'
+import { auth0_ui_ctx_key } from '../auth0_ui_ctx_key.js'
+import { Auth0_c } from './Auth0_c.js'
+import Auth0_Dialog_Close from './Auth0_Dialog_Close.svelte'
+import Auth0_Forgot_Password_Check_Email_Form from './Auth0_Forgot_Password_Check_Email_Form.svelte'
+import Auth0_Change_Password_Form from './Auth0_Change_Password_Form.svelte'
+import Auth0_Forgot_Password_Form from './Auth0_Forgot_Password_Form.svelte'
+import Auth0_Login_Form from './Auth0_Login_Form.svelte'
+import Auth0_Signup_Form from './Auth0_Signup_Form.svelte'
+export let ctx = {} as auth0_ui_Ctx, dialog = false
+setContext(auth0_ui_ctx_key, ctx)
+const auth0_change_password_opened$ = auth0_change_password_opened$_b(ctx)
+const auth0_opened_class$ = auth0_opened_class$_b(ctx)
+const auth0_forgot_password_check_email_opened$ = auth0_forgot_password_check_email_opened$_b(ctx)
+const auth0_forgot_password_opened$ = auth0_forgot_password_opened$_b(ctx)
+const auth0_login_opened$ = auth0_login_opened$_b(ctx)
+const auth0_signup_opened$ = auth0_signup_opened$_b(ctx)
+const _ = new Auth0_c(ctx)
+</script>
+
+<div
+	class="Auth0 {$auth0_opened_class$} {$$props.class || ''}"
+	class:dialog
+	class:visible={!!$auth0_opened_class$}
+>
+	<Auth0_Dialog_Close></Auth0_Dialog_Close>
+	{#if $auth0_login_opened$}
+		<Auth0_Login_Form {...$$props}></Auth0_Login_Form>
+	{:else if $auth0_signup_opened$}
+		<Auth0_Signup_Form {...$$props}>
+			<div slot="tos__signup"></div>
+		</Auth0_Signup_Form>
+	{:else if $auth0_forgot_password_opened$}
+		<Auth0_Forgot_Password_Form {...$$props}></Auth0_Forgot_Password_Form>
+	{:else if $auth0_forgot_password_check_email_opened$}
+		<Auth0_Forgot_Password_Check_Email_Form></Auth0_Forgot_Password_Check_Email_Form>
+	{:else if $auth0_change_password_opened$}
+		<Auth0_Change_Password_Form {...$$props}></Auth0_Change_Password_Form>
+	{/if}
+	<slot></slot>
+</div>
+
+<style type="text/scss">
+:global(.Auth0) {
+	display: block;
+	overflow: hidden;
+	&.dialog {
+		:global(div) {
+			:global(.close) {
+				display: block;
+			}
+		}
+	}
+	:global(h1) {
+		font-size: 2rem;
+		text-align: center;
+	}
+	[name=navigation__auth] {
+		display: none;
+		~ .form {
+			display: none;
+		}
+		&.navigation__auth-signup:checked {
+			~ .signup {
+				display: block;
+			}
+		}
+		&.navigation__auth-login:checked {
+			~ .login {
+				display: block;
+			}
+		}
+		&.navigation__auth-forgot_password:checked {
+			~ .forgot_password {
+				display: block;
+			}
+		}
+		&.navigation__auth-forgot_password_check_email:checked {
+			~ .forgot_password_check_email {
+				display: block;
+			}
+		}
+		&.navigation__auth-change_password:checked {
+			~ .change_password {
+				display: block;
+			}
+		}
+	}
+	:global(label.navigation__auth) {
+		color: #3EBBC0;
+		font-weight: bold;
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+	> :global(div) {
+		position: relative;
+		height: 100%;
+		> :global(.close) {
+			display: none;
+			position: absolute;
+			right: 0;
+		}
+	}
+	:global(form) {
+		:global(input) {
+			line-height: 1.8rem;
+			border-color: transparent;
+			border-bottom: 2px solid lightgrey;
+			&.invalid {
+				border-color: red;
+			}
+		}
+		:global(label) {
+			display: block;
+		}
+		:global(fieldset) {
+			clear: both;
+			border: none;
+			:global(.field) {
+				width: 20em;
+				margin: 0 auto;
+				display: block;
+				clear: both;
+				text-align: left;
+				:global(input) {
+					display: block;
+					width: 100%;
+					padding: 0.2em;
+					color: black;
+				}
+			}
+			:global(p) {
+				margin-bottom: 0;
+				-webkit-margin-after: 0;
+			}
+		}
+		:global(footer) {
+			margin-top: 1rem;
+			text-align: center;
+			:global(.button) {
+				float: none;
+				width: 10em;
+				padding: 0.4rem;
+				color: white;
+				background-color: #3EBBC0;
+				border-radius: 5px;
+				border: none;
+				&:hover {
+					background-color: #5CC6CA;
+				}
+			}
+			:global(label) {
+				margin-top: 1em;
+			}
+		}
+	}
+	:global(.error) {
+		color: red;
+	}
+}
+</style>

package/dist/ui/Auth0_Change_Password_Form.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+import { createEventDispatcher } from 'svelte'
+import { AUTH0_DOMAIN$_b, auth0_token_error$_b } from '@ctx-core/auth0'
+import { getContext_auth0_ui_ctx } from '../getContext_auth0_ui_ctx.js'
+import type { auth0_ui_Ctx } from '../auth0_ui_Ctx.js'
+import Auth0_Dialog_Close from './Auth0_Dialog_Close.svelte'
+import { Auth0_c } from './Auth0_c.js'
+const ctx = getContext_auth0_ui_ctx() as auth0_ui_Ctx
+const dispatch = createEventDispatcher()
+export let error_class = '', input_class = '', button_class = '', label_class = '.js'
+const AUTH0_DOMAIN$ = AUTH0_DOMAIN$_b(ctx)
+const auth0_token_error$ = auth0_token_error$_b(ctx)
+const _ = new Auth0_c(ctx)
+let root:HTMLDivElement
+let password_input:HTMLInputElement
+let password_confirmation_input
+let password_error:any|undefined //region
+$: password_error = $auth0_token_error$?.password //endregion
+let password_error_confirmation:string|undefined //region
+$: password_error_confirmation = $auth0_token_error$?.password_confirmation //endregion
+async function onsubmit_change_password(event:FormDataEvent) {
+	dispatch('submit__start')
+	try {
+		await _.onsubmit_change_password(event, {
+			password_input,
+			password_confirmation_input,
+		}, ()=>_.schedule_forms_clear(root))
+		dispatch('success')
+	} catch (error) {
+		dispatch('error', { error })
+		throw error
+	} finally {
+		dispatch('submit__end')
+	}
+}
+</script>
+
+<div bind:this={root} class="form change_password Auth0_Change_Password_Form">
+	<Auth0_Dialog_Close></Auth0_Dialog_Close>
+	<h1>Change Password</h1>
+	<form
+		action="https://{$AUTH0_DOMAIN$}/dbconnections/change_password"
+		accept-charset="UTF-8"
+		method="post"
+		on:submit|preventDefault={onsubmit_change_password}
+	>
+		{#if $auth0_token_error$}
+			<ul>
+				{#if password_error}
+					<li class="error {error_class}">
+						{password_error}
+					</li>
+				{/if}
+				{#if password_error_confirmation}
+					<li class="error {error_class}">
+						{password_error_confirmation}
+					</li>
+				{/if}
+			</ul>
+		{/if}
+		<fieldset>
+		<label class="field">
+			<div class={label_class}>Password</div>
+			<input
+				bind:this={password_input}
+				placeholder="**********"
+				required="required"
+				class={input_class}
+				class:invalid={password_error}
+				id="password-change_password"
+				type="password"
+				name="password"/>
+		</label>
+		<label class="field">
+			<div class={label_class}>Confirm Password</div>
+			<input
+				bind:this={password_confirmation_input}
+				type="password"
+				id="password_confirmation-change_password"
+				name="password_confirmation"
+				class={input_class}
+				class:invalid={password_error_confirmation}
+				required="required"
+				placeholder="**********"
+			/>
+		</label>
+		</fieldset>
+		<footer>
+			<input type="submit" value="Change Password" class="button {button_class}"/>
+		</footer>
+	</form>
+</div>

package/dist/ui/Auth0_Dialog_Close.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+import { CloseDialogHandle } from '@ctx-core/dialog'
+import type { auth0_ui_Ctx } from '../auth0_ui_Ctx.js'
+import { getContext_auth0_ui_ctx } from '../getContext_auth0_ui_ctx.js'
+import { Auth0_c } from './Auth0_c.js'
+const ctx = getContext_auth0_ui_ctx() as auth0_ui_Ctx
+const _ = new Auth0_c(ctx)
+</script>
+
+<CloseDialogHandle on:click={_.onclose}></CloseDialogHandle>

package/dist/ui/Auth0_Forgot_Password_Check_Email_Form.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+import Auth0_Dialog_Close from './Auth0_Dialog_Close.svelte'
+let root:HTMLDivElement
+</script>
+
+<div bind:this={root} class="form forgot_password_check_email">
+	<Auth0_Dialog_Close></Auth0_Dialog_Close>
+	<h1>Check Your Email</h1>
+	<p>An email to reset you password has been sent to you.</p>
+</div>

package/dist/ui/Auth0_Forgot_Password_Form.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+import { AUTH0_DOMAIN$_b, auth0_token_error$_b, open_auth0_login_b, open_auth0_signup_b } from '@ctx-core/auth0'
+import type { auth0_ui_Ctx } from '../auth0_ui_Ctx.js'
+import { getContext_auth0_ui_ctx } from '../getContext_auth0_ui_ctx.js'
+import { Auth0_c } from './Auth0_c.js'
+import Auth0_Dialog_Close from './Auth0_Dialog_Close.svelte'
+export let error_class = '', input_class = '', button_class = '', label_class = '.js'
+const ctx = getContext_auth0_ui_ctx() as auth0_ui_Ctx
+const AUTH0_DOMAIN$ = AUTH0_DOMAIN$_b(ctx)
+const auth0_token_error$ = auth0_token_error$_b(ctx)
+const open_auth0_login = open_auth0_login_b(ctx)
+const open_auth0_signup = open_auth0_signup_b(ctx)
+const _ = new Auth0_c(ctx)
+let email_input:HTMLInputElement, error:string
+$: error = $auth0_token_error$?.error
+</script>
+
+<div class="form forgot_password">
+	<Auth0_Dialog_Close></Auth0_Dialog_Close>
+	<h1>Forgot Password</h1>
+	<form
+		action="https://{$AUTH0_DOMAIN$}/passwordless/start"
+		accept-charset="UTF-8"
+		method="post"
+		on:submit={event => _.onsubmit_forgot_password(event, { email_input })}
+	>
+		{#if $auth0_token_error$}
+			<ul>
+				<li class="error {error_class}">
+					{$auth0_token_error$.error}: {$auth0_token_error$.error_description}
+				</li>
+			</ul>
+		{/if}
+		<fieldset>
+			<label class="field">
+				<div class={label_class}>Email</div>
+				<input
+					bind:this={email_input}
+					placeholder="your@email.com"
+					required="required"
+					class="form-control {input_class}"
+					class:invalid={error}
+					type="email"
+					id="email-forgot_password"
+					name="email"/>
+			</label>
+		</fieldset>
+		<footer>
+			<input
+				type="submit"
+				value="Reset Password"
+				class="button {button_class}"
+			/>
+			<label
+				class="navigation__auth {label_class}"
+				on:click={open_auth0_login}
+			>Have an account? Log in&hellip;</label>
+			<label
+				class="navigation__auth {label_class}"
+				on:click={open_auth0_signup}
+			>Don't have an account? Signup&hellip;</label>
+		</footer>
+	</form>
+</div>

package/dist/ui/Auth0_Loggedin_If.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+import { is_auth0_loggedin$_b, is_auth0_loggedout$_b, } from '@ctx-core/auth0'
+import type { auth0_ui_Ctx } from '../auth0_ui_Ctx.js'
+import { getContext_auth0_ui_ctx } from '../getContext_auth0_ui_ctx.js'
+const ctx = getContext_auth0_ui_ctx() as auth0_ui_Ctx
+const is_auth0_loggedin$ = is_auth0_loggedin$_b(ctx)
+const is_auth0_loggedout$ = is_auth0_loggedout$_b(ctx)
+</script>
+
+{#if $is_auth0_loggedin$}
+	<slot name="loggedin"><slot></slot></slot>
+{:else if $is_auth0_loggedout$}
+	<slot name="loggedout"></slot>
+{/if}

package/dist/ui/Auth0_Login_Form.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+import {
+	AUTH0_DOMAIN$_b, auth0_token_error$_b, auth0_token_error_txt$_b, open_auth0_forgot_password_b, open_auth0_signup_b
+} from '@ctx-core/auth0'
+import type { auth0_ui_Ctx } from '../auth0_ui_Ctx.js'
+import { Auth0_c } from './Auth0_c.js'
+import Auth0_Dialog_Close from './Auth0_Dialog_Close.svelte'
+export let ctx:auth0_ui_Ctx, error_class = '', input_class = '', button_class = '', label_class = '.js'
+const auth0_token_error$ = auth0_token_error$_b(ctx)
+const auth0_token_error_txt$ = auth0_token_error_txt$_b(ctx)
+const AUTH0_DOMAIN = AUTH0_DOMAIN$_b(ctx)
+const open_auth0_signup = open_auth0_signup_b(ctx)
+const open_auth0_forgot_password = open_auth0_forgot_password_b(ctx)
+const _ = new Auth0_c(ctx)
+let root:HTMLDivElement
+let username_login_input:HTMLInputElement, password_login_input:HTMLInputElement
+let error_username:string|undefined//region
+$: error_username = $auth0_token_error$?.username //endregion
+let error_password:string|undefined//region
+$: error_password = $auth0_token_error$?.password //endregion
+</script>
+
+<div bind:this={root} class="form {$$props.class||''}">
+	<Auth0_Dialog_Close></Auth0_Dialog_Close>
+	<h1><slot name="login_text">Welcome</slot></h1>
+	<form
+		action="https://{$AUTH0_DOMAIN}/oauth/token"
+		accept-charset="UTF-8"
+		method="post"
+		on:submit={event =>
+			_.onsubmit_login(event, {
+				username_login_input,
+				password_login_input
+			}, ()=>_.schedule_forms_clear(root))}
+	>
+		{#if $auth0_token_error_txt$}
+			<ul>
+				<li class="error {error_class}">
+					{$auth0_token_error_txt$}
+				</li>
+			</ul>
+		{/if}
+		<fieldset>
+			<label class="field">
+				<div class={label_class}>Email</div>
+				<input
+					bind:this={username_login_input}
+					placeholder="your@email.com"
+					required="required"
+					class="form-control {input_class}"
+					class:invalid={error_username}
+					type="email"
+					id="username-login"
+					name="username"/>
+			</label>
+			<label class="field">
+				<div class={label_class}>Password</div>
+				<input
+					bind:this={password_login_input}
+					placeholder="**********"
+					required="required"
+					class={input_class}
+					class:invalid={error_password}
+					id="password-login"
+					type="password"
+					name="password"/>
+			</label>
+		</fieldset>
+		<footer>
+			<input
+				type="submit"
+				value="Login"
+				class="button {button_class}"
+			/>
+			<label
+				class="navigation__auth {label_class}"
+				on:click={open_auth0_signup}
+			>Don't have an account? Signup&hellip;</label>
+			<label
+				class="navigation__auth {label_class}"
+				on:click={open_auth0_forgot_password}
+			>Forgot Password?</label>
+		</footer>
+	</form>
+</div>