noydb/oworms-ui

<ow-hero>
    <ow-random-top />
</ow-hero>

<h2>My Profile</h2>
<article *ngIf="user; else placeholder">

    <section>
        <h5>User Details</h5>
        <form [formGroup]="form">
            <fieldset>
                <input formControlName="username" name="username" placeholder="username" />
            </fieldset>
            <fieldset>
                <input formControlName="email" name="email" placeholder="email" type="email" />
            </fieldset>
        </form>

        <div>
            <button (click)="update()" [disabled]="form.invalid">
                Save Changes
            </button>
        </div>
    </section>

    <section>
        <h5>Word Statistics</h5>
        <span>Liked: {{ user?.likedWords?.length ?? 0 }}</span>
        <span>Created: {{ user?.createdWordCount ?? 0 }}</span>

        <ul>
            <li *ngFor="let word of user?.likedWords; let i = index"
                (click)="navToWord(word)"
                title="view this word's details">
                <h3>
                    #{{ i + 1 }} {{ word.theWord }}
                </h3>
                <p>{{ word.definition }}</p>
            </li>
        </ul>

    </section>

</article>

<ng-template #placeholder>
    <ow-placeholder [state]="state"></ow-placeholder>
</ng-template>