103 lines
4.8 KiB
Text
103 lines
4.8 KiB
Text
<%= javascript_packs_with_chunks_tag "colorPreview", "validateFileInputs", "stickySaveFooter", defer: true %>
|
|
|
|
<%= render "users/additional_authentication" %>
|
|
|
|
<% if SiteConfig.dev_to? %>
|
|
<%# @forem/oss Temporary disabling of overly DEV-specialized link. %>
|
|
<%# We should create a generalized version of the badge page, including a permanent proxied path for the badge image for hotlinking. %>
|
|
<div class="crayons-card mb-6 p-6 grid gap-6">
|
|
<div class="flex items-center">
|
|
<a href="<%= user_url(current_user) || "#" %>" aria-label="Go to your profile page" class="mr-2">
|
|
<img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="<%= community_name %> badge" height="32" width="32" class="dev-badge crayons-icon" />
|
|
</a>
|
|
<p>Add the <%= community_name %> badge to your personal site. <a href="/p/badges">Click here for the code</a>.</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= form_with(url: profile_path(@user.profile_id), method: "put", html: { class: "sticky-footer-form" }) do |f| %>
|
|
|
|
<div class="crayons-card mb-6 grid grid-flow-row gap-6 p-6">
|
|
<h2>User</h2>
|
|
<div class="crayons-field">
|
|
<%= f.label :email, class: "crayons-field__label" %>
|
|
<%= f.text_field "user[email]", class: "crayons-textfield", placeholder: "john.doe@example.com", value: @user.email %>
|
|
</div>
|
|
|
|
<div class="crayons-field">
|
|
<%= f.label :username, class: "crayons-field__label" %>
|
|
<%= f.text_field "user[username]", maxlength: 30, class: "crayons-textfield", placeholder: "johndoe", value: @user.username %>
|
|
</div>
|
|
|
|
<div class="crayons-field">
|
|
<%= f.label :profile_image, class: "crayons-field__label" %>
|
|
|
|
<div class="flex items-center">
|
|
<% if @user.profile_image_url.present? %>
|
|
<span class="crayons-avatar crayons-avatar--xl mr-2"><img alt="<%= @user.username %> profile image" src="<%= Images::Profile.call(@user.profile_image_url, length: 50) %>" class="crayons-avatar__image" /></span>
|
|
<%= f.file_field "user[profile_image]", accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<% ProfileFieldGroup.non_empty_groups.each do |group| %>
|
|
<div class="crayons-card mb-6 grid grid-flow-row gap-6 p-6">
|
|
<h2><%= group.name %></h2>
|
|
<% if group.description.present? %>
|
|
<div class="color-base-60"><%= group.description %></div>
|
|
<% end %>
|
|
|
|
<% group.profile_fields.each do |field| %>
|
|
<div class="crayons-field <%= "crayons-field--checkbox" if field.input_type == "check_box" %>">
|
|
<% if field["input_type"] == "check_box" %>
|
|
<%= f.public_send(field["input_type"], "profile[#{field.attribute_name}]", checked: @user.profile.data[field.attribute_name], class: "crayons-checkbox") %>
|
|
<label class="crayons-field__label" for="<%= "profile[#{field.attribute_name}]" %>">
|
|
<%= field.label %>
|
|
</label>
|
|
<% elsif field["input_type"] == "color_field" %>
|
|
<label class="crayons-field__label" for="<%= "profile[#{field.attribute_name}]" %>">
|
|
<%= field.label %>
|
|
</label>
|
|
<div class="flex items-center w-100 m:w-50">
|
|
<%= f.public_send("text_field", "profile[#{field.attribute_name}]", value: @user.profile.data[field.attribute_name], placeholder: field["placeholder_text"], class: "crayons-textfield js-color-field") %>
|
|
<%= f.public_send(field["input_type"], "profile[#{field.attribute_name}]", value: @user.profile.data[field.attribute_name], class: "crayons-color-selector js-color-field ml-2") %>
|
|
</div>
|
|
<% else %>
|
|
<label class="crayons-field__label" for="<%= "profile[#{field.attribute_name}]" %>">
|
|
<%= field.label %>
|
|
</label>
|
|
<%= f.public_send(field["input_type"], "profile[#{field.attribute_name}]", value: @user.profile.data[field.attribute_name], placeholder: field["placeholder_text"], class: "crayons-textfield") %>
|
|
<% end %>
|
|
<% if field.description.present? %>
|
|
<p class="crayons-field__description"><%= field.description %></p>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="save-footer crayons-card mb-6 grid p-6">
|
|
<button type="submit" class="crayons-btn">Save Profile Information</button>
|
|
</div>
|
|
<% end %>
|
|
|
|
<script>
|
|
var pickers = document.querySelectorAll('.js-color-field');
|
|
|
|
function colorValueChange(e) {
|
|
var field = e.target;
|
|
var sibling = '';
|
|
if (field.nextElementSibling) {
|
|
sibling = field.nextElementSibling;
|
|
} else {
|
|
sibling = field.previousElementSibling;
|
|
}
|
|
|
|
sibling.value = field.value;
|
|
}
|
|
|
|
pickers.forEach(function(picker) {
|
|
picker.addEventListener('change', colorValueChange);
|
|
});
|
|
</script>
|