Skip to content

Commit

Permalink
Validate profile username fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@HebaruSan
HebaruSan committed Aug 5, 2021
1 parent 07a8111 commit 8274ecd
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 20 deletions.
16 changes: 16 additions & 0 deletions frontend/coffee/profile.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,3 +102,19 @@ $('#check-all-updates' ).on('click', () -> $('[id^=updates-]' ).prop('ch
$('#uncheck-all-updates' ).on('click', () -> $('[id^=updates-]' ).prop('checked', false))
$('#check-all-autoupdates' ).on('click', () -> $('[id^=autoupdates-]').prop('checked', true))
$('#uncheck-all-autoupdates').on('click', () -> $('[id^=autoupdates-]').prop('checked', false))

$('#save-changes').on 'click', () ->
allValid = true
for fieldSelector in ['#kerbalx', '#github', '#twitter', '#reddit', '#irc-nick']
field = $(fieldSelector)
group = field.parents('.form-group')
if /^[A-Za-z0-9._-]*$/.test(field.val())
group.removeClass 'has-error'
else
allValid = false
group.addClass 'has-error'
if allValid
$('#overall-error').hide()
else
$('#overall-error').show()
return allValid
8 changes: 8 additions & 0 deletions frontend/styles/mod.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,3 +206,11 @@
.row.following-mod:nth-of-type(odd) {
background-color: #f5f5f5;
}

.help-block {
display: none;
}

.form-group.has-error .help-block {
display: block;
}
51 changes: 31 additions & 20 deletions templates/profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,20 @@
<h1 title="{{ profile.username }}">{{ profile.username }}<small> edit your profile</small></h1>
</div>
<div class="col-md-2">
<input type="submit" value="Save Changes" class="btn btn-primary btn-block" />
<input type="submit" id="save-changes" value="Save Changes" class="btn btn-primary btn-block" />
</div>
<div class="col-md-2">
<a href="/profile/{{ profile.username }}" class="btn btn-default btn-block">Cancel</a>
</div>
</div>
</div>
<div id="overall-error" class="container lead" style="display:none;">
<div class="row">
<div class="alert alert-danger">
Invalid values found! Fix errors below and try again.
</div>
</div>
</div>
<div class="info-list">
<div class="container">
<div class="row">
Expand All @@ -44,11 +51,11 @@ <h1 title="{{ profile.username }}">{{ profile.username }}<small> edit your profi
<span class="glyphicon glyphicon-link"></span>
</div>
<div class="timeline-label">
<h2 style="margin-bottom: -20px;">
<h2 style="margin-bottom: -20px;" class="form-group">
<span class="text-muted">
KSP Forums:
KSP forum link:
</span>
<input type="text" class="form-control" name="ksp-forum-user" value="{%if profile.forumUsername %}{{ profile.forumUsername }}{%endif%}">
<input type="text" class="form-control" id="ksp-forum-user" name="ksp-forum-user" value="{%if profile.forumUsername %}{{ profile.forumUsername }}{%endif%}">
</h2>
</div>
</div>
Expand All @@ -59,11 +66,12 @@ <h2 style="margin-bottom: -20px;">
<span class="glyphicon glyphicon-link"></span>
</div>
<div class="timeline-label">
<h2 style="margin-bottom: -10px;">
<h2 style="margin-bottom: -10px;" class="form-group">
<span class="text-muted">
KerbalX:
KerbalX username:
</span>
<input type="text" class="form-control" name="kerbalx" value="{%if profile.kerbalxUsername%}{{profile.kerbalxUsername}}{%endif%}" />
<input type="text" class="form-control" id="kerbalx" name="kerbalx" value="{%if profile.kerbalxUsername%}{{profile.kerbalxUsername}}{%endif%}" />
<span class="help-block">Just enter your alphanumeric username</span>
</h2>
</div>
</div>
Expand All @@ -74,11 +82,12 @@ <h2 style="margin-bottom: -10px;">
<span class="glyphicon glyphicon-link"></span>
</div>
<div class="timeline-label">
<h2 style="margin-bottom: -10px;">
<h2 style="margin-bottom: -10px;" class="form-group">
<span class="text-muted">
GitHub:
GitHub username:
</span>
<input type="text" class="form-control" name="github" value="{%if profile.githubUsername%}{{profile.githubUsername}}{%endif%}" />
<input type="text" class="form-control" id="github" name="github" value="{%if profile.githubUsername%}{{profile.githubUsername}}{%endif%}" />
<span class="help-block">Just enter your alphanumeric username</span>
</h2>
</div>
</div>
Expand All @@ -89,11 +98,12 @@ <h2 style="margin-bottom: -10px;">
<span class="glyphicon glyphicon-link"></span>
</div>
<div class="timeline-label">
<h2 style="margin-bottom: -10px;">
<h2 style="margin-bottom: -10px;" class="form-group">
<span class="text-muted">
Twitter:
Twitter username:
</span>
<input type="text" class="form-control" name="twitter" value="{%if profile.twitterUsername%}{{profile.twitterUsername}}{%endif%}" />
<input type="text" class="form-control" id="twitter" name="twitter" value="{%if profile.twitterUsername%}{{profile.twitterUsername}}{%endif%}" />
<span class="help-block">Just enter your alphanumeric username</span>
</h2>
</div>
</div>
Expand All @@ -104,12 +114,13 @@ <h2 style="margin-bottom: -10px;">
<span class="glyphicon glyphicon-link"></span>
</div>
<div class="timeline-label">
<h2 style="margin-top: -10px; margin-bottom: 0;">
<h2 style="margin-top: -10px; margin-bottom: 0;" class="form-group">
<span class="text-muted">
Reddit:
Reddit username:
</span>
<input type="text" class="form-control" name="reddit"
<input type="text" class="form-control" id="reddit" name="reddit"
value="{% if profile.redditUsername %}{{ profile.redditUsername }}{% endif %}" />
<span class="help-block">Just enter your alphanumeric username</span>
</h2>
</div>
</div>
Expand All @@ -120,13 +131,13 @@ <h2 style="margin-top: -10px; margin-bottom: 0;">
<span class="glyphicon glyphicon-link"></span>
</div>
<div class="timeline-label">
<h2 style="margin-top: -20px; padding-bottom: 10px;">
<h2 style="margin-top: -20px; padding-bottom: 10px;" class="form-group">
<span class="text-muted">
IRC:
IRC nickname:
</span>
<input type="text" class="form-control" name="irc-nick" value="{%if profile.ircNick%}{{ profile.ircNick }}{%endif%}" />
<input type="text" class="form-control" id="irc-nick" name="irc-nick" value="{%if profile.ircNick%}{{ profile.ircNick }}{%endif%}" />
<span class="help-block">Just enter your alphanumeric nickname</span>
</h2>

</div>
</div>
</div>
Expand Down

0 comments on commit 8274ecd

Please sign in to comment.