Passcode-Gated Content (AngularJS Concept)

Passcode-Gated Content (AngularJS Concept)

A lightweight proof-of-concept for conditionally revealing content based on typed passcodes—useful for instructor answer keys, staged release of learning materials, or tiered access without full authentication. Originally built with AngularJS, easily adaptable to modern Vue or Angular.

Core Features

  • Case-insensitive passcode matching.
  • Multiple passcodes controlling different content sections.
  • Instant reactive updates (no form submission).
  • Minimal setup: one input field, reactive directives.
  • Reusable pattern: same passcode can unlock multiple divs.

AngularJS Implementation

<div ng-app="myApp" ng-controller="myCtrl" class="container">
  <label>Pincode: ('a23' for example)</label>
  <input id="pin" ng-model="inputbox">

  <div ng-show="pincode1.toUpperCase() == inputbox.toUpperCase()">
    <h1>Hidden Stuff 1</h1>
    <p>This was hidden until the pincode was typed in. Another passcode is 'b52'</p>
  </div>

  <div>
    <h1>A non-hidden header</h1>
    <p ng-show="pincode2.toUpperCase() == inputbox.toUpperCase()">
      This was a p element hidden until the pincode was typed in part 2.
    </p>
  </div>

  <div ng-show="pincode1.toUpperCase() == inputbox.toUpperCase()">
    <h1>Hidden Stuff 3</h1>
    <p>This was hidden until the pincode was typed in part 3 but same code as part 1.</p>
  </div>
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.pincode1 = "A23";
  $scope.pincode2 = "B52";
  $scope.inputbox;
});

Key points:

  • ng-model="inputbox" binds input value to scope.
  • ng-show conditionally displays elements when passcode matches.
  • .toUpperCase() ensures case-insensitive comparison.

Vue 3 Equivalent

<div id="app">
  <label>Pincode: ('a23' for example)</label>
  <input v-model="inputbox">

  <div v-show="pincode1.toUpperCase() === inputbox.toUpperCase()">
    <h1>Hidden Stuff 1</h1>
    <p>This was hidden until the pincode was typed in. Another passcode is 'b52'</p>
  </div>

  <div>
    <h1>A non-hidden header</h1>
    <p v-show="pincode2.toUpperCase() === inputbox.toUpperCase()">
      This was a p element hidden until the pincode was typed in part 2.
    </p>
  </div>
</div>

const { createApp } = Vue;

createApp({
  data() {
    return {
      pincode1: "A23",
      pincode2: "B52",
      inputbox: ""
    };
  }
}).mount('#app');

Syntax differences:

  • v-model replaces ng-model.
  • v-show replaces ng-show.
  • Vue 3 uses Composition API (createApp) instead of Angular modules.

Modern Angular (v17+) Equivalent

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-passcode-gate',
  standalone: true,
  imports: [FormsModule, CommonModule],
  template: `
    <div class="container">
      <label>Pincode: ('a23' for example)</label>
      <input [(ngModel)]="inputbox">

      <div *ngIf="pincode1.toUpperCase() === inputbox.toUpperCase()">
        <h1>Hidden Stuff 1</h1>
        <p>This was hidden until the pincode was typed in.</p>
      </div>

      <div>
        <h1>A non-hidden header</h1>
        <p *ngIf="pincode2.toUpperCase() === inputbox.toUpperCase()">
          This was hidden until the pincode was typed in part 2.
        </p>
      </div>
    </div>
  `
})
export class PasscodeGateComponent {
  pincode1 = "A23";
  pincode2 = "B52";
  inputbox = "";
}

Modern Angular features:

  • Standalone components (no modules required).
  • [(ngModel)] for two-way binding.
  • *ngIf for conditional rendering (removes DOM vs *ngShow which uses display:none).

Use Cases

  • Instructor answer keys: Reveal solutions only to those with the code.
  • Staged learning: Unlock next lesson after completing prerequisites.
  • Workshop materials: Share passcode verbally to gate slide access.
  • Tiered demos: Different stakeholders see different feature sets.
  • Temporary access: Share code via email; change it to revoke access.

Security Considerations

⚠️ This is client-side only—not secure for sensitive data!

  • Passcodes are visible in source code.
  • Users can inspect DOM or JavaScript to find codes.
  • Suitable for “honor system” scenarios or low-stakes content gating.

For real security:

  • Use server-side authentication (JWT, sessions).
  • Hash passcodes and validate server-side.
  • Implement rate limiting to prevent brute-force.

Accessibility Notes

  • Ensure input has a visible <label> with proper for attribute (or implicit association).
  • Hidden content should use aria-hidden="true" when not visible.
  • Consider announcing state changes with aria-live regions.

Enhancement Ideas

  • Timer-based unlock: passcode only valid during class hours.
  • Multi-step codes: require sequence of inputs.
  • Hint system: progressive clues if user struggles.
  • Code expiration: rotate passcodes weekly.
  • Analytics: track which codes are used most.

Summary

This pattern demonstrates reactive conditional rendering with minimal code—perfect for educational settings where convenience outweighs security. The same logic ports cleanly to Vue, modern Angular, React (useState + ternary), or even vanilla JavaScript with event listeners.

Portfolio angularjavascriptuivueconditional-rendering