stegasoo/frontends/web/WEB_FRONTEND_UPDATE_SUMMARY_V3.2.0.md

Web Frontend Update Summary for v3.2.0

Overview

The Flask web frontend has been updated to align with Stegasoo v3.2.0's breaking changes:

1. Removed date dependency - No date selection or tracking in UI
2. Renamed day_phrase → passphrase - Updated all forms and templates
3. Increased default words - From 3 to 4 for better security

Key Changes

1. Form Parameter Changes

Generate Page

Before (v3.1.0):

words_per_phrase = int(request.form.get('words_per_phrase', 3))
# Generated daily phrases for all days of the week

After (v3.2.0):

words_per_passphrase = int(request.form.get('words_per_passphrase', 4))
# Generates single passphrase

Template variables changed:

• phrases → passphrase (single string instead of dict)
• words_per_phrase → words_per_passphrase
• phrase_entropy → passphrase_entropy
• Removed days variable (no longer needed)

Encode Page

Before (v3.1.0):

day_phrase = request.form.get('day_phrase', '')
client_date = request.form.get('client_date', '').strip()
day_of_week = get_today_day()  # Used in template

encode_result = encode(
    ...,
    day_phrase=day_phrase,
    date_str=date_str,
    ...
)

After (v3.2.0):

passphrase = request.form.get('passphrase', '')
# No client_date or day_of_week needed

encode_result = encode(
    ...,
    passphrase=passphrase,  # Renamed
    # date_str removed
    ...
)

Decode Page

Before (v3.1.0):

day_phrase = request.form.get('day_phrase', '')
stego_date = request.form.get('stego_date', '').strip()

decode_result = decode(
    ...,
    day_phrase=day_phrase,
    date_str=stego_date if stego_date else None,
    ...
)

After (v3.2.0):

passphrase = request.form.get('passphrase', '')
# No stego_date needed

decode_result = decode(
    ...,
    passphrase=passphrase,  # Renamed
    # date_str removed
    ...
)

2. Template Context Updates

inject_globals() changes:

Added:

'min_passphrase_words': MIN_PASSPHRASE_WORDS,
'recommended_passphrase_words': RECOMMENDED_PASSPHRASE_WORDS,
'default_passphrase_words': DEFAULT_PASSPHRASE_WORDS,

Used for:

• Showing passphrase length requirements
• Default values in generate form
• Validation messages

3. Validation Updates

Added passphrase validation:

from stegasoo import validate_passphrase

# In encode_page()
result = validate_passphrase(passphrase)
if not result.is_valid:
    flash(result.error_message, 'error')
    return ...

# Show warning if passphrase is short
if result.warning:
    flash(result.warning, 'warning')

4. Error Message Updates

Before:

flash('Day phrase is required', 'error')
flash('Decryption failed. Check your phrase, PIN...', 'error')

After:

flash('Passphrase is required', 'error')
flash('Decryption failed. Check your passphrase, PIN...', 'error')

Template Changes Needed

These Flask routes will need corresponding template updates:

generate.html

Changes needed:

<!-- Before -->
<label for="words_per_phrase">Words per phrase</label>
<input type="number" name="words_per_phrase" value="3">

{% if generated %}
  <h3>Daily Phrases</h3>
  {% for day in days %}
    <tr>
      <td>{{ day }}</td>
      <td>{{ phrases[day] }}</td>
    </tr>
  {% endfor %}
{% endif %}

<!-- After -->
<label for="words_per_passphrase">Words per passphrase</label>
<input type="number" name="words_per_passphrase" value="{{ default_passphrase_words }}">

{% if generated %}
  <h3>Passphrase</h3>
  <div class="passphrase-display">
    <code>{{ passphrase }}</code>
    <p class="help-text">Use this passphrase to encode and decode messages (no date needed!)</p>
  </div>
{% endif %}

Entropy display:

<!-- Before -->
<li>Phrase entropy: {{ phrase_entropy }} bits</li>

<!-- After -->
<li>Passphrase entropy: {{ passphrase_entropy }} bits ({{ words_per_passphrase }} words)</li>

encode.html

Changes needed:

<!-- Before -->
<label for="day_phrase">Day Phrase</label>
<input type="text" name="day_phrase" required>

<label for="client_date">Encoding Date (Optional)</label>
<input type="date" name="client_date">
<p class="help-text">Defaults to today: {{ day_of_week }}</p>

<!-- After -->
<label for="passphrase">Passphrase</label>
<input type="text" name="passphrase" required 
       placeholder="Enter at least {{ recommended_passphrase_words }} words">
<p class="help-text">
  v3.2.0: No date needed! Use your passphrase anytime.
</p>

decode.html

Changes needed:

<!-- Before -->
<label for="day_phrase">Day Phrase</label>
<input type="text" name="day_phrase" required>

<label for="stego_date">Encoding Date</label>
<input type="date" name="stego_date" id="stego_date">
<p class="help-text">Will be auto-detected from filename if possible</p>

<script>
// Auto-detect date from filename
stegoInput.addEventListener('change', function() {
  const filename = this.files[0]?.name || '';
  const dateMatch = filename.match(/_(\d{4})(\d{2})(\d{2})/);
  if (dateMatch) {
    document.getElementById('stego_date').value = 
      `${dateMatch[1]}-${dateMatch[2]}-${dateMatch[3]}`;
  }
});
</script>

<!-- After -->
<label for="passphrase">Passphrase</label>
<input type="text" name="passphrase" required 
       placeholder="Enter your passphrase">
<p class="help-text">
  v3.2.0: No date needed to decode!
</p>

<!-- Remove date detection script -->

index.html

Changes needed:

<!-- Before -->
<p>Generate daily passphrases and security credentials</p>
<p>Hide messages using day-specific phrases</p>

<!-- After -->
<p>Generate passphrases and security credentials</p>
<p>v3.2.0: Simplified - no more daily rotation!</p>

about.html

Add v3.2.0 section:

<h2>Version 3.2.0 Changes</h2>
<ul>
  <li><strong>No date dependency</strong> - Encode and decode anytime without tracking dates</li>
  <li><strong>Single passphrase</strong> - No more daily rotation, just remember one strong passphrase</li>
  <li><strong>Better security</strong> - Default passphrase length increased to 4 words</li>
  <li><strong>Asynchronous ready</strong> - Perfect for dead drops and delayed delivery</li>
</ul>

JavaScript Changes Needed

Remove date-related code:

// REMOVE THIS (date detection from filename)
function detectDateFromFilename(filename) {
  const match = filename.match(/_(\d{4})(\d{2})(\d{2})/);
  if (match) {
    return `${match[1]}-${match[2]}-${match[3]}`;
  }
  return null;
}

// REMOVE THIS (day-of-week display)
function updateDayOfWeek() {
  const dateInput = document.getElementById('client_date');
  const dayDisplay = document.getElementById('day_display');
  // ...
}

Update validation:

// Before
const dayPhrase = document.getElementById('day_phrase').value;
if (!dayPhrase || dayPhrase.trim().length === 0) {
  alert('Day phrase is required');
  return false;
}

// After
const passphrase = document.getElementById('passphrase').value;
if (!passphrase || passphrase.trim().length === 0) {
  alert('Passphrase is required');
  return false;
}

// Add word count validation
const words = passphrase.trim().split(/\s+/);
if (words.length < {{ min_passphrase_words }}) {
  alert(`Passphrase should have at least {{ recommended_passphrase_words }} words`);
  return false;
}

CSS Updates

Add styling for passphrase warnings:

.passphrase-display {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  margin: 10px 0;
}

.passphrase-display code {
  font-size: 1.2em;
  color: #2c3e50;
  word-break: break-word;
}

.help-text.v3-2-0 {
  color: #3498db;
  font-weight: bold;
}

.flash.warning {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  color: #856404;
}

Migration Notes for Users

Add to templates:

<div class="alert alert-info">
  <h4>⚠️ v3.2.0 Breaking Changes</h4>
  <p>If you have messages encoded with v3.1.0:</p>
  <ul>
    <li>They cannot be decoded with v3.2.0</li>
    <li>You need the original v3.1.0 installation to decode them</li>
    <li>After decoding, you can re-encode with v3.2.0</li>
  </ul>
</div>

Form Field Summary

Changed Field Names

Old Name (v3.1.0)	New Name (v3.2.0)	Type
day_phrase	passphrase	text input
words_per_phrase	words_per_passphrase	number input
client_date	(removed)	date input
stego_date	(removed)	date input

New Validation Attributes

<input type="text" name="passphrase" 
       required
       minlength="{{ min_passphrase_words * 4 }}"
       placeholder="Enter at least {{ recommended_passphrase_words }} words"
       pattern="^\s*\S+(\s+\S+){3,}.*$"
       title="Please enter at least 4 words">

Testing Checklist

• Generate page creates single passphrase
• Generate page shows correct entropy (4 words = 44 bits)
• Generate page doesn't show day names
• Encode page accepts passphrase (not day_phrase)
• Encode page doesn't have date selection
• Encode page shows v3.2.0 help text
• Decode page accepts passphrase
• Decode page doesn't have date input
• Decode page doesn't auto-detect date from filename
• Error messages say "passphrase" not "day phrase"
• Validation shows warnings for short passphrases
• QR code functionality still works
• DCT mode options still work
• All flash messages updated

Implementation Status

✅ Flask routes updated ✅ Form parameter names changed ✅ Function calls updated ✅ Validation added for passphrases ✅ Error messages updated ✅ Template context updated ⏳ Templates need updating (generate.html, encode.html, decode.html, index.html, about.html) ⏳ JavaScript needs updating ⏳ CSS styling for v3.2.0 features

Quick Reference

To test the Flask app:

cd frontends/web
python app.py
# Visit http://localhost:5000

Key user-facing changes:

1. Generate: Shows one passphrase, not 7 daily phrases
2. Encode: No date selection, just passphrase
3. Decode: No date needed, just passphrase

Benefits to highlight:

• ✅ Simpler UI (fewer fields)
• ✅ No date tracking needed
• ✅ Encode today, decode anytime
• ✅ Perfect for asynchronous communications