mirror of
https://github.com/ClaperCo/Claper.git
synced 2025-12-15 19:37:53 +01:00
312 lines
12 KiB
Plaintext
312 lines
12 KiB
Plaintext
<div class="mx-3 md:max-w-3xl lg:max-w-5xl md:mx-auto">
|
|
<div class="border-b border-gray-200 py-4 sm:flex sm:items-center sm:justify-between">
|
|
<div class="flex-1 min-w-0">
|
|
<h1 class="text-2xl font-medium leading-6 text-gray-900 sm:truncate">
|
|
{gettext("My account")}
|
|
</h1>
|
|
</div>
|
|
<div class="mt-4 flex sm:mt-0 sm:ml-4"></div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<%= if @live_action in [:edit_email] do %>
|
|
<.live_component
|
|
module={ClaperWeb.ModalComponent}
|
|
class="hidden"
|
|
id="modal-wrapper"
|
|
title={@page_title}
|
|
description={@page_description}
|
|
return_to={~p"/users/settings"}
|
|
>
|
|
<div>
|
|
<.form
|
|
:let={f}
|
|
for={@email_changeset}
|
|
phx-submit="save"
|
|
id="update_email"
|
|
class="mt-5 md:flex md:items-end"
|
|
>
|
|
{hidden_input(f, :action, name: "action", value: "update_email")}
|
|
|
|
<ClaperWeb.Component.Input.email
|
|
form={f}
|
|
key={:email}
|
|
name={gettext("Email")}
|
|
required="true"
|
|
/>
|
|
|
|
{submit(gettext("Save"),
|
|
phx_disable_with: "Saving...",
|
|
class:
|
|
"mt-2 w-full h-14 inline-flex transition-all items-center justify-center px-4 py-2 shadow-sm font-medium rounded-md text-white bg-black hover:bg-primary-500 md:mt-0 md:ml-3 md:w-auto md:text-sm"
|
|
)}
|
|
</.form>
|
|
</div>
|
|
</.live_component>
|
|
<% end %>
|
|
|
|
<%= if @live_action in [:edit_password] do %>
|
|
<.live_component
|
|
module={ClaperWeb.ModalComponent}
|
|
class="hidden"
|
|
id="modal-wrapper"
|
|
title={@page_title}
|
|
description={@page_description}
|
|
return_to={~p"/users/settings"}
|
|
>
|
|
<div>
|
|
<.form
|
|
:let={f}
|
|
for={@password_changeset}
|
|
phx-submit="save"
|
|
id="update_password"
|
|
class="mt-5 md:flex md:items-end gap-x-2"
|
|
>
|
|
{hidden_input(f, :action, name: "action", value: "update_password")}
|
|
|
|
<ClaperWeb.Component.Input.password
|
|
form={f}
|
|
key={:current_password}
|
|
name={gettext("Current password")}
|
|
required="true"
|
|
/>
|
|
<ClaperWeb.Component.Input.password
|
|
form={f}
|
|
key={:password}
|
|
name={gettext("New password")}
|
|
required="true"
|
|
/>
|
|
|
|
{submit(gettext("Save"),
|
|
phx_disable_with: "Saving...",
|
|
class:
|
|
"mt-2 w-full h-14 inline-flex transition-all items-center justify-center px-4 py-2 shadow-sm font-medium rounded-md text-white bg-black hover:bg-primary-500 md:mt-0 md:ml-3 md:w-auto md:text-sm"
|
|
)}
|
|
</.form>
|
|
</div>
|
|
</.live_component>
|
|
<% end %>
|
|
|
|
<%= if @live_action in [:set_password] do %>
|
|
<.live_component
|
|
module={ClaperWeb.ModalComponent}
|
|
class="hidden"
|
|
id="modal-wrapper"
|
|
title={@page_title}
|
|
description={@page_description}
|
|
return_to={~p"/users/settings"}
|
|
>
|
|
<div>
|
|
<.form
|
|
:let={f}
|
|
for={@password_changeset}
|
|
phx-submit="save"
|
|
id="set_password"
|
|
class="mt-5 md:flex md:items-end gap-x-2"
|
|
>
|
|
{hidden_input(f, :action, name: "action", value: "set_password")}
|
|
|
|
<ClaperWeb.Component.Input.password
|
|
form={f}
|
|
key={:password}
|
|
name={gettext("New password")}
|
|
required="true"
|
|
/>
|
|
|
|
<ClaperWeb.Component.Input.password
|
|
form={f}
|
|
key={:password_confirmation}
|
|
name={gettext("Confirm password")}
|
|
required="true"
|
|
/>
|
|
|
|
{submit(gettext("Save"),
|
|
phx_disable_with: "Saving...",
|
|
class:
|
|
"mt-2 w-full h-14 inline-flex transition-all items-center justify-center px-4 py-2 shadow-sm font-medium rounded-md text-white bg-black hover:bg-primary-500 md:mt-0 md:ml-3 md:w-auto md:text-sm"
|
|
)}
|
|
</.form>
|
|
</div>
|
|
</.live_component>
|
|
<% end %>
|
|
|
|
<div class="overflow-hidden sm:rounded-lg">
|
|
<div class="py-5">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
{gettext("Personal informations")}
|
|
</h3>
|
|
<p class="mt-1 max-w-2xl text-sm text-gray-500">
|
|
{gettext("Your personal informations to access your account")}
|
|
</p>
|
|
</div>
|
|
<div class="border-t border-gray-200 py-5 sm:p-0">
|
|
<dl class="sm:divide-y sm:divide-gray-200">
|
|
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-2 sm:gap-4">
|
|
<dt class="text-sm font-medium text-gray-500">
|
|
{gettext("Email address")}
|
|
</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
|
<span class="grow">{@current_user.email}</span>
|
|
<span :if={!@is_external_user} class="ml-4 shrink-0">
|
|
<.link
|
|
patch={~p"/users/settings/edit/email"}
|
|
class="rounded-md font-medium text-purple-600 hover:text-purple-500"
|
|
>
|
|
{gettext("Change")}
|
|
</.link>
|
|
</span>
|
|
</dd>
|
|
|
|
<dt :if={!@is_external_user} class="text-sm font-medium text-gray-500">
|
|
{gettext("Password")}
|
|
</dt>
|
|
<dd :if={!@is_external_user} class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
|
<span class="grow">********</span>
|
|
<span class="ml-4 shrink-0">
|
|
<.link
|
|
patch={~p"/users/settings/edit/password"}
|
|
class="rounded-md font-medium text-purple-600 hover:text-purple-500"
|
|
>
|
|
{gettext("Change")}
|
|
</.link>
|
|
</span>
|
|
</dd>
|
|
|
|
<dt :if={@is_external_user} class="text-sm font-medium text-gray-500">
|
|
{gettext("Accounts linked")}
|
|
</dt>
|
|
<dd class="text-sm text-gray-900 sm:col-span-2">
|
|
<%= for account <- @oidc_accounts do %>
|
|
<div class="text-sm text-gray-900 bg-white rounded-md py-2 px-4 shadow-base flex gap-x-2 items-center justify-start mt-2 sm:mt-0 mb-2">
|
|
<img src="/images/icons/openid.png" class="w-5" />
|
|
<span class="grow flex items-center gap-x-2">
|
|
<span>{account.provider}</span>
|
|
<div
|
|
:if={account.organization}
|
|
class="text-gray-500 text-xs flex items-center gap-x-1"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
class="h-3"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M1.75 2a.75.75 0 0 0 0 1.5H2v9h-.25a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v1.5c0 .414.336.75.75.75h.5a.75.75 0 0 0 .75-.75V3.5h.25a.75.75 0 0 0 0-1.5h-7.5ZM3.5 5.5A.5.5 0 0 1 4 5h.5a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5v-.5Zm.5 2a.5.5 0 0 0-.5.5v.5A.5.5 0 0 0 4 9h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5H4Zm2-2a.5.5 0 0 1 .5-.5H7a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-.5.5h-.5A.5.5 0 0 1 6 6v-.5Zm.5 2A.5.5 0 0 0 6 8v.5a.5.5 0 0 0 .5.5H7a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5h-.5ZM11.5 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.75a.75.75 0 0 0 0-1.5H14v-5h.25a.75.75 0 0 0 0-1.5H11.5Zm.5 1.5h.5a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H12a.5.5 0 0 1-.5-.5V8a.5.5 0 0 1 .5-.5Zm0 2.5a.5.5 0 0 0-.5.5v.5a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5v-.5a.5.5 0 0 0-.5-.5H12Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
|
|
<span>{account.organization}</span>
|
|
</div>
|
|
</span>
|
|
<span :if={@allow_unlink_external_provider}>
|
|
<button
|
|
phx-click="unlink"
|
|
phx-value-issuer={account.issuer}
|
|
data-confirm={gettext("Are you sure you want to unlink this account?")}
|
|
class="font-medium text-red-600 hover:text-red-500"
|
|
>
|
|
{gettext("Unlink")}
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
<%= for account <- @lti_accounts do %>
|
|
<div class="text-sm text-gray-900 bg-white rounded-md py-2 px-4 shadow-base flex gap-x-2 items-center justify-start mb-2">
|
|
<img src="/images/icons/lms.png" class="w-8" />
|
|
<span class="grow">
|
|
LMS <span class="text-gray-500 text-xs">#{account.registration_id}</span>
|
|
</span>
|
|
<span :if={@allow_unlink_external_provider} class="ml-4 shrink-0">
|
|
<button
|
|
phx-click="unlink"
|
|
phx-value-registration_id={account.registration_id}
|
|
data-confirm={gettext("Are you sure you want to unlink this account?")}
|
|
class="font-medium text-red-600 hover:text-red-500"
|
|
>
|
|
{gettext("Unlink")}
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
<div>
|
|
<div class="py-5">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
{gettext("Preferences")}
|
|
</h3>
|
|
<p class="mt-1 max-w-2xl text-sm text-gray-500">
|
|
{gettext("Customize your account")}
|
|
</p>
|
|
</div>
|
|
<div class="border-t border-gray-200 py-5 sm:p-0">
|
|
<dl class="sm:divide-y sm:divide-gray-200">
|
|
<div class="mt-5">
|
|
<.form :let={f} for={@preferences_changeset} phx-change="save">
|
|
{hidden_input(f, :action, name: "action", value: "update_preferences")}
|
|
<ClaperWeb.Component.Input.select
|
|
form={f}
|
|
fieldClass="w-auto! bg-white"
|
|
labelClass="text-sm font-medium text-gray-500"
|
|
array={
|
|
[
|
|
{"Deutsch", "de"},
|
|
{"English", "en"},
|
|
{"Español", "es"},
|
|
{"Français", "fr"},
|
|
{"Hungarian", "hu"},
|
|
{"Italiano", "it"},
|
|
{"Latvian", "lv"},
|
|
{"Nederlands", "nl"}
|
|
]
|
|
|> Enum.filter(fn {_name, code} ->
|
|
code in Application.get_env(:claper, :languages, [
|
|
"en",
|
|
"fr",
|
|
"es",
|
|
"it",
|
|
"de"
|
|
])
|
|
end)
|
|
}
|
|
key={:locale}
|
|
name={gettext("Language")}
|
|
/>
|
|
</.form>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<div :if={!@is_external_user}>
|
|
<div class="py-5">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
{gettext("Danger zone")}
|
|
</h3>
|
|
<p class="mt-1 max-w-2xl text-sm text-gray-500">
|
|
{gettext("Be careful, these actions are irreversible")}
|
|
</p>
|
|
</div>
|
|
<div class="border-t border-gray-200 py-5 sm:p-0">
|
|
<dl class="sm:divide-y sm:divide-gray-200">
|
|
<div class="my-5">
|
|
{link(gettext("Delete account"),
|
|
to: ~p"/users/register/delete",
|
|
method: :delete,
|
|
"data-confirm":
|
|
gettext("All your events and files will be permanently deleted, are you sure?"),
|
|
class:
|
|
"w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
|
|
)}
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|