h1 Angular Token Auth Demo

br

.row
  div.col-sm-12
    .panel.panel-default
      .panel-body
        h2 Account Info
        p This panel displays the info associated with the current user.

        h3 <u>current user</u>

        .row

          .col-sm-8
            label user signed in?
            p {{ user.signedIn ? "true" : "false" }}

            label user email
            p {{ user.email || "n/a" }}

            label nickname
            p {{ user.nickname || "n/a" }}

            label favorite color (optional)
            p {{ user.favorite_color || "n/a" }}

          .col-sm-4(ng-if='user.signedIn')
            img(ng-src='{{ user.image }}', width="100%")


.row
  .col-sm-6
    .panel.panel-default
      .panel-body
        h2 Authenticate using an oauth2 provider

        p
          = 'The "favorite color" field will be saved using the optional '
          a(
            href='https://github.com/lynndylanhurley/ng-token-auth#authauthenticate'
            target='_blank') params
          = ' argument.'

        fieldset(
          ng-disabled='user.signedIn'
          ng-init='oAuthForm = {}'
        )
          .form-group
            label favorite color (optional)
            br
            input.form-control(
              type='text'
              name='favorite_color'
              ng-model='oAuthForm.favorite_color'
            )

          label authenticate using:
          .form-group
            button.btn.btn-primary(ng-click="authenticate('github', {params: oAuthForm})") Github
            button.btn.btn-primary(ng-click="authenticate('facebook', {params: oAuthForm})") Facebook
            button.btn.btn-primary(ng-click="authenticate('google', {params: oAuthForm})") Google

        .panel.panel-info
          p.panel-heading Code sample:
          .panel-body
            pre
              code.language-javascript.
                $auth.authenticate('github', {
                  params: {
                    favorite_color: $scope.favoriteColor
                  }
                });

  .col-sm-6
    .panel.panel-default
      .panel-body
        h2 Register by email

        form(
          ng-submit='submitRegistration(registrationForm)'
          role='form'
          ng-init='registrationForm = {}'
        )
          fieldset(ng-disabled='user.signedIn')
            .form-group
              label email
              input.form-control(
                type='email'
                name='email'
                ng-model='registrationForm.email'
                required
              )

            .form-group
              label password
              input.form-control(
                type='password'
                name='password'
                ng-model='registrationForm.password'
                required
              )

            .form-group
              label password confirmation
              input.form-control(
                type='password'
                name='password_confirmation'
                ng-model='registrationForm.password_confirmation'
                required
              )

            .form-group
              label nickname (optional)
              input.form-control(
                type='text'
                name='nickname'
                ng-model='registrationForm.nickname'
              )

              p.help-block
                | This value can also be used for authentication. See
                a(href="https://github.com/plataformatec/devise/wiki/How-To:-Allow-users-to-sign-in-using-their-username-or-email-address#tell-devise-to-use-username-in-the-authentication_keys")= ' here '
                | for more info.


            .form-group
              label favorite color (optional)
              input.form-control(
                type='text'
                name='favorite_color'
                ng-model='registrationForm.favorite_color'
              )

            button#reg-submit.btn.btn-primary.btn-lg(type='submit') Register

        br
        br

        .panel.panel-info
          p.panel-heading Code sample:
          .panel-body
            pre
              code.language-javascript.
                $auth.submitRegistration({
                  email:                 $scope.email,
                  password:              $scope.password,
                  password_confirmation: $scope.passwordConfirmation,
                  favorite_color:        $scope.favoriteColor
                });

  .col-sm-6
    .panel.panel-default
      .panel-body
        h2 Sign in by email

        form(
          ng-submit='submitLogin(loginForm)'
          role='form'
          ng-init='loginForm = {}'
        )
          fieldset(ng-disabled='user.signedIn')
            .form-group
              label email
              input.form-control(
                type='email'
                name='email'
                ng-model='loginForm.email'
              )

            .form-group
              label nickname
              input.form-control(
                type='text'
                name='nickname'
                ng-model='loginForm.nickname'
              )

              p.help-block
                | Users can use alternate authentication keys. See
                a(href="https://github.com/plataformatec/devise/wiki/How-To:-Allow-users-to-sign-in-using-their-username-or-email-address#tell-devise-to-use-username-in-the-authentication_keys")= ' here '
                | for more info.

            .form-group
              label password
              input.form-control(
                type='password'
                name='password'
                ng-model='loginForm.password'
                required
              )

            button.btn.btn-primary.btn-lg(type='submit') Sign in

        br

        .panel.panel-info
          p.panel-heading Code sample:
          .panel-body
            pre
              code.language-javascript.
                $auth.submitLogin({
                  email: $scope.email,
                  password: $scope.password
                });

    .panel.panel-default
      .panel-body
        h2 Sign out

        button.btn.btn-primary(
          ng-click='signOut()'
          ng-disabled='!user.signedIn'
        ) Sign out

        br
        br

        .panel.panel-info
          p.panel-heading Code sample:
          .panel-body
            pre
              code.language-javascript.
                $auth.signOut()

  div.col-sm-6
    .panel.panel-default
      .panel-body
        h2 Request Password Reset

        form(
          ng-submit='requestPasswordReset(passwordResetForm)'
          role='form'
          ng-init='passwordResetForm = {}'
        )
          fieldset
            .form-group
              label email
              input.form-control(
                type='email'
                name='email'
                ng-model='passwordResetForm.email'
                required
              )

            button.btn.btn-primary.btn-lg(type='submit') Send password reset email

        br

        .panel.panel-info
          p.panel-heading Code sample:
          .panel-body
            pre
              code.language-javascript.
                $auth.requestPasswordReset({
                  email: $scope.passwordResetEmail
                });

  .col-sm-6
    .panel.panel-default
      .panel-body
        h2 Update Password

        p This method is only available to users that registered by email.

        button.btn.btn-primary.btn-lg(
          type='button'
          ng-click='showPasswordChangeModal()'
          ng-disabled='!user.signedIn || user.provider != "email"'
        ) Change password

        br
        br

        .panel.panel-info
          p.panel-heading Code sample:
          .panel-body
            pre
              code.language-javascript.
                $auth.updatePassword({
                  password: $scope.password,
                  password_confirmation: $scope.passwordConfirmation
                });

  div.col-sm-6
    .panel.panel-default
      .panel-body
        h2 Update Account

        form(
          ng-submit='updateAccount(updateAccountForm)'
          role='form'
          ng-init='updateAccountForm = {favorite_color: null, nickname: null}'
        )
          fieldset(ng-disabled='!user.signedIn')
            .form-group
              label nickname (optional)
              input.form-control(
                type='text'
                name='nickname'
                ng-model='updateAccountForm.nickname'
              )

              p.help-block
                | This value can also be used for authentication. See
                a(href="https://github.com/plataformatec/devise/wiki/How-To:-Allow-users-to-sign-in-using-their-username-or-email-address#tell-devise-to-use-username-in-the-authentication_keys")= ' here '
                | for more info.

            .form-group
              label favorite color
              input.form-control(
                type='text'
                name='text'
                ng-model='updateAccountForm.favorite_color'
              )

            button.btn.btn-primary.btn-lg(type='submit') Update your favorite color

        br

        .panel.panel-info
          p.panel-heading Code sample:
          .panel-body
            pre
              code.language-javascript.
                $auth.updateAccount({
                  favorite_color: $scope.favoriteColor
                });

  div.col-sm-6
    .panel.panel-default
      .panel-body
        h2 Destroy account
        button.btn.bn-lg.btn-primary(
          ng-click='destroyAccount()'
          ng-class='{disabled: !user.signedIn}'
        ) Destroy account


        br
        br

        .panel.panel-info
          p.panel-heading Code sample:
          .panel-body
            p
              a(
                href="https://github.com/lynndylanhurley/ng-token-auth#authdestroyaccount"
              ) Documentation
            pre
              code.language-javascript.
                $auth.destroyAccount()

.row
  .col-sm-12
    h2 Access Control

    .row
      div.col-sm-6
        .panel.panel-default
          .panel-body
            h3 Signed in users only
            p.bg-info(ng-show='user.signedIn && user.configName == "default"') You are signed in as a "User", these will work
            p.bg-info(ng-show='!user.signedIn') You are signed NOT in, these will NOT work
            p.bg-info(ng-show='user.signedIn && user.configName == "altUser"') You are signed in as an "Alt User", these will NOT work

            button.btn.btn-lg(
              ng-click='accessRestrictedRoute()'
              ng-class='{"btn-primary": user.signedIn && user.configName == "default", "btn-danger": !user.signedIn || user.configName != "default"}'
            ) Make single <br />privileged request

            button.btn.btn-lg(
              ng-click='restrictedRoutesBatch()'
              ng-class='{"btn-primary": user.signedIn && user.configName == "default", "btn-danger": !user.signedIn || user.configName != "default"}'
            ) Make multiple <br />privileged requests