"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[6845],{60817:(e,o,r)=>{r.r(o),r.d(o,{AuthProfile:()=>v});var t=r(50493),a=(r(76013),r(98994),r(94430)),i=r(56765),n=r(53421),s=r(32818);let d=class extends((0,n.NC)(n.z2)(a.oi)){render(){return a.dy`
      <form>
        <div class="field">
          <input type="password" name="current_pass" placeholder=${n.z2.t("text.current password")} required />
        </div>
        <div class="field">
          <input type="password" name="new_pass" placeholder=${n.z2.t("text.new password")} required />
        </div>
        <div class="field">
          <input type="password" name="confirm_pass" placeholder=${n.z2.t("text.confirm password")} required />
        </div>

        <mwc-button raised label="${n.z2.t("text.change password")}" @click=${this.submit.bind(this)}></mwc-button>
      </form>
    `}async submit(){var e;const o=new FormData(this.form);let r={};for(const[t,a]of o.entries()){if(!a){const o=null===(e=this.form.querySelector(`[name=${t}]`))||void 0===e?void 0:e.placeholder;return this.showToast(n.z2.t("error.value is empty",{value:o||t}))}r[t]=a}if(r.new_pass!==r.confirm_pass)return this.showToast(n.z2.t("error.new-password-and-confirm-password-do-not-match"));s.I8.changePassword(r),this.form.reset()}showToast(e){document.dispatchEvent(new CustomEvent("notify",{detail:{message:e}}))}};d.styles=[a.iv`
      * {
        box-sizing: border-box;
      }

      *:focus {
        outline: none;
      }

      form {
        display: flex;
        flex-direction: column;
      }

      input {
        border: var(--change-password-field-border);
        border-radius: var(--change-password-field-border-radius);
        margin: var(--change-password-field-margin);
        padding: var(--change-password-field-padding);

        font: var(--change-password-field-font);
        width: var(--change-password-field-width);
      }

      input:focus {
        border: 1px solid var(--focus-background-color);
      }

      ::placeholder {
        font-size: 0.8rem;
        text-transform: capitalize;
      }

      mwc-button {
        margin: var(--margin-narrow) auto var(--margin-default) auto;
      }

      button {
        background-color: var(--secondary-color, #394e64);
        margin: 2px 2px 10px 2px;
        height: var(--button-height, 28px);
        color: var(--button-color, #fff);
        font: var(--button-font);
        border-radius: var(--button-radius, 5px);
        border: var(--button-border, 1px solid transparent);
        line-height: 1.5;
      }

      button:hover,
      button:active {
        background-color: var(--button-active-background-color, #22a6a7);
        border: var(--button-active-border);
      }
    `],(0,t.gn)([(0,i.IO)("form"),(0,t.w6)("design:type",HTMLFormElement)],d.prototype,"form",void 0),d=(0,t.gn)([(0,i.Mo)("change-password")],d);var l=r(37077);let c=class extends((0,n.NC)(n.z2)(a.oi)){render(){return a.dy`
      <h1><ox-i18n msgid="label.delete account"></ox-i18n></h1>
      <span><ox-i18n msgid="text.delete account warning message"></ox-i18n></span>
      <form @submit=${e=>this.submit(e)}>
        <div class="field">
          <label for="email"><ox-i18n msgid="label.email"></ox-i18n></label>
          <input id="email" type="email" name="email" autocapitalize="off" required />
          <label for="password"><ox-i18n msgid="label.password"></ox-i18n></label>
          <input id="password" type="password" name="password" required />
        </div>

        <button class="ui button" type="submit"><ox-i18n msgid="label.delete account"></ox-i18n></button>
      </form>
    `}async submit(e){e.preventDefault();const o=e.target;var r={};new FormData(o).forEach(((e,o)=>{r[o]=e}));try{const e=await s.I8.deleteUser(r);(0,l.h4)({level:"info",message:e}),s.I8.signout()}catch(e){o.reset(),(0,l.h4)({level:"error",message:"message"in e?e.message:e})}}};c.styles=[a.iv`
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--popup-content-background-color);
        padding: var(--popup-content-padding);
      }

      * {
        box-sizing: border-box;
      }
      *:focus {
        outline: none;
      }

      label {
        font: bold 14px var(--theme-font);
        color: var(--primary-color);
      }

      input {
        border: var(--change-password-field-border);
        border-radius: var(--change-password-field-border-radius);
        padding: var(--change-password-field-padding);

        font: var(--change-password-field-font);
        width: var(--change-password-field-width);
      }
      input:focus {
        border: 1px solid var(--focus-background-color);
      }

      div.field {
        padding-bottom: 10px;
      }

      ::placeholder {
        font-size: 0.8rem;
        text-transform: capitalize;
      }

      button {
        background-color: var(--status-danger-color, red);
        margin: 2px 2px 10px 2px;
        height: var(--button-height, 28px);
        color: var(--button-color, #fff);
        font: var(--button-font);
        border-radius: var(--button-radius, 5px);
        border: var(--button-border, 1px solid transparent);
        line-height: 1.5;
      }
      button:hover,
      button:active {
        background-color: var(--button-active-background-color, #22a6a7);
        border: var(--button-active-border);
      }
    `],c=(0,t.gn)([(0,i.Mo)("delete-user-popup")],c);r(68784);var p=r(16682),g=r(27805),u=r(36179);let m=class extends a.oi{constructor(){super(...arguments),this.histories=[]}render(){var e;if(!(null===(e=this.histories)||void 0===e?void 0:e.length))return a.dy``;const o={rows:{appendable:!1},pagination:{infinite:!0},columns:[{type:"gutter",gutterName:"sequence"},{type:"object",name:"accessDomain",header:n.z2.t("field.domain"),record:{editable:!1},width:200},{type:"datetime",name:"accessedAt",header:n.z2.t("field.accessed-at"),record:{editable:!1},width:200},{type:"string",name:"accessorIp",header:n.z2.t("field.ip_address"),record:{editable:!1},width:200}]};return a.dy`
      <ox-grist
        .mode=${(0,u.s2)()?"LIST":"GRID"}
        .config=${o}
        .data="${{records:this.histories}}"
      ></ox-grist>
    `}firstUpdated(){this.fetchLoginHistories()}async fetchLoginHistories(){var e;try{const o=await g.Lp.query({query:p.ZP`
          query myLoginHistories($limit: Float!) {
            myLoginHistories(limit: $limit) {
              accessDomain {
                name
              }
              accessorIp
              accessedAt
            }
          }
        `,variables:{limit:this.limit||10}});if(null===(e=o.errors)||void 0===e?void 0:e.length)return;this.histories=o.data.myLoginHistories.map((e=>Object.assign(Object.assign({},e),{accessedAt:e.accessedAt-60*(new Date).getTimezoneOffset()*1e3})))}catch(e){this.showToast("message"in e?e.message:e)}}showToast(e){document.dispatchEvent(new CustomEvent("notify",{detail:{message:e}}))}};m.styles=a.iv`
    :host {
      display: flex;
      flex-direction: column;
      background-color: var(--main-section-background-color);
      padding: var(--padding-wide);
      overflow: auto;
    }
    ox-grist {
      flex: 1;
    }
  `,(0,t.gn)([(0,i.Cb)({type:Array}),(0,t.w6)("design:type",Array)],m.prototype,"histories",void 0),(0,t.gn)([(0,i.Cb)({type:Number}),(0,t.w6)("design:type",Number)],m.prototype,"limit",void 0),m=(0,t.gn)([(0,i.Mo)("my-login-history")],m);let h=class extends((0,n.NC)(n.z2)(a.oi)){firstUpdated(){s.I8.on("profile",(({credential:e})=>{this.setCredential(e)})),this.setCredential(s.I8.credential)}setCredential(e){e?(this.name=e.name,this.email=e.email):(this.name="",this.email="")}render(){return a.dy`
      <div class="wrap">
        <div class="user">${this.email||""}</div>

        <label for="name"><ox-i18n slot="title" msgid="label.name"></ox-i18n></label>
        <input id="name" @change=${e=>this.onNameChanged(e.target.value)} .value=${this.name||""} />

        <hr />

        <label for="locale"><ox-i18n slot="title" msgid="label.language"></ox-i18n></label>
        <ox-i18n-selector
          id="locale"
          @change=${e=>this.onLocaleChanged(e.detail)}
          value=${n.z2.language||"en-US"}
        ></ox-i18n-selector>

        <hr />

        <label for="change-password">
          <ox-i18n msgid="label.password"></ox-i18n>
        </label>

        <change-password id="change-password"></change-password>

        <footer>
          <p>
            ${n.z2.t("text.click login history")}
            <a href="javascript:void(0);" @click=${this.openLoginHistory.bind(this)}
              >${n.z2.t("label.login_history")}</a
            >
          </p>
        </footer>
      </div>
    `}async onNameChanged(e){if(e){var o=this.name;try{const o=await s.I8.updateProfile({name:e});(0,l.h4)({level:"info",message:o})}catch(e){this.nameEl.value=o||"",(0,l.h4)({level:"error",message:"message"in e?e.message:e})}}}async onLocaleChanged(e){if(e){var o=n.z2.language;try{const o=await s.I8.updateProfile({locale:e});n.z2.changeLanguage(e),(0,l.h4)({level:"info",message:o})}catch(e){this.localeEl.value=o,(0,l.h4)({level:"error",message:"message"in e?e.message:e})}}}openLoginHistory(){(0,l.Mw)(a.dy` <my-login-history></my-login-history> `,{title:n.z2.t("label.login_history")})}deleteUser(){(0,l.Mw)(a.dy` <delete-user-popup></delete-user-popup> `,{title:n.z2.t("label.delete account")})}};h.styles=[a.iv`
      :host {
        display: block;
        background-color: var(--main-section-background-color);
        padding: 15px 0;
      }
      .wrap {
        max-width: var(--profile-wrap-max-width, 400px);
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      * {
        box-sizing: border-box;
      }

      *:focus {
        outline: none;
      }

      input {
        margin: var(--change-password-field-margin);
        border: var(--input-field-border);
        padding: var(--input-padding);
        border-radius: var(--border-radius);
        font: var(--input-font);
        width: var(--change-password-field-width);
      }
      input:focus {
        border: 1px solid var(--focus-background-color);
      }

      .user {
        background: url(/assets/images/icon-profile.png) center top no-repeat;
        margin: var(--profile-icon-margin);
        padding: 180px 20px 20px 20px;
        color: var(--secondary-color);
        font: var(--header-bar-title);
        text-align: center;
      }

      hr {
        width: 100%;
        border: dotted 1px rgba(0, 0, 0, 0.1);
      }

      .wrap * {
        grid-column: span 2;
      }

      label {
        font: bold 14px var(--theme-font);
        color: var(--primary-color);
        text-transform: capitalize;
        grid-column: 1;
      }

      .wrap *.inline {
        grid-column: unset;
      }

      ox-i18n-selector {
        --i18n-selector-field-width: var(--auth-input-field-width);
        --i18n-selector-field-margin: var(--change-password-field-margin);
        --i18n-selector-field-padding: var(--padding-default);
        --i18n-selector-field-border-radius: var(--border-radius);
        margin: var(--change-password-field-margin);
      }

      [danger] {
        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
      }

      footer {
        padding: 20px;
        text-align: center;
      }

      footer p {
        font-size: 14px;
        margin-bottom: 5px;
      }

      footer a {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: bold;
      }
    `],(0,t.gn)([(0,i.Cb)({type:String}),(0,t.w6)("design:type",String)],h.prototype,"email",void 0),(0,t.gn)([(0,i.Cb)({type:String}),(0,t.w6)("design:type",String)],h.prototype,"name",void 0),(0,t.gn)([(0,i.IO)("#name"),(0,t.w6)("design:type",HTMLInputElement)],h.prototype,"nameEl",void 0),(0,t.gn)([(0,i.IO)("#locale"),(0,t.w6)("design:type",HTMLInputElement)],h.prototype,"localeEl",void 0),h=(0,t.gn)([(0,i.Mo)("profile-component")],h);var f=r(77675),b=r(15633);let v=class extends((0,n.NC)(n.z2)(f.B4)){get context(){return{title:n.z2.t("text.auth profile")}}render(){return a.dy` <profile-component></profile-component> `}};v.styles=[b.Ix,a.iv`
      :host {
        display: block;
        background-color: var(--main-section-background-color);
        overflow-y: auto;
      }
    `],v=(0,t.gn)([(0,i.Mo)("auth-profile")],v)}}]);