Jason Zimdars
47 lines
2.2 KiB
Plaintext
47 lines
2.2 KiB
Plaintext
<% @page_title = "Edit your profile" %>
|
|
|
|
<% content_for :header do %>
|
|
<nav>
|
|
<%= link_to user_path(@user), class: "btn flex-item-justify-start" do %>
|
|
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
|
|
<span class="for-screen-reader">Back</span>
|
|
<% end %>
|
|
</nav>
|
|
<% end %>
|
|
|
|
<div class="panel shadow center">
|
|
<div class="flex flex-column gap txt-medium">
|
|
<div class="avatar txt-xx-large center fill-white">
|
|
<%= image_tag user_avatar_path(@user), alt: "Profile avatar for #{@user.name}", class: "avatar", size: 128 %>
|
|
</div>
|
|
|
|
<%= form_with model: @user, method: :patch, class: "flex flex-column gap", data: { controller: "form" } do |form| %>
|
|
<div class="flex align-center gap">
|
|
<%= translation_button :user_name %>
|
|
<label class="flex align-center gap input input--actor">
|
|
<%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true } %>
|
|
<%= image_tag "person.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
|
|
</label>
|
|
</div>
|
|
<div class="flex align-center gap">
|
|
<%= translation_button :email_address %>
|
|
<label class="flex align-center gap input input--actor">
|
|
<%= form.email_field :email_address, class: "input full-width", autocomplete: "username", placeholder: "Email address", required: true %>
|
|
<%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
|
|
</label>
|
|
</div>
|
|
<div class="flex align-center gap">
|
|
<%= translation_button :password %>
|
|
<label class="flex align-center gap input input--actor">
|
|
<%= form.password_field :password, class: "input full-width", autocomplete: "new-password", placeholder: "Password", required: false, maxlength: 72 %>
|
|
<%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
|
|
</label>
|
|
</div>
|
|
<button type="submit" id="log_in" class="btn btn--reversed center">
|
|
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
|
|
<span class="for-screen-reader">Sign in</span>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|