https://smc-b.de/assets/register-BT68sgYt.js

1import{D as v,u,p as h,R as c,k as $,dZ as p,b as o,E as b,A as g,aA as m,aF as f,r as _}from"./index-BCISuyjc.js";import{m as C}from"./medisign-C96BZriM.js";import{I as n}from"./input-rules-Vw4yiq__.js";import{a as V}from"./keycloak-Duqe_VPA.js";import"./search-params-Ch7yLucA.js";class S extends v{connectedCallback(){super.connectedCallback(),setTimeout(()=>{if(this.state.user){const r=u(h);c.go(r||"/")}},10),$(()=>{setTimeout(()=>{p({...this.state.isFinalCheckValid,registerForm:!1})},10)})}extractState(r){return{regDynamicValues:r.register.regDynamicValues,isFinalCheckValid:r.landingMain.isFinalCheckValid,registerForm:r.landingMain.isFinalCheckValid?.registerForm,loading:r.loadingState.loading,loadingQueue:r.loadingState.loadingQueue,user:r.register.user}}view(){if(this.state.user)return o`Sie sind schon eingeloggt`;const r=this.state.regDynamicValues||{},e=(u(h)||"medisign").includes(b),t=this.state.registerForm,i=this.getFormConditions(r,e),l=[i.username,i.password,i.passwordConfirm,i.email,i.firstname,i.lastname,i.mobile];return o`
2            <dgn-header data-no-login data-no-register></dgn-header>
3
4            <div class="register">
5                <form id="register" class="register__form" @submit=${d=>this.onSubmit(d,l)}>
6                    <img class="register__image" src=${C} alt="" />
7
8                    <div class="register__content">
9                        ${this.renderAccountSection(r,t,i)}
10                        ${this.renderPersonalSection(r,t,i,e)}
11                    </div>
12
13                    ${this.renderErrorMessage(r.errorMessage)}
14                    ${this.renderFormActions(l)}
15                </form>
16            </div>
17
18            ${this.renderLoading()}
19            <dgn-footer></dgn-footer>
20        `}getFormConditions(r,s){const{username:e,password:t,password_confirm:i,email:l,firstname:d,lastname:a,mobile:w}=r;return{username:!!e&&n.username_regex.test(e)&&e?.length>=n.username_minLength,password:n.password_regex.test(t)&&t?.length>=n.password_length,passwordConfirm:t===i,email:!!l&&n.emailRegex.test(l),firstname:!!d,lastname:!!a,mobile:w?.length>0?n.telefon_number_regex.test(w):!0,passwordRequirements:{length:t?.length>=n.password_length,lowerCase:n.lowercase.test(t)&&t?.length>0,upperCase:n.uppercase.test(t),number:n.number_valid.test(t),special:n.special_charachters.test(t)}}}renderUserTip(){if(this.state.regDynamicValues?.errorMessage)return o`
21                <div class="register__user-tip">
22                    <b>Hinweis: „Benutzername“ und „E-Mail“ dürfen nicht mehrfach vorkommen.</b>
23                    <ul>
24                        <li>- Möglicherweise ist Ihr gewünschter Benutzername bereits in Verwendung, versuchen Sie bitte einen anderen.</li>
25                        <li>- Wenn Sie Ihre E-Mail-Adresse bereits bei medisign registriert haben, verwenden Sie bitte die „Passwort vergessen“ Funktion um wieder Zugang zu Ihrem bestehenden Konto zu erhalten. Wenn Sie ein neues / weiteres Konto anlegen möchten, müssen Sie hierfür auch eine neue E-Mail-Adresse verwenden</li>
26                    </ul>
27                </div>
28            `}renderAccountSection(r,s,e){const{username:t,email:i,password:l,password_confirm:d}=r;return o`
29            <div class="register__section">
30                <dgn-input-text
31                    title="Benutzername"
32                    star="true"
33                    name="username"
34                    data-autocomplete="false"
35                    value=${t}
36                    @input=${m(a=>this.onChange(a),100)}
37                    isValid=${e.username}
38                    validErrorText="Ungültiger Benutzername (mind. 3 Zeichen, Ziffern, Buchstaben, _ , -)"
39                    finalCheckValid=${s?e.username:g}
40                ></dgn-input-text>
41
42                <dgn-input-text
43                    title="E-Mail"
44                    star="true"
45                    name="email"
46                    value=${i}
47                    @input=${m(a=>this.onChange(a),100)}
48                    isValid=${e.email}
49                    validErrorText="Ungültige E-Mail Adresse"
50                    finalCheckValid=${s?e.email:g}
51                ></dgn-input-text>
52
53                <dgn-input-password
54                    title="Passwort"
55                    star="true"
56                    name="password"
57                    value=${l}

58                    @input=${m(a=>this.onChange(a),100)}
59                    isValid=${!!e.password}
60                    validErrorText="Passwort ist Ungülig"
61                    finalCheckValid=${s?!!e.password:g}
62                ></dgn-input-password>
63
64                <dgn-input-password
65                    title="Passwort wiederholen"
66                    star="true"
67                    name="password_confirm"
68                    value=${d}
69                    @input=${m(a=>this.onChange(a),100)}
70                    isValid=${e.passwordConfirm}
71                    validErrorText="Passwort stimmt nicht überein"
72                    finalCheckValid=${s?e.passwordConfirm:g}
73                ></dgn-input-password>
74
75                <dgn-password-requirements
76                    length=${JSON.stringify(e.passwordRequirements.length)}
77                    upperCase=${JSON.stringify(e.passwordRequirements.upperCase)}
78                    lowerCase=${JSON.stringify(e.passwordRequirements.lowerCase)}
79                    number=${JSON.stringify(e.passwordRequirements.number)}
80                    special=${JSON.stringify(e.passwordRequirements.special)}
81                ></dgn-password-requirements>
82            </div>
83        `}renderPersonalSection(r,s,e,t){const{firstname:i,lastname:l,mobile:d}=r;return o`
84            <div class="register__section">
85                <dgn-input-text
86                    title="Vorname"
87                    star="true"
88                    name="firstname"
89                    value=${i}
90                    @input=${m(a=>this.onChange(a),100)}
91                    isValid=${e.firstname}
92                    validErrorText="Pflichtfeld"
93                    finalCheckValid=${s?e.firstname:g}
94                ></dgn-input-text>
95
96                <dgn-input-text
97                    title="Nachname"
98                    star="true"
99                    name="lastname"
100                    value=${l}
101                    @input=${m(a=>this.onChange(a),100)}
102                    isValid=${e.lastname}
103                    validErrorText="Pflichtfeld"
104                    finalCheckValid=${s?e.lastname:g}
105                ></dgn-input-text>
106
107                <dgn-input-mobile
108                    title="Telefonnummer (Mobil)"
109                    name="mobile"
110                    value=${d}
111                    @input=${m(a=>this.onChange(a),100)}
112                    data-autocomplete="false"
113                    isValid=${e.mobile}
114                    validErrorText="Keine gültige Telefonnummer"
115                    finalCheckValid=${s?e.mobile:g}
116                ></dgn-input-mobile>
117
118                ${this.renderUserTip()}
119            </div>
120        `}renderErrorMessage(r){if(r)return o`
121                <div class="row__div">
122                    <p class="text--error">${r}</p>
123                </div>
124            `}renderFormActions(r){return o`
125            <button
126                class="btn btn--primary"
127                form="register"
128                @click=${s=>this.onSubmit(s,r)}
129                ?disabled="${!r.every(s=>s)}"
130            >Jetzt Registrieren</button>
131
132            <div class="register__footer">
133                <p>Sie haben bereits ein Konto?
134                    <a class="register__footer-link" href="/medisign/login">Anmelden</a>
135                </p>
136            </div>
137
138            <div class="register__footer">
139                <a
140                    class="register__footer-link"
141                    href="/medisign"
142                    @click=${s=>{s.preventDefault(),c.go(u(h))}}
143                >Zurück zur Startseite</a>
144            </div>
145        `}renderLoading(){if(this.state.loading||this.state.loadingQueue)return o`<dgn-loading></dgn-loading>`}onChange(r){const s=r.target.name,e=r.target.value?.trim();f({...this.state.regDynamicValues,[s]:e,errorMessage:void 0})}async onSubmit(r,s){r.preventDefault(),p({...this.state.isFinalCheckValid,registerForm:!0});//! hid is in register_user function
146const e={...this.state.regDynamicValues};if(s.every(t=>t))try{await V(e),c.go("/medisign/login"),u(_,null),f({username:e?.username,password:e?.password,registrationDone:!0}),p({...this.state.isFinalCheckValid,registerForm:!1})}catch(t){const i=String(t);f({...this.state.regDynamicValues,errorMessage:i,registrationDone:!1})}}}customElements.define("dgn-register",S);