diff --git a/CSS/*.css b/CSS/*.css index ed49e05..5e335a8 100644 --- a/CSS/*.css +++ b/CSS/*.css @@ -12,6 +12,7 @@ body{ min-width: 100vw; min-height: 100vh; font-family: 'Google Sans',sans-serif; + position: relative; } .select-div{ diff --git a/CSS/account.css b/CSS/account.css index 10cecb0..08101e3 100644 --- a/CSS/account.css +++ b/CSS/account.css @@ -1,39 +1,853 @@ body { - height: 100vh; - width: 100vh; + height: 100%; + width: 100%; display: grid; grid-template-rows: 64px 1fr; background-color: var(--bg); position: relative; + overflow-y: auto; + overflow-x: hidden; } -main { - grid-row: 2/3; - height: 100%; - background-color: rebeccapurple; + +.account { + grid-row: 1/2; + min-width: 100%; + height: 64px; + display: grid; + grid-template-columns: 1fr 1fr; + border: none; + position: fixed; + background-color: var(--bg); + z-index: 8; +} + +.account .left { + display: flex; + align-items: center; + justify-content: flex-start; +} +.account .left .container { + min-height: 100%; display: flex; align-items: center; justify-content: center; - -} - -nav { - grid-row: 1/2; - display: flex; -} -nav .left-side { - min-height: 100%; min-width: 5rem; - background-color: yellow; + padding: 0 3rem 0 0.8rem; } -nav .right-side { - min-height: 100%; - width: 100%; - background-color: aqua; +.account .left .container .logo a { + text-decoration: none; + font-size: 1.35rem; + color: var(--font-dark); +} + +/* Nav Right */ + + .account .right { + grid-column: 2/3; + display: flex; + align-items: center; + justify-content: flex-end; + } + .account .right .main-container { + min-height: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 0 15px 0 3rem; + } + + .link { + padding: 9px 13px; + margin-right: 15px; + } + .login { + background-color: var(--blue-medium); + border-radius: 7px; + color: var(--bg); + } + .login:hover { filter: brightness(1.06); } + + .navigation-profile-img { --times: 2.2; } + .first-profile-div{ + width: 2.8rem; + height: 2.8rem; + margin-right: 15px; + } + .first-profile-div:hover{ background-color: var(--hover-light); } + .first-profile-div-active{ background-color: var(--hover-medium); } + .tooltiptext-name { color: var(--hover-dark); } + + /** Profile Options */ + + .profile-extra-options { + right: 0.75rem; + top: 93%; + min-width: 350px; + min-height: 380px; + border-radius: 6px; + background-color: var(--bg); + box-shadow: 1px 1px 2px 0px var(--border-medium), + 1px 1px 1px 0px var(--border-medium) inset; + } + .profile-extra-options .top-div { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 20px; + } + .top-div .img-container { + width: 100%; + padding-bottom: 10px; + } + img.imga { + width: 100%; + height: 100%; + border-radius:50%; + } + .top-div .img-middle { + position: relative; + width: fit-content; + margin: auto; + } + .nav-right-side .outter-container { + padding: 4px; + } + .nav-right-side .outter-container:hover { background-color: var(--hover-light); } + .nav-right-side .outter-container.active { background-color: var(--hover-medium); } + .img { + position: relative; + border-radius: 50%; + width: var(--num); + height: var(--num); + } + .img-settings { + background-repeat: no-repeat; + background-size: cover; + } + .img.xxl { + --num: 7.5rem; + --letter: 3.25rem; + cursor: pointer; + } + .img.big { + --num: 5.5rem; + --letter: 2.75rem; + cursor: pointer; + } + .img.medium { + --num: 3.25rem; + --letter: 2rem; + cursor: pointer; + } + .img.small { + --num: 2.25rem; + --letter: 1rem; + cursor: pointer; + } + .img .letter { + position: absolute; + left: calc(50% - 1.5rem); + right: calc(50% - 1.5rem); + top: calc(50% - 1.5rem); + bottom: calc(50% - 1.5rem); + width: 3rem; + height: 3rem; + display: flex; + align-items: center; + justify-content: center; + } + .img .letter span{ + font-size: var(--letter); + color: var(--bg); + } + .img:hover { filter: brightness(1.1); } + + .camera-container { + position: absolute; + bottom: -3px; + right: 0; + background-color: yellow; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + padding: 5px; + border: 1px solid var(--border-light); + background-color: var(--bg); + cursor: pointer; + } + .camera-container:hover i{ color: var(--google-blue); } + + .top-div .personal-info { + padding: 12px 10px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + + .top-div .full-name, + .top-div .email, + .top-div .manage-button { + width: 100%; + padding: 3px 0; + display: flex; + align-items: center; + justify-content: center; + } + .top-div .full-name { font-size: 1.25rem; } + .top-div .email { + color: var(--font-medium); + font-size: 1rem; + } + + .top-div .manage-button .container { + border-radius: 4rem; + border: 1px solid var(--border-light); + width: 80%; + padding: 8px 5px; + margin-top: 1.25rem; + display: flex; + align-items: center; + justify-content: center; + transition: all ease-in-out .15; + } + .top-div .manage-button .container:hover { + cursor: pointer; + background-color: var(--very-light-grey); + } + .top-div .manage-button .container span { color: var(--font-dark); } + + .sign-out { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 15px; + } + .sign-out .button-container { + border: 1px solid var(--border-light); + border-radius: 3px; + min-height: 1.5rem; + width: 10.75rem; + margin: auto; + padding: 5px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } + .sign-out .button-container:hover { background-color: var(--very-light-grey); } + .sign-out .button-container span { color: var(--font-dark); } + + .middle-div { + margin-bottom: 1rem; + border-top: 1px solid var(--hover-medium); + border-bottom: 1px solid var(--hover-medium); + display: flex; + justify-content: center; + flex-direction: column; + } + .middle-div .container { + padding: 5px 0; + min-height: 2.5rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + } + .middle-div .container:hover { background-color: var(--hover-light); } + .middle-div .google, + .middle-div .facebook, + .middle-div .github { + padding: 0 20px; + width: calc(100% - 20px); + display: grid; + grid-template-columns: 50px 1fr; + } + .middle-div .icon { + font-size: 1.5rem; + display: flex; + align-items: center; + justify-content: center; + } + .google .icon { color: var(--google-blue); } + .facebook .icon { color: #4267B2; } + .github .icon { color: var(--font-very-dark); } + .middle-div span { + text-align: left; + display: flex; + align-items: center; + font-size: 0.9rem; + color: var(--font-medium); + } + .profile-extra-options .footer { + min-height: 1.5rem; + display: block; + } + .profile-extra-options .footer .container { + display: flex; + align-items: center; + justify-content: center; + } + .profile-extra-options .footer .container .inner-container { + min-width: 4rem; + display: flex; + } + .profile-extra-options .footer .container .inner-container span { + font-size: 0.78rem; + color: var(--font-light); + padding: 2px 5px; + cursor: pointer; + } + + +.side-bar { + position: fixed; + top: 0; + left: 0; + width: 260px; +} +.side-bar { + left: 0; + top: 65px; + height: calc(100% - 64px); + width: 17.5rem; + position: fixed; + overflow: auto; + transition: ease-in-out all .3s; + } + .side-bar-container { + display: flex; + flex-direction: column; + width: inherit; + height: inherit; + } + + .side-bar-content { + display: grid; + margin-top: 1rem; + margin-bottom: 1.5rem; + transition: all ease-in-out 0.3s; + } + .side-bar-content .sidebar-category { + display: flex; + align-items: center; + height: 46px; + width: 16.2rem; + cursor: pointer; + flex-grow: 1; + border-top-right-radius: 25px; + border-bottom-right-radius: 25px; + } + .side-bar-content div.icon { + margin: 0 1rem 0 1.5rem; + height: 20px; + width: 20px; + display: flex; + align-items: center; + justify-content: center; + } + .side-bar-content a { + color: var(--font-dark); + font-size: 0.9rem; + } + .side-bar-content div.other .text { margin: 0 0.7rem 0 1.5rem; } + .sidebar-category.country { + display: grid; + font-size: 0.9rem; + color: var(--font-dark); + } + .sidebar-country-container > * { padding: 0 0 0 1.5rem; } + .side-bar footer div a { color: var(--font-medium); } + .side-bar footer .text { padding: 1rem 0.5rem; } + .side-bar .about { margin-left: 1.5rem; } + .sidebar-category:hover div a, + .sidebar-category:hover div i, + .sidebar-category:hover span, + .sidebar-category:hover strong { + color: var(--blue-light); + } + .sidebar-category.active { background-color: var(--side-bar-active) !important; } + .sidebar-category.active div a, + .sidebar-category.active div i { + color: var(--blue-light) !important; + } + + + /* Side bar responsive */ + .side-bar-responsive { + width: 100%; + top: 64px; + position: fixed; + height: 3rem; + display: flex; + background-color: var(--bg); + border-bottom: 1px solid var(--border-dark); + z-index: 7; + } + ul { + list-style: none; + padding: 0; + } + li { + min-width: 6rem; + padding: 0 0.5rem; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: center; + cursor: pointer; + } + li div { + position: relative; + padding-bottom: 0.75rem; + } + + .side-bar-responsive .slide { + height: 100%; + display: flex; + overflow-x: scroll; + overflow-y: hidden; + scroll-snap-type: x proximity; + } + .res-container { + width: 100%; + height: 100%; + display: flex; + padding-bottom: 0.5rem; + + } + + li div div.active { + position: absolute; + bottom: -10px; + width: 80%; + left: 50%; + transform: translateX(-50%); + border: solid 1px var(--blue-dark); + background-color: var(--blue-dark); + border-radius: 18%; + } + li div span { + font-size: 0.9rem; + } + li div span.active { + color: var(--blue-dark); + } + + + /* Main */ + main { + grid-row: 2/3; + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + .main-content { + min-width: 400px; + height: 100%; + } + .main-content .container { + display: flex; + flex-direction: column; + justify-content: center; + min-height: 400px; + padding: 1rem; + } + .main-content .container .header { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-bottom: 1.5rem; + } + .main-content .container .header .img-container { + position: relative; + margin-bottom: 0.75rem; + } + .header .img-container figure { + background-color: rebeccapurple; + position: absolute; + width: 100%; + bottom: 0; + top: 0; + background: linear-gradient(to top, rgba(0, 0, 0, 0.527) 29%, transparent 29%, transparent 100%); + border-radius: 50%; + padding-bottom: 10px; + visibility: hidden; + } + .header .img-container figure div { + display: flex; + align-items: flex-end;; + justify-content: center; + height: 100%; + } + .header .img-container:hover figure { + cursor: pointer; + visibility: visible; + } + .header .img-container:hover figure i{ + color: var(--bg); + } + .header .img:hover { filter: none; } + .header .h1 { + display: flex; + align-items: center; + justify-content: center; + padding: 10px 0; + } + .header .h1 h1 { + font-size: 1.8rem; + font-weight: 300; + color: var(--font-very-dark); + } + .header .text { + display: flex; + align-items: center; + justify-content: center; + } + .header .text p { color: var(--font-medium); } + + .section-main-container { + display: flex; + align-items: center; + justify-content: center; + } + .section-main-container:first-of-type { + margin-bottom: 1rem; + } + .section-container { + border: 1px solid var(--border-medium); + background-color: var(--bg); + border-radius: 0.5rem; + width: 100%; + } + .section-container .content { + display: flex; + min-height: 10rem; + flex-direction: column; + margin: 0.75rem; + } + .section-container h1 { + font-weight: 500; + font-size: 1.6rem; + margin-bottom: 0.75rem; + } + .section-container p { + font-weight: 500; + color: var(--font-dark); + } + .section-container .button { + display: flex; + align-items: center; + justify-content: center; + min-height: 3.25rem; + border-top: 1px solid var(--border-medium); + cursor: pointer; + transition: all ease-in-out .12s; + } + .section-container .button a { + text-decoration: none; + color: var(--google-blue); + } + + .section-container .button:hover { background-color: var(--hover-light); } + .section-main-container .section-container:first-of-type { + margin-right: 1rem; + } + + .external-container { + position: fixed; + top: 0; + min-width: 100%; + height: 100%; + } + + + /* Personal */ + .container.personal .header h1 { font-weight: 500; } + section.personal { + height: 100%; + border: 1px solid var(--border-medium); + border-radius: 12px; + } + section.personal header { + padding: 1rem; + } + section.personal header h1 { + font-weight: 600; + margin-bottom: 0.5rem; + } + section.personal header p { color: var(--font-medium); } + section.personal .info, + article .info { + padding: 20px 15px; + display: grid; + position: relative; + grid-template-columns: 10rem 1fr 2rem; + } + .container.personal article { + padding: 0; + } + article .info { border-radius: 8px; } + .info:hover { + cursor: pointer; + background-color: var(--hover-light); + } + .info .line { + position: absolute; + width: 90%; + top: 0px; + left: 0; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + border: none; + border-top: 1px solid var(--border-medium); + } + .info.psw { + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; + } + .info.photo .title, + .info.photo .text, + .info.psw .title { + display: flex; + align-items: center; + } + .info.psw div span { + height: auto; + } + .info.photo { grid-template-columns: 10rem 1fr 6rem !important; } + .info .text { + color: var(--font-dark); + font-size: 0.9rem; + } + .info .text.psw { + min-height: 3rem; + } + .info .text.psw div { + padding: 5px 0; + + } + .info .title h3 { + font-size: 1rem; + font-weight: 500; + } + .info .image { + display: flex; + justify-content: center; + align-items: center; + } + .info .arrow { + display: flex; + align-items: center; + justify-content: center; + color: var(--font-dark); + } + + + /* Admin */ + .admin-panel { + display: flex; + flex-direction: column; + } + .admin-panel section { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 60px; + padding: 0.5rem; + } + .admin-panel section div { + padding: 20px; + margin: auto; + } + .admin-panel i { + color: green; + } + + + /* Change */ + .input-container { + height: auto; + width: 100%; + position: relative; + } + + .input-container input { + height: 48px; + width: 100%; + border-radius: 6px; + border: 1px solid #dedfe0; + padding: 0.75rem; + font-size: 1.1rem; + outline-width: 0; + font-weight: 400; + color: #090a0acb; + box-sizing: border-box; + } + .input-container .label-container { + position: absolute; + font-size: 1.1rem; + height: 1.1rem; + top: calc(50% - 0.55rem); + bottom: calc(50% - 0.55rem); + left: 0.4rem; + color: var(--font-medium); + transition: all ease-in-out .16s; + background-color: var(--bg); + padding: 0 5px; + cursor: text; + } + + .main-content.change .button-container { + display: flex; + min-width: 100%; + padding: 10px 0; + margin-top: 0.5rem; + } + .main-content.change .button-container .inner-container { + display: flex; + align-items: center; + } + .main-content.change .button-container .inner-container:first-of-type { + flex-grow: 1; + } + .blue-button { + padding: 8px 18px; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--blue-medium); + border-radius: 0.25rem; + color: var(--bg); + transition: all ease-in-out .15; + cursor: pointer; + } + .name-container,.surname-container { margin-bottom: 1rem; } + .main-content.change .button-container a { + color: var(--google-blue); + } + .google-blue { color: var(--google-blue) !important; } + .input-container input.active { border: 1px solid var(--google-blue); } + .input-container .label-container.active { + font-size: 0.75rem; + top: -0.4rem; + } + /* Error handeling */ + .error .red { + color: var(--red-medium); + font-size: 12px; + padding: 5px 0; + } + .error .red i { font-size: 0.9rem; } + .error-red { color: var(--red-medium) !important; } + .error-red-border { border: 1px solid var(--red-medium) !important; } + + .radio-button-container{ + height: 2.5rem; + grid-template-columns: 2rem 1fr; + align-items: center; + justify-content: center; + } + .radio-button-container p{ + width: fit-content; + margin-left: 8px; + color: var(--font-very-dark); + } + + div.country-container { + position: relative; + border-radius: 4px; + } + div.countries { + min-height: 2rem; + max-height: 400px; + overflow: auto; + } + div.countries div { + padding: 0.75rem 10px; + cursor: pointer; + } + div.countries div p { color: var(--font-dark); } + div.countries div:hover { background-color: var(--hover-light); } + div.countries div:active { background-color: var(--hover-medium); } + .country-container .active { background-color: var(--hover-medium); } + + .psw-container, + .psw-repeat-container, + .psw-old-container { + position: relative; + margin-bottom: 1rem; + } + .psw-container .eye-icon-container, + .psw-repeat-container .eye-icon-container, + .psw-old-container .eye-icon-container { + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: calc(50% - 1rem); + right: 10px; + cursor: pointer; + } + .eye-icon-container i { color: var(--font-medium); } + +@media screen and (max-width: 1486px) { + .main-content { + margin-left: 280px; + } + +} +@media screen and (max-width: 1060px) { + .section-main-container { flex-direction: column; } + .section-main-container .section-container:first-of-type { + margin-bottom: 1rem; + margin-right: 0; + } + } -aside { - position: absolute; - background-color: green; - -} \ No newline at end of file +@media screen and (max-width: 780px) { + .account .right .main-container { padding: 0 15px 0 0 ; } + .main-content { + margin-left: 0; + margin-top: 5rem; + } + section.personal .info { + grid-template-columns: 5rem 1fr 2rem; + } + .info.photo { grid-template-columns: 5rem 1fr 4rem !important; } + .text.psw .time { display: none; } + .info .text.psw { min-height: auto; } + + .main-content.change { + min-width: 200px ; + } + .main-content.change { margin: 0; } +} +@media screen and (max-width: 420px) { + .account { grid-template-columns: 1fr auto; } + + .main-content.personal .container { + width: 320px; + } +} +@media screen and (max-width: 340px) { + .main-content.personal .container { + width: calc(100vw - 2rem); + } +} +@media screen and (max-width: 456px) { + + /* Profile options */ + .profile-extra-options { min-width: 300px; } + .tooltiptext { display: none; } +} diff --git a/CSS/profileImg.css b/CSS/profileImg.css new file mode 100644 index 0000000..d89e01d --- /dev/null +++ b/CSS/profileImg.css @@ -0,0 +1,133 @@ +.main-img-container { + visibility: hidden; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%) scale(0.9); + /* transition: all ease-in-out .1s; */ + border: 1px solid var(--hover-medium); + border-radius: 5px; + background-color: var(--bg); + padding: 20px; + z-index: -10; + height: 0; +} +.main-img-container.active { + z-index: 1000; + visibility: visible; + transform: translate(-50%,-50%) scale(1); + min-width: 340px; + height: auto; +} +.main-img-container .container { + margin-bottom: 0.75rem; + display: flex; +} +.main-img-container .container .img { margin-right: 1rem; } +.color-img { margin-top: 0; } +.color-img.active { margin-top: 1rem; } + +.main-img-container section { + margin-top: 1rem; + padding: 0 5px; +} +.main-img-container.active section:nth-of-type(2) { margin-top: 0; } +.main-img-container section .img-text{ + display: flex; + align-items: center; + margin-bottom: 0.75rem; +} +.main-img-container section .img-text p { color: var(--font-medium); } +.main-img-container .img { + transition: all ease-in-out .12; +} +.main-img-container .img:hover { filter: brightness(0.97); } +.img.medium.add { + background-color: var(--hover-light); +} +.img.medium.add div { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.img.medium.add div i { + font-size: 1.7rem; + color: var(--font-medium); +} + +.select-img { + background-color: var(--hover-medium); + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all ease-in-out .12s; + height: 0; +} +.select-img .icon { + display: flex; + align-items: center; + justify-content: center; +} +.select-img .icon i { + font-size: 3rem; + color: var(--font-medium); +} +.select-img:hover { background-color: var(--hover-dark); } + +.main-img-container .x { + position: absolute; + top: 0; + right: 0; + padding: 5px; +} +.main-img-container .x div { + width: 2.5rem; + height: 2.5rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + cursor: pointer; +} +.main-img-container .x div:hover { background-color: var(--hover-light); } +.main-img-container .x div:active { background-color: var(--hover-medium); } +.main-img-container .x div i { + font-size: 1.25rem; + display: flex; + align-items: center; + justify-content: center; + color: var(--font-dark); +} +.insert-photo-container { + padding: 0; + margin: 0; + height: 0; + visibility: hidden; + transition: all ease-in-out .2s; + position: relative; +} +.insert-photo-container.active { + visibility: visible; + height: 14rem; +} + +.main-insert-photo-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + visibility: hidden; +} +.insert-photo-container.active .main-insert-photo-container { visibility: visible; } +.insert-photo-container.active .main-insert-photo-container .select-img { height: 10rem; } +.insert-photo-container + section { margin-top: 0; } +.main-insert-photo-container .footer { + height: 3rem; + margin: auto; +} \ No newline at end of file diff --git a/CSS/responsive.css b/CSS/responsive.css index 1eb8ada..75de87c 100644 --- a/CSS/responsive.css +++ b/CSS/responsive.css @@ -49,9 +49,7 @@ .double.psw .eye-icon-container { display: none; } .double.psw .psw-repeat-container { margin: 0; } .sign-container h1 { font-size: 1.5rem; } - - /* Profile options */ - .profile-extra-options { min-width: 300px; } + .profile-extra-options { min-width: 300px; } } @media screen and (max-width: 360px) { @@ -60,10 +58,11 @@ /* Sign In */ -@media screen and (max-width: 600px) { +@media screen and (max-width: 601px) { .main-container { min-width: calc(100% - 40px); padding: 40px; - /* border: none; */ } + .tooltiptext { display: none; } } + diff --git a/JS/account.js b/JS/account.js new file mode 100644 index 0000000..bc9bc3a --- /dev/null +++ b/JS/account.js @@ -0,0 +1,363 @@ +const slideAccount = document.querySelector('.side-bar-responsive .slide') +const sideBarResAccount = document.querySelector('.side-bar-responsive') +const sideBarAccount = document.getElementById('side-bar-account') + +window.onload = () => { + if(window.location.pathname.includes('changeName')) change.name() + else if(window.location.pathname.includes('changeCountry')) change.country() + else if(window.location.pathname.includes('changePassword')) change.password() + if(!window.location.pathname.includes('change')) responsive() +} +window.onresize = () => { + if(!window.location.pathname.includes('change')) responsive() +} + +function responsive() { + if(window.innerWidth < 780) { + sideBarResAccount.classList.remove('disable') + sideBarAccount.classList.add('disable') + slideAccount.style.width = window.innerWidth + 'px' + if(window.innerWidth > 430) { + sideBarResAccount.style.alignItems = 'center' + sideBarResAccount.style.justifyContent = 'center' + } + } else { + sideBarAccount.classList.remove('disable') + sideBarResAccount.classList.add('disable') + } +} + + +async function logout(string) { + await fetch(`../include/logout.inc.php`) + openLinks(filePath.headlines + string); +} + +function openLinks(string) { window.location.replace(websiteURL + string) } + +const icon = `` +const name = document.querySelector('.name-container') +const surname = document.querySelector('.surname-container') +const nameInput = document.getElementById('name-input') +const surnameInput = document.getElementById('surname-input') +const nameError = document.querySelector('.error.name') +const surnameError = document.querySelector('.error.surname') +const genderError = document.querySelector('.error.gender') +const countryError = document.querySelector('.error.country') + +let pswOld = document.querySelector('.psw-old-container') +let pswOldInput = document.getElementById('psw-old-input') +let psw = document.querySelector('.psw-container') +let pswRepeat = document.querySelector('.psw-repeat-container') +let pswInput = document.getElementById('psw-input') +let pswRepeatInput = document.getElementById('psw-repeat-input') +let pswError = document.querySelector('.error.psw') + +const change = { + name : () => { + nameInput.onfocus = () => { + name.querySelector('.label-container').classList.add('active') + name.querySelector('.label-container').classList.add('google-blue') + nameInput.classList.add('active') + } + nameInput.onblur = () => { + if(nameInput.value.length === 0) { + name.querySelector('.label-container').classList.remove('active') + name.querySelector('.label-container').classList.remove('google-blue') + nameInput.classList.remove('active') + } else { + name.querySelector('.label-container').classList.remove('google-blue') + nameInput.classList.remove('active') + } + } + surnameInput.onfocus = () => { + surname.querySelector('.label-container').classList.add('active') + surname.querySelector('.label-container').classList.add('google-blue') + surnameInput.classList.add('active') + } + surnameInput.onblur = () => { + if(surnameInput.value.length === 0) { + surname.querySelector('.label-container').classList.remove('active') + surname.querySelector('.label-container').classList.remove('google-blue') + surnameInput.classList.remove('active') + } else { + surname.querySelector('.label-container').classList.remove('google-blue') + surnameInput.classList.remove('active') + } + } + }, + password : async () => { + + await change.generateInpout() + + pswOld = document.querySelector('.psw-old-container') + pswOldInput = document.getElementById('psw-old-input') + psw = document.querySelector('.psw-container') + pswRepeat = document.querySelector('.psw-repeat-container') + pswInput = document.getElementById('psw-input') + pswRepeatInput = document.getElementById('psw-repeat-input') + pswError = document.querySelector('.error.psw') + + pswInput.onfocus = () => { + psw.querySelector('.label-container').classList.add('active') + psw.querySelector('.label-container').classList.add('google-blue') + pswInput.classList.add('active') + } + pswInput.onblur = () => { + if(pswInput.value.length === 0) { + psw.querySelector('.label-container').classList.remove('active') + psw.querySelector('.label-container').classList.remove('google-blue') + pswInput.classList.remove('active') + } else { + psw.querySelector('.label-container').classList.remove('google-blue') + pswInput.classList.remove('active') + } + } + pswRepeatInput.onfocus = () => { + pswRepeat.querySelector('.label-container').classList.add('active') + pswRepeat.querySelector('.label-container').classList.add('google-blue') + pswRepeatInput.classList.add('active') + } + pswRepeatInput.onblur = () => { + if(pswRepeatInput.value.length === 0) { + pswRepeat.querySelector('.label-container').classList.remove('active') + pswRepeat.querySelector('.label-container').classList.remove('google-blue') + pswRepeatInput.classList.remove('active') + } else { + pswRepeat.querySelector('.label-container').classList.remove('google-blue') + pswRepeatInput.classList.remove('active') + } + } + if(pswOld !== null) { + pswOldInput.onfocus = () => { + pswOld.querySelector('.label-container').classList.add('active') + pswOld.querySelector('.label-container').classList.add('google-blue') + pswOldInput.classList.add('active') + } + pswOldInput.onblur = () => { + if(pswOldInput.value.length === 0) { + pswOld.querySelector('.label-container').classList.remove('active') + pswOld.querySelector('.label-container').classList.remove('google-blue') + pswOldInput.classList.remove('active') + } else { + pswOld.querySelector('.label-container').classList.remove('google-blue') + pswOldInput.classList.remove('active') + } + } + } + }, + generateInpout : async() => { + const res = await fetch('../include/check.inc.php', { + method: "POST", + body: createFormData('pswSet', '') + }) + const data = await res.text() + document.querySelector('article').innerHTML = data + }, + country : () => { + for(let i = 0; i < countries.length; i++) { + let div = document.createElement('div') + div.onclick = () => { select(div) } + if(getAcronymCountry(window.location.search.match(/[\?|\&]+[c]+[o]+[u]+[=].{2}/g)[0].slice(5, 7)) === countries[i]) div.classList.add('active') + let p = document.createElement('p') + p.innerHTML = countries[i] + div.appendChild(p) + document.querySelector('.countries').appendChild(div) + } + } +} +function getAcronymCountry(acronym) { + for(let i = 0; i < countries.length; i++) + if(countryAcronyms[i] === acronym) + return countries[i] +} + +const check = { + name : async() => { + if(error.name(nameInput.value.trim(), surnameInput.value.trim()) === true) return errorHandeling.name() + array = JSON.stringify([nameInput.value.trim(), surnameInput.value.trim()]) + const res = await fetch('../include/update.inc.php', { + method: "POST", + body: createFormData('name', array) + }) + const data = await res.text() + if(data === 'success') openLinks('account/personal.php') + }, + gender : async() => { + if(!document.querySelector('.gender-container .active')) { + genderError.classList.remove('disable') + return errorHandeling.text(genderError.firstElementChild, 'You need to pick one') + } + array = JSON.stringify([document.querySelector('.gender-container .active').parentElement.lastElementChild.innerHTML.trim()]) + const res = await fetch('../include/update.inc.php', { + method: "POST", + body: createFormData('gender', array) + }) + const data = await res.text() + if(data === 'success') openLinks('account/personal.php') + }, + country : async() => { + if(!document.querySelector('.country-container .active')) { + countryError.classList.remove('disable') + return errorHandeling.text(countryError.firstElementChild, 'Select a country') + } + array = JSON.stringify([document.querySelector('.country-container .active').firstElementChild.innerHTML]) + const res = await fetch('../include/update.inc.php', { + method: "POST", + body: createFormData('country', array) + }) + const data = await res.text() + if(data === 'success') openLinks('account/personal.php') + + }, + psw : async() => { + let string = 'newPsw' + if(pswOldInput !== null) { + if(error.passwordOld(pswInput.value.trim(), pswRepeatInput.value.trim(),pswOldInput.value.trim()) === true) return errorHandeling.password() + string = 'oldPsw' + arrayInput = [pswOldInput.value.trim(), pswInput.value.trim(), pswRepeatInput.value.trim()] + } else { + if(error.password(pswInput.value.trim(), pswRepeatInput.value.trim()) === true) return + arrayInput = [pswInput.value.trim(), pswRepeatInput.value.trim()] + } + array = JSON.stringify(arrayInput) + const res = await fetch('../include/update.inc.php', { + method: "POST", + body: createFormData(string, array) + }) + const data = await res.text() + console.log(data) + if(data === 'success') openLinks('account/personal.php') + else error.passwordOldAfter() + } +} + +const error = { + reset : () => { + pswError.classList.add('disable') + pswError.firstElementChild.innerHTML = "" + pswInput.classList.remove('error-red-border') + psw.querySelector('label').classList.remove('error-red') + pswRepeatInput.classList.remove('error-red-border') + pswRepeat.querySelector('label').classList.remove('error-red') + pswOldInput.classList.remove('error-red-border') + pswOld.querySelector('label').classList.remove('error-red') + }, + name : (FirstName, LastName) => { + if (FirstName.length === 0 || LastName.length === 0) { + nameError.classList.remove('disable') + surnameError.classList.remove('disable') + if (FirstName.length === 0 && LastName.length === 0) { + errorHandeling.name() + errorHandeling.surname() + errorHandeling.text(nameError.firstElementChild, 'Name must not be empty') + errorHandeling.text(surnameError.firstElementChild, 'Surname must not be empty') + } else if (FirstName.length !== 0 && LastName.length === 0) { + errorHandeling.surname() + errorHandeling.text(surnameError.firstElementChild, 'Surname must not be empty') + } else if (FirstName.length === 0 && LastName.length !== 0) { + errorHandeling.name() + errorHandeling.text(nameError.firstElementChild, 'Name must not be empty') + errorHandeling.text(surnameError.firstElementChild, 'Surname must not be empty') + } + return true + } + }, + password : (Password, PasswordRepeat) => { + if (Password.length === 0 || PasswordRepeat.length === 0 || Password.length < 6 || Password === '' || PasswordRepeat === '' || Password !== PasswordRepeat) { + pswError.classList.remove('disable') + errorHandeling.password() + errorHandeling.passwordRepeat() + + if(Password.length === 0 || PasswordRepeat.length === 0 || Password === '' || PasswordRepeat === '') errorHandeling.text(pswError.firstElementChild, 'You must type in your password') + else if(Password.length < 6) errorHandeling.text(pswError.firstElementChild, 'Password must include atleast 7 characters') + else if(Password !== PasswordRepeat) errorHandeling.text(pswError.firstElementChild, 'Passwords do not match') + else if(Password.split(' ').length > 1 || PasswordRepeat.split(' ').length > 1) errorHandeling.text(pswError.firstElementChild, 'No white spaces in password') + return true + } + else return false + }, + passwordOld : (Password, PasswordRepeat, PasswordOld) => { + num = 0 + if(PasswordOld.length === 0 || PasswordOld.length === '' || PasswordOld.length > 20) { + errorHandeling.passwordOld() + + if(PasswordOld.length === 0 || PasswordOld.length === '') errorHandeling.text(pswError.firstElementChild, 'Password field should not be empty') + if(PasswordOld.length > 20) errorHandeling.text(pswError.firstElementChild, 'Password must contain maximum of 20 letters') + num = 10 + } + if(error.password(Password, PasswordRepeat) === true) num = 10 + if(num > 0) return true + else return false + }, + passwordOldAfter : () => { + error.reset() + pswError.classList.remove('disable') + errorHandeling.passwordOld() + errorHandeling.text(pswError.firstElementChild, 'Wrong password') + } +} +const errorHandeling = { + name : () => { + nameInput.classList.add('error-red-border') + name.querySelector('label').classList.add('error-red') + }, + surname : () => { + surnameInput.classList.add('error-red-border') + surname.querySelector('label').classList.add('error-red') + }, + password : () => { + pswInput.classList.add('error-red-border') + psw.querySelector('label').classList.add('error-red') + }, + passwordRepeat : () => { + pswRepeatInput.classList.add('error-red-border') + pswRepeat.querySelector('label').classList.add('error-red') + }, + passwordOld : () => { + pswOldInput.classList.add('error-red-border') + pswOld.querySelector('label').classList.add('error-red') + }, + text : (element, text) => { element.innerHTML = `${icon} ${text}` } + +} +function createFormData(word, data) { + let formData = new FormData + formData.append(word, data) + return formData +} + +function setGender(element) { + let aside = element.parentElement + let oldSelect = aside.parentElement.querySelector('.active') + if(oldSelect) { + oldSelect.classList.remove('active') + oldSelect.firstElementChild.classList.remove('active') + oldSelect.firstElementChild.firstElementChild.classList.remove('active') + } + aside.firstElementChild.classList.add('active') + aside.firstElementChild.firstElementChild.classList.add('active') + aside.firstElementChild.firstElementChild.firstElementChild.classList.add('active') +} + +function select(element) { + if(document.querySelector('.country-container .active')) document.querySelector('.country-container .active').classList.remove('active') + element.classList.add('active') +} + +function managePasswordVisibility(element) { + if(element.firstElementChild.firstElementChild.classList.contains('disable')) { + element.firstElementChild.firstElementChild.classList.remove('disable') + element.firstElementChild.lastElementChild.classList.add('disable') + if(element.parentElement.firstElementChild.lastElementChild === pswInput) pswInput.type = 'text' + else if(element.parentElement.firstElementChild.lastElementChild === pswRepeatInput) pswRepeatInput.type = 'text' + else if(element.parentElement.firstElementChild.lastElementChild === pswOldInput) pswOldInput.type = 'text' + + } else { + element.firstElementChild.firstElementChild.classList.add('disable') + element.firstElementChild.lastElementChild.classList.remove('disable') + if(element.parentElement.firstElementChild.lastElementChild === pswInput) pswInput.type = 'password' + else if(element.parentElement.firstElementChild.lastElementChild === pswRepeatInput) pswRepeatInput.type = 'password' + else if(element.parentElement.firstElementChild.lastElementChild === pswOldInput) pswOldInput.type = 'password' + } +} diff --git a/JS/main.js b/JS/main.js index 6279cdc..94c74bc 100644 --- a/JS/main.js +++ b/JS/main.js @@ -176,7 +176,7 @@ const suggest = { removeActiveSidebarCategory() hideSuggestWords() let elementInnerHTML = removeDiacritics(element.innerHTML).trim() - let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML) + let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML.trim()) historyPushState(location.origin + location.pathname, `?q=${elementInnerHTML}&`, `cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`) mainSearch() } @@ -309,8 +309,6 @@ window.onclick = (e) => { } window.onresize = windowWidthSettings -function openLinks(string) { window.location.replace(websiteURL + string) } - function historyPushState(webiste, string, country, background) { history.pushState({}, null, webiste + string + country + background) } function changeBackgroundColor() { document.body.className = window.location.search.match(regularExpressions.url.backgroundColor)[0].slice(4,10) } @@ -396,7 +394,7 @@ async function headlines() { pathLocation = '' sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement.parentElement) - historyPushState(window.location.origin + window.location.pathname, '', `?cou=${getCountryAcronym(selectedCountry.innerHTML)}`,`&bg=${backgroundColor}`) + historyPushState(window.location.origin + window.location.pathname, '', `?cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}`,`&bg=${backgroundColor}`) } /* SEARCH */ @@ -413,7 +411,7 @@ async function headlines() { if(!extra && newSearch === true) { url = removeDiacritics(mainSearchInput.value).trim() - return openLinks(filePath.search + `?q=${url}&cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`) + return openLinks(filePath.search + `?q=${url}&cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}&bg=${backgroundColor}`) } else if(extra && newSearch === true) { url = createUrlExtraOptions() return openLinks(filePath.search + url[1] + url[2] + url[3]) @@ -462,7 +460,7 @@ async function headlines() { else if(hasWordsV.length !== 0 && excludeWordsV.length !== 0 && exactPhraseV.length === 0) url = `${hasWordsV} ${devideStringIntoWords(excludeWordsV, 'EW')}` else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length === 0) url = `"${exactPhraseV}" ${devideStringIntoWords(excludeWordsV, 'EW')}` else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length !== 0) url = `"${exactPhraseV}" ${hasWordsV} ${devideStringIntoWords(excludeWordsV, 'EW')}` - return [`${location.origin}/News-website/search.php`,`?q=${url + time}`,`&cou=${getCountryAcronym(selectedCountry.innerHTML)}`,`&bg=${backgroundColor}`, url] + return [`${location.origin}/News-website/search.php`,`?q=${url + time}`,`&cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}`,`&bg=${backgroundColor}`, url] } function devideStringIntoWords(string, keyword){ if(keyword === 'HW') return `+${string.replace(/\s/g, ' +')}` @@ -527,8 +525,8 @@ mainSearchInput.onkeyup = (e) => { let suggestDivs = suggestMainInput.querySelectorAll('div') let suggestDivActiveKey = suggestMainInput.querySelectorAll('div.active.key') if(e.keyCode === 13) { - if(suggestDivActiveKey.length === 1) historyPushState(location.origin + location.pathname, `?q=${removeDiacritics(suggestDivActiveKey[0].firstElementChild.innerHTML).trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`) - else historyPushState(location.origin + location.pathname, `?q=${mainSearchInput.value.trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`) + if(suggestDivActiveKey.length === 1) historyPushState(location.origin + location.pathname, `?q=${removeDiacritics(suggestDivActiveKey[0].firstElementChild.innerHTML).trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}&`,`bg=${backgroundColor}`) + else historyPushState(location.origin + location.pathname, `?q=${mainSearchInput.value.trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}&`,`bg=${backgroundColor}`) mainSearch() } if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return @@ -574,7 +572,7 @@ function createUrlPath(type, search) { else if(type === 'entertainment') path = filePath.entertainment else if(type === 'sports') path = filePath.sports else if(type === 'health') path = filePath.health - path = `${path}?cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}` + path = `${path}?cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}&bg=${backgroundColor}` openLinks(path) } @@ -815,8 +813,8 @@ function checkIfCategoriesAreOpen() { } // string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"') - -async function logOut(path) { - await fetch(`${pathLocation}include/logout.inc.php`) - openLinks(filePath.headlines + path); +async function logOut(string) { + const res = await fetch(`include/logout.inc.php`) + const data = res.text() + openLinks(filePath.headlines + string); } \ No newline at end of file diff --git a/JS/show.js b/JS/show.js index 43e2707..6207fce 100644 --- a/JS/show.js +++ b/JS/show.js @@ -141,4 +141,26 @@ function manageExtraProfileOptions() { extOptProfile.classList.add('disable') navigationBarProfileImageDiv.classList.remove('active') } -} \ No newline at end of file +} + +function openLinks(string) { window.location.replace(websiteURL + string) } +const insertContainer = document.getElementById('insert-photo-container') +function showProfileImg() { + if(mainImgContainer.classList.contains('active')) { + manageInsertContainer() + mainImgContainer.classList.remove('active') + overlay.classList.remove('active') + insertContainer.classList.remove('active') + document.querySelector('.color-img').classList.remove('active') + + } else { + document.querySelector('.color-img').classList.add('active') + mainImgContainer.classList.add('active') + overlay.classList.add('active') + } +} +function manageInsertContainer() { + if(insertContainer.classList.contains('active')) insertContainer.classList.remove('active') + else insertContainer.classList.add('active') +} +function openFolder() { document.getElementById('file-upload').click() } \ No newline at end of file diff --git a/JS/signIn/signup.js b/JS/signIn/signup.js index d914c98..8efd7df 100644 --- a/JS/signIn/signup.js +++ b/JS/signIn/signup.js @@ -251,7 +251,6 @@ const error = { errorHandeling.text(countryError.firstElementChild, 'Select a country') num = 10 } - console.log(num) if (num > 0) return false else return true }, diff --git a/JS/variables.js b/JS/variables.js index 1ea88d5..79bdefb 100644 --- a/JS/variables.js +++ b/JS/variables.js @@ -39,7 +39,6 @@ const excludeWords = document.getElementById('extra-option-input3') const submitButton = document.getElementById('extraOptionsSearchButton') const date = document.getElementById('extra-option-select') - /** Navigation Bar Right */ const loginButton = document.getElementById('login-button') /** Extra Search Options */ @@ -65,11 +64,15 @@ const mainContentContainer = document.getElementById('main-content-container') let mainContentHeader = document.getElementById('main-content-header') const showCountriesLink = document.getElementById('show-countries-button') - const sclSpan = showCountriesLink.firstElementChild.firstElementChild - const sclStrong = showCountriesLink.firstElementChild.lastElementChild + let sclSpan + let sclStrong + const mainImgContainer = document.getElementById('main-img-container') + if(showCountriesLink !== null) { + sclSpan = showCountriesLink.firstElementChild.firstElementChild + sclStrong = showCountriesLink.firstElementChild.lastElementChild + } const main = document.getElementById('main') - const overlay = document.getElementById('overlay') const navigationBarProfileImageDiv = document.getElementById('outter-container') const extOptProfile = document.getElementById('profile-extra-options') diff --git a/account.php b/account.php deleted file mode 100644 index 923acfa..0000000 --- a/account.php +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - - - - - - - - - - - - - - Account - - - - - -
- - - main contnt -
- - - - \ No newline at end of file diff --git a/account/add-ons/footer.php b/account/add-ons/footer.php new file mode 100644 index 0000000..376babf --- /dev/null +++ b/account/add-ons/footer.php @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/account/add-ons/head.php b/account/add-ons/head.php new file mode 100644 index 0000000..cebcdc5 --- /dev/null +++ b/account/add-ons/head.php @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + Account + + \ No newline at end of file diff --git a/account/add-ons/side-bar.php b/account/add-ons/side-bar.php new file mode 100644 index 0000000..a95692c --- /dev/null +++ b/account/add-ons/side-bar.php @@ -0,0 +1,77 @@ + +
+
+ +
+
\ No newline at end of file diff --git a/account/admin.php b/account/admin.php new file mode 100644 index 0000000..d9cf621 --- /dev/null +++ b/account/admin.php @@ -0,0 +1,137 @@ + + + + + +
+ + +
+ +
+
+
+

+ Welcome to the Admin Panel +

+
+
+

+ Manage user privileges +

+
+
+
+
Name
+
Email
+
Country
+
Name
+
+
+
+
Nik Topler
+
nik.topler21@gmail.com
+
Slovenia
+
Admin
+
+
+ +
+
Nik Topler
+
nik.topler21@gmail.com
+
Slovenia
+
Admin
+
+
+ +
+
Nik Topler
+
nik.topler21@gmail.com
+
Slovenia
+
Admin
+
+
+ +
+
Nik Topler
+
nik.topler21@gmail.com
+
Slovenia
+
Admin
+
+
+
+
Nik Topler
+
nik.topler21@gmail.com
+
Slovenia
+
Admin
+
+
+
+
Nik Topler
+
nik.topler21@gmail.com
+
Slovenia
+
Admin
+
+
+
+
Nik Topler
+
nik.topler21@gmail.com
+
Slovenia
+
Admin
+
+
+
+
Nik Topler
+
nik.topler21@gmail.com
+
Slovenia
+
Admin
+
+
+
+
Nik Topler
+
nik.topler21@gmail.com
+
Slovenia
+
Admin
+
+
+
+
Nik Topler
+
nik.topler21@gmail.com
+
Slovenia
+
Admin
+
+
+
+
Nik Topler
+
nik.topler21@gmail.com
+
Slovenia
+
Admin
+
+
+ +
+
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/account/changeCountry.php b/account/changeCountry.php new file mode 100644 index 0000000..feafcdc --- /dev/null +++ b/account/changeCountry.php @@ -0,0 +1,60 @@ + + + + + + +
+
+
+
+
+

+ Select your country +

+
+
+

+ You will automaticly recive news articles from the country you select +

+
+
+
+
+
+
+
+
+
+
+
+
+ Back +
+
+
Next
+
+
+
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/account/changeGender.php b/account/changeGender.php new file mode 100644 index 0000000..1ba3efb --- /dev/null +++ b/account/changeGender.php @@ -0,0 +1,83 @@ + + + + + + +
+
+
+
+
+

+ Set your gender +

+
+
+

+ Select your gender +

+
+
+
+
+ + + +
+
+
+
+
+
+ Back +
+
+
Next
+
+
+
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/account/changeName.php b/account/changeName.php new file mode 100644 index 0000000..3e8f581 --- /dev/null +++ b/account/changeName.php @@ -0,0 +1,74 @@ + + + + + + +
+
+
+
+
+

+ Update your name +

+
+
+

+ You can change both or one +

+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+ Back +
+
+
Next
+
+
+
+ +
+ + +
+ + + \ No newline at end of file diff --git a/account/changePassword.php b/account/changePassword.php new file mode 100644 index 0000000..e03af72 --- /dev/null +++ b/account/changePassword.php @@ -0,0 +1,42 @@ + + + + + + +
+
+
+
+
+

+ Update your password +

+
+
+

+ Password should be updateded every 2 months +

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/account/home.php b/account/home.php new file mode 100644 index 0000000..5ba345d --- /dev/null +++ b/account/home.php @@ -0,0 +1,124 @@ + + + + + +
+ + +
+
+
+
+
'); + else if($_SESSION['profile_choice'] == 1) + echo ('
+
+ '.$_SESSION['letter'].' +
+
'); + else if($_SESSION['profile_choice'] == 2) + echo ('
'); + else if($_SESSION['profile_choice'] == 3) + echo ('
'); + else if($_SESSION['profile_choice'] == 4) + echo ('
'); + ?> +
+
+
+
+
+

+ +

+
+
+

+ Manage your info, privacy and security +

+
+ +
+
+
+
+

Personal Information

+

+ See & update account details.
+ Note: Some personal information can change the way website works. +

+
+
+ Manage your Personal Information +
+
+
+
+

Settings

+

+ Customize your account based on your prefrences. +

+
+
+ Open Settings +
+
+
+ +
+
+

Admin

+

+ See & add & edit users with admin role.
+ Note: this page is only for website moderators. +

+
+
+ Manage Admins +
+
+
+
+

Trending Section

+

+ Select news articles, that are going to be featured in the trending section. +

+
+
+ Edit Trending section +
+
+
'; + + ?> + + + +
+
+ + + \ No newline at end of file diff --git a/account/personal.php b/account/personal.php new file mode 100644 index 0000000..4def52e --- /dev/null +++ b/account/personal.php @@ -0,0 +1,169 @@ + + + + + +
+ + +
+ +
+
+
+

Personal Information

+
+
+

Basic info, such as your name, photo, country, that you use on the site

+
+
+
+
+

Profile

+

Profile News articles will be displayed on the front page, based on your country

+
+
+
+
+

Photo

+
+

Add a photo to personalize your account

+
+
'); + else if($_SESSION['profile_choice'] == 1) + echo ('
+
+ '.$_SESSION['letter'].' +
+
'); + else if($_SESSION['profile_choice'] == 2) + echo ('
'); + else if($_SESSION['profile_choice'] == 3) + echo ('
'); + else if($_SESSION['profile_choice'] == 4) + echo ('
'); + ?> +
+
+
+
+
+

Name

+
+
+

+ +

+
+
+ +
+
+
+
+
+

Gender

+
+
+

+ +

+
+
+ +
+
+
+
+
+

Country

+
+
+

+ +

+
+
+ +
+
+
+
+
+

Password

+
+
+
+

+ +

+
+
+ + + +
+
+
+ +
+
+ + + +
+
+
+

Email

+
+
+

+ +

+
+
+
+
+ + +
+
+ + \ No newline at end of file diff --git a/account/settings.php b/account/settings.php new file mode 100644 index 0000000..45ba479 --- /dev/null +++ b/account/settings.php @@ -0,0 +1,31 @@ + + + + + +
+ + +
+ + + +
+
+
+ + + \ No newline at end of file diff --git a/account/trending.php b/account/trending.php new file mode 100644 index 0000000..735eace --- /dev/null +++ b/account/trending.php @@ -0,0 +1,32 @@ + + + + +
+ + +
+ + + +
+
+ + + \ No newline at end of file diff --git a/add-ons/navigation-bar-right.php b/add-ons/navigation-bar-right.php new file mode 100644 index 0000000..a6975cd --- /dev/null +++ b/add-ons/navigation-bar-right.php @@ -0,0 +1,157 @@ + + + + \ No newline at end of file diff --git a/add-ons/navigation-bar.php b/add-ons/navigation-bar.php index c6c7ea2..cdab06c 100644 --- a/add-ons/navigation-bar.php +++ b/add-ons/navigation-bar.php @@ -72,147 +72,6 @@ - - - - + \ No newline at end of file diff --git a/add-ons/profileImg.php b/add-ons/profileImg.php new file mode 100644 index 0000000..d84b6ee --- /dev/null +++ b/add-ons/profileImg.php @@ -0,0 +1,56 @@ +
+ +
+

Change Profile Image

+
+ +
+
+

Select image from your computer or type in a link

+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+

Click on grey area and add image

+
+
+
+ +
+
+
+
+ +
+
+
+ Upload +
+
+
+
+
+
+
+
+

Select image from your computer or type in a link

+
+
+
+
+ +
+
+
diff --git a/add-ons/side-bar.php b/add-ons/side-bar.php index 1f398a6..b5bb31b 100644 --- a/add-ons/side-bar.php +++ b/add-ons/side-bar.php @@ -19,15 +19,20 @@
Saved news
-
+
+
+
COVID-19
-
+
+
+
-
+
+
World
@@ -36,11 +41,13 @@
-
Technology
+
Technology +
-
Entertainment
+
Entertainment +
@@ -51,24 +58,30 @@
Health
-
+
+
+
- diff --git a/include/check.inc.php b/include/check.inc.php index c68cd83..f8108b8 100644 --- a/include/check.inc.php +++ b/include/check.inc.php @@ -37,6 +37,66 @@ class Check extends Dbh { echo 'success'; } else echo 'wrong password'; } + public function pswSet() { + if (session_status() == PHP_SESSION_NONE) session_start(); + $string = ''; + if($_SESSION['password-set'] != 'Not set') { + $string = '
+
+
+ +
+ +
+
+
+ + +
+
+
'; + } + echo $string.'
+
+
+ +
+ +
+
+
+ + +
+
+
+
+
+
+ +
+ +
+
+
+ + +
+
+
+
+
+
+
+
+ Back +
+
+
Next
+
+
'; + die; + } } $checkObj = new Check(); @@ -44,4 +104,4 @@ $checkObj = new Check(); if($_SERVER['REQUEST_METHOD'] !== 'POST') return; if(isset($_POST['email'])) $checkObj->email(json_decode($_POST['email'])); else if(isset($_POST['login'])) $checkObj->login(json_decode($_POST['login'])); - +else if(isset($_POST['pswSet'])) $checkObj->pswSet(); diff --git a/include/session.inc.php b/include/session.inc.php index 3689652..9402058 100644 --- a/include/session.inc.php +++ b/include/session.inc.php @@ -26,6 +26,17 @@ class Session extends Dbh { $_SESSION['githubID'] = $this->checkIfStringNull($row['githubID']); $_SESSION['country'] = $this->getCountryWithID($row['country_id']); $_SESSION['letter'] = strtoupper($email[0]); + if($row['password'] == null) $_SESSION['password-set'] = 'Not set'; + else $_SESSION['password-set'] = '••••••••••'; + $_SESSION['admin'] = $this->checkIfUserIsAdmin($email); + } + public function checkIfUserIsAdmin($email) { + $sql = 'SELECT * FROM admins WHERE user_id = (SELECT id FROM users WHERE email = ?);'; + $stmt = $this->connect()->prepare($sql); + $stmt->execute([$email]); + $row = $stmt->fetch(); + if($row) return 'yes'; + else return 'no'; } public function checkIfStringNull($string) { if($string == null) return 0; diff --git a/include/update.inc.php b/include/update.inc.php new file mode 100644 index 0000000..a038957 --- /dev/null +++ b/include/update.inc.php @@ -0,0 +1,110 @@ +connect()->prepare($sql); + $stmt->execute([$userInfo[0], $_SESSION['email']]); + + $sql = 'UPDATE users SET surname = ? WHERE email = ?'; + $stmt = $this->connect()->prepare($sql); + $stmt->execute([$userInfo[1], $_SESSION['email']]); + $this->setSessionVariables($_SESSION['email']); + echo 'success'; + } + public function gender($userInfo) { + $sql = 'UPDATE users SET gender = ? WHERE email = ?'; + $stmt = $this->connect()->prepare($sql); + $stmt->execute([$userInfo[0], $_SESSION['email']]); + $this->setSessionVariables($_SESSION['email']); + echo 'success'; + } + public function country($userInfo) { + $sql = 'UPDATE users SET country_id = (SELECT id FROM countries WHERE name = ?) WHERE email = ?'; + $stmt = $this->connect()->prepare($sql); + $stmt->execute([$userInfo[0], $_SESSION['email']]); + $this->setSessionVariables($_SESSION['email']); + echo 'success'; + } + + public function setSessionVariables($email) { + include_once 'session.inc.php'; + $session = new Session(); + $session->setSession($email); + } + public function newPsw($userInfo) { + $this->checkPsw($userInfo); + $sql = 'UPDATE users SET password = ? WHERE email = ?'; + $hashPsw = password_hash($userInfo[0], PASSWORD_DEFAULT); + $stmt = $this->connect()->prepare($sql); + $stmt->execute([$hashPsw, $_SESSION['email']]); + $this->setSessionVariables($_SESSION['email']); + echo 'success'; + } + public function updatePswChangeTime() { + $sql = 'UPDATE users SET password_change = ? WHERE email = ?'; + $d1 = new Datetime(); + $d2 = $d1->format('U'); + $stmt = $this->connect()->prepare($sql); + $stmt->execute([$d2, $_SESSION['email']]); + } + public function checkPsw($userInfo) { + if((empty($userInfo[0]) || empty($userInfo[1]) || ($userInfo[0] != $userInfo[1]) || $userInfo[0]) > 20) { + if(empty($userInfo[0]) || empty($userInfo[1])) echo 'empty'; + else if($userInfo[0] != $userInfo[1]) echo 'do not match'; + else if(strlen($userInfo[0]) > 20) echo 'password too long'; + die; + } + } + + public function oldPsw($userInfo) { + $this->checkPsw([$userInfo[1], $userInfo[2]]); + if(empty($userInfo[0])) { + echo 'empty'; + die; + } else if(strlen($userInfo[0]) < 6) { + echo 'too short'; + die; + } + if($this->ifPswIsCorrect($userInfo[0]) == 'wrong password') { + echo 'wrong password'; + die; + } + $sql = 'UPDATE users SET password = ? WHERE email = ?'; + $hashPsw = password_hash($userInfo[1], PASSWORD_DEFAULT); + $stmt = $this->connect()->prepare($sql); + $stmt->execute([$hashPsw, $_SESSION['email']]); + $this->updatePswChangeTime(); + echo 'success'; + } + public function ifPswIsCorrect($psw) { + + $sql = 'SELECT * FROM users WHERE email = ?'; + $stmt = $this->connect()->prepare($sql); + $stmt->execute([$_SESSION['email']]); + $row = $stmt->fetch(); + + if(password_verify($psw, $row['password'])) { + $this->setSessionVariables($_SESSION['email']); + return 'success'; + } else return 'wrong password'; + } + +} + +$updateObj = new Update(); + +if($_SERVER['REQUEST_METHOD'] !== 'POST') return; +else if(isset($_POST['name'])) $updateObj->name(json_decode($_POST['name'])); +else if(isset($_POST['gender'])) $updateObj->gender(json_decode($_POST['gender'])); +else if(isset($_POST['country'])) $updateObj->country(json_decode($_POST['country'])); +else if(isset($_POST['newPsw'])) $updateObj->newPsw(json_decode($_POST['newPsw'])); +else if(isset($_POST['oldPsw'])) $updateObj->oldPsw(json_decode($_POST['oldPsw']));