123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- <!DOCTYPE html>
- <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org" layout:decorate="~{layout/layout}">
- <head>
- <title>User Control Panel</title>
- <link rel="stylesheet" media="screen" type="text/css" href="/libs/colorpicker/css/colorpicker.css" />
- <link rel="stylesheet" type="text/css" href="/css/user/control-panel.css" />
- <script src="/libs/colorpicker/js/colorpicker.js"></script>
- <script src="/libs/md5.js"></script>
- <script src="/js/user/index.js" defer></script>
- </head>
- <body>
- <div layout:fragment="content" class="ui container" id="app">
- <br />
- <div>
- <!-- Username / Title -->
- <h1 class="ui header">
- <i v-if="user.administrator" class="shield alternate icon tooltip red" data-content="Administrator"></i>
- <i v-if="user.moderator" class="shield alternate icon tooltip green" data-content="Moderator"></i>
- <div class="content">
- {{ user.username }}
- <span style="font-size: 0.7em; color: #777;" v-if="user.name"> ( {{ user.name }} ) </span>
- </div>
- </h1>
- <!-- END Username / Title -->
- <!-- Summary -->
- <div class="ui message">
- <div class="ui stackable four column grid">
- <div class="row">
- <div class="column">
- <div class="ui yellow mini horizontal statistic">
- <div class="value">
- {{ registerDuration }}
- </div>
- <div class="label">
- Days Registered
- </div>
- </div>
- </div>
- <div class="column">
- <div class="ui yellow mini horizontal statistic">
- <div class="value">
- {{ pageStats.pageCount }}
- </div>
- <div class="label">
- Store Pages
- </div>
- </div>
- </div>
- <div class="column">
- <div class="ui yellow mini horizontal statistic">
- <div class="value">
- {{ pageStats.reviewCount }}
- </div>
- <div class="label">
- Reviews Received
- </div>
- </div>
- </div>
- <div class="column">
- <div class="ui yellow mini horizontal statistic">
- <div class="value">
- {{ pageStats.averateRating.toFixed(2) }}
- </div>
- <div class="label">
- Average Rating
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- END Summary -->
- <!-- Badges -->
- <h2 class="ui dividing header"><a id="badges">Badges</a></h2>
- <p>
- <span v-if="user.badges != null && user.badges.length > 0" class="ui black label tooltip" data-variation="inverted" v-for="badge in user.badges" :data-content="badge.description"><i :class="badge.icon"></i>{{ badge.name }}</span>
- <span v-if="user.badges == null || user.badges.length == 0">None</span>
- </p>
- <!-- END badges -->
- <!-- Account -->
- <h2 class="ui dividing header"><a id="account">Account</a></h2>
- <div class="ui icon message" v-if="validation">
- <i class="exclamation circle icon"></i>
- <span v-if="validation.validationType === 'Email'">Your request to change your email address requires validation.</span>
- <span v-if="validation.validationType === 'Password'">Your request to change your password requires validation.</span>
- <span v-if="validation.validationType === 'Account'">Your account requires validation.</span>
- </div>
- <table class="ui compact very basic table">
- <tbody>
- <tr v-if="validation">
- <td class="collapsing">Validation Code</td>
- <td>
- <div class="ui input">
- <input id="validationCode" type="text" />
- </div>
- </td>
- <td>
- <div class="ui icon buttons">
- <button @click="validateCode()" class="ui black button tooltip" data-content="Validate Code">
- <i class="check icon"></i>
- </button>
- <button @click="resendValidation()" class="ui black button tooltip" data-content="Re-Send Email">
- <i class="sync icon"></i>
- </button>
- <button @click="cancelValidationRequest()" v-if="validation != null && validation.validationType != 'Account'" class="ui black button tooltip" data-content="Cancel Validation Request">
- Cancel
- </button>
- </div>
- </td>
- </tr>
- <tr>
- <td class="collapsing">Name</td>
- <td class="collapsing">
- <div id="nameInputDiv" class="ui input">
- <input id="nameInput" type="text" :value="user.name" @keyup="nameKeyUp()" autocomplete="new-password" />
- </div>
- </td>
- <td>
- <button v-on:click="updateName()" id="updateNameButton" class="tiny black ui button" disabled>
- <i class="pencil alternate icon"></i>Change
- </button>
- </td>
- <td></td>
- </tr>
- <tr>
- <td class="collapsing">Username</td>
- <td class="collapsing">
- <div id="usernameInputDiv" class="ui input">
- <input class="tooltip" id="usernameInput" type="text" :value="user.username" :data-content="'People can mention you as @' + user.username" @keyup="usernameKeyUp()" />
- </div>
- </td>
- <td>
- <button v-on:click="updateUsername()" id="updateUsernameButton" class="tiny black ui button" disabled>
- <i class="pencil alternate icon"></i>Change
- </button>
- </td>
- <td></td>
- </tr>
- <tr>
- <td class="collapsing">Email</td>
- <td v-if="user_email.length == 0">
- <button @click="requestUserEmail(user.id)" class="ui tiny black button"><i class="envelope outline icon"></i>Show</button>
- </td>
- <td v-if="user_email.length > 0" class="collapsing">
- <div class="ui input">
- <input id="emailInput" type="email" :value="user_email" @keyup="emailKeyUp()" />
- </div>
- </td>
- <td>
- <button v-on:click="changeDetails('email')" id="changeEmailButton" data-content="We'll send you an email to confirm this change." class="tiny orange ui button tooltip" disabled>
- <i class="envelope outline icon"></i>Send Request
- </button>
- </td>
- <td></td>
- </tr>
- <tr>
- <td class="collapsing">Password</td>
- <td>
- <div class="ui input">
- <input id="passwordInput1" type="password" value="" placeholder="password" autocomplete="new-password" @keyup="passwordKeyUp1()" />
- </div>
- </td>
- <td class="collapsing">
- <div class="ui input">
- <input id="passwordInput2" type="password" disabled value="" placeholder="confirm password" @keyup="passwordKeyUp2()" autocomplete="new-password" />
- </div>
- </td>
- <td>
- <button v-on:click="changeDetails('password')" id="changePasswordButton" data-content="We'll send you an email to confirm this change." class="tiny orange ui button tooltip" disabled>
- <i class="key icon"></i>Send Request
- </button>
- </td>
- </tr>
- </tbody>
- </table>
- <!-- END Account -->
- <!-- Avatar -->
- <h2 class="ui dividing header"><a id="avatar">Avatar</a></h2>
- <img v-if="user.avatarId" id="avatar-preview" class="ui middle aligned circular tiny image" :src="'/image/' + user.avatarId" style="margin-right: 20px;" />
- <div class="ui small buttons">
- <button v-on:click="systemAssignedAvatar()" id="systemManagedAvatarButton" class="ui button black">System Managed</button>
- <div class="or"></div>
- <button v-on:click="gravatarAvatar()" id="gravatarAvatarButton" class="ui button black">Gravatar</button>
- <div class="or"></div>
- <button v-on:click="customAvatar()" id="customImageAvatarButton" class="ui button black">Custom Image</button>
- </div>
- <!-- END Avatar -->
- <!-- Avatar Modals -->
- <div th:replace="fragments/modals/system-assigned-avatar :: systemAssignedAvatar"></div>
- <div th:replace="fragments/modals/gravatar-avatar :: gravatarAvatar"></div>
- <div th:replace="fragments/modals/custom-avatar :: customAvatar"></div>
- <!-- END Avatar Modals -->
- </div>
- <br /><br />
- </div>
- </body>
- </html>
|