spacedeck-open/views/partials/account.html

176 lines
7.7 KiB
HTML

<header id="dialog-header" class="header" v-if="(active_view == 'account' && user)" v-cloak>
<div v-cloak class="header-left pull-left">
<a class="btn btn-dark btn-md btn-round btn-icon" href="/spaces">
<span class="icon icon-svg icon-sd6"></span>
</a>
<h5>Edit Account</h5>
</div>
<div class="header-right pull-right">
<a class="btn btn-dark btn-md btn-round btn-icon" href="/spaces">
<span class="icon icon-cross-0"></span>
</a>
</div>
</header>
<div class="dialog-freestanding dialog in" v-if="active_view == 'account' && user" v-cloak>
<div class="dialog-tabs" style="margin:auto">
<div class="dialog-tab" v-bind:class="{open:account=='profile'}" v-on:click="account='profile'"><span>[[__("profile_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:account=='language'}" v-on:click="account='language'"><span>[[__("language_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:account=='notifications'}" v-on:click="account='notifications'"><span>[[__("notifications_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:account=='password'}" v-on:click="account='password'"><span>[[__("password_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:account=='terminate'}" v-on:click="account='terminate'"><span>[[__("terminate_caption")]]</span></div>
</div>
<div class="dialog-section text-left">
<div class="collapse" v-bind:class="{in:account=='profile'}">
<div class="labels-inline relative" style="margin-bottom:40px">
<div class="form-group">
<div id="profile-image" class="img loaded pull-left" style="margin-right: 50px;">
<span id="profile-thumbnail" class="btn btn-xl btn-darken btn-icon btn-round" v-bind:style="{'background-image':'url('+user.avatar_thumb_uri+')'}">
<span class="icon icon-user" v-if="!user.avatar_thumb_uri"></span>
</span>
<span class="spinner"></span>
<button id="remove-profile-image" class="btn btn-xs btn-dark btn-round btn-icon" v-on:click="delete_user_avatar_image()" v-if="has_avatar_image(user)">
<span class="icon icon-cross-3"></span>
</button>
</div>
<div class="pull-left">
<div class="form-group">
<label class="file btn btn-md btn-darken" style="margin-right: 5px;">
<input type="file" v-on:change="save_user_avatar_image(this)">
<span v-if="!uploading_avatar">[[__("upload_avatar")]]</span>
<span v-if="uploading_avatar">[[__("uploading_avatar")]]</span>
</label>
<p class="message">[[__("avatar_dimensions")]]</p>
</div>
</div>
</div>
</div>
<div>
<div class="form-group">
<label class="label" >[[__("profile_name")]]</label>
<input type="text" id="user-nickname"
pattern=".{3,}"
required title="3 characters minimum"
class="input input-white no-b" data-i18n="[placeholder]account.username.input"
v-model="user.nickname" placeholder="Choose a username">
</div>
<div class="form-group">
<label class="label">[[__("profile_email")]]</label>
<input
id="new-email"
v-bind:class="{disabled: user.account_type=='google'}"
v-bind:disabled="user.account_type=='google'"
class="input input-white no-b"
type="email"
v-model="user.email"
v-on:change="user.email_changed=true"
placeholder="mail@example.com">
<button class="btn btn-md btn-dark" v-on:click=" save_user()" style="margin-top:20px">Save</button>
</div>
<!--div class="form-group">
<label class="label">Spacedeck.com Data Import</label>
<p v-if="!importables">No .ZIP files found in Spacedeck application folder.</p>
<ul>
<li v-for="f in importables">{{f}} <button v-on:click="start_zip_import(f)">Start Import</button></li>
</ul>
</div-->
</div>
</div>
<div class="collapse" v-bind:class="{in:account=='language'}">
<div class="modal-section">
<label class="radio" v-bind:class="{checked
: user.prefs_language=='en'}" v-on:click="save_user_language('en')">
<input type="radio" id="user-preferences_language" name="language" value="en"><span>English</span>
</label>
<hr/>
<label class="radio" v-bind:class="{checked: user.prefs_language=='de'}" v-on:click="save_user_language('de')">
<input type="radio" id="user-preferences_language" name="language" value="de"><span>Deutsch</span>
</label>
<hr/>
<label class="radio" v-bind:class="{checked: user.prefs_language=='fr'}" v-on:click="save_user_language('fr')">
<input type="radio" id="user-preferences_language" name="language" value="fr"><span>Français</span>
</label>
</div>
</div>
<div class="collapse" v-bind:class="{in:account=='notifications'}">
<div class="modal-section labels-inline">
<div class="form-group">
<label class="checkbox"
v-bind:class="{checked: user.prefs_email_notifications}"
v-on:click="account_save_user_notifications(!user.prefs_email_notifications);">
<span>[[__('notifications_option_chat')]]</span>
</label>
</div>
</div>
</div>
<div class="collapse" v-bind:class="{in:account=='password'}">
<h4>Change Password</h4>
<div class="modal-section labels-inline">
<div class="form-group">
<label class="label">[[__("current_password")]]</label>
<input id="current-password" class="input input-white no-b" v-model="password_change_current" type="password">
</div>
<div class="form-group">
<label class="label">[[__("new_password")]]</label>
<input id="new-password" class="input input-white no-b" v-model="password_change_new" type="password">
</div>
<div class="form-group">
<label class="label">[[__("verify_password")]]</label>
<input id="new-password-confirmation" class="input input-white no-b" v-model="password_change_new_confirmation" type="password">
</div>
<div class="center alert alert-danger" v-if="password_change_error">{{password_change_error}}</div>
</div>
<div class="modal-footer">
<button
class="btn btn-dark btn-md"
v-on:click="save_user_password(password_change_current, password_change_new, password_change_new_confirmation);" >
[[__("change_password")]]
</button>
</div>
</div>
<div class="collapse" v-bind:class="{in:account=='terminate'}">
<div class="">
<p>[[__("terminate_warning")]]</p>
<p>[[__("terminate_warning2")]]</p>
</div>
<div class="labels-inline">
<div class="form-group">
<label class="label">[[__("current_password")]]</label>
<input v-model="account_remove_password" class="input input-white no-b" type="password">
</div>
<div class="form-group">
<label class="label">[[__("terminate_reason")]]</label>
<textarea class="input input-white no-b" v-model="account_remove_feedback"></textarea>
<p class="message">[[__("terminate_reason_caption")]]</p>
</div>
<div class="center alert alert-danger" v-if="account_remove_error">{{account_remove_error}}</div>
</div>
<button class="btn btn-stroke-darken btn-md" v-on:click="remove_account(account_remove_password, account_remove_feedback)">Terminate Account</button>
</div>
</div>
</div>