@foodmarketmaker/marketmaker-auth 0.0.4

package/fesm2022/foodmarketmaker-marketmaker-auth.mjs

@@ -0,0 +1,835 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, inject, effect, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Amplify } from 'aws-amplify';
+import { CookieStorage } from 'aws-amplify/utils';
+import { cognitoUserPoolsTokenProvider } from 'aws-amplify/auth/cognito';
+import { signIn, signUp, confirmSignUp, resendSignUpCode, signInWithRedirect, signOut, resetPassword, confirmResetPassword, fetchAuthSession } from 'aws-amplify/auth';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faTimes } from '@fortawesome/pro-light-svg-icons';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { NgxOtpInputComponent } from 'ngx-otp-input';
+
+const SignUpNextSteps = {
+    DONE: 'DONE',
+    CONFIRM_SIGN_UP: 'CONFIRM_SIGN_UP',
+};
+const SignInNextSteps = {
+    DONE: 'DONE',
+    RESET_PASSWORD: 'RESET_PASSWORD',
+    CONFIRM_SIGN_UP: 'CONFIRM_SIGN_UP',
+};
+const ResetPasswordNextSteps = {
+    DONE: 'DONE',
+    CONFIRM_RESET_PASSWORD_WITH_CODE: 'CONFIRM_RESET_PASSWORD_WITH_CODE',
+};
+const AMAZON = 'Amazon';
+const APPLE = 'Apple';
+const FACEBOOK = 'Facebook';
+const GOOGLE = 'Google';
+class AuthService {
+    devClientId = '2q2fh1vn4c2ce9nfe516tl1dld';
+    prodClientId = '76htqb41727bo3v0096hpl8qnm';
+    _signedInSignal = signal(false, ...(ngDevMode ? [{ debugName: "_signedInSignal" }] : /* istanbul ignore next */ []));
+    _usernameSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "_usernameSignal" }] : /* istanbul ignore next */ []));
+    _idTokenSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "_idTokenSignal" }] : /* istanbul ignore next */ []));
+    _accessTokenSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "_accessTokenSignal" }] : /* istanbul ignore next */ []));
+    impersonating = false;
+    impersonatingEmail = undefined;
+    constructor() {
+        this.initAuth();
+        this.refreshSession().then(() => {
+            console.log('AuthService: session refreshed');
+        });
+    }
+    get signedInSignal() {
+        return this._signedInSignal.asReadonly();
+    }
+    get idTokenSignal() {
+        return this._idTokenSignal.asReadonly();
+    }
+    get accessTokenSignal() {
+        return this._accessTokenSignal.asReadonly();
+    }
+    get usernameSignal() {
+        return this._usernameSignal.asReadonly();
+    }
+    bearerTokenSignal = computed(() => {
+        const token = this._idTokenSignal();
+        return token ? `Bearer ${token.toString()}` : undefined;
+    }, ...(ngDevMode ? [{ debugName: "bearerTokenSignal" }] : /* istanbul ignore next */ []));
+    get emailSignal() {
+        return computed(() => this.extractFromIdToken('email'));
+    }
+    get nameSignal() {
+        return computed(() => this.extractFromIdToken('name'));
+    }
+    get pictureSignal() {
+        return computed(() => this.extractFromIdToken('picture'));
+    }
+    get signedIn() {
+        return this._signedInSignal();
+    }
+    get bearerToken() {
+        return this.bearerTokenSignal();
+    }
+    get email() {
+        return this.emailSignal();
+    }
+    buildPoolConfig() {
+        const url = location.origin + '/';
+        const isLocal = location.host.startsWith('local');
+        return {
+            userPoolClientId: isLocal ? this.devClientId : this.prodClientId,
+            redirectSignInUrl: url,
+            redirectSignOutUrl: url,
+        };
+    }
+    initAuth() {
+        const config = this.buildPoolConfig();
+        Amplify.configure({
+            Auth: {
+                Cognito: {
+                    userPoolId: 'us-west-2_p1Epu0go8',
+                    userPoolClientId: config.userPoolClientId,
+                    identityPoolId: 'us-west-2:008f23d3-6c9f-4aa4-ad6f-6a4db545024c',
+                    loginWith: {
+                        oauth: {
+                            domain: 'signinsample98d73a66-98d73a66-dev.auth.us-west-2.amazoncognito.com',
+                            scopes: ['phone', 'email', 'openid', 'profile', 'aws.cognito.signin.user.admin'],
+                            redirectSignIn: [config.redirectSignInUrl],
+                            redirectSignOut: [config.redirectSignOutUrl],
+                            responseType: 'code',
+                        },
+                    },
+                },
+            },
+        });
+        const domain = this.domainFromUrl(window.location.href) ?? undefined;
+        const secure = window.location.protocol.includes('https');
+        cognitoUserPoolsTokenProvider.setKeyValueStorage(new CookieStorage({
+            domain,
+            path: '/',
+            sameSite: 'strict',
+            expires: 31,
+            secure,
+        }));
+    }
+    domainFromUrl(url) {
+        const lower = url.toLowerCase();
+        if (lower.includes('localhost'))
+            return 'localhost';
+        if (lower.includes('betafoodmarketmaker.com'))
+            return 'betafoodmarketmaker.com';
+        if (lower.includes('foodmarketmaker.com'))
+            return 'foodmarketmaker.com';
+        return null;
+    }
+    async signIn(credentials) {
+        try {
+            const { isSignedIn, nextStep } = await signIn({
+                username: credentials.username,
+                password: credentials.password,
+            });
+            if (isSignedIn) {
+                await this.refreshSession();
+                return { isSignedIn: true };
+            }
+            return { isSignedIn: false, nextStep: nextStep.signInStep };
+        }
+        catch (error) {
+            return { isSignedIn: false, error: this.errorMessage(error, 'sign in', credentials.username) };
+        }
+    }
+    async signUp(credentials) {
+        try {
+            const { isSignUpComplete, nextStep } = await signUp({
+                username: credentials.username,
+                password: credentials.password,
+                options: { userAttributes: { email: credentials.email } },
+            });
+            if (isSignUpComplete)
+                return { isSignedUp: true };
+            return { isSignedUp: false, nextStep: nextStep.signUpStep };
+        }
+        catch (error) {
+            return { isSignedUp: false, error: this.errorMessage(error, 'sign up', credentials.username) };
+        }
+    }
+    async confirmSignUp(username, code) {
+        try {
+            const { isSignUpComplete, nextStep } = await confirmSignUp({ username, confirmationCode: code });
+            if (isSignUpComplete)
+                return { isSignedUp: true };
+            return { isSignedUp: false, nextStep: nextStep.signUpStep };
+        }
+        catch (error) {
+            return { isSignedUp: false, error: this.errorMessage(error, 'confirm account', username) };
+        }
+    }
+    async resendSignUpCode(username) {
+        try {
+            await resendSignUpCode({ username });
+            return { isCodeRequested: true };
+        }
+        catch (error) {
+            return { isCodeRequested: false, error: this.errorMessage(error, 'resend code', username) };
+        }
+    }
+    async socialSignIn(provider) {
+        try {
+            await signInWithRedirect({ provider: provider });
+            await this.refreshSession();
+            return { isSignedIn: true };
+        }
+        catch (error) {
+            return { isSignedIn: false, error: this.errorMessage(error, 'social sign in') };
+        }
+    }
+    async signOut() {
+        if (!this.signedIn)
+            return;
+        try {
+            await signOut();
+        }
+        catch (error) {
+            console.error('AuthService: signOut error', error);
+        }
+        finally {
+            this._signedInSignal.set(false);
+            this._idTokenSignal.set(undefined);
+            this._accessTokenSignal.set(undefined);
+        }
+    }
+    async resetPassword(username) {
+        try {
+            const { isPasswordReset, nextStep } = await resetPassword({ username });
+            if (isPasswordReset)
+                return { isPasswordReset: true };
+            return { isPasswordReset: false, nextStep: nextStep.resetPasswordStep };
+        }
+        catch (error) {
+            return { isPasswordReset: false, error: this.errorMessage(error, 'reset password', username) };
+        }
+    }
+    async confirmResetPassword(username, newPassword, code) {
+        try {
+            await confirmResetPassword({ username, confirmationCode: code, newPassword });
+            return { isPasswordReset: true };
+        }
+        catch (error) {
+            return { isPasswordReset: false, error: this.errorMessage(error, 'confirm new password', username) };
+        }
+    }
+    async refreshSession() {
+        const { idToken, accessToken } = (await fetchAuthSession()).tokens ?? {};
+        if (idToken !== this._idTokenSignal()) {
+            this._idTokenSignal.set(idToken);
+            this._signedInSignal.set(idToken != null);
+        }
+        if (accessToken !== this._accessTokenSignal()) {
+            this._accessTokenSignal.set(accessToken);
+        }
+    }
+    isAdmin() {
+        return this.hasRole('admin');
+    }
+    hasRole(rolename) {
+        const groups = this.getUserGroups();
+        return groups.indexOf(rolename) >= 0;
+    }
+    impersonate(email) {
+        if (!this.isAdmin())
+            return false;
+        localStorage.setItem('impersonating-email', email);
+        localStorage.setItem('impersonating', 'true');
+        this.impersonating = true;
+        this.impersonatingEmail = email;
+        return true;
+    }
+    cancelImpersonate() {
+        this.impersonating = false;
+        this.impersonatingEmail = undefined;
+        localStorage.removeItem('impersonating-email');
+        localStorage.setItem('impersonating', 'false');
+    }
+    getUserGroups() {
+        const payload = this._idTokenSignal()?.payload;
+        if (payload && 'cognito:groups' in payload) {
+            return payload['cognito:groups'];
+        }
+        return [];
+    }
+    extractFromIdToken(property) {
+        const payload = this._idTokenSignal()?.payload;
+        if (!payload)
+            return undefined;
+        return property in payload ? payload[property] : undefined;
+    }
+    errorMessage(error, operation, username) {
+        const e = error;
+        if (e?.__type) {
+            if (e.__type === 'UserNotFoundException' && username)
+                return `The user "${username}" was not found.`;
+            if (e.__type === 'LimitExceededException')
+                return `Too many ${operation} attempts.`;
+            if (e.__type === 'UsernameExistsException')
+                return 'User already exists.';
+        }
+        if (e?.message) {
+            return e.message.includes(':') ? e.message.split(':')[1].trim() : e.message;
+        }
+        return 'An unknown error occurred.';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+const AuthModes = {
+    SIGN_IN: 'sign-in',
+    SIGN_UP: 'sign-up',
+    FORGOT_PASSWORD: 'forgot-password',
+    CONFIRM_ACCOUNT: 'confirm-account',
+    CONFIRM_PASSWORD_RESET: 'confirm-password-reset',
+};
+
+class AuthStateService {
+    _usernameSignal = signal('', ...(ngDevMode ? [{ debugName: "_usernameSignal" }] : /* istanbul ignore next */ []));
+    _passwordSignal = signal('', ...(ngDevMode ? [{ debugName: "_passwordSignal" }] : /* istanbul ignore next */ []));
+    _emailSignal = signal('', ...(ngDevMode ? [{ debugName: "_emailSignal" }] : /* istanbul ignore next */ []));
+    _modeSignal = signal(AuthModes.SIGN_IN, ...(ngDevMode ? [{ debugName: "_modeSignal" }] : /* istanbul ignore next */ []));
+    _errorSignal = signal(null, ...(ngDevMode ? [{ debugName: "_errorSignal" }] : /* istanbul ignore next */ []));
+    _autoCloseSignal = signal(false, ...(ngDevMode ? [{ debugName: "_autoCloseSignal" }] : /* istanbul ignore next */ []));
+    _displayingSignal = signal(false, ...(ngDevMode ? [{ debugName: "_displayingSignal" }] : /* istanbul ignore next */ []));
+    _willCloseSignal = signal(false, ...(ngDevMode ? [{ debugName: "_willCloseSignal" }] : /* istanbul ignore next */ []));
+    get modeSignal() {
+        return this._modeSignal.asReadonly();
+    }
+    setMode(mode) {
+        this._modeSignal.set(mode);
+    }
+    get displayingSignal() {
+        return this._displayingSignal.asReadonly();
+    }
+    open() {
+        this.setMode(AuthModes.SIGN_IN);
+        this._displayingSignal.set(true);
+    }
+    close() {
+        this._willCloseSignal.set(true);
+    }
+    didClose() {
+        this._willCloseSignal.set(false);
+        this._displayingSignal.set(false);
+    }
+    get willCloseSignal() {
+        return this._willCloseSignal.asReadonly();
+    }
+    get usernameSignal() {
+        return this._usernameSignal.asReadonly();
+    }
+    setUsername(username) {
+        this._usernameSignal.set(username);
+    }
+    get passwordSignal() {
+        return this._passwordSignal.asReadonly();
+    }
+    setPassword(password) {
+        this._passwordSignal.set(password);
+    }
+    get emailSignal() {
+        return this._emailSignal.asReadonly();
+    }
+    setEmail(email) {
+        this._emailSignal.set(email);
+    }
+    get errorSignal() {
+        return this._errorSignal.asReadonly();
+    }
+    setError(error) {
+        this._errorSignal.set(error);
+    }
+    resetError() {
+        this._errorSignal.set(null);
+    }
+    get autoCloseSignal() {
+        return this._autoCloseSignal.asReadonly();
+    }
+    setAutoCloseError(message, delay = 4000) {
+        this._autoCloseSignal.set(true);
+        this.setError(message);
+        setTimeout(() => {
+            this._autoCloseSignal.set(false);
+            this.resetError();
+        }, delay);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AuthSignInComponent {
+    auth = inject(AuthService);
+    authState = inject(AuthStateService);
+    usernameInput;
+    username = '';
+    password = '';
+    signInBusy = false;
+    amazon = AMAZON;
+    google = GOOGLE;
+    facebook = FACEBOOK;
+    heading = 'Sign in to MarketMaker';
+    welcome = 'Welcome back! Please sign in to continue.';
+    haveUsername = computed(() => this.username.trim().length > 6, ...(ngDevMode ? [{ debugName: "haveUsername" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => { this.password = this.authState.passwordSignal(); });
+        effect(() => { this.username = this.authState.usernameSignal(); });
+    }
+    ngAfterViewInit() {
+        this.usernameInput?.nativeElement.focus();
+    }
+    onSignIn() {
+        this.signInBusy = true;
+        this.auth.signIn({ username: this.username, password: this.password }).then((res) => {
+            this.signInBusy = false;
+            if (res.isSignedIn) {
+                this.notifyClose();
+            }
+            else if (res.error) {
+                this.authState.setError(res.error);
+            }
+            else if (res.nextStep === SignInNextSteps.CONFIRM_SIGN_UP) {
+                this.onSwitchConfirmAccount();
+            }
+            else if (res.nextStep === SignInNextSteps.RESET_PASSWORD) {
+                this.onSwitchPasswordReset();
+            }
+        });
+    }
+    onSocialSignIn(provider) {
+        this.signInBusy = true;
+        this.auth.socialSignIn(provider).then(() => {
+            this.signInBusy = false;
+            this.notifyClose();
+        });
+    }
+    notifyClose() {
+        this.saveCredentials();
+        this.authState.close();
+    }
+    saveCredentials() {
+        this.authState.setPassword(this.password);
+        this.authState.setUsername(this.username);
+    }
+    onSwitchSignUp() {
+        this.saveCredentials();
+        this.authState.setMode(AuthModes.SIGN_UP);
+    }
+    onSwitchPasswordReset() {
+        this.saveCredentials();
+        this.authState.setMode(AuthModes.FORGOT_PASSWORD);
+    }
+    onSwitchConfirmAccount() {
+        this.saveCredentials();
+        this.authState.setMode(AuthModes.CONFIRM_ACCOUNT);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthSignInComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: AuthSignInComponent, isStandalone: true, selector: "mma-auth-signin", viewQueries: [{ propertyName: "usernameInput", first: true, predicate: ["usernameInput"], descendants: true }], ngImport: i0, template: "<div class=\"auth-container\">\n  <div class=\"messages\">\n    <div class=\"sign-in-msg main\">{{ heading }}</div>\n    <div class=\"sign-in-msg secondary\">{{ welcome }}</div>\n  </div>\n  <div class=\"sign-in-row row\"></div>\n\n  <div class=\"social-buttons-container\">\n    <button class=\"social-button\" (click)=\"onSocialSignIn(amazon)\" title=\"Sign in with Amazon\">\n      <div class=\"social-button-inner\"><div class=\"social-logo amazon\"></div></div>\n    </button>\n    <button class=\"social-button\" (click)=\"onSocialSignIn(google)\" title=\"Sign in with Google\">\n      <div class=\"social-button-inner\"><div class=\"social-logo google\"></div></div>\n    </button>\n    <button class=\"social-button\" (click)=\"onSocialSignIn(facebook)\" title=\"Sign in with Facebook\">\n      <div class=\"social-button-inner\"><div class=\"social-logo facebook\"></div></div>\n    </button>\n  </div>\n\n  <div class=\"method-divider\">\n    <div class=\"divider\"></div>\n    <span class=\"method-label\">or</span>\n    <div class=\"divider\"></div>\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"username\" class=\"sign-in-label\">Username</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"username\"\n      name=\"username\"\n      [(ngModel)]=\"username\"\n      spellcheck=\"false\"\n      autocomplete=\"username\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your username\"\n      #usernameInput\n    />\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"password\" class=\"sign-in-label\">Password</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"password\"\n      name=\"password\"\n      [(ngModel)]=\"password\"\n      type=\"password\"\n      autocomplete=\"current-password\"\n      spellcheck=\"false\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your password\"\n    />\n    <span class=\"forgot-password\" (click)=\"onSwitchPasswordReset()\">Forgot password?</span>\n  </div>\n\n  <div class=\"buttons-bottom\">\n    <button class=\"btn btn-secondary\" (click)=\"authState.close()\">Cancel</button>\n    <button class=\"btn btn-important\" [disabled]=\"signInBusy\" (click)=\"onSignIn()\">Sign In</button>\n  </div>\n\n  <div class=\"sign-in-row switch\">\n    Don't have an account?&nbsp;\n    <span class=\"switch-mode\" (click)=\"onSwitchSignUp()\">Sign up</span>\n  </div>\n</div>\n", styles: [".forgot-password{font-size:.8rem;color:#6c47ff;cursor:pointer;text-align:right;margin-top:2px}\n", ".auth-container{display:flex;flex-direction:column;gap:16px}@media screen and (max-width:767px){.auth-container{gap:8px}}.sign-in-row{width:100%;display:flex;justify-content:center;font-size:14px}.sign-in-row.column{flex-direction:column;gap:4px}.sign-in-row.row{flex-direction:row;gap:12px}.sign-in-row>.switch-mode{font-weight:500;color:#6c47ff;cursor:pointer}.sign-in-row.switch{padding-bottom:1rem}.sign-in-label{width:100%;font-size:.8rem}.sign-in-input{width:calc(100% - 12px);padding:8px 6px;font-size:16px;border:1px solid #b0b0b0;border-radius:4px}.readonly-input{color:#b0b0b0;background:#efefef}.messages{display:flex;flex-direction:column;gap:4px}.sign-in-msg{text-align:center}.sign-in-msg.main{font-size:18px;font-weight:600}.sign-in-msg.secondary{font-size:14px;font-weight:400}.social-buttons-container{width:100%;padding:12px 0;display:flex;gap:.8rem;justify-content:center}.social-button{padding:11px;border-radius:8px;border:1px solid #e0e0e0;background:#fff;color:#6c6c6c;box-shadow:none;font-weight:500;cursor:pointer}.social-button-inner{display:flex;gap:.75rem}.social-logo{width:1rem;height:1rem;background-position:center;background-size:contain;background-repeat:no-repeat}.social-logo.amazon{background-image:url(https://static.foodmarketmaker.com/social/amazon.png)}.social-logo.google{background-image:url(https://static.foodmarketmaker.com/social/google.png)}.social-logo.facebook{background-image:url(https://static.foodmarketmaker.com/social/facebook.png)}.method-divider{width:100%;padding:8px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;color:#6c6c6c;font-size:.8rem}.divider{width:45%;height:1px;border-top:1px solid #e0e0e0}.buttons-bottom{width:100%;padding:12px 0;display:flex;gap:16px;justify-content:center}.buttons-bottom>.btn-important{background:#f58220}.buttons-bottom>.btn{padding:.5rem 1rem}.buttons-bottom>button:focus{outline:none}.center-in-dialog{width:100%;display:flex;flex-direction:row;justify-content:center}.confirmation-code .ngx-otp-input-box{width:35px;height:38px;font-size:1.35rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthSignInComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mma-auth-signin', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"auth-container\">\n  <div class=\"messages\">\n    <div class=\"sign-in-msg main\">{{ heading }}</div>\n    <div class=\"sign-in-msg secondary\">{{ welcome }}</div>\n  </div>\n  <div class=\"sign-in-row row\"></div>\n\n  <div class=\"social-buttons-container\">\n    <button class=\"social-button\" (click)=\"onSocialSignIn(amazon)\" title=\"Sign in with Amazon\">\n      <div class=\"social-button-inner\"><div class=\"social-logo amazon\"></div></div>\n    </button>\n    <button class=\"social-button\" (click)=\"onSocialSignIn(google)\" title=\"Sign in with Google\">\n      <div class=\"social-button-inner\"><div class=\"social-logo google\"></div></div>\n    </button>\n    <button class=\"social-button\" (click)=\"onSocialSignIn(facebook)\" title=\"Sign in with Facebook\">\n      <div class=\"social-button-inner\"><div class=\"social-logo facebook\"></div></div>\n    </button>\n  </div>\n\n  <div class=\"method-divider\">\n    <div class=\"divider\"></div>\n    <span class=\"method-label\">or</span>\n    <div class=\"divider\"></div>\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"username\" class=\"sign-in-label\">Username</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"username\"\n      name=\"username\"\n      [(ngModel)]=\"username\"\n      spellcheck=\"false\"\n      autocomplete=\"username\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your username\"\n      #usernameInput\n    />\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"password\" class=\"sign-in-label\">Password</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"password\"\n      name=\"password\"\n      [(ngModel)]=\"password\"\n      type=\"password\"\n      autocomplete=\"current-password\"\n      spellcheck=\"false\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your password\"\n    />\n    <span class=\"forgot-password\" (click)=\"onSwitchPasswordReset()\">Forgot password?</span>\n  </div>\n\n  <div class=\"buttons-bottom\">\n    <button class=\"btn btn-secondary\" (click)=\"authState.close()\">Cancel</button>\n    <button class=\"btn btn-important\" [disabled]=\"signInBusy\" (click)=\"onSignIn()\">Sign In</button>\n  </div>\n\n  <div class=\"sign-in-row switch\">\n    Don't have an account?&nbsp;\n    <span class=\"switch-mode\" (click)=\"onSwitchSignUp()\">Sign up</span>\n  </div>\n</div>\n", styles: [".forgot-password{font-size:.8rem;color:#6c47ff;cursor:pointer;text-align:right;margin-top:2px}\n", ".auth-container{display:flex;flex-direction:column;gap:16px}@media screen and (max-width:767px){.auth-container{gap:8px}}.sign-in-row{width:100%;display:flex;justify-content:center;font-size:14px}.sign-in-row.column{flex-direction:column;gap:4px}.sign-in-row.row{flex-direction:row;gap:12px}.sign-in-row>.switch-mode{font-weight:500;color:#6c47ff;cursor:pointer}.sign-in-row.switch{padding-bottom:1rem}.sign-in-label{width:100%;font-size:.8rem}.sign-in-input{width:calc(100% - 12px);padding:8px 6px;font-size:16px;border:1px solid #b0b0b0;border-radius:4px}.readonly-input{color:#b0b0b0;background:#efefef}.messages{display:flex;flex-direction:column;gap:4px}.sign-in-msg{text-align:center}.sign-in-msg.main{font-size:18px;font-weight:600}.sign-in-msg.secondary{font-size:14px;font-weight:400}.social-buttons-container{width:100%;padding:12px 0;display:flex;gap:.8rem;justify-content:center}.social-button{padding:11px;border-radius:8px;border:1px solid #e0e0e0;background:#fff;color:#6c6c6c;box-shadow:none;font-weight:500;cursor:pointer}.social-button-inner{display:flex;gap:.75rem}.social-logo{width:1rem;height:1rem;background-position:center;background-size:contain;background-repeat:no-repeat}.social-logo.amazon{background-image:url(https://static.foodmarketmaker.com/social/amazon.png)}.social-logo.google{background-image:url(https://static.foodmarketmaker.com/social/google.png)}.social-logo.facebook{background-image:url(https://static.foodmarketmaker.com/social/facebook.png)}.method-divider{width:100%;padding:8px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;color:#6c6c6c;font-size:.8rem}.divider{width:45%;height:1px;border-top:1px solid #e0e0e0}.buttons-bottom{width:100%;padding:12px 0;display:flex;gap:16px;justify-content:center}.buttons-bottom>.btn-important{background:#f58220}.buttons-bottom>.btn{padding:.5rem 1rem}.buttons-bottom>button:focus{outline:none}.center-in-dialog{width:100%;display:flex;flex-direction:row;justify-content:center}.confirmation-code .ngx-otp-input-box{width:35px;height:38px;font-size:1.35rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { usernameInput: [{
+                type: ViewChild,
+                args: ['usernameInput', { static: false }]
+            }] } });
+
+const filterUsername = (value) => {
+    return value.replace(/\s/g, '');
+};
+const filterPassword = (value) => {
+    return value.trim();
+};
+const validateOtpCode = (code) => {
+    if (!code || code.length !== 6) {
+        return false;
+    }
+    for (let i = 0; i < 6; i++) {
+        if (code[i] < '0' || code[i] > '9') {
+            return false;
+        }
+    }
+    return true;
+};
+const validateEmail = (email) => {
+    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return emailRegex.test(email);
+};
+const validatePassword = (password) => {
+    return password.length >= 8;
+};
+
+class AuthSignUpComponent {
+    auth = inject(AuthService);
+    authState = inject(AuthStateService);
+    usernameInput;
+    emailInput;
+    passwordInput;
+    username = '';
+    email = '';
+    password = '';
+    signUpBusy = false;
+    amazon = AMAZON;
+    google = GOOGLE;
+    facebook = FACEBOOK;
+    heading = 'Sign up with MarketMaker';
+    welcome = 'Welcome! Sign in with Amazon, Google or Facebook, or fill in your details to get started.';
+    haveUsername = computed(() => this.username.trim().length > 5, ...(ngDevMode ? [{ debugName: "haveUsername" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => { this.password = this.authState.passwordSignal(); });
+        effect(() => { this.username = this.authState.usernameSignal(); });
+        effect(() => { this.email = this.authState.emailSignal(); });
+    }
+    ngAfterViewInit() {
+        this.usernameInput?.nativeElement.focus();
+    }
+    onSignUp() {
+        if (!this.validateInput())
+            return;
+        this.signUpBusy = true;
+        this.auth.signUp({ username: this.username, email: this.email, password: this.password }).then((res) => {
+            this.signUpBusy = false;
+            this.handleSignUpResponse(res);
+        });
+    }
+    handleSignUpResponse(res) {
+        if (res.error) {
+            this.authState.setError(res.error);
+            return;
+        }
+        if (!res.isSignedUp && res.nextStep === SignUpNextSteps.CONFIRM_SIGN_UP) {
+            this.onSwitchConfirmAccount();
+        }
+        else {
+            this.saveCredentials();
+            this.authState.close();
+        }
+    }
+    onSocialSignIn(provider) {
+        this.auth.socialSignIn(provider);
+        this.authState.close();
+    }
+    onSwitchSignIn() {
+        this.saveCredentials();
+        this.authState.setMode(AuthModes.SIGN_IN);
+    }
+    onSwitchConfirmAccount() {
+        this.saveCredentials();
+        this.authState.setMode(AuthModes.CONFIRM_ACCOUNT);
+    }
+    saveCredentials() {
+        this.authState.setPassword(this.password);
+        this.authState.setUsername(this.username);
+        this.authState.setEmail(this.email);
+    }
+    validateInput() {
+        if (this.username.length < 6) {
+            this.usernameInput?.nativeElement.focus();
+            this.authState.setAutoCloseError('Username must be at least six characters in length');
+            return false;
+        }
+        if (/\s/.test(this.username)) {
+            this.usernameInput?.nativeElement.focus();
+            this.authState.setAutoCloseError('Username may not include whitespace characters');
+            return false;
+        }
+        if (!validateEmail(this.email)) {
+            this.emailInput?.nativeElement.focus();
+            this.authState.setAutoCloseError('Please enter a valid email address');
+            return false;
+        }
+        if (!validatePassword(this.password)) {
+            this.passwordInput?.nativeElement.focus();
+            this.authState.setAutoCloseError('Password must be at least 8 characters in length');
+            return false;
+        }
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthSignUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: AuthSignUpComponent, isStandalone: true, selector: "mma-auth-signup", viewQueries: [{ propertyName: "usernameInput", first: true, predicate: ["usernameInput"], descendants: true }, { propertyName: "emailInput", first: true, predicate: ["emailInput"], descendants: true }, { propertyName: "passwordInput", first: true, predicate: ["passwordInput"], descendants: true }], ngImport: i0, template: "<div class=\"auth-container\">\n  <div class=\"messages\">\n    <div class=\"sign-in-msg main\">{{ heading }}</div>\n    <div class=\"sign-in-msg secondary\">{{ welcome }}</div>\n  </div>\n  <div class=\"sign-in-row row\"></div>\n\n  <div class=\"social-buttons-container\">\n    <button class=\"social-button\" (click)=\"onSocialSignIn(amazon)\" title=\"Sign in with Amazon\">\n      <div class=\"social-button-inner\"><div class=\"social-logo amazon\"></div></div>\n    </button>\n    <button class=\"social-button\" (click)=\"onSocialSignIn(google)\" title=\"Sign in with Google\">\n      <div class=\"social-button-inner\"><div class=\"social-logo google\"></div></div>\n    </button>\n    <button class=\"social-button\" (click)=\"onSocialSignIn(facebook)\" title=\"Sign in with Facebook\">\n      <div class=\"social-button-inner\"><div class=\"social-logo facebook\"></div></div>\n    </button>\n  </div>\n\n  <div class=\"method-divider\">\n    <div class=\"divider\"></div>\n    <span class=\"method-label\">or</span>\n    <div class=\"divider\"></div>\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"username\" class=\"sign-in-label\">Username</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"username\"\n      name=\"username\"\n      [(ngModel)]=\"username\"\n      spellcheck=\"false\"\n      autocomplete=\"username\"\n      autocorrect=\"off\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your username\"\n      #usernameInput\n    />\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"email\" class=\"sign-in-label\">Email address</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"email\"\n      name=\"email\"\n      [(ngModel)]=\"email\"\n      type=\"email\"\n      autocomplete=\"none\"\n      spellcheck=\"false\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your email address\"\n      #emailInput\n    />\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"password\" class=\"sign-in-label\">Password</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"password\"\n      name=\"password\"\n      [(ngModel)]=\"password\"\n      type=\"password\"\n      spellcheck=\"false\"\n      autocomplete=\"new-password\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your password\"\n      #passwordInput\n    />\n  </div>\n\n  <div class=\"buttons-bottom\">\n    <button class=\"btn btn-secondary\" (click)=\"authState.close()\">Cancel</button>\n    <button class=\"btn btn-important\" [disabled]=\"signUpBusy\" (click)=\"onSignUp()\">Register</button>\n  </div>\n\n  <div class=\"sign-in-row switch\">\n    Already have an account?&nbsp;\n    <span class=\"switch-mode\" (click)=\"onSwitchSignIn()\">Sign in</span>\n  </div>\n</div>\n", styles: ["", ".auth-container{display:flex;flex-direction:column;gap:16px}@media screen and (max-width:767px){.auth-container{gap:8px}}.sign-in-row{width:100%;display:flex;justify-content:center;font-size:14px}.sign-in-row.column{flex-direction:column;gap:4px}.sign-in-row.row{flex-direction:row;gap:12px}.sign-in-row>.switch-mode{font-weight:500;color:#6c47ff;cursor:pointer}.sign-in-row.switch{padding-bottom:1rem}.sign-in-label{width:100%;font-size:.8rem}.sign-in-input{width:calc(100% - 12px);padding:8px 6px;font-size:16px;border:1px solid #b0b0b0;border-radius:4px}.readonly-input{color:#b0b0b0;background:#efefef}.messages{display:flex;flex-direction:column;gap:4px}.sign-in-msg{text-align:center}.sign-in-msg.main{font-size:18px;font-weight:600}.sign-in-msg.secondary{font-size:14px;font-weight:400}.social-buttons-container{width:100%;padding:12px 0;display:flex;gap:.8rem;justify-content:center}.social-button{padding:11px;border-radius:8px;border:1px solid #e0e0e0;background:#fff;color:#6c6c6c;box-shadow:none;font-weight:500;cursor:pointer}.social-button-inner{display:flex;gap:.75rem}.social-logo{width:1rem;height:1rem;background-position:center;background-size:contain;background-repeat:no-repeat}.social-logo.amazon{background-image:url(https://static.foodmarketmaker.com/social/amazon.png)}.social-logo.google{background-image:url(https://static.foodmarketmaker.com/social/google.png)}.social-logo.facebook{background-image:url(https://static.foodmarketmaker.com/social/facebook.png)}.method-divider{width:100%;padding:8px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;color:#6c6c6c;font-size:.8rem}.divider{width:45%;height:1px;border-top:1px solid #e0e0e0}.buttons-bottom{width:100%;padding:12px 0;display:flex;gap:16px;justify-content:center}.buttons-bottom>.btn-important{background:#f58220}.buttons-bottom>.btn{padding:.5rem 1rem}.buttons-bottom>button:focus{outline:none}.center-in-dialog{width:100%;display:flex;flex-direction:row;justify-content:center}.confirmation-code .ngx-otp-input-box{width:35px;height:38px;font-size:1.35rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthSignUpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mma-auth-signup', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"auth-container\">\n  <div class=\"messages\">\n    <div class=\"sign-in-msg main\">{{ heading }}</div>\n    <div class=\"sign-in-msg secondary\">{{ welcome }}</div>\n  </div>\n  <div class=\"sign-in-row row\"></div>\n\n  <div class=\"social-buttons-container\">\n    <button class=\"social-button\" (click)=\"onSocialSignIn(amazon)\" title=\"Sign in with Amazon\">\n      <div class=\"social-button-inner\"><div class=\"social-logo amazon\"></div></div>\n    </button>\n    <button class=\"social-button\" (click)=\"onSocialSignIn(google)\" title=\"Sign in with Google\">\n      <div class=\"social-button-inner\"><div class=\"social-logo google\"></div></div>\n    </button>\n    <button class=\"social-button\" (click)=\"onSocialSignIn(facebook)\" title=\"Sign in with Facebook\">\n      <div class=\"social-button-inner\"><div class=\"social-logo facebook\"></div></div>\n    </button>\n  </div>\n\n  <div class=\"method-divider\">\n    <div class=\"divider\"></div>\n    <span class=\"method-label\">or</span>\n    <div class=\"divider\"></div>\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"username\" class=\"sign-in-label\">Username</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"username\"\n      name=\"username\"\n      [(ngModel)]=\"username\"\n      spellcheck=\"false\"\n      autocomplete=\"username\"\n      autocorrect=\"off\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your username\"\n      #usernameInput\n    />\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"email\" class=\"sign-in-label\">Email address</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"email\"\n      name=\"email\"\n      [(ngModel)]=\"email\"\n      type=\"email\"\n      autocomplete=\"none\"\n      spellcheck=\"false\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your email address\"\n      #emailInput\n    />\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"password\" class=\"sign-in-label\">Password</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"password\"\n      name=\"password\"\n      [(ngModel)]=\"password\"\n      type=\"password\"\n      spellcheck=\"false\"\n      autocomplete=\"new-password\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your password\"\n      #passwordInput\n    />\n  </div>\n\n  <div class=\"buttons-bottom\">\n    <button class=\"btn btn-secondary\" (click)=\"authState.close()\">Cancel</button>\n    <button class=\"btn btn-important\" [disabled]=\"signUpBusy\" (click)=\"onSignUp()\">Register</button>\n  </div>\n\n  <div class=\"sign-in-row switch\">\n    Already have an account?&nbsp;\n    <span class=\"switch-mode\" (click)=\"onSwitchSignIn()\">Sign in</span>\n  </div>\n</div>\n", styles: [".auth-container{display:flex;flex-direction:column;gap:16px}@media screen and (max-width:767px){.auth-container{gap:8px}}.sign-in-row{width:100%;display:flex;justify-content:center;font-size:14px}.sign-in-row.column{flex-direction:column;gap:4px}.sign-in-row.row{flex-direction:row;gap:12px}.sign-in-row>.switch-mode{font-weight:500;color:#6c47ff;cursor:pointer}.sign-in-row.switch{padding-bottom:1rem}.sign-in-label{width:100%;font-size:.8rem}.sign-in-input{width:calc(100% - 12px);padding:8px 6px;font-size:16px;border:1px solid #b0b0b0;border-radius:4px}.readonly-input{color:#b0b0b0;background:#efefef}.messages{display:flex;flex-direction:column;gap:4px}.sign-in-msg{text-align:center}.sign-in-msg.main{font-size:18px;font-weight:600}.sign-in-msg.secondary{font-size:14px;font-weight:400}.social-buttons-container{width:100%;padding:12px 0;display:flex;gap:.8rem;justify-content:center}.social-button{padding:11px;border-radius:8px;border:1px solid #e0e0e0;background:#fff;color:#6c6c6c;box-shadow:none;font-weight:500;cursor:pointer}.social-button-inner{display:flex;gap:.75rem}.social-logo{width:1rem;height:1rem;background-position:center;background-size:contain;background-repeat:no-repeat}.social-logo.amazon{background-image:url(https://static.foodmarketmaker.com/social/amazon.png)}.social-logo.google{background-image:url(https://static.foodmarketmaker.com/social/google.png)}.social-logo.facebook{background-image:url(https://static.foodmarketmaker.com/social/facebook.png)}.method-divider{width:100%;padding:8px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;color:#6c6c6c;font-size:.8rem}.divider{width:45%;height:1px;border-top:1px solid #e0e0e0}.buttons-bottom{width:100%;padding:12px 0;display:flex;gap:16px;justify-content:center}.buttons-bottom>.btn-important{background:#f58220}.buttons-bottom>.btn{padding:.5rem 1rem}.buttons-bottom>button:focus{outline:none}.center-in-dialog{width:100%;display:flex;flex-direction:row;justify-content:center}.confirmation-code .ngx-otp-input-box{width:35px;height:38px;font-size:1.35rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { usernameInput: [{
+                type: ViewChild,
+                args: ['usernameInput', { static: false }]
+            }], emailInput: [{
+                type: ViewChild,
+                args: ['emailInput', { static: false }]
+            }], passwordInput: [{
+                type: ViewChild,
+                args: ['passwordInput', { static: false }]
+            }] } });
+
+class AuthForgotComponent {
+    auth = inject(AuthService);
+    authState = inject(AuthStateService);
+    usernameInput;
+    username = '';
+    forgotBusy = false;
+    heading = 'Forgot your password?';
+    welcome = 'Enter your username and we will send a message to reset your password.';
+    haveUsername = computed(() => this.username.trim().length > 6, ...(ngDevMode ? [{ debugName: "haveUsername" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => { this.username = this.authState.usernameSignal(); });
+    }
+    ngAfterViewInit() {
+        this.usernameInput?.nativeElement.focus();
+    }
+    notifyClose() {
+        this.authState.setUsername(this.username);
+        this.authState.close();
+    }
+    onPasswordReset() {
+        this.forgotBusy = true;
+        this.auth.resetPassword(this.username).then((res) => {
+            this.forgotBusy = false;
+            if (res.isPasswordReset) {
+                this.notifyClose();
+            }
+            else if (res.nextStep === ResetPasswordNextSteps.CONFIRM_RESET_PASSWORD_WITH_CODE) {
+                this.authState.setUsername(this.username);
+                this.authState.setMode(AuthModes.CONFIRM_PASSWORD_RESET);
+            }
+            else if (res.error) {
+                this.authState.setError(res.error);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthForgotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: AuthForgotComponent, isStandalone: true, selector: "mma-auth-forgot", viewQueries: [{ propertyName: "usernameInput", first: true, predicate: ["usernameInput"], descendants: true }], ngImport: i0, template: "<div class=\"auth-container\">\n  <div class=\"messages\">\n    <div class=\"sign-in-msg main\">{{ heading }}</div>\n    <div class=\"sign-in-msg secondary\">{{ welcome }}</div>\n  </div>\n  <div class=\"sign-in-row row\"></div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"username\" class=\"sign-in-label\">Username</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"username\"\n      name=\"username\"\n      [(ngModel)]=\"username\"\n      spellcheck=\"false\"\n      autocomplete=\"username\"\n      autocorrect=\"off\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your username\"\n      #usernameInput\n    />\n  </div>\n\n  <div class=\"buttons-bottom forgot-password-buttons-bottom\">\n    <button class=\"btn btn-secondary\" (click)=\"notifyClose()\">Cancel</button>\n    <button class=\"btn btn-important\" [disabled]=\"forgotBusy\" (click)=\"onPasswordReset()\">Reset Password</button>\n  </div>\n</div>\n", styles: ["", ".auth-container{display:flex;flex-direction:column;gap:16px}@media screen and (max-width:767px){.auth-container{gap:8px}}.sign-in-row{width:100%;display:flex;justify-content:center;font-size:14px}.sign-in-row.column{flex-direction:column;gap:4px}.sign-in-row.row{flex-direction:row;gap:12px}.sign-in-row>.switch-mode{font-weight:500;color:#6c47ff;cursor:pointer}.sign-in-row.switch{padding-bottom:1rem}.sign-in-label{width:100%;font-size:.8rem}.sign-in-input{width:calc(100% - 12px);padding:8px 6px;font-size:16px;border:1px solid #b0b0b0;border-radius:4px}.readonly-input{color:#b0b0b0;background:#efefef}.messages{display:flex;flex-direction:column;gap:4px}.sign-in-msg{text-align:center}.sign-in-msg.main{font-size:18px;font-weight:600}.sign-in-msg.secondary{font-size:14px;font-weight:400}.social-buttons-container{width:100%;padding:12px 0;display:flex;gap:.8rem;justify-content:center}.social-button{padding:11px;border-radius:8px;border:1px solid #e0e0e0;background:#fff;color:#6c6c6c;box-shadow:none;font-weight:500;cursor:pointer}.social-button-inner{display:flex;gap:.75rem}.social-logo{width:1rem;height:1rem;background-position:center;background-size:contain;background-repeat:no-repeat}.social-logo.amazon{background-image:url(https://static.foodmarketmaker.com/social/amazon.png)}.social-logo.google{background-image:url(https://static.foodmarketmaker.com/social/google.png)}.social-logo.facebook{background-image:url(https://static.foodmarketmaker.com/social/facebook.png)}.method-divider{width:100%;padding:8px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;color:#6c6c6c;font-size:.8rem}.divider{width:45%;height:1px;border-top:1px solid #e0e0e0}.buttons-bottom{width:100%;padding:12px 0;display:flex;gap:16px;justify-content:center}.buttons-bottom>.btn-important{background:#f58220}.buttons-bottom>.btn{padding:.5rem 1rem}.buttons-bottom>button:focus{outline:none}.center-in-dialog{width:100%;display:flex;flex-direction:row;justify-content:center}.confirmation-code .ngx-otp-input-box{width:35px;height:38px;font-size:1.35rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthForgotComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mma-auth-forgot', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"auth-container\">\n  <div class=\"messages\">\n    <div class=\"sign-in-msg main\">{{ heading }}</div>\n    <div class=\"sign-in-msg secondary\">{{ welcome }}</div>\n  </div>\n  <div class=\"sign-in-row row\"></div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"username\" class=\"sign-in-label\">Username</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"username\"\n      name=\"username\"\n      [(ngModel)]=\"username\"\n      spellcheck=\"false\"\n      autocomplete=\"username\"\n      autocorrect=\"off\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your username\"\n      #usernameInput\n    />\n  </div>\n\n  <div class=\"buttons-bottom forgot-password-buttons-bottom\">\n    <button class=\"btn btn-secondary\" (click)=\"notifyClose()\">Cancel</button>\n    <button class=\"btn btn-important\" [disabled]=\"forgotBusy\" (click)=\"onPasswordReset()\">Reset Password</button>\n  </div>\n</div>\n", styles: [".auth-container{display:flex;flex-direction:column;gap:16px}@media screen and (max-width:767px){.auth-container{gap:8px}}.sign-in-row{width:100%;display:flex;justify-content:center;font-size:14px}.sign-in-row.column{flex-direction:column;gap:4px}.sign-in-row.row{flex-direction:row;gap:12px}.sign-in-row>.switch-mode{font-weight:500;color:#6c47ff;cursor:pointer}.sign-in-row.switch{padding-bottom:1rem}.sign-in-label{width:100%;font-size:.8rem}.sign-in-input{width:calc(100% - 12px);padding:8px 6px;font-size:16px;border:1px solid #b0b0b0;border-radius:4px}.readonly-input{color:#b0b0b0;background:#efefef}.messages{display:flex;flex-direction:column;gap:4px}.sign-in-msg{text-align:center}.sign-in-msg.main{font-size:18px;font-weight:600}.sign-in-msg.secondary{font-size:14px;font-weight:400}.social-buttons-container{width:100%;padding:12px 0;display:flex;gap:.8rem;justify-content:center}.social-button{padding:11px;border-radius:8px;border:1px solid #e0e0e0;background:#fff;color:#6c6c6c;box-shadow:none;font-weight:500;cursor:pointer}.social-button-inner{display:flex;gap:.75rem}.social-logo{width:1rem;height:1rem;background-position:center;background-size:contain;background-repeat:no-repeat}.social-logo.amazon{background-image:url(https://static.foodmarketmaker.com/social/amazon.png)}.social-logo.google{background-image:url(https://static.foodmarketmaker.com/social/google.png)}.social-logo.facebook{background-image:url(https://static.foodmarketmaker.com/social/facebook.png)}.method-divider{width:100%;padding:8px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;color:#6c6c6c;font-size:.8rem}.divider{width:45%;height:1px;border-top:1px solid #e0e0e0}.buttons-bottom{width:100%;padding:12px 0;display:flex;gap:16px;justify-content:center}.buttons-bottom>.btn-important{background:#f58220}.buttons-bottom>.btn{padding:.5rem 1rem}.buttons-bottom>button:focus{outline:none}.center-in-dialog{width:100%;display:flex;flex-direction:row;justify-content:center}.confirmation-code .ngx-otp-input-box{width:35px;height:38px;font-size:1.35rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { usernameInput: [{
+                type: ViewChild,
+                args: ['usernameInput', { static: false }]
+            }] } });
+
+class AuthConfirmSignupComponent {
+    auth = inject(AuthService);
+    authState = inject(AuthStateService);
+    confirmSignupOtp;
+    username = '';
+    email = '';
+    code = '';
+    confirmBusy = false;
+    heading = 'Confirm registration';
+    get welcome() {
+        return `We have sent a code to ${this.concealEmail()}. Enter the code below to confirm your new account.`;
+    }
+    constructor() {
+        effect(() => { this.email = this.authState.emailSignal(); });
+        effect(() => { this.username = this.authState.usernameSignal(); });
+    }
+    onOtpChange(event) {
+        this.code = event.value;
+    }
+    onOtpComplete(otp) {
+        this.code = otp;
+    }
+    onConfirmAccount() {
+        if (!validateOtpCode(this.code)) {
+            this.authState.setAutoCloseError('Code must be exactly six numerals');
+            return;
+        }
+        this.confirmBusy = true;
+        this.auth.confirmSignUp(this.username, this.code).then((res) => {
+            this.confirmBusy = false;
+            if (res.error) {
+                this.authState.setError(res.error);
+            }
+            else if (res.isSignedUp) {
+                this.authState.setMode(AuthModes.SIGN_IN);
+            }
+        }).finally(() => { this.confirmBusy = false; });
+    }
+    onSendNewCode() {
+        this.auth.resendSignUpCode(this.username).then((res) => {
+            if (res.error) {
+                this.authState.setError(res.error);
+            }
+        });
+    }
+    notifyClose() {
+        this.authState.close();
+    }
+    concealEmail() {
+        if (!this.email || this.email.length < 5)
+            return 'your email address';
+        const [local, domain] = this.email.split('@');
+        const conceal = (s) => s[0] + '*'.repeat(Math.max(s.length - 2, 1)) + s.slice(-1);
+        return `${conceal(local)}@${conceal(domain)}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthConfirmSignupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: AuthConfirmSignupComponent, isStandalone: true, selector: "mma-auth-confirm-signup", viewQueries: [{ propertyName: "confirmSignupOtp", first: true, predicate: ["confirmSignupOtp"], descendants: true }], ngImport: i0, template: "<div class=\"auth-container\">\n  <div class=\"messages\">\n    <div class=\"sign-in-msg main\">{{ heading }}</div>\n    <div class=\"sign-in-msg secondary\" [innerHTML]=\"welcome\"></div>\n  </div>\n  <div class=\"sign-in-row row\"></div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"username\" class=\"sign-in-label\">Username</label>\n    <input class=\"sign-in-input readonly-input\" id=\"username\" name=\"username\" [value]=\"username\"\n      spellcheck=\"false\" autocorrect=\"off\" autocapitalize=\"none\" readonly />\n  </div>\n\n  <div class=\"sign-in-row column confirmation-code\">\n    <label class=\"sign-in-label\">Confirmation code</label>\n    <div class=\"center-in-dialog\">\n      <ngx-otp-input\n        [length]=\"6\"\n        [autoFocus]=\"true\"\n        [autoBlur]=\"true\"\n        [mask]=\"false\"\n        [charPattern]=\"/^[0-9]+$/\"\n        inputMode=\"numeric\"\n        (otpChange)=\"onOtpChange($event)\"\n        (otpComplete)=\"onOtpComplete($event)\"\n        #confirmSignupOtp\n      ></ngx-otp-input>\n    </div>\n  </div>\n\n  <div class=\"buttons-bottom\">\n    <button class=\"btn btn-secondary\" (click)=\"notifyClose()\">Cancel</button>\n    <button class=\"btn btn-important\" [disabled]=\"confirmBusy\" (click)=\"onConfirmAccount()\">Confirm Account</button>\n  </div>\n\n  <div class=\"sign-in-row switch\">\n    Didn't receive a code?&nbsp;\n    <span class=\"switch-mode\" (click)=\"onSendNewCode()\">Send a new code</span>\n  </div>\n</div>\n", styles: ["", ".auth-container{display:flex;flex-direction:column;gap:16px}@media screen and (max-width:767px){.auth-container{gap:8px}}.sign-in-row{width:100%;display:flex;justify-content:center;font-size:14px}.sign-in-row.column{flex-direction:column;gap:4px}.sign-in-row.row{flex-direction:row;gap:12px}.sign-in-row>.switch-mode{font-weight:500;color:#6c47ff;cursor:pointer}.sign-in-row.switch{padding-bottom:1rem}.sign-in-label{width:100%;font-size:.8rem}.sign-in-input{width:calc(100% - 12px);padding:8px 6px;font-size:16px;border:1px solid #b0b0b0;border-radius:4px}.readonly-input{color:#b0b0b0;background:#efefef}.messages{display:flex;flex-direction:column;gap:4px}.sign-in-msg{text-align:center}.sign-in-msg.main{font-size:18px;font-weight:600}.sign-in-msg.secondary{font-size:14px;font-weight:400}.social-buttons-container{width:100%;padding:12px 0;display:flex;gap:.8rem;justify-content:center}.social-button{padding:11px;border-radius:8px;border:1px solid #e0e0e0;background:#fff;color:#6c6c6c;box-shadow:none;font-weight:500;cursor:pointer}.social-button-inner{display:flex;gap:.75rem}.social-logo{width:1rem;height:1rem;background-position:center;background-size:contain;background-repeat:no-repeat}.social-logo.amazon{background-image:url(https://static.foodmarketmaker.com/social/amazon.png)}.social-logo.google{background-image:url(https://static.foodmarketmaker.com/social/google.png)}.social-logo.facebook{background-image:url(https://static.foodmarketmaker.com/social/facebook.png)}.method-divider{width:100%;padding:8px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;color:#6c6c6c;font-size:.8rem}.divider{width:45%;height:1px;border-top:1px solid #e0e0e0}.buttons-bottom{width:100%;padding:12px 0;display:flex;gap:16px;justify-content:center}.buttons-bottom>.btn-important{background:#f58220}.buttons-bottom>.btn{padding:.5rem 1rem}.buttons-bottom>button:focus{outline:none}.center-in-dialog{width:100%;display:flex;flex-direction:row;justify-content:center}.confirmation-code .ngx-otp-input-box{width:35px;height:38px;font-size:1.35rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: NgxOtpInputComponent, selector: "ngx-otp-input", inputs: ["length", "autoFocus", "autoBlur", "mask", "charPattern", "inputMode", "ariaLabel", "status", "statusMessages"], outputs: ["otpChange", "otpComplete", "otpInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthConfirmSignupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mma-auth-confirm-signup', standalone: true, imports: [FormsModule, NgxOtpInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"auth-container\">\n  <div class=\"messages\">\n    <div class=\"sign-in-msg main\">{{ heading }}</div>\n    <div class=\"sign-in-msg secondary\" [innerHTML]=\"welcome\"></div>\n  </div>\n  <div class=\"sign-in-row row\"></div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"username\" class=\"sign-in-label\">Username</label>\n    <input class=\"sign-in-input readonly-input\" id=\"username\" name=\"username\" [value]=\"username\"\n      spellcheck=\"false\" autocorrect=\"off\" autocapitalize=\"none\" readonly />\n  </div>\n\n  <div class=\"sign-in-row column confirmation-code\">\n    <label class=\"sign-in-label\">Confirmation code</label>\n    <div class=\"center-in-dialog\">\n      <ngx-otp-input\n        [length]=\"6\"\n        [autoFocus]=\"true\"\n        [autoBlur]=\"true\"\n        [mask]=\"false\"\n        [charPattern]=\"/^[0-9]+$/\"\n        inputMode=\"numeric\"\n        (otpChange)=\"onOtpChange($event)\"\n        (otpComplete)=\"onOtpComplete($event)\"\n        #confirmSignupOtp\n      ></ngx-otp-input>\n    </div>\n  </div>\n\n  <div class=\"buttons-bottom\">\n    <button class=\"btn btn-secondary\" (click)=\"notifyClose()\">Cancel</button>\n    <button class=\"btn btn-important\" [disabled]=\"confirmBusy\" (click)=\"onConfirmAccount()\">Confirm Account</button>\n  </div>\n\n  <div class=\"sign-in-row switch\">\n    Didn't receive a code?&nbsp;\n    <span class=\"switch-mode\" (click)=\"onSendNewCode()\">Send a new code</span>\n  </div>\n</div>\n", styles: [".auth-container{display:flex;flex-direction:column;gap:16px}@media screen and (max-width:767px){.auth-container{gap:8px}}.sign-in-row{width:100%;display:flex;justify-content:center;font-size:14px}.sign-in-row.column{flex-direction:column;gap:4px}.sign-in-row.row{flex-direction:row;gap:12px}.sign-in-row>.switch-mode{font-weight:500;color:#6c47ff;cursor:pointer}.sign-in-row.switch{padding-bottom:1rem}.sign-in-label{width:100%;font-size:.8rem}.sign-in-input{width:calc(100% - 12px);padding:8px 6px;font-size:16px;border:1px solid #b0b0b0;border-radius:4px}.readonly-input{color:#b0b0b0;background:#efefef}.messages{display:flex;flex-direction:column;gap:4px}.sign-in-msg{text-align:center}.sign-in-msg.main{font-size:18px;font-weight:600}.sign-in-msg.secondary{font-size:14px;font-weight:400}.social-buttons-container{width:100%;padding:12px 0;display:flex;gap:.8rem;justify-content:center}.social-button{padding:11px;border-radius:8px;border:1px solid #e0e0e0;background:#fff;color:#6c6c6c;box-shadow:none;font-weight:500;cursor:pointer}.social-button-inner{display:flex;gap:.75rem}.social-logo{width:1rem;height:1rem;background-position:center;background-size:contain;background-repeat:no-repeat}.social-logo.amazon{background-image:url(https://static.foodmarketmaker.com/social/amazon.png)}.social-logo.google{background-image:url(https://static.foodmarketmaker.com/social/google.png)}.social-logo.facebook{background-image:url(https://static.foodmarketmaker.com/social/facebook.png)}.method-divider{width:100%;padding:8px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;color:#6c6c6c;font-size:.8rem}.divider{width:45%;height:1px;border-top:1px solid #e0e0e0}.buttons-bottom{width:100%;padding:12px 0;display:flex;gap:16px;justify-content:center}.buttons-bottom>.btn-important{background:#f58220}.buttons-bottom>.btn{padding:.5rem 1rem}.buttons-bottom>button:focus{outline:none}.center-in-dialog{width:100%;display:flex;flex-direction:row;justify-content:center}.confirmation-code .ngx-otp-input-box{width:35px;height:38px;font-size:1.35rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { confirmSignupOtp: [{
+                type: ViewChild,
+                args: ['confirmSignupOtp']
+            }] } });
+
+class AuthConfirmResetComponent {
+    auth = inject(AuthService);
+    authState = inject(AuthStateService);
+    passwordInput;
+    confirmResetOtp;
+    username = '';
+    password = '';
+    email = '';
+    code = '';
+    heading = 'Set a new password';
+    get welcome() {
+        return `We have sent a code to ${this.concealEmail()}. Enter the code, username and a new password below.`;
+    }
+    constructor() {
+        effect(() => { this.username = this.authState.usernameSignal(); });
+        effect(() => { this.email = this.authState.emailSignal(); });
+    }
+    onOtpChange(event) {
+        this.code = event.value;
+    }
+    onOtpComplete(otp) {
+        this.code = otp;
+    }
+    onConfirmPasswordReset() {
+        if (!validateOtpCode(this.code)) {
+            this.authState.setAutoCloseError('Confirmation code must be exactly six numerals');
+            return;
+        }
+        if (!validatePassword(this.password)) {
+            this.passwordInput?.nativeElement.focus();
+            this.authState.setAutoCloseError('Password must be at least 8 characters');
+            return;
+        }
+        this.auth.confirmResetPassword(this.username, this.password, this.code).then((res) => {
+            if (res.isPasswordReset) {
+                this.authState.close();
+            }
+            else if (res.error) {
+                this.authState.setError(res.error);
+            }
+        });
+    }
+    onSwitchPasswordReset() {
+        this.authState.setUsername(this.username);
+        this.authState.setMode(AuthModes.FORGOT_PASSWORD);
+    }
+    notifyClose() {
+        this.authState.close();
+    }
+    concealEmail() {
+        if (!this.email || this.email.length < 5)
+            return 'your email address';
+        const [local, domain] = this.email.split('@');
+        const conceal = (s) => s[0] + '*'.repeat(Math.max(s.length - 2, 1)) + s.slice(-1);
+        return `${conceal(local)}@${conceal(domain)}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthConfirmResetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: AuthConfirmResetComponent, isStandalone: true, selector: "mma-auth-confirm-reset", viewQueries: [{ propertyName: "passwordInput", first: true, predicate: ["passwordInput"], descendants: true }, { propertyName: "confirmResetOtp", first: true, predicate: ["confirmResetOtp"], descendants: true }], ngImport: i0, template: "<div class=\"auth-container\">\n  <div class=\"messages\">\n    <div class=\"sign-in-msg main\">{{ heading }}</div>\n    <div class=\"sign-in-msg secondary\" [innerHTML]=\"welcome\"></div>\n  </div>\n  <div class=\"sign-in-row row\"></div>\n\n  <div class=\"sign-in-row column confirmation-code\">\n    <label class=\"sign-in-label\">Confirmation code</label>\n    <div class=\"center-in-dialog\">\n      <ngx-otp-input\n        [length]=\"6\"\n        [autoFocus]=\"true\"\n        [autoBlur]=\"true\"\n        [mask]=\"false\"\n        [charPattern]=\"/^[0-9]+$/\"\n        inputMode=\"numeric\"\n        (otpChange)=\"onOtpChange($event)\"\n        (otpComplete)=\"onOtpComplete($event)\"\n        #confirmResetOtp\n      ></ngx-otp-input>\n    </div>\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"username\" class=\"sign-in-label\">Username</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"username\"\n      name=\"username\"\n      [(ngModel)]=\"username\"\n      spellcheck=\"false\"\n      autocomplete=\"username\"\n      autocorrect=\"off\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your username\"\n    />\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"password\" class=\"sign-in-label\">New password</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"password\"\n      name=\"password\"\n      [(ngModel)]=\"password\"\n      type=\"password\"\n      spellcheck=\"false\"\n      autocomplete=\"new-password\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your new password\"\n      #passwordInput\n    />\n  </div>\n\n  <div class=\"buttons-bottom\">\n    <button class=\"btn btn-secondary\" (click)=\"notifyClose()\">Cancel</button>\n    <button class=\"btn btn-important\" (click)=\"onConfirmPasswordReset()\">Reset Password</button>\n  </div>\n\n  <div class=\"sign-in-row switch\">\n    Didn't receive a reset code?&nbsp;\n    <span class=\"switch-mode\" (click)=\"onSwitchPasswordReset()\">Try again</span>\n  </div>\n</div>\n", styles: ["", ".auth-container{display:flex;flex-direction:column;gap:16px}@media screen and (max-width:767px){.auth-container{gap:8px}}.sign-in-row{width:100%;display:flex;justify-content:center;font-size:14px}.sign-in-row.column{flex-direction:column;gap:4px}.sign-in-row.row{flex-direction:row;gap:12px}.sign-in-row>.switch-mode{font-weight:500;color:#6c47ff;cursor:pointer}.sign-in-row.switch{padding-bottom:1rem}.sign-in-label{width:100%;font-size:.8rem}.sign-in-input{width:calc(100% - 12px);padding:8px 6px;font-size:16px;border:1px solid #b0b0b0;border-radius:4px}.readonly-input{color:#b0b0b0;background:#efefef}.messages{display:flex;flex-direction:column;gap:4px}.sign-in-msg{text-align:center}.sign-in-msg.main{font-size:18px;font-weight:600}.sign-in-msg.secondary{font-size:14px;font-weight:400}.social-buttons-container{width:100%;padding:12px 0;display:flex;gap:.8rem;justify-content:center}.social-button{padding:11px;border-radius:8px;border:1px solid #e0e0e0;background:#fff;color:#6c6c6c;box-shadow:none;font-weight:500;cursor:pointer}.social-button-inner{display:flex;gap:.75rem}.social-logo{width:1rem;height:1rem;background-position:center;background-size:contain;background-repeat:no-repeat}.social-logo.amazon{background-image:url(https://static.foodmarketmaker.com/social/amazon.png)}.social-logo.google{background-image:url(https://static.foodmarketmaker.com/social/google.png)}.social-logo.facebook{background-image:url(https://static.foodmarketmaker.com/social/facebook.png)}.method-divider{width:100%;padding:8px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;color:#6c6c6c;font-size:.8rem}.divider{width:45%;height:1px;border-top:1px solid #e0e0e0}.buttons-bottom{width:100%;padding:12px 0;display:flex;gap:16px;justify-content:center}.buttons-bottom>.btn-important{background:#f58220}.buttons-bottom>.btn{padding:.5rem 1rem}.buttons-bottom>button:focus{outline:none}.center-in-dialog{width:100%;display:flex;flex-direction:row;justify-content:center}.confirmation-code .ngx-otp-input-box{width:35px;height:38px;font-size:1.35rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgxOtpInputComponent, selector: "ngx-otp-input", inputs: ["length", "autoFocus", "autoBlur", "mask", "charPattern", "inputMode", "ariaLabel", "status", "statusMessages"], outputs: ["otpChange", "otpComplete", "otpInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthConfirmResetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mma-auth-confirm-reset', standalone: true, imports: [FormsModule, NgxOtpInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"auth-container\">\n  <div class=\"messages\">\n    <div class=\"sign-in-msg main\">{{ heading }}</div>\n    <div class=\"sign-in-msg secondary\" [innerHTML]=\"welcome\"></div>\n  </div>\n  <div class=\"sign-in-row row\"></div>\n\n  <div class=\"sign-in-row column confirmation-code\">\n    <label class=\"sign-in-label\">Confirmation code</label>\n    <div class=\"center-in-dialog\">\n      <ngx-otp-input\n        [length]=\"6\"\n        [autoFocus]=\"true\"\n        [autoBlur]=\"true\"\n        [mask]=\"false\"\n        [charPattern]=\"/^[0-9]+$/\"\n        inputMode=\"numeric\"\n        (otpChange)=\"onOtpChange($event)\"\n        (otpComplete)=\"onOtpComplete($event)\"\n        #confirmResetOtp\n      ></ngx-otp-input>\n    </div>\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"username\" class=\"sign-in-label\">Username</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"username\"\n      name=\"username\"\n      [(ngModel)]=\"username\"\n      spellcheck=\"false\"\n      autocomplete=\"username\"\n      autocorrect=\"off\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your username\"\n    />\n  </div>\n\n  <div class=\"sign-in-row column\">\n    <label for=\"password\" class=\"sign-in-label\">New password</label>\n    <input\n      class=\"sign-in-input\"\n      id=\"password\"\n      name=\"password\"\n      [(ngModel)]=\"password\"\n      type=\"password\"\n      spellcheck=\"false\"\n      autocomplete=\"new-password\"\n      autocapitalize=\"none\"\n      placeholder=\"Enter your new password\"\n      #passwordInput\n    />\n  </div>\n\n  <div class=\"buttons-bottom\">\n    <button class=\"btn btn-secondary\" (click)=\"notifyClose()\">Cancel</button>\n    <button class=\"btn btn-important\" (click)=\"onConfirmPasswordReset()\">Reset Password</button>\n  </div>\n\n  <div class=\"sign-in-row switch\">\n    Didn't receive a reset code?&nbsp;\n    <span class=\"switch-mode\" (click)=\"onSwitchPasswordReset()\">Try again</span>\n  </div>\n</div>\n", styles: [".auth-container{display:flex;flex-direction:column;gap:16px}@media screen and (max-width:767px){.auth-container{gap:8px}}.sign-in-row{width:100%;display:flex;justify-content:center;font-size:14px}.sign-in-row.column{flex-direction:column;gap:4px}.sign-in-row.row{flex-direction:row;gap:12px}.sign-in-row>.switch-mode{font-weight:500;color:#6c47ff;cursor:pointer}.sign-in-row.switch{padding-bottom:1rem}.sign-in-label{width:100%;font-size:.8rem}.sign-in-input{width:calc(100% - 12px);padding:8px 6px;font-size:16px;border:1px solid #b0b0b0;border-radius:4px}.readonly-input{color:#b0b0b0;background:#efefef}.messages{display:flex;flex-direction:column;gap:4px}.sign-in-msg{text-align:center}.sign-in-msg.main{font-size:18px;font-weight:600}.sign-in-msg.secondary{font-size:14px;font-weight:400}.social-buttons-container{width:100%;padding:12px 0;display:flex;gap:.8rem;justify-content:center}.social-button{padding:11px;border-radius:8px;border:1px solid #e0e0e0;background:#fff;color:#6c6c6c;box-shadow:none;font-weight:500;cursor:pointer}.social-button-inner{display:flex;gap:.75rem}.social-logo{width:1rem;height:1rem;background-position:center;background-size:contain;background-repeat:no-repeat}.social-logo.amazon{background-image:url(https://static.foodmarketmaker.com/social/amazon.png)}.social-logo.google{background-image:url(https://static.foodmarketmaker.com/social/google.png)}.social-logo.facebook{background-image:url(https://static.foodmarketmaker.com/social/facebook.png)}.method-divider{width:100%;padding:8px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;color:#6c6c6c;font-size:.8rem}.divider{width:45%;height:1px;border-top:1px solid #e0e0e0}.buttons-bottom{width:100%;padding:12px 0;display:flex;gap:16px;justify-content:center}.buttons-bottom>.btn-important{background:#f58220}.buttons-bottom>.btn{padding:.5rem 1rem}.buttons-bottom>button:focus{outline:none}.center-in-dialog{width:100%;display:flex;flex-direction:row;justify-content:center}.confirmation-code .ngx-otp-input-box{width:35px;height:38px;font-size:1.35rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { passwordInput: [{
+                type: ViewChild,
+                args: ['passwordInput', { static: false }]
+            }], confirmResetOtp: [{
+                type: ViewChild,
+                args: ['confirmResetOtp']
+            }] } });
+
+class AuthModalComponent {
+    authState = inject(AuthStateService);
+    authDialog;
+    faTimes = faTimes;
+    AuthModes = AuthModes;
+    constructor() {
+        effect(() => {
+            const displaying = this.authState.displayingSignal();
+            const dialog = this.authDialog?.nativeElement;
+            if (!dialog)
+                return;
+            if (displaying) {
+                dialog.showModal();
+            }
+            else {
+                dialog.close();
+            }
+        });
+        effect(() => {
+            if (this.authState.willCloseSignal()) {
+                this.authDialog?.nativeElement?.close();
+                this.authState.didClose();
+            }
+        });
+    }
+    onDialogClose() {
+        this.authState.didClose();
+    }
+    onBackdropClick(event) {
+        const target = event.target;
+        if (target.tagName === 'DIALOG') {
+            this.authState.close();
+        }
+    }
+    dismissError() {
+        this.authState.resetError();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AuthModalComponent, isStandalone: true, selector: "mma-auth-modal", viewQueries: [{ propertyName: "authDialog", first: true, predicate: ["authDialog"], descendants: true }], ngImport: i0, template: "<dialog class=\"auth-dialog\" #authDialog (close)=\"onDialogClose()\" (click)=\"onBackdropClick($event)\">\n  @if (authState.displayingSignal()) {\n    <div class=\"auth-dialog-inner\">\n\n      <div class=\"auth-brand\">\n        <img src=\"https://static.foodmarketmaker.com/brand-logo.png\" alt=\"MarketMaker\" class=\"brand-logo\" />\n      </div>\n\n      @if (authState.errorSignal()) {\n        <div class=\"auth-error-banner\" (click)=\"dismissError()\">\n          {{ authState.errorSignal() }}\n          <fa-icon [icon]=\"faTimes\" class=\"dismiss-icon\"></fa-icon>\n        </div>\n      }\n\n      @switch (authState.modeSignal()) {\n        @case (AuthModes.SIGN_IN) { <mma-auth-signin /> }\n        @case (AuthModes.SIGN_UP) { <mma-auth-signup /> }\n        @case (AuthModes.FORGOT_PASSWORD) { <mma-auth-forgot /> }\n        @case (AuthModes.CONFIRM_ACCOUNT) { <mma-auth-confirm-signup /> }\n        @case (AuthModes.CONFIRM_PASSWORD_RESET) { <mma-auth-confirm-reset /> }\n      }\n\n    </div>\n  }\n</dialog>\n", styles: [".auth-dialog{border:none;border-radius:12px;padding:0;max-width:440px;width:100%;box-shadow:0 8px 40px #00000052;background:#fff;overflow:visible}.auth-dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.auth-dialog-inner{display:flex;flex-direction:column;padding:28px 32px 24px;gap:0;position:relative}.auth-brand{display:flex;justify-content:center;margin-bottom:16px}.brand-logo{height:40px;width:auto}.auth-error-banner{background:#fdecea;color:#b71c1c;border:1px solid #f5c6cb;border-radius:6px;padding:10px 14px;font-size:.875rem;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;cursor:pointer}.dismiss-icon{font-size:.9rem;flex-shrink:0;opacity:.7}@media(max-width:480px){.auth-dialog{max-width:100vw;width:100vw;margin:0;position:fixed;bottom:0;top:auto;border-radius:16px 16px 0 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: AuthSignInComponent, selector: "mma-auth-signin" }, { kind: "component", type: AuthSignUpComponent, selector: "mma-auth-signup" }, { kind: "component", type: AuthForgotComponent, selector: "mma-auth-forgot" }, { kind: "component", type: AuthConfirmSignupComponent, selector: "mma-auth-confirm-signup" }, { kind: "component", type: AuthConfirmResetComponent, selector: "mma-auth-confirm-reset" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mma-auth-modal', standalone: true, imports: [
+                        CommonModule,
+                        FontAwesomeModule,
+                        AuthSignInComponent,
+                        AuthSignUpComponent,
+                        AuthForgotComponent,
+                        AuthConfirmSignupComponent,
+                        AuthConfirmResetComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog class=\"auth-dialog\" #authDialog (close)=\"onDialogClose()\" (click)=\"onBackdropClick($event)\">\n  @if (authState.displayingSignal()) {\n    <div class=\"auth-dialog-inner\">\n\n      <div class=\"auth-brand\">\n        <img src=\"https://static.foodmarketmaker.com/brand-logo.png\" alt=\"MarketMaker\" class=\"brand-logo\" />\n      </div>\n\n      @if (authState.errorSignal()) {\n        <div class=\"auth-error-banner\" (click)=\"dismissError()\">\n          {{ authState.errorSignal() }}\n          <fa-icon [icon]=\"faTimes\" class=\"dismiss-icon\"></fa-icon>\n        </div>\n      }\n\n      @switch (authState.modeSignal()) {\n        @case (AuthModes.SIGN_IN) { <mma-auth-signin /> }\n        @case (AuthModes.SIGN_UP) { <mma-auth-signup /> }\n        @case (AuthModes.FORGOT_PASSWORD) { <mma-auth-forgot /> }\n        @case (AuthModes.CONFIRM_ACCOUNT) { <mma-auth-confirm-signup /> }\n        @case (AuthModes.CONFIRM_PASSWORD_RESET) { <mma-auth-confirm-reset /> }\n      }\n\n    </div>\n  }\n</dialog>\n", styles: [".auth-dialog{border:none;border-radius:12px;padding:0;max-width:440px;width:100%;box-shadow:0 8px 40px #00000052;background:#fff;overflow:visible}.auth-dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.auth-dialog-inner{display:flex;flex-direction:column;padding:28px 32px 24px;gap:0;position:relative}.auth-brand{display:flex;justify-content:center;margin-bottom:16px}.brand-logo{height:40px;width:auto}.auth-error-banner{background:#fdecea;color:#b71c1c;border:1px solid #f5c6cb;border-radius:6px;padding:10px 14px;font-size:.875rem;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;cursor:pointer}.dismiss-icon{font-size:.9rem;flex-shrink:0;opacity:.7}@media(max-width:480px){.auth-dialog{max-width:100vw;width:100vw;margin:0;position:fixed;bottom:0;top:auto;border-radius:16px 16px 0 0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { authDialog: [{
+                type: ViewChild,
+                args: ['authDialog']
+            }] } });
+
+/*
+ * Public API Surface of marketmaker-auth
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AMAZON, APPLE, AuthModalComponent, AuthModes, AuthService, AuthStateService, FACEBOOK, GOOGLE };
+//# sourceMappingURL=foodmarketmaker-marketmaker-auth.mjs.map