1"use strict";(globalThis.webpackChunkdls_client||=[]).push([[3816],{94602(e,t,n){n.d(t,{A:()=>i});var a=n(65043);const o=n(57751).Ay.div` 2 .otp-input:focus{ 3 outline: 1px solid #286c4d; 4 } 5`;var l=n(70579);const i=e=>{let{length:t=4,value:n="",onChange:i}=e;const[r,s]=(0,a.useState)(new Array(t).fill("")),c=(0,a.useRef)([]);(0,a.useEffect)(()=>{!n&&c.current[0]&&c.current[0].focus();const e=n.split("").slice(0,t);s([...e,...new Array(t-e.length).fill("")])},[n]);const d=e=>{e.preventDefault();const n=e.clipboardData.getData("text").slice(0,t),a=n.split("").map((e,t)=>/^\d$/.test(e)?e:r[t]);var o;(s(a),a.forEach((e,t)=>{e&&c.current[t]&&(c.current[t].value=e)}),n.length<t)&&(null===(o=c.current[n.length])||void 0===o||o.focus());null===i||void 0===i||i(a.join(""))};return(0,a.useEffect)(()=>{c.current[0]&&c.current[0].focus()},[]),(0,l.jsx)(o,{children:(0,l.jsx)("div",{style:{display:"flex",gap:"8px",direction:"ltr",justifyContent:"center"},children:r.map((e,n)=>(0,l.jsx)("input",{type:"text",maxLength:"1",value:e,onChange:e=>((e,n)=>{if(!/^\d?$/.test(e))return;const a=[...r];a[n]=e,s(a),null===i||void 0===i||i(a.join("")),e&&n<t-1&&c.current[n+1].focus()})(e.target.value,n),onKeyDown:e=>((e,t)=>{const{key:n}=e;"Backspace"===n&&!r[t]&&t>0&&c.current[t-1].focus()})(e,n),onPaste:d,ref:e=>c.current[n]=e,className:"otp-input",style:{width:"50px",height:"50px",textAlign:"center",fontSize:"20px",border:"1px solid #286c4d",borderRadius:"5px"}},n))})})}},93816(e,t,n){n.r(t),n.d(t,{default:()=>w});var a=n(77627),o=n(72018),l=n(72052),i=n(38564),r=n(4504),s=n(65043),c=n(49092),d=n(73103),u=n(90722),p=n(52082),m=n(64091),f=n(98595),g=n(75357),b=n(82113),x=n(57751),h=n(97980);const v=x.Ay.div` 6 .ant-input-affix-wrapper { 7 border: none; 8 border-bottom: 1px solid #afacac; 9 border-radius: 0; 10 background: transparent !important; 11 box-shadow: none !important; 12 input { 13 background: transparent; 14 } 15 } 16 .ant-input-prefix { 17 width: 34px; 18 svg { 19 padding: 0 5px; 20 margin: 0; 21 } 22 } 23 .aside-login { 24 background: transparent url(${h}) 0% 0% no-repeat padding-box; 25 background-size: cover; 26 background-position: center; 27 height: 100%; 28 min-height: 100vh; 29 padding: 0; 30 & > .wrapper-aside { 31 padding: 0; 32 margin: 0; 33 width: 100%; 34 display: flex; 35 justify-content: center; 36 align-items: center; 37 & > h3 { 38 color: white; 39 text-align: center; 40 text-warp: warp; 41 } 42 } 43 } 44 .aside-login-mobile { 45 background: transparent url(${h}) 0% 0% no-repeat padding-box; 46 background-size: cover; 47 background-position: center; 48 margin-top: -27px; 49 height: 40vh; 50 position: relative; 51 padding: 0; 52 & > .wrapper-aside { 53 padding:20px; 54 margin: 0; 55 width: 100%; 56 height: 100%; 57 display: flex; 58 justify-content: center; 59 align-items: center; 60 & > h3 { 61 color: white; 62 text-align: center; 63 text-warp: warp; 64 } 65 } 66 } 67 .submit-btn { 68 float: left; 69 width: 30%; 70 min-width: 100px; 71 background: #036822; 72 color: white; 73 border-radius: 5px; 74 height: 40px; 75 border: none; 76 box-shadow: none; 77 } 78 .register-btn { 79 float: left; 80 width: 30%; 81 min-width: 100px; 82 background: #ffffff; 83 color: #036822; 84 border-radius: 5px; 85 height: 40px; 86 border: solid 1px #036822; 87 box-shadow: none; 88 } 89 .register-section { 90 padding: 30px 0; 91 & > p { 92 // font-size:18px; 93 letter-spacing: 0px; 94 color: #000000; 95 } 96 & > a { 97 color: #036822; 98 // font-size:22px; 99 } 100 } 101 102 form { 103 margin-top: 1.5rem; 104 } 105 .field { 106 margin-bottom: 1.5rem; 107 .password-input-ar { 108 input { 109 padding: 0.75rem; 110 } 111 i { 112 right: unset; 113 left: 0; 114 } 115 } 116 } 117 .p-float-label > label { 118 right: 3rem; 119 color: #6c757d; 120 transition-duration: 0.2s; 121 } 122 123 .login-form-container{ 124 border: solid 1px var(--main-color); 125 border-radius: 10px; 126 padding: 30px; 127 128 h6{ 129 font-size: 14px; 130 margin: 0; 131 margin-top: 1.5rem; 132 } 133 134 .login-tabs{ 135 justify-content: center; 136 gap: 10px; 137 margin-bottom: 20px; 138 button{ 139 background-color: transparent; 140 width: 50%; 141 padding: 10px; 142 color: var(--main-color); 143 border: solid 2px var(--main-color); 144 border-top-left-radius: 10px; 145 border-top-right-radius: 10px; 146 border-bottom: none; 147 transition-duration: 0.3s; 148 font-weight: bold; 149 &:hover, &.selected-tab{ 150 color: #ffffff; 151 background-color: var(--main-color); 152 } 153 } 154 border-bottom: solid 2px var(--main-color); 155 } 156 } 157 // .p-input-icon-left > i, 158 // .p-input-icon-right > i, 159 // .p-input-icon-left > svg, 160 // .p-input-icon-right > svg, 161 // .p-input-icon-left > .p-input-prefix, 162 // .p-input-icon-right > .p-input-suffix { 163 // position: absolute; 164 // top: 50%; 165 // margin-top: -0.5rem;
166 // left: 3rem; 167 // } 168 .p-input-icon-right > i:last-of-type, 169 .p-input-icon-right > svg:last-of-type, 170 .p-input-icon-right > .p-input-suffix { 171 // left: 0.75rem !important; 172 color: #6c757d !important; 173 } 174 .login-lang-switch{ 175 position: absolute; 176 top: 20px; 177 &.right{ 178 right: 20px; 179 } 180 &.left{ 181 left: 20px; 182 } 183 } 184`;var y=n(35475),N=n(94602),j=n(70579);const w=()=>{const e=(0,s.useRef)(null),[t,n]=(0,s.useState)(180),[x,h]=(0,s.useState)(""),[w,k]=(0,s.useState)([{id:1,key:"login"},{id:2,key:"otp"}]),[I,S]=(0,s.useState)("login"),F=(0,d.wA)(),{t:E,i18n:O}=(0,c.B)(),P=(e,t)=>{e.nationalId?/^[0-9]*$/i.test(e.nationalId)||(t.nationalId=E("errors.nationalIdOnlyNumbers")):t.nationalId=E("errors.enterNationalId"),e.password||(t.password=E("errors.enterPassword")),"dls"!==x||e.token||(t.token=E("errors.captchRequired"))},C=()=>{n(180),e.current&&clearInterval(e.current)},A=(0,a.Wx)({initialValues:{nationalId:"",password:"",token:""},validate:e=>{let t={};return P(e,t),t},onSubmit:e=>{"dls"===x&&(e.Type="DLS"),b.T4(e).then(e=>{S("otp")})}}),T=(0,a.Wx)({initialValues:{otp:"",nationalId:"",password:"",token:""},validate:e=>{let t={};return e.otp||(t.password=E("errors.required")),P(e,t),t},onSubmit:e=>{"dls"===x&&(e.Type="DLS"),b.Ql(e).then(t=>{localStorage.setItem("accessToken",t.data.access_token),localStorage.setItem("refreshToken",t.data.refresh_token),localStorage.setItem("token",t.data.token),F((0,g.FS)({nationalId:e.nationalId,accessToken:t.data.access_token,refreshToken:t.data.refresh_token,englishShortName:`${t.data.userFullNameEn.enNAME1} ${t.data.userFullNameEn.enNAME4}`,arabicShortName:`${t.data.userFullNameAr.arNAME1} ${t.data.userFullNameAr.arNAME4}`,englishName:Object.values(t.data.userFullNameEn).join(" "),arabicName:Object.values(t.data.userFullNameAr).join(" "),birthDate:t.data.birthDate,nationality:t.data.nationality,userType:t.data.userType})),C(),S("login"),A.resetForm(),T.resetForm()})}});(0,s.useEffect)(()=>{h("dls")},[]);const $=()=>{C(),S("login"),A.resetForm(),T.resetForm()},D=e=>!(!A.touched[e]||!A.errors[e]),B=e=>D(e)&&(0,j.jsx)("small",{className:"p-error text-xs fm-kufi-regular",children:A.errors[e]}),_=()=>{e.current=setInterval(()=>{n(t=>t<=1?(clearInterval(e.current),0):t-1)},1e3)};(0,s.useEffect)(()=>{if("otp"===I)return _(),()=>{C()}},[I]);return(0,j.jsxs)(v,{className:"row align-items-center d-flex",style:{minHeight:"100vh"},children:[(0,j.jsx)("div",{className:"col-md-6 d-md-flex d-none col-xs-0 aside-login",children:(0,j.jsx)("div",{className:"wrapper-aside",children:(0,j.jsx)("h3",{children:E("login.welcome")})})}),(0,j.jsx)("div",{className:"d-flex align-items-start d-md-none aside-login-mobile",children:(0,j.jsx)("div",{className:"wrapper-aside",children:(0,j.jsx)("h3",{children:E("login.welcome")})})}),(0,j.jsxs)("div",{className:"col-md-6 col-xs-12 bg-white login-form d-flex",children:[(0,f.nG)()&&(0,j.jsx)("div",{className:"login-lang-switch "+("ar"===O.language?"left":"right"),children:(0,j.jsx)(p.A,{color:"black",login:!0})}),(0,j.jsxs)("div",{className:"col-9 m-auto login-form-container",children:["login"===I&&(0,j.jsxs)("div",{className:"d-flex login-tabs",children:[(0,j.jsx)("button",{onClick:()=>{h("dls"),$()},className:""+("dls"===x?"selected-tab":""),children:E("\u0627\u0644\u062f\u062e\u0648\u0644 \u0628\u0648\u0627\u0633\u0637\u0629 \u062f\u0627\u0626\u0631\u0629 \u0627\u0644\u0623\u0631\u0627\u0636\u064a")}),(0,j.jsx)("button",{onClick:()=>{b.fx().then(e=>{console.log("response.data",e.data),window.location.href=e.data})},className:""+("sanad"===x?"selected-tab":""),children:E("\u0627\u0644\u062f\u062e\u0648\u0644 \u0628\u0648\u0627\u0633\u0637\u0629 \u0633\u0646\u062f")})]}),(0,j.jsx)("h6",{className:"fm-kufi-bold",children:E("login.start")}),"login"===I?(0,j.jsxs)("form",{onSubmit:A.handleSubmit,className:"p-fluid",children:[(0,j.jsxs)("div",{className:"field",children:[(0,j.jsxs)("label",{htmlFor:"nationalId",className:(0,r.xW)({"fm-kufi-bold my-2 text-sm":!0,"p-error":D("nationalId")}),children:[E("login.nationalId")," ",(0,j.jsx)("span",{className:"text-danger",children:"*"})]}),(0,j.jsxs)("span",{className:"p-float-label "+("ar"===O.language?"p-input-icon-left":"p-input-icon-right"),children:[(0,j.jsx)("i",{className:"pi pi-credit-card"}),(0,j.jsx)(l.S,{name:"nationalId",maxLength:10,keyfilter:"num",placeholder:E("login.nationalId"),value:A.values.nationalId,onChange:A.handleChange,autoFocus:!0,className:(0,r.xW)({"text-sm":!0,"p-invalid":D("nationalId")})})]}),B("nationalId")]}),(0,j.jsxs)("div",{className:"field"+("dls"===x?" my-2":""),children:[(0,j.jsxs)("label",{htmlFor:"password",className:(0,r.xW)({"fm-kufi-bold my-2 text-sm":!0,"p-error":D("password")}),children:[E("login.password")," ",(0,j.jsx)("span",{className:"text-danger",children:"*"})]}),(0,j.jsx)("span",{className:"p-float-label",children:(0,j.jsx)(i._,{autoComplete:"on",name:"password",value:A.values.password,feedback:!1,placeholder:E("login.password"),onChange:A.handleChange,toggleMask:!0,autoFocus:!0,panelClassName:"p-input-ico",inputClassName:"text-sm",className:(0,r.xW)({"password-input-ar":"ar"===O.language,"p-invalid":D("password"),"p-input-icon-left":"ar"===O.language})})}),B("password")]}),"dls"===x&&(0,j.jsxs)(s.Fragment,{children:[(0,j.jsx)("div",{className:"field",children:(0,j.jsx)(y.N_,{className:"text-success text-decoration-none text-left p-button-text p-button-success fm-kufi-regular w-100 text-xs p-0",to:"/forget-password",children:E("login.forgetPassword")})}),(0,j.jsxs)("div",{children:[(0,j.jsx)(u.A,{hl:"ar",sitekey:m.A.googleCaptchaToken,onChange:e=>{A.setFieldValue("token",e)}}),B("token")]})]}),(0,j.jsxs)("div",{className:"align-items-center justify-content-center",children:[(0,j.jsx)("div",{className:"block",children:(0,j.jsx)(o.$,{type:"submit",label:E("login.submit"),className:"submit-btn p-button-success fm-kufi-regular d-md-flex justify-content-center align-items-center w-100"})}),"dls"===x?(0,j.jsx)("div",{className:"block my-2",children:(0,j.jsx)(y.N_,{to:"/signup",children:(0,j.jsx)(o.$,{type:"button",label:E("login.newUser"),className:"register-btn p-button-success fm-kufi-regular d-md-flex justify-content-center align-items-center w-100 mt-3"})})}):(0,j.jsx)("div",{className:"block my-2",children:(0,j.jsx)(o.$,{type:"button",onClick:()=>window.open(m.A.sanadStationsUrl),label:E("login.sanadStations"),className:"p-button-text p-button-success fm-kufi-regular w-100 text-xs p-0"})})]})]}):(0,j.jsxs)("form",{onSubmit:T.handleSubmit,className:"p-fluid",children:[(0,j.jsxs)("label",{htmlFor:"otp",className:(0,r.xW)({"fm-kufi-bold my-2 text-sm":!0}),children:[E("common.enterOTP")," ",(0,j.jsx)("span",{className:"text-danger",children:"*"})]}),(0,j.jsx)(N.A,{length:4,onChange:e=>{T.setFieldValue("otp",e),T.setFieldValue("nationalId",A.values.nationalId),T.setFieldValue("password",A.values.password),T.setFieldValue("token",A.values.token)},value:T.values.otp}),(0,j.jsx)("div",{className:"text-right my-3 text-sm",children:`${E("login.timeLeftForOtp")} ${V=t,`${Math.floor(V/60).toString().padStart(2,"0")}:${(V%60).toString().padStart(2,"0")}`}`}),(0,j.jsx)("div",{className:"field",children:(0,j.jsx)("button",{className:"text-success text-decoration-none text-left p-button-text p-button-success fm-kufi-regular w-100 text-xs p-0",type:"button",style:{background:"none",border:"none",textAlign:"right"},onClick:()=>{T.setFieldValue("otp",""),b.T4(A.values).then(e=>{C()}).finally(()=>{_()})},children:E("login.resendOtp")})}),(0,j.jsx)("div",{className:"align-items-center justify-content-center mt-4",children:(0,j.jsxs)("div",{className:"block",children:[(0,j.jsx)(o.$,{type:"submit",label:E("login.submit"),className:"submit-btn p-button-success fm-kufi-regular d-md-flex justify-content-center align-items-center w-100"}
184),(0,j.jsx)(o.$,{type:"button",label:E("common.back"),className:"register-btn p-button-success fm-kufi-regular d-md-flex justify-content-center align-items-center w-100 mt-3",onClick:()=>{$()}})]})})]})]})]})]});var V}},72018(e,t,n){n.d(t,{$:()=>u});var a=n(65043),o=n(94210),l=n(1356),i=n(4504);function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r.apply(this,arguments)}function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function c(e){var t=function(e,t){if("object"!==s(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!==s(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===s(t)?t:String(t)}function d(e,t,n){return(t=c(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var u=a.memo(a.forwardRef(function(e,t){var n=a.useRef(t);if(a.useEffect(function(){i.BF.combinedRefs(n,t)},[n,t]),!1===e.visible)return null;var s=e.disabled||e.loading,c=!s||e.tooltipOptions&&e.tooltipOptions.showOnDisabled,p=i.BF.isNotEmpty(e.tooltip)&&c,m=i.BF.findDiffKeys(e,u.defaultProps),f=(0,i.xW)("p-button p-component",e.className,d({"p-button-icon-only":(e.icon||e.loading&&e.loadingIcon)&&!e.label&&!e.children,"p-button-vertical":("top"===e.iconPos||"bottom"===e.iconPos)&&e.label,"p-disabled":s,"p-button-loading":e.loading,"p-button-loading-label-only":e.loading&&!e.icon&&e.label},"p-button-loading-".concat(e.iconPos),e.loading&&e.loadingIcon&&e.label)),g=function(){var t=e.loading?e.loadingIcon:e.icon,n=(0,i.xW)("p-button-icon p-c",d({"p-button-loading-icon":e.loading},"p-button-icon-".concat(e.iconPos),e.label));return i.Hj.getJSXIcon(t,{className:n},{props:e})}(),b=e.label?a.createElement("span",{className:"p-button-label p-c"},e.label):!e.children&&!e.label&&a.createElement("span",{className:"p-button-label p-c",dangerouslySetInnerHTML:{__html:" "}}),x=function(){if(e.badge){var t=(0,i.xW)("p-badge",e.badgeClassName);return a.createElement("span",{className:t},e.badge)}return null}(),h=e.label?e.label+(e.badge?" "+e.badge:""):e["aria-label"];return a.createElement(a.Fragment,null,a.createElement("button",r({ref:n,"aria-label":h},m,{className:f,disabled:s}),g,b,e.children,x,a.createElement(o.n,null)),p&&a.createElement(l.m,r({target:n,content:e.tooltip},e.tooltipOptions)))}));u.displayName="Button",u.defaultProps={__TYPE:"Button",label:null,icon:null,iconPos:"left",badge:null,badgeClassName:null,tooltip:null,tooltipOptions:null,disabled:!1,loading:!1,loadingIcon:"pi pi-spinner pi-spin",visible:!0}},72052(e,t,n){n.d(t,{S:()=>s});var a=n(65043),o=n(2224),l=n(1356),i=n(4504);function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r.apply(this,arguments)}var s=a.memo(a.forwardRef(function(e,t){var n=a.useRef(t),c=n.current&&n.current.value,d=a.useMemo(function(){return i.BF.isNotEmpty(e.value)||i.BF.isNotEmpty(e.defaultValue)||i.BF.isNotEmpty(c)},[e.value,e.defaultValue,c]);a.useEffect(function(){i.BF.combinedRefs(n,t)},[n,t]);var u=i.BF.isNotEmpty(e.tooltip),p=i.BF.findDiffKeys(e,s.defaultProps),m=(0,i.xW)("p-inputtext p-component",{"p-disabled":e.disabled,"p-filled":d},e.className);return a.createElement(a.Fragment,null,a.createElement("input",r({ref:n},p,{className:m,onInput:function(t){var n=!0;if(e.keyfilter&&e.validateOnly&&(n=o.Q.validate(t,e.keyfilter)),e.onInput&&e.onInput(t,n),!e.onChange){var a=t.target;i.BF.isNotEmpty(a.value)?i.DV.addClass(a,"p-filled"):i.DV.removeClass(a,"p-filled")}},onKeyDown:function(t){e.onKeyDown&&e.onKeyDown(t),e.keyfilter&&o.Q.onKeyPress(t,e.keyfilter,e.validateOnly)},onPaste:function(t){e.onPaste&&e.onPaste(t),e.keyfilter&&o.Q.onPaste(t,e.keyfilter,e.validateOnly)}})),u&&a.createElement(l.m,r({target:n,content:e.tooltip},e.tooltipOptions)))}));s.displayName="InputText",s.defaultProps={__TYPE:"InputText",keyfilter:null,validateOnly:!1,tooltip:null,tooltipOptions:null,onInput:null,onKeyDown:null,onPaste:null}},97980(e,t,n){e.exports=n.p+"static/media/login-aside-img-2.b3e16eef7366f7ed48a8.jpg"}}]); 185//# sourceMappingURL=3816.8eb617d6.chunk.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.