Skip to content

Commit

Permalink
make prototype profile setup page
Browse files Browse the repository at this point in the history
  • Loading branch information
Not-A-Normal-Robot committed May 17, 2024
1 parent c6fae89 commit b187bfc
Show file tree
Hide file tree
Showing 3 changed files with 196 additions and 2 deletions.
39 changes: 37 additions & 2 deletions auth/profile_setup.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,47 @@ <h1>
<a class="navlink" href="https://discord.gg/f9pUvkh">Discord</a>
</nav>

<section class="content">
<h1>Under Construction</h1>
<noscript>
<section class="content">
<h1>Set up your profile</h1>
<p>
You cannot set up your profile with JavaScript disabled. <br>
Please enable JavaScript to continue.
<!--
There is no accessibility risk in asking the user to enable JavaScript here.
You'd need JavaScript enabled to access Discord to even sign up in the first place.
-->
</p>
</section>
</noscript>

<section class="content hide-no-script">
<h1 class="center-text">Set up your profile</h1>
<br>
<form id="profile-setup">
<label for="pfp-input">Profile Picture</label>
<menu class="pfp">
<img alt="Profile picture preview" class="" id="pfp-preview">
<input type="file" id="pfp-input" name="pfp">
</menu>
<br>
<label for="username">
Username <span class="required" title="Required">*</span>
</label>
<input type="text" id="username" name="username" required maxlength="30" placeholder="Username">
<span class="char-count" for="username"></span>
<label for="bio">Bio</label>
<textarea class="" id="bio" name="bio" maxlength="400" placeholder="Write some text about yourself"></textarea>
<span class="char-count" for="bio"></span>
<button type="submit">
Confirm
</button>
</form>
</section>
</div>


<script src="/js/background.js"></script>
<script src="/js/profile-setup.js"></script>
</body>
</html>
107 changes: 107 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,111 @@ small.description {
}
/* #endregion */

/* #region Auth-related pages */
form#profile-setup {
display: flex;
flex-direction: column;
gap: 0.5em;
max-width: 40em;
margin: auto;
padding: 1rem;
border: 1px solid lime;
border-radius: 0.5rem;
background-color: rgba(0,100,0,0.3);
}

form#profile-setup menu.pfp {
display: flex;
flex-direction: row;
gap: 0.5em;
justify-content: space-evenly;
align-items: center;
}
form#profile-setup menu.pfp img {
width: 10em;
height: 10em;
border: 1px solid lime;
}

form#profile-setup input[type="text"] {
padding: 0.5em;
box-shadow: 0 0 1em 0.2em rgba(0,255,0,0.1);
border: 0 none transparent;
border-bottom: 0.125em solid lime;
outline-offset: 0.125em;
outline: 0.15em dotted transparent;
background-color: black;
color: white;
transition: all 250ms;
font-family: techmino-proportional, sans-serif;
font-size: 1em;
}
form#profile-setup input[type="text"]:hover {
outline-color: rgba(255,255,0,0.4);
border-color: yellow;
}
form#profile-setup input[type="text"]:focus {
outline-color: orange;
border-color: orange;
box-shadow: 0 0 3em 0.3em rgba(255,165,0,0.3);
}

form#profile-setup textarea#bio {
padding: 0.5em;
box-shadow: 0 0 1em 0.2em rgba(0,255,0,0.1);
border: 0 none transparent;
border-bottom: 0.125em solid lime;
outline-offset: 0.125em;
outline: 0.15em dotted transparent;
background-color: black;
color: white;
transition: background-color 250ms, border-color 250ms, outline-color 250ms;
resize: none;
height: 10em;
font-family: techmino-proportional, sans-serif;
font-size: 1em;
}
form#profile-setup textarea#bio:hover {
outline: 0.15em dotted rgba(255,255,0,0.4);
border-color: yellow;
}
form#profile-setup textarea#bio:focus {
outline: 0.15em dotted orange;
border-color: orange;
box-shadow: 0 0 3em 0.3em rgba(255,165,0,0.3);
}

form#profile-setup span.char-count {
font-size: 0.8em;
color: rgba(255,255,255,0.8);
text-align: right;
}

form#profile-setup button[type="submit"] {
margin-top: 2em;
padding: 0.5em;
box-shadow: 0 0 1em 0.2em rgba(0,255,0,0.1);
border: 0.125em solid lime;
border-radius: 0.5em;
background-color: rgba(0,100,0,0.5);
color: white;
transition: all 250ms;
font-family: techmino-proportional, sans-serif;
font-size: 1em;
cursor: pointer;
}
form#profile-setup button[type="submit"]:hover {
background-color: rgba(100,100,0,0.8);
border-color: yellow;
box-shadow: 0 0 1em 0.2em rgba(255,255,0,0.3);
}
form#profile-setup button[type="submit"]:focus {
background-color: rgba(100,60,0,0.8);
border-color: orange;
box-shadow: 0 0 3em 0.3em rgba(255,165,0,0.3);
}
/* #endregion */

/* #region Misc */
.hide {
display: none;
Expand All @@ -375,4 +480,6 @@ small.description {
.center-text {
text-align: center;
}

span.required {color: red}
/* #endregion */
52 changes: 52 additions & 0 deletions js/profile-setup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{ // Counter for character count
for(const counter of document.getElementsByClassName('char-count')) {
const associatedId = counter.getAttribute('for');
if(!associatedId) {
console.error('No associated input found for: ', counter);
continue;
}

const associatedInput = document.getElementById(associatedId);
if(!associatedInput) {
console.error('No input found with id: ', associatedId);
continue;
}

associatedInput.addEventListener('input', () => updateCounter(counter));
updateCounter(counter);
}

function updateCounter(element) {
const associatedId = element.getAttribute('for');
if(!associatedId) {
console.error('No associated input found for: ', element);
return;
}

const associatedInput = document.getElementById(associatedId);
if(!associatedInput) {
console.error('No input found with id: ', associatedId);
return;
}

const maxChars = Number(associatedInput.getAttribute('maxlength') ?? Infinity);
const currentChars = associatedInput.value.length;
element.textContent = `${currentChars} / ${maxChars}`;
}
}
{ // Handle profile image upload
const profileImageInput = document.getElementById('pfp-input');
profileImageInput?.addEventListener('change', () => {
const file = profileImageInput.files[0];
if(!file) return;

const reader = new FileReader();
reader.onload = () => {
const image = document.getElementById('pfp-preview');
if(image) {
image.src = reader.result;
}
};
reader.readAsDataURL(file);
});
}

0 comments on commit b187bfc

Please sign in to comment.