Commit fc4c2b08 authored by SpinShare's avatar SpinShare

added settings tabs

parent 99f7afdd
......@@ -4,7 +4,7 @@
grid-gap: 25px;
}
.section-search header {
background: rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, 0.5);
padding: 50px;
padding-bottom: 25px;
}
......
......@@ -4,7 +4,7 @@
grid-gap: 25px;
& header {
background: rgba(0,0,0,0.3);
background: rgba(0,0,0,0.5);
padding: 50px;
padding-bottom: 25px;
......
.section-settings {
.section-settings header {
background: rgba(0, 0, 0, 0.5);
padding: 50px;
padding-bottom: 0px;
}
.section-settings header .title {
font-size: 32px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 15px;
font-family: 'Oswald', sans-serif;
}
.section-settings header .tabs {
display: flex;
flex-direction: column;
align-items: center;
}
.section-settings header .tabs .tab {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.25em;
padding: 15px 40px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.4);
transition: 0.2s ease-in-out all;
text-decoration: none;
}
.section-settings header .tabs .tab:not(.active):hover {
cursor: pointer;
background: #272c2e;
color: rgba(255, 255, 255, 0.75);
}
.section-settings header .tabs .tab.active {
opacity: 1;
color: #ffffff;
background: #212629;
}
.section-settings .settings-title {
font-size: 14px;
......@@ -13,9 +45,9 @@
.section-settings .settings-box {
width: 600px;
padding: 25px;
margin: 25px 50px;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
margin-bottom: 25px;
}
.section-settings .settings-box .settings-item {
display: grid;
......@@ -122,3 +154,19 @@
border-color: #c5414c;
color: #c5414c;
}
.section-settings .coming-soon {
width: 300px;
margin: 0 auto;
padding: 100px 0px;
text-align: center;
}
.section-settings .coming-soon img {
width: 300px;
margin-bottom: 25px;
}
.section-settings .coming-soon .title {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 14px;
}
.section-settings {
padding: 50px;
display: flex;
flex-direction: column;
align-items: center;
& header {
background: rgba(0,0,0,0.5);
padding: 50px;
padding-bottom: 0px;
& .title {
font-size: 32px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 15px;
font-family: 'Oswald', sans-serif;
}
& .tabs {
display: flex;
& .tab {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.25em;
padding: 15px 40px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: rgba(0,0,0,0.6);
color: rgba(255,255,255,0.4);
transition: 0.2s ease-in-out all;
text-decoration: none;
&:not(.active):hover {
cursor: pointer;
background: #272c2e;
color: rgba(255,255,255,0.75);
}
&.active {
opacity: 1;
color: rgba(255,255,255,1);
background: #212629;
}
}
}
}
& .settings-title {
font-size: 14px;
......@@ -13,9 +50,9 @@
& .settings-box {
width: 600px;
padding: 25px;
margin: 25px 50px;
background: rgba(255,255,255,0.1);
border-radius: 6px;
margin-bottom: 25px;
& .settings-item {
display: grid;
......@@ -108,4 +145,21 @@
color: #c5414c;
}
}
& .coming-soon {
width: 300px;
margin: 0 auto;
padding: 100px 0px;
text-align: center;
& img {
width: 300px;
margin-bottom: 25px;
}
& .title {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 14px;
}
}
}
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="aee07f99-5223-45c5-8204-b56b0229636c"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 705.6 714.2"
style="enable-background:new 0 0 705.6 714.2;" xml:space="preserve">
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="_x30_6c42c9d-6d9c-45ee-a61b-17902c1dca73"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1072.4 708.1"
style="enable-background:new 0 0 1072.4 708.1;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.1;}
.st1{fill:#E6E6E6;}
.st0{opacity:0.15;fill:#FFFFFF;enable-background:new ;}
.st1{fill:url(#SVGID_1_);}
.st2{fill:#FFFFFF;}
.st3{opacity:0.2;enable-background:new ;}
.st4{fill:#575A89;}
.st5{fill:#FFB9B9;}
.st6{fill:#2F2E41;}
.st7{opacity:0.1;enable-background:new ;}
.st3{fill:#5A5773;}
.st4{opacity:0.2;fill:#E22C78;enable-background:new ;}
.st5{opacity:0.1;fill:#5A5773;enable-background:new ;}
.st6{fill:#E22C78;}
</style>
<ellipse class="st0" cx="153.8" cy="699.2" rx="92.3" ry="15"/>
<polygon class="st1" points="705.6,632.3 334,554.9 334,193.9 705.6,0 "/>
<polygon class="st2" points="704.7,37.9 333.1,215.8 333.1,194.8 704.7,1.2 "/>
<path class="st1" d="M350.3,197.6c0,4.8-1.6,9.5-3.6,10.5c-2,0.9-3.6-2.1-3.6-6.9s1.6-9.4,3.6-10.4
C348.6,189.7,350.3,192.7,350.3,197.6z"/>
<path class="st1" d="M364.7,190.3c0,4.7-1.6,9.3-3.6,10.2c-2,0.9-3.6-2-3.6-6.7s1.6-9.2,3.6-10.2
C363.1,182.7,364.7,185.7,364.7,190.3z"/>
<path class="st1" d="M379.1,183.1c0,4.7-1.6,9.3-3.6,10.2c-2,0.9-3.6-2-3.6-6.7s1.6-9.2,3.6-10.2
C377.5,175.5,379.1,178.5,379.1,183.1z"/>
<polygon class="st3" points="609.1,281.5 380.1,333.9 380.1,267 609.1,186 "/>
<polygon class="st2" points="604.6,276.9 375.5,329.3 375.5,262.5 604.6,181.5 "/>
<path class="st3" d="M417.9,287.9c0,10.8-4.1,20.5-9,21.8c-4.9,1.2-8.7-6.2-8.7-16.7s3.9-20.2,8.7-21.7
C413.8,269.7,417.9,277.1,417.9,287.9z"/>
<path class="st2" d="M415.2,285.1c0,10.8-4.1,20.5-9,21.8c-4.9,1.2-8.7-6.2-8.7-16.7s3.9-20.2,8.7-21.7
C411.1,266.9,415.2,274.4,415.2,285.1z"/>
<polygon class="st1" points="549.6,246.9 439.5,278.7 439.5,267.5 549.6,233.6 "/>
<polygon class="st1" points="524.3,279.1 459.4,295.5 459.4,283.9 524.3,266.3 "/>
<polygon class="st3" points="609.2,520.5 380.1,501.3 380.1,367.1 609.2,328.9 "/>
<polygon class="st2" points="603.7,515.9 374.6,496.7 374.6,362.6 603.7,324.4 "/>
<polygon class="st3" points="412.5,400.5 401.8,401.5 401.8,389.8 412.5,388.5 "/>
<polygon class="st2" points="410.7,398.7 400,399.7 400,388 410.7,386.7 "/>
<polygon class="st1" points="549.6,385.5 421.5,397.4 421.5,386.5 549.6,372.1 "/>
<polygon class="st1" points="549.6,428.9 421.5,433.1 421.5,422.2 549.6,415.6 "/>
<polygon class="st1" points="549.6,473.5 421.5,469.6 421.5,458.7 549.6,460.2 "/>
<polygon class="st4" points="143.4,329.2 118.9,329.2 118.9,317.2 139.4,317.2 143.9,319.7 "/>
<polygon class="st5" points="100.8,659.9 101.8,677.9 116.9,674.9 114.3,656.9 "/>
<path class="st5" d="M171.9,650.4c0,0,0.5,15-1,19s4,6,4,6h12l7,1v-7.5c0,0-8-12.5-8-19.5S171.9,650.4,171.9,650.4z"/>
<path class="st6" d="M103.3,674.9c0,0,10-4.7,13.5-1.9s16.5,27.4,11.5,28.9c0,0-3.5,6-15.5,2s-12-8.5-12-8.5s-3.5-3-3.5-4
s1.5-10,1.5-10s1.1-7.5,2.8-7L103.3,674.9z"/>
<path class="st6" d="M172.9,667.4c0,0-1.5-1.5-2.5,0s-6.5,20.5-1.5,21.5s12.5,4.5,13.5,3.5c0.8-1.1,1.5-2.2,2-3.5
c0,0,8,3.5,10.5,6.5s32.5,9.5,31.5,0s-16-17.5-16-17.5l-16.5-11c0,0-6.5,0.5-8,3.5S173.9,672.9,172.9,667.4z"/>
<path class="st4" d="M26.3,473.8c0,0-5.5,7-4.5,7.5s23,5.5,35,2.5s37-2.5,38.5-6s20-47,20-47l-6-33l-6.5-8.5l-15-13l-30,56
L26.3,473.8z"/>
<path class="st7" d="M26.3,473.8c0,0-5.5,7-4.5,7.5s23,5.5,35,2.5s37-2.5,38.5-6s20-47,20-47l-6-33l-6.5-8.5l-15-13l-30,56
L26.3,473.8z"/>
<path class="st6" d="M89.8,461.8c0,0-7,25,0,59.5s0.5,42,2,43.5s2,1,2,2.5s1.5,8.5,0,11s-1.5,82,3,84s17.5,7,20,0s0.5-57.5,1.5-60
s1-8.5,1-10s3-18.5,3.5-23s2-13.5,2-13.5s-1-35.5,2-46c3-10.5,4-11.5,4-11.5l24,62.5c0,0-2,6.5,0,8.5s-0.5,1.5,1.5,5s4,4.5,4,6.5
s-2,2-1,3.5s2.5,7,2.5,7l-2.5,6c0,0,1.5,12.5,3.5,20s2,38,4.5,38.5s22,6,22-5.5s-1.5-61.5-1.5-61.5s-3-7.5-3-9.5s-0.5-3,0.5-4
s2-3,0.5-4.5s-1-3.5-1-5.5c-0.1-2.7-0.4-5.4-1-8c-0.5-2-10-64.5-10-64.5s2-7.5,0-8s-2-4.5-2-6.5s5-27-1-27S89.8,461.8,89.8,461.8z"
/>
<path class="st5" d="M23.8,431.8l-7,3.5c0,0-25,13.5-14,21s22-10.5,22-10.5l10.5-8L23.8,431.8z"/>
<path class="st5" d="M121.4,294.7c0,0-2,23-12.5,28s-3.5,42.5-3.5,42.5l14.5,14l25.5-7.5l3-17l2.5-17.5l-6-9c0,0-7.5-2-4.5-22
S121.4,294.7,121.4,294.7z"/>
<path class="st2" d="M106.3,330.7c0,0,11.5,38,19.5,38s12.5-9,13.5-20s7.5-23,7.5-23l15.5,14c0,0,12.5,110.6,11.5,113.6
s-40,6.5-55.5,11s-31,1-31-1.5c0-2.2,7.9-21.5,1.9-35.6c-2.2-5-3.7-10.3-4.4-15.8c-0.9-7.4-1.8-16.4-1-19.2c1.5-5,9.5-58,9.5-58
L106.3,330.7z"/>
<path class="st4" d="M114.8,316.9c0,0-9,4.8-13,6.8s-28.5,8-29,11s3.5,45,1.5,49.5s-22,44.5-22,44.5l-1,8.5c0,0-33,39.5-29,44
s19-14,19-14s33.5-53.5,34.5-55.5s21.5-39,24.5-40s10-43,11-45S116.3,316.2,114.8,316.9z"/>
<path class="st4" d="M75.3,334.3h-3c0,0-11,42-14,47.5s-3.5,14.5-4,16s-2.5,1-3,4.5s-5.5,8-9.5,10s-22,19-21.5,19.5s6,18,9.5,18
s17.5-17,19-17s8-6,9-6.5s26.5-47.5,25.5-59S75.3,334.3,75.3,334.3z"/>
<path class="st5" d="M200.1,463.8l6.2,4.8c0,0,21.8,18.2,9.5,23.4s-19.5-14.7-19.5-14.7l-8.7-9.9L200.1,463.8z"/>
<path class="st4" d="M139.8,317.5c0,0,6.6,3.2,9.6,5.7s26,9,26,11s-2.5,33-2.5,33l3.5,55c0,0,5,62,6,63.5s2.5,9.5,0,9.5
s-15-14-14.5-21s4-23,0.5-27s-20-71-20-75s-7-44-6.5-45S139.8,317.5,139.8,317.5z"/>
<path class="st4" d="M167.9,333.8l7.5,0.5l18.5,75.5c0,0,1.5,9.5,2,10.5s8,44.5,5,46s-13,7-13.5,3.5s-5.5-23-10.5-27.5s-10-82-10-82
L167.9,333.8z"/>
<circle class="st5" cx="137.9" cy="287.7" r="20.5"/>
<path class="st6" d="M123.5,289.2c1.3-0.7,3,0,4.2,1.4c2.3-10.8,12.9-17.8,23.7-15.5c1.9,0.4,3.7,1.1,5.4,2V275
c0-9.6-7.8-17.3-17.3-17.3h-4.2c-18,0-32.5,14.6-32.5,32.5c0,0,0,0,0,0v5.8c0,11,6.2,21,16,26l18.7-9.9c-5.5-3.1-9.2-8.6-10-14.9
c-1.6,0.7-3.7-0.4-4.8-2.6C121.6,292.5,122,290,123.5,289.2z"/>
<path class="st0" d="M1054.2,551.2c-26.6,54.8-80.5,91.5-136.4,115.6c-75.3,32.5-158.2,45.5-239.9,40c-14.3-1-28.6-2.5-42.8-4.6
c-49.5-7.2-97.7-21.3-143.3-41.7c-13.2-5.9-26.1-12.4-38.7-19.4c-21.1-11.7-41.3-24.9-60.5-39.5c-4.8-3.7-9.6-7.5-14.3-11.3
c-3.3-2.7-6.5-5.4-9.7-8.1c-6.9-5.6-14-10.9-21.9-14.9c-2.4-1.2-4.8-2.3-7.3-3.2c-25.1-9.5-54-5.9-80.1,1.5
c-19.9,5.7-39.2,13.4-59.1,18.9c-8.8,2.5-17.8,4.4-26.9,5.7c-20.3,2.6-40.9,0.8-60.5-5.3l-1.7-0.5c-2.8-0.9-5.6-1.8-8.3-2.9
l-1.7-0.6c-2.7-1-5.3-2.1-7.8-3.3l-1.7-0.8c-2.7-1.2-5.3-2.5-7.8-3.9c-0.9-0.5-1.8-1-2.7-1.5c-14.5-8.1-27.7-18.4-39.2-30.5
c-0.3-0.3-0.6-0.7-1-1c-1.6-1.7-3.1-3.5-4.7-5.3c-0.6-0.7-1.1-1.3-1.7-2c-1.8-2.2-3.5-4.4-5.2-6.7c-0.3-0.3-0.5-0.7-0.7-1
c-6.8-9.4-12.5-19.7-16.9-30.5c-0.1-0.3-0.3-0.7-0.4-1c-1.3-3.4-2.6-6.9-3.7-10.5c-0.4-1.5-0.9-3-1.3-4.5c-0.1-0.4-0.3-0.9-0.4-1.3
C0.6,455.4,0,432.8,0,410.3c0-2.6,0-5.2,0-7.9c0.2-36.3,0.7-73.3,6.1-109.1c0-0.3,0.1-0.5,0.1-0.7c1.8-12.1,4.2-24,7.3-35.8
c3.2-12.4,7.3-24.5,12.3-36.3c12.3-29,30.3-55.4,50.2-79.9C126.1,79.1,191.9,27.4,268.9,8.1c83-20.8,175.1-0.9,242,52.4
c20.4,16.2,38.7,35.5,61.6,47.9c20,10.8,43.4,15.3,64.8,6.8c17.7-7.1,29.2-10.6,49.1-9.5c41.2,2.3,81.7,10.8,120.4,25.2
c1.6,0.6,3.1,1.2,4.7,1.8c100.7,38.5,187.3,115.1,232.3,213.5c1.2,2.6,2.3,5.2,3.5,7.9C1074.1,416.7,1083.8,490.1,1054.2,551.2z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="518.085" y1="173.9169" x2="518.085" y2="712.2469" gradientTransform="matrix(1 0 0 -1 0 819.9939)">
<stop offset="0" style="stop-color:#808080;stop-opacity:0.25"/>
<stop offset="0.54" style="stop-color:#808080;stop-opacity:0.12"/>
<stop offset="1" style="stop-color:#808080;stop-opacity:0.1"/>
</linearGradient>
<path class="st1" d="M55.4,107.7h925.3c6.9,0,12.5,5.6,12.5,12.5v513.4c0,6.9-5.6,12.5-12.5,12.5H55.4c-6.9,0-12.5-5.6-12.5-12.5
V120.2C42.9,113.3,48.5,107.7,55.4,107.7z"/>
<path class="st2" d="M56.9,115.3h922.4c6.9,0,12.5,5.6,12.5,12.5v504c0,6.9-5.6,12.5-12.5,12.5H56.9c-6.9,0-12.5-5.6-12.5-12.5v-504
C44.4,120.9,50,115.3,56.9,115.3z"/>
<path class="st2" d="M56.9,115.3h922.4c6.9,0,12.5,5.6,12.5,12.5v504c0,6.9-5.6,12.5-12.5,12.5H56.9c-6.9,0-12.5-5.6-12.5-12.5v-504
C44.4,120.9,50,115.3,56.9,115.3z"/>
<path class="st3" d="M987,109.2H49.2c-2.7,0-4.8,2.2-4.8,4.8v20.3h947.4v-20.3C991.8,111.4,989.7,109.3,987,109.2z"/>
<g id="_x36_c975d28-8d47-4ade-9154-b3b78f637b65">
<circle class="st2" cx="63.4" cy="121.8" r="6.5"/>
<circle class="st2" cx="80.9" cy="121.8" r="6.5"/>
<circle class="st2" cx="98.4" cy="121.8" r="6.5"/>
</g>
<rect x="122.5" y="181.7" class="st4" width="254.3" height="21.6"/>
<rect x="122.5" y="268.2" class="st5" width="791.4" height="332"/>
<path class="st6" d="M585.8,287.8h-13.5v-26.3c0-29.7-23.7-54.4-53.4-54.8c-30-0.3-54.5,23.7-54.8,53.7c0,0.1,0,0.3,0,0.4v27h-13.5
c-12.4,0-22.5,10.1-22.5,22.5v108.2c0,12.4,10.1,22.5,22.5,22.5h135.3c12.4,0,22.5-10.1,22.5-22.5V310.4
C608.3,298,598.2,287.9,585.8,287.8z M526.1,358.2V397c0,4.3-3.3,7.8-7.5,8.1c-4.4,0.2-8.1-3.2-8.3-7.5c0-0.1,0-0.2,0-0.4v-39
c-8.9-4.4-12.6-15.1-8.3-24.1c4.4-8.9,15.1-12.6,24.1-8.3s12.6,15.1,8.3,24.1C532.6,353.5,529.7,356.4,526.1,358.2L526.1,358.2z
M556.5,287.8h-76.7v-27.1c0-21.2,17.2-38.3,38.3-38.3s38.3,17.2,38.3,38.3L556.5,287.8z"/>
<rect x="833.7" y="236.2" class="st5" width="80.1" height="18.9"/>
</svg>
......@@ -27,35 +27,62 @@ class UserSettingsController extends AbstractController
if($request->request->get('save')) {
$formData = $request->request;
switch($request->request->get('save')) {
case "general":
if($formData->get('email') != "" && $formData->get('username')) {
$existingUser = $em->getRepository(User::class)->findOneBy(array('username' => $formData->get('username'), 'email' => $formData->get('email')));
if($existingUser != $this->getUser()) {
$user->setEmail($formData->get('email'));
$user->setUsername($formData->get('username'));
$this->addFlash('success', 'Saved successfully!');
} else {
$this->addFlash('error', 'Email or username are already in use!');
}
} else {
$this->addFlash('error', 'Email and username can\'t be empty!');
}
break;
case "login":
if($formData->get('newPassword') == $formData->get('newPasswordAgain')) {
$user->setPlainPassword($formData->get('newPassword'));
$this->addFlash('success', 'Saved successfully!');
} else {
$this->addFlash('error', 'Passwords must be equal!');
}
break;
if($formData->get('email') != "" && $formData->get('username')) {
$existingUser = $em->getRepository(User::class)->findOneBy(array('username' => $formData->get('username'), 'email' => $formData->get('email')));
if($existingUser != $user) {
$user->setEmail($formData->get('email'));
$user->setUsername($formData->get('username'));
$this->addFlash('success', 'Saved successfully!');
} else {
$this->addFlash('error', 'Email or username are already in use!');
}
} else {
$this->addFlash('error', 'Email and username can\'t be empty!');
}
$userManager->updateUser($user);
}
return $this->render('user/settings/index.html.twig', $data);
}
/**
* @Route("/settings/security", name="user.settings.security")
*/
public function userSettingsSecurity(Request $request, UserPasswordEncoderInterface $encoder, UserManagerInterface $userManager)
{
$user = $this->getUser();
$em = $this->getDoctrine()->getManager();
$data = [];
$data['my'] = $user;
if($request->request->get('save')) {
$formData = $request->request;
if($formData->get('newPassword') == $formData->get('newPasswordAgain')) {
$user->setPlainPassword($formData->get('newPassword'));
$this->addFlash('success', 'Saved successfully!');
} else {
$this->addFlash('error', 'Passwords must be equal!');
}
$userManager->updateUser($user);
}
return $this->render('user/settings.html.twig', $data);
return $this->render('user/settings/security.html.twig', $data);
}
/**
* @Route("/settings/login", name="user.settings.login")
*/
public function userSettingsLogin(Request $request)
{
$user = $this->getUser();
$em = $this->getDoctrine()->getManager();
$data = [];
return $this->render('user/settings/login.html.twig', $data);
}
}
{% extends 'base.html.twig' %}
{% block title %}Settings{% endblock %}
{% block content %}
<section class="section-settings">
{% for label, messages in app.flashes %}
{% for message in messages %}
<div class="flashbang flashbang-{{ label }}">
{{ message }}
</div>
{% endfor %}
{% endfor %}
<form action="" method="POST" class="settings-box">
<div class="settings-title">General</div>
<div class="settings-item">
<div class="settings-label">Email</div>
<div class="settings-input">
<input type="email" name="email" value="{{ my.email }}" required />
</div>
</div>
<div class="settings-item">
<div class="settings-label">Username</div>
<div class="settings-input">
<input type="text" name="username" value="{{ my.username }}" required />
</div>
</div>
<div class="settings-save">
<button>Save</button>
</div>
<input type="hidden" name="save" value="general" />
</form>
<form action="" method="POST" class="settings-box">
<div class="settings-title">Login</div>
<div class="settings-item">
<div class="settings-label">New password</div>
<div class="settings-input">
<input type="password" name="newPassword" value="" required />
</div>
</div>
<div class="settings-item">
<div class="settings-label">New password (again)</div>
<div class="settings-input">
<input type="password" name="newPasswordAgain" value="" required />
</div>
</div>
<div class="settings-save">
<button>Save</button>
</div>
<input type="hidden" name="save" value="login" />
</form>
</section>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ asset('assets/css/settings.css?v=' ~ date().timestamp) }}" />
{% endblock %}
\ No newline at end of file
{% extends 'base.html.twig' %}
{% block title %}Settings{% endblock %}
{% block content %}
<section class="section-settings">
<header>
<div class="title">Settings</div>
<div class="tabs">
<a class="tab {% if app.request.attributes.get('_route') == 'user.settings' %}active{% endif %}" href="{{ path('user.settings') }}">General</a>
<a class="tab {% if app.request.attributes.get('_route') == 'user.settings.security' %}active{% endif %}" href="{{ path('user.settings.security') }}">Security</a>
<a class="tab {% if app.request.attributes.get('_route') == 'user.settings.login' %}active{% endif %}" href="{{ path('user.settings.login') }}">Login</a>
</div>
</header>
{% for label, messages in app.flashes %}
{% for message in messages %}
<div class="flashbang flashbang-{{ label }}">
{{ message }}
</div>
{% endfor %}
{% endfor %}
{% block settings %}
{% endblock %}
</section>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ asset('assets/css/settings.css?v=' ~ date().timestamp) }}" />
{% endblock %}
\ No newline at end of file
{% extends 'user/settings/base.html.twig' %}
{% block settings %}
<form action="" method="POST" class="settings-box">
<div class="settings-title">General</div>
<div class="settings-item">
<div class="settings-label">Email</div>
<div class="settings-input">
<input type="email" name="email" value="{{ my.email }}" required />
</div>
</div>
<div class="settings-item">
<div class="settings-label">Username</div>
<div class="settings-input">
<input type="text" name="username" value="{{ my.username }}" required />
</div>
</div>
<div class="settings-save">
<button>Save</button>
</div>
</form>
{% endblock %}
\ No newline at end of file
{% extends 'user/settings/base.html.twig' %}
{% block settings %}
<div class="coming-soon">
<img src="{{ asset('assets/img/illustration-login.svg') }}" alt="Illustration" />
<div class="title">Coming Soon</div>
</div>
{% endblock %}
\ No newline at end of file
{% extends 'user/settings/base.html.twig' %}
{% block settings %}
<form action="" method="POST" class="settings-box">
<div class="settings-title">Login</div>
<div class="settings-item">
<div class="settings-label">New password</div>
<div class="settings-input">
<input type="password" name="newPassword" value="" required />
</div>
</div>
<div class="settings-item">
<div class="settings-label">New password (again)</div>
<div class="settings-input">
<input type="password" name="newPasswordAgain" value="" required />
</div>
</div>
<div class="settings-save">
<button>Save</button>
</div>
</form>
{% endblock %}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment